[인프런 워밍업 스터디 클럽 1기_FE] 2주차 발자국

1. 강의 관련

Class Component

태어날 때부터 스마트폰이 있던 알파세대처럼, 프론트 입문하던 시기부터 react 훅이 있던 나는 class 컴포넌트에 대해 배우지 않았었다. 실제로 쓸 일도 없어서 크게 불편함은 없었다. 다만, 기술의 변천사를 이해하는 것은 현직자로서 중요한 덕목 중 하나라고 생각하기에 이번 기회에 공부를 했다. 구조나 돌아가는 원리는 이해할 수 있었지만, HOC등 좀 복잡한 개념들은 아직 자세히 이해를 못했다. 다시 복습해봐야한다.

Next 12

다음주부터 일정이 바빠서 강의를 땅겨 들었다. next의 경우도 마찬가지로 나는 처음 배울 떄부터 next 13버전 app router로 학습을 했기에 getStaticProps 같은 예전 방식을 몰랐는데 이번 기회에 알 수 있게 됐다.

TDD

워밍업 클럽을 듣기 전에 Jest, Cypress, StoryBook 등을 다루는 테스트 관련 강의(링크)를 들어서 test 방법을 알고 있었다. 다만, TDD 방법론으로 개발을 진행해 나가는 방법은 강의를 통해 배웠다. 실제로 개발을 진행해보니 링크 강의에서 들은 것 처럼 프론트엔드는 단위 테스트보다 e2e 테스트가 더 적합한 것 같다고 느꼇고, 처음부터 TDD로 진행하기 보단 기능 완성후에 e2e테스트를 진행하는 것이 바람직하지 않을까 싶다.

Docker

여기저기서 들어서 대충 뭔지만 알고 있었고, 워밍업 클럽 시작 전 가장 궁금했던 파트라 TDD와 같이 들었던 파트였다. 강의에서 진행하는 방식을 따라가다보니 docker 앱에 튜토리얼 항목이 있어서 따라가다보니 개념을 더 자세히 알 수 있었다. 아직 docker file을 작성하고 그런 것까진 못하지만 개념은 이해할 수 있게 됐다.

회고

상술한 내용들을 제하면 대부분 알고 있던 내용이니 만큼 강의를 빠르게 넘기면서 복습했다. 다음주는 미션에 전념하여 역량을 키워나갈 수 있으면 좋겠다.

2. 미션 관련

지난주 발자국을 월요일에 제출하는 바람에 이번 주가 짧게 느껴진다. 리액트 미션은 JS 미션과는 달리 패키지 메니져를 통해 라이브러리도 갖다 쓰면서 프로젝트가 커졌다. vite 템플릿을 통해 개발을 시작해서 초기 개발환경 세팅은 비교적 수훨하지만, 디렉토리 구조도 생각해야하고 컴포넌트별 역할도 나눠야해서 프론트엔드 개발자로서의 사고를 많이 한 한 주였다. 리액트 미션은 미션들이 기능면에선 크게 차이가 나지 않아서 모두 기능만 빠르게 구현하는 것보단 하고 싶은 걸 골라서 디테일에 신경을 쓰는 편이 좋을 것 같다고 생각이 들었다. 이 때문에 성과는 별로 없어 보이는 게 단점이지만, 성장은 할 수 있었다고 믿는다.

각 프로젝트별 상세는 각 게시물에서 확인바람.

미션 1 예산 관리 앱

Github :

https://github.com/KimPra2989/inflearn-warming-up-missions/tree/main/React/%EB%AF%B8%EC%85%98%201%20%EC%98%88%EC%82%B0%20%EA%B3%84%EC%82%B0%EA%B8%B0%20%EC%95%B1

예산 계산기 미션이지만 기능면에서 똑같은 지출 내역으로 각색
CRUD, deleteAll 구현
react-toastify로 Toast UI 추가
Button, Input 등 공통 컴포넌트 개발
결과를 지출 항목 별 subTotal을 구할 수 있는 기능 추가.

미션 3 포켓몬 도감 앱 (진행중...)

다른 사람들 결과물을 보면 그냥 주어진 대로 생각 없이 개발하는 사람들이 많은 것 같다. 특히 이 프로젝트가 그런 경향성이 짙다고 느낀다. 나는 공장형 개발자를 지양하기에 생각을 해보며 진행하려한다.

회고

리액트는 남이 하는 걸 보면 참 쉬운데, 막상 직접하려면 어려운 것 같다. 개념을 하나하나 설명하라면 할 수 있지만 그것들을 조합해서 한 단위의 큰 프로젝트로 만드는 과정이 특히 어렵게 느껴진다. 아마 지식대비 경험이 많이 부족해서 그런 것 같다. 경험을 쌓을 때다.