[WIL] 2022 - 09 W4

💛Facts

• 번들링 웹팩, 코드 분할 / CSR, SSR
• 리액트 커스텀 훅, react-hook-form 라이브러리
• prisma, planet scale 로 DB 사용하기
• 캐럿마켓 챌린지 드랍, 미루기, 스트레스

💛Feelings & Finding

✔️번들링, 웹팩, 코드분할 / CSR, SSR

이번 주에 배운 내용은 프론트엔드에서의 성능 최적화와 관련된 내용이다.

리액트로 개발을 할 때 개발 편의성과 생산성을 위해 모듈화를 하는데, 클라이언트 쪽에서 이 모든 모듈 파일에 대해서 각각 요청을 하기에는 네트워크 비용이 많이 소모되고 비효율적이다. 이를 효율적으로 하기 위해서 웹팩같은 모듈 번들러를 사용해 번들링을 한다. 엔트리 포인트에서 시작해 의존성이 있는 모듈을 탐색해서 하나의 리소스로 합쳐주는 과정이 있기 때문에, 리소스를 다운로드 받을 때 요청 횟수가 크게 줄어들어 속도가 향상된다는 장점이 있다.

 

프론트엔드 개발이 고도화되면서 클라이언트로 보내주어야하는 번들링된 리소스의 크기가 너무 크기 때문에, 한 번에 받아야 하는 파일의 양이 거대해 속도가 느려진다는 또다른 단점이 생겨났다. 이 문제를 해결하기 위해서 리소스가 필요한 시점마다 로딩이 될 수 있도록 번들을 분할할 수 있다. 이를 코드 분할이라고 한다. 써드 파티 라이브러리를 코드 안에 동적으로 import 하는 방법이 있고, 리액트에서는 Suspense 와 React.lazy 라는 컴포넌트와 함수를 사용해서 컴포넌트를 동적으로 렌더링 할 수 있다. 주로 Routes를 Suspnese 로 감싸서 사용하고, Route 의 element를 React.lazy로 동적으로 불러온 컴포넌트로 지정해준다. path의 분기에 따라 필요한 시점에 로딩이 되도록 번들을 분할할 수 있다.

 

참고로 Suspense와 React.lazy 를 SSR 에서 사용하려면 충돌이 발생한다. SSR 로 미리 만들어진 html 을 렌더링을 하고, 자바스크립트 로딩이 시작되면서 아직 불려오지 않은 컴포넌트들이 보이지 않기 때문에 빈 화면이 된다. 코드 스플리팅된 컴포넌트가 로딩이 완료되면 그때가 되어야 다시 화면에 나타나기 때문에 매끄럽게 동작하지 않는다. 따라서 별도의 라이브러리를 사용한 처리가 필요하다.

 

기본적인 개념은 위와 같은데, 프론트엔드에서도 성능에 대해서 고려할 점이 생각보다 많은 것 같다. 로딩을 빨리 하고 쾌적하게 사용하게 하기 위해서 현업에서는 여러 방법론을 도입한다는 것을 알게 되었다. 프론트엔드 성능 측정을 위해 Lighthouse 같은 툴을 사용한다고도 하는데 일단 구현하는 것부터 연습해야하는 나에게는 약간 먼나라 이야기 같달까… 하지만 늘 염두에 두고 신경을 써야할 것 같다.

✔️리액트 커스텀 훅, react-hook-form 라이브러리

자주 사용하는 코드들은 함수화를 해서 재사용성을 높일 수 있다. 그렇다면 자주 사용하는 코드가 리액트 훅을 사용한다면 어떻게 해야할까? 이론적으로 리액트 훅은 리액트 함수 안에서, 그 함수 안의 최상단에서만 사용할 수 있기 때문에 조건문 블록 안에서도 쓸 수 없고 다른 일반 함수 안에 넣을 수도 없다. 그렇기 때문에 리액트 커스텀 훅을 사용한다. 함수 이름을 use<함수이름> 이렇게 작성하면 커스텀 훅으로 인식되어서 그 안에서는 useEffect 라던가 useState 같은 리액트 훅을 사용해도 에러가 나지 않는다. 자주 사용하는 fetch 라던가 input 에 대해서 커스텀 훅을 만들어서 아주 간편하게 재사용 할 수 있다.

 

이와 비슷한 맥락에서 react-hook-form 이라는 라이브러리를 사용하면 form 을 아주 간편하게 만들 수 있다. 이 라이브러리를 설치하면 useForm이라는 커스텀 훅(?) 을 사용할 수 있는데 이 훅 안에 register 라는 함수를 이용하면 form 내의 input 요소에 대해서 필요한 모든 프로퍼티, onChange 라던가 value 라던가 state같은 것을 알아서 생성해준다. handleSubmit 이라는 함수도 있어서 이를 form에 onSubmit 이벤트에 넘겨주면 Submit 에 대해서도 쉽게 구현할 수 있다. 최대 장점은 form 에서 유효성 검사 규칙을 간편하게 만들어줄 수 있다는 것인데, 아래 글에 나름 정리를 해두었다.

React Hook Form

✔️prisma, planet scale 로 DB 활용하기

사실 이 부분은 100% 완벽하게 이해하지 못했다. 서버와 DB 에 대해서 거의 다뤄본 적이 없기 때문에 나름대로 이해하려고 노력을 많이 했다. planet scale 이란 mySql 과 호환되는 DB 플랫폼이다. 자바스크립트/타입스크립트 와 planet Scale 중간에서 DB를 조작할 수 있도록 번역기 역할을 해주는 것이 prisma 라는 편집기? 툴이다.

 

planet scale 에서 DB를 만들고, prisma로 프로젝트와 DB를 연결한 다음에 schema.prisma 라는 파일에서 DB의 한 테이블이 될 model 을 정의한 다음에 db push 를 하게되면, 해당 DB 에 mySql 로 번역된 DB 테이블이 하나 생긴다.

서로 다른 테이블간 관계를 만들어주는 것도 prisma 를 통해서 조작할 수 있다. 생성된 테이블에 데이터 레코드? 를 하나 생성하려면 prisma 에서 제공해주는 client 를 사용하면 된다.

 

client 에서는 DB에 대해 CRUD 를 할 수 있도록 메서드를 지원해주고 있어서, 그 규칙에 맞게 api 에서 코드를 작성해주면 된다. 기본 세팅에 대해서는 아래 글로 정리를 해두었는데, 직접 만들면서 더 연습이 필요할 것 같다. 풀스택은..어려워…!

[Next.js + Prisma + Planet scale] 기본세팅

✔️캐럿마켓 챌린지 드랍, 미루기, 스트레스

이번 주는 사실 많은 것을 미뤘다. 앞에 해야할 일이 산더미처럼 쌓여있다고 느껴지니 무언가 하고는 있지만 쫓아간다는 느낌이 강했고, 내 것으로 만든다는 생각이 잘 들지 않아서 회의감이 느껴졌다. 전에는 이런 생각이 들지 않았던 것 같아서 코스 초반~지금까지 돌아보니, 지키려고 했던 습관들을 많이 잊었다는게 떠올랐다.

 

대표적인게 아침에 일어나서 잘 챙겨먹고 옷을 갖춰 입는 습관이었다. 집에서 공부하는게 풀어지기 쉽기 때문에 절대 편안한 옷을 입지 않고 언제든 나갈 수 있는 옷으로 갈아입는 습관이 있었다. 어느 시점인지 기억도 나지 않는데, 어느새부턴가 그냥 잠옷을 입고 공부한 적이 엄청 많았다. 특히 캐럿마켓 챌린지를 시작하고 부터 들어야하는 강의량에 허덕이다 보니 새벽에 자기 일쑤였고, 아침 루틴이며 저녁 루틴이며 모조리 사라졌던 것 같다. 그렇게 엄청 배웠다는 느낌도 없는데 말이다 ㅜㅜ.

 

스트레스를 받기 시작하니 사람이 감정적이 되고, 즐거운 마음으로 임할 수 없다보니 컴퓨터 앞에 앉기도 싫고 무언가를 시작하기가 아주 힘들게 느껴졌다. 미루고 미루는 습관이 커지다 보니 당연히 해야할 일도 너무 많이 생겼고, 그 압박감 때문에 더 스트레스를 많이 받았던 것 같다. 그래서 결국 섹션 4 목표 중 하나였던 챌린지를 드랍하게 되었다. 너무 아쉽다.

그래도 이렇게 돌아봄으로써 어떤게 문제였는지 좀 명확해진 것 같다. 목표를 재조정해서 꾸준하게 밀고 나가고, 습관도 다시 돌아봐야겠다.

💛Feedback

• 할 일이 많고 피곤하다는 핑계로 운동량 0… 살기 위해서 운동이 필요하다.
• 아침루틴, 저녁루틴 회복 필요. 미루지 않고 제 때 할 수 있게 시간을 잘 조정해야할 것 같다.
• 배운 내용에 대해서 블로깅을 한 것은 잘한 것 같다. 잊어버릴때쯤 다시 보면 기억이 아주 잘 난다. 다음주에도 잘 유지해보자!

💛Future Action

• 알고리즘 매일 1문제 반드시 풀기. 하루에 몰아서 하려니 더 피곤한 느낌이다.
• 캐럿마켓 인증/권한부여 챕터 복습하고 실습하기. + 그리고 진도나가기.