현재 회사에서 리액트로 작업 중인 프로젝트는 타입스크립트를 사용하고 있고 컴포넌트를 React.FC로 타입을 선언해 사용하고 있다. 거의 최근까지는 그냥 다른 사람이 사용하길래 컨벤션을 맞추기 위해 사용한 경향이 있었고, children을 prop으로 선언하지 않아도

미리 내용을 요약하자면타입의 범위는 ReactNode(포괄) > ReactElement > JSX.Element 로 나열해볼 수 있다.클래스 및 children prop의 타입은 ReactNode로 반환되고 일반 함수형 컴포넌트에서는 ReactElement를 반환한다.

A+B=>A'상속을 통해 중복되는 타입 name과 age의 중복을 피할 수 있다.상속받고자 하는 타입을 extends로 받아올 수 있다.상속받고자 하는 타입을 선언하고 &연산자를 표기한 후 자신의 타입을 지정한다.A+B=>C이미 존재하는 타입 여러개를 하나의 타입으로

배열요소에 비동기 작업을 실행할 때 순차처리와 병렬처리로 나눌 수 있다. <⭐순차처리>는 배열의 순서대로 비동기 작업을 실행하며 실행순서를 보장하는 경우이다. 시간이 다소 소요되는 작업에 대해서는 끝날 때까지 대기하므로 시간이 소요되는 특징이 있고,<⭐병렬처

결과물 : 1초마다 0,1,,2,3이 출력되게 만들자 var가 전역변수로서 위치하고 있다. setTimeout 함수는 비동기 함수로써 1초 뒤 태스크 큐에 담기게 된다. for문을 모두 돌고나서 태스크큐의 작업 내용이 콜스택으로 이동하여 콜백함수(()=>consol

나는 누구인지 👽클로저와 예시비동기 함수와 scopeReact.memo 와 useMemo

키워드memoization HOC

지금껏 작업해온 브랜치관리 전략은 gitFlow라고 생각해왔는데조금 차이가 있었다. 우선은 기본적인 gitFlow에서 release와 Hotfix가 생소했으며, 굳이 정확히 따지자면 gitHub을 통해 PR을 날리고, 코드리뷰를 한 후에 merging을 하는 작업을 g

plugin & loader 차이 정리나중에 읽을 링크: typeof와 instanceof 차이웹팩 플레이트 만들면서 웹팩관련 개념정리Promise최적화 어쩔겨개인플젝 구상잡기백엔드 API연동 \- 관심사 정보 객체로 넘기기

🔨로케이션등록 Refactoring기능은 함수인데 이름이 함수처럼 느껴지지 않는다는 의견동일한 코드의 중복 const { cityName, dongName } = getLocationName(location);로 사용하나의 util함수로 사용하나의 컴

pre-rendering은 JavaScript가 없이도 화면을 작동(렌더링)시킬 수 있음을 이야기한다.페이지 접속 시점 부터 미리 만들어놓은 HTML을 보여 주기 때문에 성능과 SEO측면에서 유리하다.일반 react app은 JavaScript가 있어야 CSS가 작동하

HIFI 팀 회의 (오전 10시 ~ 12시) : 로그인 구현에 대한 논의 \- RefreshToken 건의 \- token을 어디에 저장할지 (쿠키 / 로컬)Next.js 아주살짝😛알고리즘 :LeetCode: 74. Search a 2D MatrixBAEKJOON

webpack bundling & babel transfilingcode spliting : 현재 필요한 페이지 파일과 로직 파일만 로딩해온다. 로딩시간을 단축할 수 있고, 특정 파일에 에러가 있어도 그 외의 파일은 에러와 상관없이 사용 가능하게 된다.prefetchi

📘 React공식문서 참고 context를 사용하기 전에 고려할 것 context의 주 용도: 다양한 레벨의 중첩된 많은 컴포넌트에 데이터를 전달하기 위함 주의할 점 : 재사용이 어려워지므로 꼭 필요할 때만 사용해야 한다. 만약, prop을 넘기는 것을 줄이고

store : redux의 상태값을 갖는 객체 (전체 상태값은 오직 하나, store 객체 1개 뿐이다. readOnly)action : state를 변경시킬 행동 (trigger 역할)reducer : action이 발생했을 때 store에 접근해 상태를 변경시킬 함

- Redux 구성요소 store : redux의 상태값을 갖는 객체 (전체 상태값은 오직 하나, store 객체 1개 뿐이다. readOnly) action : state를 변경시킬 행동 reducer : action이 발생했을 때 상태를 변경시킬 함수 (*순수함수

Babel 설치 npm i @babel/cli npm i @babel/preset-react 배포할 내용 lib에 담기 lib폴더 안에 배포할 내용을 둔다. 나의 경우엔 다른 파일의 내용을 import 해오는 것이 실제론 undefined로 인식되었는데, 아마 배포하

API 객체화 컴포넌트별 관리API를 상수로 관리하였고, 변수명에 API의 내용을 담아 네이밍을 하였다.개발을 하면서 API가 굉장히 많이 늘어났고, 변수명만으로 필요한 API를 찾는데 어려움을 느꼈다. 또한 비슷비슷한 요청에 대해서는 네이밍의 고통을 느끼게 되었다.

최적화 상태를 위한 리펙토링 BEFORE : 매 반복문마다 DOM을 생성하고 삽입하는 로직을 갖고있다. DOM을 직접 수정하기 때문에 매번 렌더링을 새로하기 위한 돔트리생성과 스타일 계산이 발생하고 있을 것이다.AFTER: 템플릿 리터럴을 활용해서 돔에는 마지막에 삽입

chapter01. 예시 리팩터링 시작하기 1단계 before/after :기능과 구현의 분리, 전체적인 코드는 길어졌어도 문맥을 이해하기 위해 확인해야할 코드는 줄어들었다. 함수 이름을 통해 흐름을 쉽게 파악할 수 있었다. chapter06. - 함수선