[Day 71] 2022-0926

🐈오늘 공부한 것

✔️번들링과 웹팩

https://friedegg556.tistory.com/244

개발 편의성을 위해서 모듈로 분리했던 코드를 그대로 배포하게 되면, 클라이언트에서 모든 리소스 파일에 대해 요청을 해야하기 때문에 네트워크를 많이 소모하게 된다. 비효율적이고 느려지기 때문에 사용자에게도 쾌적한 경험을 줄 수 없다. 따라서 배포를 하기 전 연관성 있는 코드끼리 합치는 번들링을 한다. 

 

cra 로 리액트 앱을 만드는 경우 웹팩에 대한 설정이 이미 되어있기 때문에 별도로 설정을 할 필요가 없었는데, node_modules 에 엄청나게 많은 모듈들이 들어가 있다보니 필요한 설정만 추가하기 위해 웹팩 설정을 직접 해서 배포하는 경우도 생길 수 있다. 배포시에 필수적으로 사용하는 도구이기 때문에 반드시 알고있어야 한다.

 

오늘은 html, css, js 로 이루어진 간단한 앱을 위한 설정을 해봤다. 먼저 plugin 으로 html 파일을 번들링에 추가하고, loader 를 사용한 internal 방식의 css 적용 혹은 mini-css-extract-plugin 을 사용한 external 방식의 css 적용도 가능하다.  기본적으로 의존성이 있는 모듈을 탐색 시작(?)할 엔트리 포인트와, 번들링 결과물이 어떤 장소에 어떤 이름으로 저장될 지 지정해주는 ouptut 옵션도 있어야한다.

✔️Prisma, Planet Scale

https://friedegg556.tistory.com/245

prisma 란 자바스크립트 or 타입스크립트를 활용해 데이터베이스에 쿼리를 전송할 수 있도록 도와주는 번역기 역할이다. Planet Scale 이라는 mySql 호환 DB 플랫폼을 사용하는데, DB 에 들어갈 데이터의 형태 정의 - 스키마를 정의하고 업데이트하고, 클라이언트에서 스키마에 맞는 새로운 데이터를 생성해 DB 에 추가할 수 있다. 

 

schema.prisma 에서 정의한 모델을 db 에 push하고, generate 로 클라이언트를 생성하면 prisma 는 이를 mySql(별도로 설정) 로 변환하여 DB에 정의될 수 있도록 하고 클라이언트에서는 타입스크립트로 정의되어 쿼리 작성시 자동완성이 되어 편리하게 사용할 수 있도록 도와준다. 

 

prisma client 는 DB 에 직접 접근하고 조작할 수 있는 역할을 하기 때문에 클라이언트 코드 내에서는 당연하게도 절대로 노출이 되면 안되는데, 클라이언트측 코드에 추가될 경우 브라우저에서 이를 감지하고 에러 메시지를 띄워준다. Next.js 는 풀스택 프레임워크답게 express 처럼 api 를 만들 수 있는 서버 기능을 제공하고 있다. pages 폴더 내에 api 폴더를 생성하고 그 안에 api 코드를 작성하면 된다. 백엔드 서버에서 DB 에 대한 조작을 한 뒤 해당하는 결과를 클라이언트(브라우저)로 보내주도록 만들 수 있다. 코드 자체는 express 와 비슷한데 express 도 많이 낯설기 때문에 공부가 많이 필요할 것 같다. 

✔️React Hook Form

https://friedegg556.tistory.com/246

From 을 작성하고 유효성 검사를 할 때 다양한 방면으로 꼼꼼하게 체크하려면 아주 많은 양의 코드가 필요하다. react-hook-form 패키지는 그런 기능을 한데 모아서 짧은 코드로 Form 에서 필요로하는 다양한 기능을 아주 쉽게 접할 수 있다. 느낌은 마치 리덕스 툴킷처럼 파바밧 되는 그런 느낌이었음. useForm 이라는 훅에서 register, handleSubmit, watch, formState 등의 주요 함수들을 꺼내고 그 함수에 값을 전달해서 상태를 등록하고 이벤트를 등록하고, 유효성 검사 규칙을 만들 수 있다. 또 hook 사용시 기본값에 mode 라는 옵션을 추가할 수 있는데, mode 가 onChange 인 경우 input에 onChange 이벤트가 발생할 때마다 전달된 Validate Rule을 확인해서 피드백을 줄 수 있도록 한다. 

🐈더 공부할 것

1. 리액트 webpack 번들링은 뭐가 더 필요한지

2. prisma 와 planet scale 은 정확히 뭔지

🐈오늘의 느낀 점

1. 여러모로 새로운 개념을 많이 접한 하루였다. 말로만 듣던 웹팩을 하나씩 뜯어보면서 실제로 설정도 해보고 DB 란 뭘까 고민도 해보고 새로운 리액트 라이브러리도 접하고... 클론코딩 과정에서 타입스크립트를 조금씩 접하고 있는데 처음에는 이런걸 왜쓰나 싶었지만 내가 직접 interface로 타입 규칙도 만들고 그에 따라 자동완성도 되는 것을 보면서 작은 부분이지만 생산성에는 큰 도움이 되는 것 같다.

2. 오늘 하루종일 혼자 공부하고 과제를 했는데 시간표 상관없이 한 번에 한 개념씩 몰아서 공부하니까 더 효율적으로 공부할 수 있었다. 집중의 흐름이 끊기지 않아서 궁금한 내용을 좀 더 깊게(?) 탐구해 볼 수 있었다.