[WIL] 2022 - 10 W1

💛Facts

• 캐럿마켓 클론코딩 복습
• 기초 CS
• GraphQL
• TDD
• 최적화, Lighthouse 사용

💛Feelings & Finding

✔️캐럿마켓 클론코딩 복습 

클론코딩에서 배웠던 내용을 복습하면서 다시 만들고있다. 원래 목표는 iron session을 활용한 토큰인증과 리다이렉션까지 마무리하려고 했는데, 계획을 잘 지키지 못했다.

화면은 게시글 리스트 화면과 로그인 화면을 구현했고, 구현하면서 컴포넌트를 분리하고 커스텀 훅 작성하는 연습을 했다. 함수 짜는 연습을 하면서 아직도 fetch 나 비동기 함수를 다루는 부분이 많이 부족하다고 느꼈던 것 같다.

Next.js 에서는 api 함수를 만들 때 promise 객체를 반환해야 해당 api 에서 연속적으로 함수가 실행된다는 것을 감지할 수 있다고 한다. 여러개의 helper 함수를 만들거나 DB 관련 함수를 호출할 때 async 와 await 을 많이 활용하는데 비동기에 대해서 깊게 공부할 필요성을 느꼈다.

또 타입스크립트의 필요성도 많이 느꼈다. 호출할 함수를 작성하면서 전달인자의 타입이 명시되지 않으니 인자를 전달할 때 타입때문에 오류가 생겨도 알 수 있는 방법이 없어 답답함을 느꼈다.

커스텀 훅을 만들면서 이 훅으로 전역 상태를 만들어서 관리할 수 있지 않을까? 라고 잠깐 생각해봤는데, 지금 다시 생각해보니 어쨌든 훅을 한 번 호출해서 생긴 상태는 각각 독립적인 상태이기 때문에 props 전달이 필수적인 것 같다. 떼잉~

✔️기초 CS

운영체제란 하드웨어를 제어하기 위한 소프트웨어이다. 프로세서, 기억장치, 입출력장치, 데이터 같은 컴퓨터 자원을 효율적으로 관리하기 위해 스케줄링 기능을 제공하고, 사용자와 컴퓨터간에 인터페이스를 제공해주는 역할을 담당한다.

운영체제의 핵심은 커널인데 항상 메모리 상에 상주한다. 커널이란 운영체제 중에서도 항상 필요한 일부분을 의미한다. 따라서 좁은 의미에셔는 커널과 운영체제는 동일한 의미이다.

 

CPU가 프로그램을 실행중인 상태가 프로세스라면 각 프로세스 안에서 작업을 처리하는 각 단위를 스레드라고 한다. 각 프로세스는 독립적인 공간을 가지면서 다른 프로세스의 영역에 접근할 수 없지만 프로세스 안에서 작업을 처리하는 스레드는 공통의 자원에 접근할 수 있다.

✔️GraphQL

REST API 방식에서 발생할 수 있는 문제 (overfetching, underfetching, 데이터 정의와 요청 변경에 따른 불필요한 수정) 를 해결하기 위해 등장한 API 쿼리 언어이다. REST API 에서 정해진 엔드포인트에 요청을 보내 정해진 형식의 응답을 받는다면, GraphQL을 사용하여 원하는 데이터를 응답하도록 요청할 수 있다.

 

강의 자료만 보고는 잘 이해가 되지 않아서 공식문서와 관련 강의를 들었는데 서버쪽에서 스키마와 타입을 작성하는 것에 많은 초점이 맞춰져 있다는 느낌을 받았다. 아무래도 백엔드 쪽에서 자료에 대한 정의, 타입에 대한 정의가 선행되어야 요청을 할 수 있기 때문인 듯하다.

 

타입에 대해서 익숙하지 않다보니 그 부분은 내용이 많이 어려웠는데 생각해보면 나에게 지금 당장 필요한 능력은 이미 만들어진 graphQL api를 잘 활용하는 것이다 보니, api 문서를 보는데 익숙해지는 연습을 하는게 좋을듯.

어려웠던 부분은 동적으로 변하는 값을 인자로 전달한다는 부분이었는데 graphQL 을 프로젝트에서 많이 사용해보면 익숙해질 수 있을 것 같다.

✔️TDD

mocha 와 chai를 활용해 테스트 코드 작성하는 유닛을 배웠다. 리액트에서 테스트 코드를 작성하는 방법은 정말로 잘 모르겠고, 지금까지 과제에서 등장했던 테스트코드가 생각보다 어렵지 않다는 것을 느꼈다.

콘솔로그를 사용해 각 단계별로 필요한 내용을 출력하여 확인하는 것도 일종의 테스트라고 볼 수 있다. 하지만 이런 일이 반복되면 역시 생산성이 저하되므로, Mocha 프레임워크에서 chai 라이브러리를 활용해 테스트를 자동화 하는 방법이 있다.

describe 함수 안에 테스트 이름과 함수를 전달하는데, 이 함수 안에 it 으로 여러개의 테스트케이스를 만들 수 있다. 테스트의 실행 결과가 원하는 결과와 같은지 체크하기 위해 expect 나 should 문법을 사용한다.

✔️최적화, Lighthouse 사용

브라우저 렌더링 과정과 SSR, CSR 에 대해서 공부하면서 프론트엔드에서의 최적화와 이를 검사할 수 있는 Lighthouse 에 대해서 알게 되었는데, 이번 주에 관련 내용을 조금 더 공부해 볼 수 있었다.

최적화가 필요한 이유는 UX가 향상되고, 사이트 로딩이 빨리 되면 로딩을 기다리다가 이탈할 확률이 적어지고, 사이트에 머무르는 시간이 늘어나면서 무언가 수익창출로 이루어질 다른 행동을 하게 될 확률(전환율)이 높아진다.

 

리렌더링이 자주 발생하지 않도록 하고, 불필요한 코드를 제거하는 트리쉐이킹 작업이 필요하다. 그리고 이미지 요청 횟수를 줄이는 이미지 스프라이트를 사용하거나, 캐시를 잘 활용해서 네트워크 통신이 자주 발생되지 않도록 하는 것도 방법이다. 서버와 사용자간의 물리적 거리가 요청 지연에 영향을 줄 수도 있기 때문에 CDN을 활용할 수도 있다.

사이트 URL 로 성능과 웹표준 검색최적화 등을 검증한 리포트를 받을 수 있는 LightHouse 라는 툴이 있다. 브라우저에서도 활용할 수 있고 Node 환경에서도 별도 설치로 활용할 수 있다.

프론트엔드에서의 최적화 방법

 

Lighthouse 활용해보기

💛Feedback

• 개인 공부는 미루는 와중에 코드스데이츠 과정과 과제, 블로깅은 그 시간에는 최선을 다했던 것 같다.
• TIL 빼먹지 말고 쓰자, 개인 공부 열심히 하자 이런 다짐 말고 액션으로 이어질 수 있는 트리거가 필요한 것 같다.
• 요즘 좀 우울한데 결과보다는 과정을 즐길 수 있는 내가 되길 바람!

💛Future Action

• TIL , 주간회고 모임 개편안 준비 및 모임원 모집하기
• 아침루틴, 저녁루틴 일주일만 지켜보기
• 클론코딩 마무리하기
• 함수형스터디 예습