[ 8월 2주 ] 주간 회고 🍃

이번 주에는?

• 프로젝트 진행
  A: 백엔드 api 테스트, CSS 레이아웃 공부
  B: Next.js 공부, 컴포넌트 구현

새롭게 배운 것 & 배워야 할 것

• Next.JS로 개발하기

→ 리액트와의 차이점?
프레임워크 vs 라이브러리. 보다 자율성이 강하고 직접 설정해 줘야 하는 부분이 더 많은 React에 비해 프레임워크인 Next.JS에서는 적절한 곳에 코드를 배치하면 프레임워크가 웹 페이지를 구성해 준다고 볼 수 있음

(ex. 라우팅의 경우, React는 별도 패키지를 이용해 라우팅을 개발자가 구현해야 하지만 Next.JS에서는 pages 폴더 안에 파일을 작성하기만 하면 해당 디렉토리 경로에 대응되는 페이지 경로로 접근이 가능해짐
⇒ 단 Next.JS 최근 버전에서는 방식이 변경되었다고 함. 이번 프로젝트에서는 업데이트 시점에 걸쳐서 개발을 시작하게 되어서 우선 이전 방식에 맞춰 개발하기로)

• api 테스트

내 로컬에서 db, 백엔드 서버, 프론트엔드 서버를 모두 돌려서 테스트를 진행해 봤다. 아직 예외 사항을 전부 커버하지는 못하지만... 일단 회원가입 페이지의 "기본 기능"은 프론트-백 모두 포함해서 제대로 구현된 것을 확인할 수 있었음 ✨

• CSS 레이아웃: 박스 모델 복습

→ 키 포인트 ✔️

박스 모델은 display 속성을 기준으로 inline, block으로 구분 가능. 크게는 행 안에 존재하는 요소(+ width, height, padding 적용 안 됨)와 하나의 행을 차지하는 요소로 나뉜다. 또한 행 안에 위치하지만 block처럼 다루어지는 inline-block도 존재

박스 모델은 content - padding - border - margin으로 구성. 디폴트로는 박스 사이즈가 content부터 border를 포함하지만, box-sizing 속성을 content-box로 설정할 경우 높이와 너비는 content 사이즈에 적용.

외부 요소와의 간격을 결정하는 margin이 중첩될 경우 더 큰 값이 적용.

사실 예전에 한 번씩은 다 봤던 내용인데 나는 CSS가 왜 이렇게 머리에 안 들어오는지...

• 컴포넌트 계층 만들기

원래 진행 중인 프로젝트에서 컴포넌트를 쪼개지 못하고 하염없이 코드가 길고 더러워지는 게 마음의 짐이었는데, 새로 들어간 프로젝트에서는 다른 분들이 컴포넌트 쪼개는 걸 보면서 흉내내 볼 수 있었다.

중복되는 컴포넌트는 쪼개고, 하위 컴포넌트에서 매번 변경되어야 하는 내용은 props로 전달받고, 상위 컴포넌트에서 하위 컴포넌트를 불러와 사용하기! 이것도 머리로는 모르지 않았지만 실제적 스킬이 부족했는데 확실히 좋은 사례를 보고 따라갈 수 있으니 좋은 경험이 되는 것 같다는 생각도 해 봄. (물론 구글링하면 다 나오지만 팀 내에 참고할 코드가 있는 건 확실히 달랐다,,,)

셀프 피드백

→ 이번 주는 뭔가 좋았던 것도 나빴던 것도 딱히 없는 느낌... 무난하게 하려던 걸 한 정도

+ 이 글 쓰다 보니 같은 태스크를 너무 오래 붙잡고 있나 (너무 쉬엄쉬엄하나) 싶기도... 🥲 조급해하려면 끝도 없고 정신건강에도 안 좋긴 하지만 적정선에서 고민해 봐야겠다 💪

다음 주 솔루션 💡

• 본가에서 돌아왔으니 다음 주부터는 학교에 나가서 일과를 해결하고 오기로!

• 다음 주 목표!
  원래 잡고 있던 태스크가 거의 정리된 상태라 팀 내에서 역할 분담 한 차례 더 해야 파악할 수 있을 것 같다...
  일단은 회원가입 기능 + 테스트 조금 더 보완하기?