Props Drilling을 피해보기 2편의 hooks의 방식으로 state(상태)를 로컬에서 계속 가져가기를 바라면 대부분 페이지의 최상단에서 하단의 매칭된 컴포넌트까지 Props Drilling이 생기게 된다. 아래 예제를 한번 봐보자. 무엇이 문제였는가? 일단 공용으로 사용되는 컴포넌트를 한번 봐보자. 아래는 기간을 정할 수 있기 위해 ...

테스트 코드 작성해보기 이제 비즈니스로직을 모두 나누었으니 해당 비즈니스 로직에 대해서만 테스트를 진행해보자 여러 테크기업들의 블로그를 뒤적이다. 리디의 블로그글을 가장 많이 참고하였다. 그리하여 redux-mockstore와 testing-library/react-hooks 를 이용하여 테스트를 진행했다. 우선 간단한 설명은 아래와 같다. ...

왜 하게 되었냐면 회사에서 개발자 다수가 이탈하게 되면서 빠른 유지보수와 코드의 정확성을 높이는 일이 나에게도, 회사에게도 중요해졌다. 현재 리액트 프로젝트에서 Toolkit과 Saga를 통해서 나름 나눈다고 나눴지만 이 과정에서 불필요한 코드들도 많아졌고, 실제로 state나 hooks와 연결된 부분은 컴포넌트에 그대로 남아있게 되었다. 그래서...

시작하게 된 이유 리트코드 14일 알고리즘 부시기 코스라고 적혀있는 것을 시작한 이유는 최근 프로그래머스를 통해 자료구조 강의를 보고 있기 때문이다. 프로그래머스에서 1단계 문제를 모두 풀고 난 뒤 2단계를 하려던 와중 기본지식(자료구조, 알고리즘 개념)이 부족하여 강의를 이것저것 찾아 듣고있는 상태인데 그래도 유명하다는 리트코드 Easy레벨 문제...

SQL 정리한 이유 매번 TypeORM의 엄청난 도움을 받으며 포트폴리오를 위한 서버를 구현하다가 팔로우 관계와 유사한 기능이 있는 경우 M:N으로 조인된 컬럼의 데이터를 지워줘야하는 필요성이 생겼다. 그래서 queryBuilder를 통해서 지워주는 방법이 있다는 것을 알게되고 간단한 방법으로 구현하게는 되었으나, 언젠가 SQL의 깊지는 않...

Next JS 사용하는 이유 1편을 통한 간단한 개념잡기 이후에 Next js, Apollo-client 조합으로 쿼리를 이용할 수 있는 훅(useQuery 등)을 활용하여 로그인 로그아웃을 구현해보자! 1. 세팅 일단 기본적으로 next-apollo 의 샘플 깃헙 코드를 통해 대부분의 세팅을 진행하였고 추가적으로 link를 설정해서 헤더만 잡...

1. 시작하게 된 이유 사내에서 앱의 크기가 방대해지며 전체적인 구조를 비즈니스로직과 뷰로 나누는 작업을 진행하였다. 이 과정에서 상수, 반복문, interface등의 타입정의를 나눴고 적지 않은 변화가 발생하며 기존에 잘 작동하던 코드가 실제로 원하는 방식으로 작동하는지 확인해보기 위한 검증이 필요하였다. 그래서 그 기회를 통해 FE테스트를 도...

Next JS 사용하는 이유 개인 프로젝트로 재미있는 기능이 몇가지 존재하는 커뮤니티 사이트를 만들어볼 생각으로 백엔드는 Nest JS + TypeORM + Postgresql + Graphql/apollo 프론트는 CRA + Redux Toolkit + Redux Saga 로 진행하려 초기세팅을 마쳤었다. Express로 간단하게 데모를 ...

커스템 엘리먼츠 1. 서론 앞서 2편을 통해 웹팩 세팅을 하며 모든 파일을 하나의 js파일로 번들링할 수 있게 되었다. 그래서 마지막 rendering에 관한 로직만 추가하면 마지막 스텝이 마무리가 된다! 기존에 회사에서 사용하던 컴포넌트집합들 중 일부를 하나의 js파일로 번들링하여 외부에서 해당 커스텀엘리먼츠를 선언하고 script태그를 통해...

Webpack 1. 사용한 플러그인(plugins) 플러그인은 번들된 파일을 처리하기 위해 사용하는 것이다. 각 플러그인의 개념은 간단하게 적고 넘어가겠다. 1.1 CleanWebpackPlugin 이 플러그인은 출력 Path(output)으로 정해놓은 것의 모든파일을 지워주고 리빌드 완료 후 사용되지않는 이미지 파일등의 webpack asse...