Frontend

React 상태관리🌱외 minor concept

상태 React에서는 컴포넌트 기반의 코드를 작성하게 됩니다. 컴포넌트는 여러 곳에서 재사용을 할 수 있고 추상화를 잘 이용하면 가독성이 좋은 코드를 작성하게 해줍니다. 컴포넌트는 상태를 가집니다. 예를 들면 이 블로그의 라이트/다크 모드, 카카오톡 대화창의 안읽은 메시지수 와 같은것들은 상태입니다. 상태는 사용자에게 보여지는 것을 의미하고 상태의 변경은 렌더링을 새로해주어야 함을 의미합니다. 사용자가 블로그의 라이트 모드에서 다크모드를 눌렀으면 어두운 화면을 보여주어야 하고 카카오톡 대화창의 메시지를 전부 읽었다면 안읽은 메시지 수는 0, 하나씩 올때마다 카운트를 올려주어야 할 것입니다. 컴포넌트는 자신이 정의한 상태를 가질수 있고, 서버로부터 데이터를 받아 자신의 상태로 정의할 수도 있고, 부모 컴포..

React css-in-js

https://betterprogramming.pub/all-you-need-to-know-about-css-in-js-984a72d48ebc를 번역한 글입니다. All You Need To Know About CSS-in-JS CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity). You’ve probably heard terms like CSS-in-JS, Styled Components, Radium, and Aphrodite, and you’re… betterprogramming.pub CSS-in-JS는 CSS model을 document 레벨이 아닌 component..

React form 블로그 따라 다루기

https://jeonghwan-kim.github.io/dev/2022/03/29/react-form-and-formik.html 리액트로 폼(Form) 다루기 폼 다루는 방법에 대해 얘기해 보자. 브라우져는 폼을 다루기 위한 내장 API를 가지고 있다. 이걸 이용하면 빠르게 폼을 만들수 있는데 이전에 한 번 정리했다. HTML5 폼 검증에 대해 정리해 보자 jeonghwan-kim.github.io 의 포스팅 내용에서 많은 인사이트를 얻을 수 있을것 같아 따라해본 과정입니다!! 머릿속에 강하게 남은 내용을 정리하고자 한다. 기존의 로직을 커스텀 훅으로 추출(연관된 로직이 전부 커스텀 훅에 위치하게 되는 과정, 세부구현은 밖에서 넣어준다) 추상화를 사용함으로써 속성은 숨기고 가독성은 증가(중요 개념만 ..

Javascript 실행 컨텍스트(Execution Context)

실행 컨텍스트(Execution Context)는 실행 가능한 코드가 실행되기 위해 필요한 환경을 뜻합니다 (실행할 코드에 제공할 환경정보를 모아놓은 객체) 실행 가능한 코드는 크게 3개의 종류가 있습니다. 전역 코드 함수 코드 eval 코드(eval은 사용하지 않아야 합니다.) 일반적으로 실행이 가능한 코드는 전역코드와 함수코드 입니다. 자바스크립트 엔진은 코드를 실행하기 위하여 여러가지 정보를 알고 있어야 합니다. 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(scope) this 위의 정보들을 물리적 객체의 형태로서 자바스크립트 엔진에서 관리합니다. 이벤트 루프를 언급할때 javascript engine에는 heap과 call stack이 존재한다고 하였습니다. ..

npm, yarn

npm, yarn 둘다 node 환경에서 패키지를 관리해주는 도구 입니다. 주로 yarn을 사용했었는데 어떤 차이점이 있는지 알아보려 합니다. 속도 npm은 의존성 파일을 순차적으로 설치합니다. 이전파일이 설치되고 다음파일을 설치합니다. a를 설치하고 b를 설치하고 c를 설치하는 형식입니다. yarn은 의존성 파일들을 병렬적으로 설치합니다. a, b, c를 병렬로 설치합니다. yarn은 다운받은 패키지들을 캐시에 저장합니다. 중복된 패키지를 설치해야 할 경우 캐시에 저장되어 있다면 캐시를 활용합니다. 캐시를 사용하기 때문에 npm에 비해 디스크의 사용이 더 큽니다 보안성 npm은 의존 관계를 가지는 다른 패키지를 즉시 포함합니다. 편하다는 장점이 있습니다. 하지만 보안문제에서 취약점을 불러올 수 있습니다..

React keys

React에서 key는 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 도와줍니다. key는 꼭 지정하는 것이 좋고 data의 id와 같이 고유한 값을 지정해 주는 것이 좋습니다. 이때 전체 파일에서 고유할 필요는 없습니다. 인접한 리스트에서만 key 값은 고유하면 됩니다. 항목의 순서가 바뀔 수 있는 경우에 key값에 Index값을 사용하는 것은 적절치 않습니다. 불필요한 렌더링이 일어날 수 있습니다. key값을 명시해주지 않으면 React는 기본적으로 index를 key로 사용합니다. React에서는 인접한 요소들에서 Key 값이 설정되어 있지 않다면 index 값을 default로 사용한다고 하였습니다. 위의 gif에서 input에 있는 값들의 동작은 분명 이상합니다. list의 뒤에 추가될 때는..

Javascript custom array 🌹

javascript에서 빈 배열을 만드는 것을 계속 까먹어서 아래와 같이 정리합니다. 빈 배열 만들기 const arr = new Array(10) // [empty x 10] arr[5] = 1 arr // [empty x 5, 1, empty x 4] const brr = Array.from(5) // [] brr[5] = 1 brr // [empty x 5, 1] 빈 배열 채우기 const arr = new Array(10) arr.fill(4) arr // [4, 4, 4, 4, 4, 4, 4, 4, 4, 4] String에서 배열 만들기 Array.from('arr') // ['a', 'r', 'r'] Array.from('x'.repeat(5)) // ['x', 'x', 'x', 'x', 'x..

React input onFocus, onBlur(focus out) 😶‍🌫️

react에서 input에 focus out을 이용하고 싶을때는 onBlur를 이용하면 됩니다. javascript react focusin onFocus focusout onBlur focusout으로 계속 시도해보다가 onBlur를 최근에 알게되었습니다. 아래에 예제 추가해 두었습니다. react 깃헙에서 관련 issue도 첨부해 두겠습니다! react-dom 라이브러리에서 focusIn, focusOut 관련 부분도 캡처 & 링크 걸어두겠습니다. HTML 삽입 미리보기할 수 없는 소스 https://github.com/facebook/react/issues/6410 onFocusIn/onFocusOut events · Issue #6410 · facebook/react Like mouse enter..

React moment locale 적용하기 🌹

React에서 moment를 사용하는 경우 locale을 변경하고자 하면 직접 import 해주어야 합니다. import moment from 'moment' import 'moment/locale/fr'; import 'moment/locale/kr'; export default function App(){ 생략 } moment는 시간을 다룰때 굉장히 유용한 library 입니다. 그래서 굉장히 널리 사용되고 있습니다. moment는 파일사이즈가 큽니다. 그래서 day.js와 같이 파일사이즈가 작고 moment와 쓰임새가 유사한 라이브러리를 사용하라는 정보를 접한적이 있습니다. cra로 시작한 경우 moment의 locale을 변경해주려면 위와 같이 locale file을 직접 import 해주어야 합..

React Derived State 🥲

React 관련 자료를 살펴보다가 Derived State라는 것에 대해 알게 되었고 이를 지양해야 한다고 알게되었습니다. Derived State가 무엇이고 해결은 어떤 방식으로 하는지 알아보려 합니다. Derived State는 props로 전달받은 정보가 컴포넌트에서 state로서 정의되어 관리되는 것을 의미합니다. derived는 ~파생된, ~유래된 이라는 뜻을 가진 영단어 입니다. 예시를 살펴보겠습니다. import { useState } from 'react'; import './App.css'; import DerivedState from './DerivedState'; function DerivedState({ defaultEmail, onChange }) { const [value, se..