[데브로드] 회고 모음

2023.1.30 ~ 2023.4.23

 

1주 차

📍 이번 주 목차

1. 개발환경

2. TypeScript

3. React

4. Testing Library

5. Parcel & ESLint

 

📍 npm + React + TypeScript + Jest + Parcel 세팅

과제받기 전에 한번 강의 들으면서 따라 해본 거

https://github.com/heyho00/env-setting

GitHub - heyho00/env-setting: Node + React + TypeScript + Parcel setting

 

 

과제 제출용

https://github.com/heyho00/frontend-survival-week01

GitHub - heyho00/frontend-survival-week01: 프론트엔드 생존코스 1주차 과제

 

사실 한번 하고 또 하려니까.. 귀찮아서.. (건방진 놈 🤬)

과제받고는 막 빨리빨리 하느라 CI도 엄청 걸리고 rebase 해서 force push 하다가 conflict내고..

(fork 해서 PR 날리고 하는 경험은 별로 없었어서 upstream에 conflict가 나다니,.. 하고 당황했는데

앞으론 잘 처리할 수 있을 것 같다.) 

 

참고한 자료 https://ihp001.tistory.com/229

 

세팅 실습을 하며 느낀 점은`CI 작성을 해보고 싶다`이다.

TDD도 그렇고 CI도 그렇고 하려고 하는 작업의 명세를  확실히 알고 Test를 작성하는 게 재밌게 느껴진다.

실무에서도 사이드 프로젝트에서도 굉장히 효율적으로, 재미있게도 활용할 수 있겠다는 생각이 들었다.

 

 

📍 정리

이번주는 첫째 주라 가장 먼저이고 중요한 세팅을 했고 문서로도 남겼으니 따로 여기에 정리할 부분은 많지

않다.

첫째 주이기 때문에 초심부터 다잡고 가야겠다.

 

이지영 official https://www.youtube.com/watch?v=3GRt5XUKCPQ

어항에 큰 돌덩이를 넣고 자갈을 넣고 모래를 넣고 물을 넣어 가득 채웠다.

이 이야기의 교훈은 시간은 짜고 짜고 또짜서 효율적으로 쓰라는 의미가 아니고

유한한 시간과 그릇을 알차게 채우려면 큰 것부터 채우라는 의미이다. 중요한 것부터 채우라는 의미이다.

 

앞으로 4월까지 생존코스에서 다루는 것들을 현재의 내 돌덩이들 중 가장 큰 놈들이라고 생각하고 나아가보려 한다.

React, TypeScript, TDD, 컴파일...

제안받는 돌덩이들을 충실히 공부해 보자 @!

 

 

---

 

2주 차

 

React는 어디서부터 어떤 아이디어로 출발했는가

이번 주차의 주제는 jsx였지만

자체적으로는 이렇게 제목을 달고 싶다.

jsx가 React의 근간이라고 생각하기 때문이다.

 

jsx에 대해서는 완전 간단히 두 줄 요약하자면,

 

1. dom을 편하게 다루기 위해 쓴다.

2. 마크업 형태로 구조 파악에 유리.

 

과제로 jsx 없이 react에서 createElement 메서드를 사용해 dom을 그려보는 걸 했다.

https://github.com/heyho00/frontend-survival-week02

 

그리고 개인적으로 간단히..

1. react에서 jsx로 코드를 작성하면 내부에서 어떤 일이 일어나는지

2. virtual dom이 real dom에 반영되는 flow

구현해 봤다.

자세한 내용은 readme와 코드를 볼 수 있는 link를 달겠다...

https://github.com/heyho00/make-react

 

jsx나 react hook, state 관리 라이브러리 등을 당연하게만 생각하고 사용하지만

기저에 깔린 메커니즘을 아는 것은 중요하다.

최적화의 바탕이 될 거라고 생각하기 때문이다. 정답인진 모르겠다.

중요하기도 하고 심지어 재미도 있다.

jsx의 메커니즘을 공부하면서 dom 조작의 역사를 엿본 것 같아서 말이다.

 

 

---

 

3주 차

 

React로 사고하기

 

한 일.

1. React component, State에 대해 공부했다. 

2. 오늘의 메뉴(식당 이름 검색어, 카테고리 별 filter기능이 있는) 과제.

3. 개인적으로 useReducer 개념을 사용해 custom hook 패턴을 공부했는데

회사 코드에서 마침 선배가 custom hook을 이용해 컴포넌트에서 로직을 분리한 부분이 있어서 연구했다.

아쉬운 점.

1. useReducer, custom hook을 이용해 로직을 분리, 재사용하는 패턴을 이해하고 잘 사용하고 싶은데

아직 너무 머리가 복잡하다. 이해하다가도 길어지는 코드를 보다 보면 앞에 이해한 게 흐릿해지고.

이건 더 익숙해져야 할 문제라고 생각하고 코드를 더 많이 보고 직접 사용해보고 해야 할 문제 같아서

더 시간을 들여야겠다.

 

2. 과제를 대충 했다. 물론 컴포넌트를 무조건 잘게 쪼개는 게 정답은 아닐 수 있고

프로젝트의 규모, 구조, 상황에 따라 개발자가 최선의 것을 만들기 위해 계속해서 고민하는 게 답이라 생각하는데,

그 고민 자체를 더 해볼 수 있었을 텐데, 그만큼 더 얻어가는 게 있을 텐데 하는 생각이 들었다.

 

3. 매일 푸는 알고리즘에 대해서도 개선해야겠다고 생각했다.

우선 흥미를 잃지 않기 위해 일단 풀자고 생각하고 시작했지만 이제는 바뀔 때인 것 같다.

프로그래머스 0-1 레벨만 풀지 말고 레벨을 골고루, 그리고 문제 유형마다 정리를 하고 완전히 소화시키려고

노력해야겠다.

 

 

---

 

4주 차

 

한 것

1. 이번주엔 express를 이용한 restful api부터 만들어, 프런트에서 데이터를 받아 사용하는 과제를 했다.

restful의 의미와 동일 출처 정책에 대해 알게 됐다.

 

2. react hook , custom hook, usehook-ts

이번주 핵심은 리액트 훅을 이용한 깔끔하면서도 효율적인 컴포넌트 설계이다.

custom hook에 대해선 항상 너무 어렵게만 느껴졌는데, 핵심을 명확히 알게 됐다.

 

같은 state를 전달할 때는 props를 이용하고 (혹은 전역 상태 관리 툴을 이용)

훅을 이용해 각각의 유일한 state를 갖게 할 수 있다는 것.

class와 instance를 만드는 느낌으로 생각됐다.

그리고 그 훅 안에서 상태를 이용한 값을 원하는 대로 만들어서 return만 해주는 식으로 활용할 수 있다.

이 안에서 지지고 볶고 뭘 하든 외부의 컴포넌트에서 가져다 쓰기만 하면 되는 구조로 캡슐화가 이뤄졌다고

할 수 있겠다.

 

직접 과제에서 만들어본 훅은 아래와 같다.

function useFilteredRestaurant(
  defaultCategory: string,
  restaurants: Restaurnant[],
  shopName: string,
) {
  const [selectedCategory, setSelectedCategory] = useState(defaultCategory);

  const filteredRestaurant = selectedCategory === '전체'
    ? restaurants.filter((s: Restaurnant) => s.name.includes(shopName))
    : restaurants.filter((s: Restaurnant) => (
      s.category === selectedCategory && s.name.includes(shopName)
    ));

  return { setSelectedCategory, filteredRestaurant };
}
export default useFilteredRestaurant;

카테고리를 선택하면 해당하는 식당들의 리스트를 훅 안에서 만들어 return 하는 구조를 만들어봤다.

그리고 selectedCategory 값은 외부에서 사실 쓰이는 데가 없어서 return 하지조차 않았다.

이런 식으로 UI를 그리는 컴포넌트와 필요한 값을 불러오고 만드는 로직을 분리해 줄 수 있고 (관심사의 분리)

중복된 로직을 걷어냄으로써 훨씬 효율적인 코드가 되겠구나, 이걸로 뭔가 많은 걸 할 수 있겠다는 생각이 들었다.

 

개선점

1. Typing

통신과 관련한 타이핑과 데이터가 undefined일 수 있을 때 등

반복적으로 어려움을 느끼는 부분이 있는데 그 부분에 집중해서 타입스크립트를 더 알아가야겠다.

 

 

---

 

 

6주 차

 

3월 첫째 주에 6일이나 개발을 놓았다.

그래서 이번주는 전 주 내용까지 공부해야 했는데, 회사에서도 마침 이슈가 생겨서 정신없는 한 주였다.

 

한 것.

이번주는 상태관리, 관심사의 분리가 주제였다.

 

https://github.com/heyho00/external-store

GitHub - heyho00/external-store: project init, external-store practice

 

아샬 님 따라서 external-store와 redux를 구현해 봤다.

관심사의 분리가 잘 이루어지면 코드가 훨씬 깔끔해지는구나.

이 코드 뭉치가 어떤 일을 하는지 명확해지는구나.

예술이구나, 느꼈다. jesus....

 

개선점.

아샬 님과 홀맨님 발표하시는걸 통으로 외워버리듯 해야겠다.

스토어로 데이터를 관리하고 렌더 되는 변경점에 유의하고 

훅으로 관심사 다른 로직 분리해 내고

테스트코드 짜서 맘 편히 리팩터링 하고 와,..

이렇게 술술 설명할 수 있게끔 내 거로 만들면 끝장나겠다..

다음 주도 다음 주에 과제가 있어서 힘들 수 있지만ㅠ...

 

조만간에 상태관리와 테스트코드까지 해서 선생님들처럼

회사에서 한번 소규모로라도 발표해 봐야겠다는 목표가 생겼다.

 

 

 

---

 

 

7주 차

 

한 것.

1. 이번주에 했다기 보단 완료한 일 - 프로그래머스 알고리즘 0단계 다 품. 비록 0단계지만,..ㅜㅠ
   mdn에서 메서드 정독과 함께 프로그래머스 100문제를 다 풀면서 확실히 JavaScript 메서드 쓰는 거랑 기초적인 부분이 많이 늘었다고 체감한다. 착각일 수도 있지만ㅋㅋㅋ. 착각 아니다.
   확실히 메서드만 잘 써도 라인 바이 라인 코드가 짧아지고 기능 개발 함에 있어서 좀 더 유창해지고 있다고 느꼈다.
   코테를 차치하고도 꾸준히 공부할 가치가 분명 있다고 느꼈다.
   이제 1단계만 올라가도 지문이 길어지고 좀 더 복잡한데 꾸준히 풀어나가겠다.
   
   
2. 이번주 메가테라 과제는 routing.
   web api를 이용해 url에 따른 routing 하는 것부터 최신 router로 객체화된 라우팅 정보를 파일로 관리하는 것까지 공부해 볼 수 있었다.
   
   
3. TDD 부분, jest, MSW, playwright 복습.
   • jest 테스트 코드 짜는 연습. 더 필요함. 5주 차 과제를 이번주에야 제출했는데, 테스트 퀄리티가 많이 부족하다.
   • MSW의 개념에 대해 정확히 알았다. 네트워크가 정상 연결된 것처럼 서비스 워커를 이용해 구현하는 건데, msw을 이용하려면 서비스 워커 등록을 위한 mockServiceWorker 파일이 필요하다.
     이 파일을 과제 제출 시 gitignore에 표시해서 올리지 않아 CI/CD 환경에서 정상작동하지 않은 것까지 좋은 공부였다. 개념 자체가 재밌는 부분이었다.
   투두리스트 실습 https://github.com/heyho00/my-msw
   kiosk앱 따로 뗀 실습  https://github.com/heyho00/kiosk-tdd
   
   
4. external-store 복습.
   상태 관리, external store의 콘셉트를 알기에도 너무 좋았고, 커스텀 훅을 이용해, 그리고 모델, 스토어, ui컴포넌트로 정말 깔끔한 정리로 관심사의 분리를 이뤄내는 게 너무 좋았어서 완전히 체득하고 싶어서 영상을 반복해서 보고 시작부터 끝까지 다 따라 해 봤다. 브랜치별로 나누기도 했지만 그냥 쓱 한방에 읽어도 다시 복습이 되도록 하자는 생각으로 리드미와 md도 작성했다.
   이해도가 확실히 많이 오른 것 같다. 원래 이번주 목표는 밤을 새워서라도 TDD, external store 복습 마치고 홀맨님 FE 콘퍼런스 발표하는 거 나도 똑같이 안 보고 발표하도록 준비하는 거였는데 일단 회사일도 너무 바쁘고 못했다. 이건 다시 일정 잡아서 좀 해야겠다. 좀 힘들다..

external store  https://github.com/heyho00/external-store

FECONF 2022 상태관리 이 전쟁을 끝내러 왔다  https://github.com/heyho00/cart-app

 

 

개선점.

복습을 하며 정리해 놓은 자료를 토대로 또 보고, 지겹도록 보고 완전히 내 거로 만들고 싶다. 그게 현재 최선의 목표다.

시간을 또 빼서 next도 공부해야 한다. 회사에서 곧 쓴다고 해서..ㅠ 사실 이것도 이번주에 시작하고 싶었는데 실패.