코딩 부트캠프 4주차 회고

🤓 무엇에 도전했는가

• 라이브러리없이 캘린더 기능을 제공하는 웹 앱을 구현했다.
• Redux 모듈과 스토어에 미들웨어를 적용해보고 최종적으로 firestore에 data를 연동하였다.
• firebase와 AWS S3 두 가지 모두를 이용해 배포해보았고 그 절차를 비교할 수 있었다.
• 내가 이해했던 state와 props의 개념과 흐름을 다른 동료에게 쉽게 설명해보았다.
• 모달창을 적용할 때 이해한 React Hook 중 하나인 useState와 함수를 통한 컴포넌트간 data이동을 동료에게 쉽게 설명해보았다.
• 프로젝트에 대한 ReadMe를 정성들여 작성해보았고 타인에게 공유했다.

🧐 무엇을 배웠는가

React

신세계같았던 일주일, 배운 것이 정말 많다.

• SPA가 대세인 이유 html간 이동이 적어 사용성이 좋다. 그러나 첫 로딩 때 모든 컴포넌트를 불러와야 해서 무거울 수도 있다고 한다. 여러 사례를 접하며 차이를 인지해보고 싶다.

• state와 props 개념을 코드를 작성하며 이해하고 익숙해졌다.

• defaultProps 기능을 사용하면 props가 존재하지 않아 발생할 오류를 방지할 수 있다.

• css를 적용하는 다양한 방식을 배웠다. SASS, styled-components와 같은 CSS in JS를 알게 되었으며 styled-components를 사용한 프로젝트를 완성했다. JS 파일이 길어지긴 하나 클래스 이름을 짓는 부담이 덜하고 컴포넌트별로 스타일을 관리해주어 더욱 간편하고 직관적으로 느껴졌다. 또한 props를 이용하여 조건부 스타일을 줄 수도 있다는 점이 새로웠다. 굉장히 유용하게 활용할 수 있었다.

• 클래스형 컴포넌트와 함수형 컴포넌트의 사용 방식의 차이가 어느정도 익숙해졌다.다양한 React Hook을 접했다.

• Redux의 action-action creator - reducer - store 관계와 흐름을 이해했다. 아래는 내가 이해한 것이 맞는 지 튜터님께 확인받고 싶어 내가 작성한 코드에서의 흐름을 글로 정리한 것이다. (그래서 나만 알아볼 수 있다.) 개념적인 흐름을 자신의 코드에 적용시켜보면서 진정 이해할 수 있게 되는 것 같다.
  

• React에서 Redux를 이용하기 위한 명령들을 배웠다. 모듈 안에서 action을 생성하여 사용하는 것들과 store data에 접근하기 위한 내장 함수들이 있다.

• export와 export default의 차이를 배웠다.

• 라이브러리없이 캘린더를 구현하는 과정에서 JS 내장함수 Date()와 그 표현 종류를 정말 많이 알게 되었다.

• JS의 정렬 함수 sort()는 문자열을 기준으로 정렬된다. 이전에 배운 python과 달리 개발자가 원하는 정렬결과를 얻기 위해서 정렬 기준이 되는 함수값을 설정해주어야 하는 경우가 많겠다.

무엇이 달라졌는가

구글링한 답변을 소화하는 능력이 늘었다.
개인 프로젝트를 진행하는 동안 이전에 비해 구글링해서 얻은 답변을 소화하는 능력이 늘었음을 느꼈다.
프로젝트 초반, 구글링으로 얻은 모달창 코드를 나의 프로젝트에 적용하려다 보류한 적이 있다. boolean값을 컴포넌트간 주고받으며 창을 열고닫는 간단한 원리였으나 컴포넌트 간 data이동은 state와 props라고만 생각했지. 함수를 통한 컴포넌트 간 data 이동을 온전히 이해하지 못한 상태여서 내 프로젝트에 맞게 응용하지 못한 것이다. 일단 보류 후 다른 작업을 진행하였는데 이 과정에서 컴포넌트 간 data가 함수를 통해 전달되는 원리를 이해하기 위해 JS에서 함수의 역할, 콜백 등을 공부하게 되었다. 그 과정을 거치고 난 뒤에는 모달창을 내 프로젝트에 적용시킬 수 있었다. 문제해결 과정에서 알게된 지식들이 분산되어 있는 듯 하여 불안했으나 퍼즐처럼 맞추어지는 기분을 느꼈다.

프로젝트 분할정복 경험
분할정복 알고리즘은 해결될 수 있는 문제가 될 때까지 문제를 분할하며 해결해나간다는 개념이다. 이번 주에는 view부터 배포까지 홀로 해내며 프로젝트를 분할정복하는 경험을 했다. 시작 전에는 너무 크고 막막해보이는 문제이지만 내가 할 수 있는 크기로 쪼개어 해결해나가다보면 하나의 프로젝트가 완성되어 있는 경험!
정말 뿌듯하고 행복했으며 프로젝트가 진행될수록 몰입의 즐거움을 느꼈다. 하나 하나 해결방법을 찾아가며 문제를 해결해나가는 과정에서 정말 다양한 지식들을 접했다.

무엇을 개선해야 하는가

• git push 빈도 늘리기
  git은 변동 사항이 있을때마다 가능한 자주 push를 해야하고 타인의 push를 항상 pull한 뒤 작업하는 것이 충돌을 줄이는 방법이라 한다.
  개인프로젝트를 진행하며 그 날의 작업을 모두 마친 뒤에 git push를 하곤 했는데 그러다보니 두 가지 문제가 발생했다. 첫째는 아무리 혼자 사용하는 저장소 개념이라고는 하지만 git 사용 취지에 맞지 않는 방식이라는 것이고 두번째는 작업을 하다보면 12시가 넘어있는 경우가 빈번하여 그 날의 잔디를 심지 못하고 다음 날이 되어버린다는 것이다... 😹 추후 협업과 풍요로운 잔디 농사를 위해 수시로 git push를 하는 것에 익숙해지고자 한다.

• 프로젝트 진행 중 기록
  저번주는 완성하지 못하면 어쩌지하는 불안감에 프로젝트 기간동안 velog에 새 글을 자제하였고 코딩에 집중했다. 그러나 기록을 아예 하지 않을 수는 없어서 진행 상황과 필요지식은 notion에 덜 정제된 형태로 기록하곤 했다. 그 과정 또한 velog에 정리하는 것에 비해 시간이 엄청나게 절약되는 것은 아니었다. 앞으로 진행할 프로젝트에서는 주객이 전도되지 않는 선에서 중간 중간 프로젝트 진행 현황을 기록하면 어떨까 싶다. 문제를 해결하며 알게 된 지식과 앞으로 해결해야 할 문제를 정리하는 시간이 작업의 효율을 높여줄 것 같다. 시도해보자.

• vanilla JavaScript 학습사이트
  https://poiemaweb.com
  https://ko.javascript.info