프론트엔드25 생각해보면 리액트는 인강 하나도 안보고 여러 블로그랑 공식문서 보면서 만들어본게 끝이다. 궁금한게 생기거나 하면 검색해서 자료 찾아본거랑 그냥 계속 생각한게 다인데 언제 이 정도로 숙련도가 오른건지 내가 어떻게 공부했는지 모르겠다. 요즘은 리액트 관련된 것들 러닝 커브가 한시간 정도 걸리는거 같은데 많이 만들어 보는게 정답인가? 그래서 다른 사람이 어려워 하는게 이해가 잘 안된다. 테스트 주도 개발이나 엔터 프라이즈 아키텍쳐 같은 부분을 좀 더 잘하고 싶은데 뭘 해야할지 영 감이 안잡히네 2022. 1. 26. [리액트][함수] 컴포넌트 컨텍스트 & 사이드 이펙트 컨텍스트 컴포넌트 컨텍스트는 각 렌더링 마다 고유한 컨텍스트(스코프)를 가진다. 이걸 어렵게 생각 하지말자 for(let int = 0; int < n; int++){ 컨텍스트(scope)} 에서 매 반복마다 int가 각각 다른 값인 것과 같다. 1.useEffect 훅의 경우 미래는 모르겠지만, 현재는 리액트 컴포넌트 사이클 외부에 해당한다. 그래서 내부에서 리액트 훅을 사용 할 수 없다. 내부 컨텍스트를 최신화 하기 위해서 [deps]로 변경 되는 모든 변수를 넣어주자. 또 클린업 함수를 신경쓰자. 2. useRef를 통해서도 가능하지만 사이드 이펙트 수준을 넘어서 비제어화 하니 최대한 안쓰는게 좋다. 3. useCallback을 적절히 사용하자. 4. useMemo로 최적화 해야 할 상황이 왔다면 코드를 잘.. 2022. 1. 21. [react]내가 context hook을 쓰지 않는 이유. 예전에 면접 본 곳 중 몇 군데서 받은 질문 중 하나가 redux나 recoil 같은 상태 관리 오픈소스를 사용하지 않고 리액트 자체에서 제공하는 context API 사용 해본적 없냐는 질문이다. 없다고 하면 추가적으로 써볼 필요성을 느껴본 적 없냐는 질문을 여러 번 받았다. 사용한 적 없던 당시에도 굳이 실무에서 상태관리 라이브러리 사용하지 않고 context 훅을 쓸 이유가 없다고 답했던 것 같은데 이건 내가 오픈소스를 만들면서 context API를 직접 사용해보고 그 이유를 보충해서 쓰는 내용이다. 먼저 아래는 실제로 내가 오픈 소스를 만들면서 컨텍스트 API를 사용한 코드다. 해당 패턴은 실제로 context를 사용하는 권장 패턴 중 하나에 속한다. import React, { createCo.. 2021. 12. 28. [프론트엔드][개발환경]웹팩 & 웹팩 보일러 플레이트 예전에 프론트엔드 개발을 공부할 때 기본적인 html, css, js 등 퍼블리싱부터 이전의 웹 컴포넌트 전의 웹 개발 방식부터 공부했다. 그러다가 리액트, 뷰 등의 모던 웹 개발을 접하면서 기존 웹개발의 경우 html 파일(jsp, php)을 기준으로 js, css 파일 별로 구분을 해서 너저분하게 개발을 하는데 반해 모던 웹개발의 경우 웹 컴포넌트 단위로 쪼개서 깔끔하게 개발을 하는 점에서 코드 재활용성, 코드 품질 향상 및 의존성 관리 등의 점에서 큰 매리트를 느끼게 되었다. 그로 인해서 리액트와 뷰를 공부하기 시작했으나 뷰나 리액트를 제네레이터(vue-cli, create-react-app)로 세팅하는 게 아닌 cdn 방식으로 개발을 하면 기존 웹 개발과 차이가 사실상 거의 없었고 내가 좋다고 느.. 2021. 11. 15. 이전 1 2 3 4 5 6 7 다음
