Homile

오늘은 지난 주에 커리어 챌린지 특강을 들었기 때문에 과제가 없어서 과제리뷰는 하지 않고 바로 강의를 진행하셨다.

강의 내용은 관심사의 분리와 SRP, Custom Hook, 횡단관심사, 의존성에 대해서 강의해주셨다.

관심사 분리는 부트캠프당시 디자인 패턴에 대해 알아보던중 스터디원 분이 알려주셔서 어느정도 알고는 있었지만 자세히는 모를 수 있다고 생각하여 집중해서 들었다.

Custom Hook도 학습도 했었고, 실제 사용도 몇번 해봤지만 이게 맞는가에 대한 의구심이 많이 있었는데 해당 강의를 통해 해결 할 수 있었다.

📝 강의 내용

관심사 분리

관심사는 하나의 모듈이 수행하고자 하는 목적이다. 관심사의 분리는 각 모듈들이 한번에 여러 관심사를 처리하려고 하지 않고, 하나의 관심사만 처리하도록 분리하는 것을 말한다고 한다. 

관심사를 분리하게 되면 하나의 모듈은 하나의 목적만을 가지게 되며 코드가 수정될 이유는 한가지만 존재하게 되어 유지보수가 쉬워지기 때문에 관심사를 분리하는 것이 좋다.

Custom Hook

커스텀 훅은 기본적으로 제공되는 리액트의 훅들을 이용해서 만든 함수다. 로직은 UI를 변경시키기 위해 구성되며 useState, useEffect 등의 훅을 사용해서 구현한것이 커스텀 훅이고, 훅을 사용하지 않은 것은 커스텀 훅이라고 말할 수 없다고 한다.

커스텀 훅의 두가지 규칙으로는 React Hook을 호출하는 함수여야 하며, 함수의 이름은 use모듈명으로 작성해야한다.

횡단 관심사

여러 서비스에 걸쳐서 동작해야 하는 코드를 의미한다. 여러 핵심 비지니스 로직들에 걸쳐서 실행되어야 하는 동작들을 의미한다.

ex) 인증 & 인가, 로깅, 트랜잭션 처리, 에러처리 등

📌 과제리뷰

지난번 과제인 Todo List 프로젝트에 대한 리뷰를 해주셨다. 총 12팀에 대한 코드를 보시고 좋지 않는 코드들을 가져와서 리뷰해주시기 때문에 전체 팀에 대한 피드백이라고 한다.

피드백 내용

• 불필요 파일들 삭제
• 사용하지 않는 변수, import 제거
• 상수화를 활용한 가독성, 유지보수성 향상

  // 상수화X
  type RegisterMode = 'signUp' | 'signIn';
  
  const [mode, setMode] = useState<RegisterMode>('sign_in');
  
  
  // 상수화O
  const SIGN_IN = "SIGN_IN";
  const SIGN_UP = "SIGN_UP";
  
  type RegisterMode = typeof SIGN_IN | typeof SIGN_UP
  
  const [mode, setMode] = useState<RegisterMode>(SIGN_IN);

• 삼항연산자와 조건문의 차이 파악해서 상황에 맞게 사용하기
  
  • 값이 필요할 때는 삼항연산자를 사용한다.
  • 코드의 분기가 필요할 때는 조건문을 사용한다.
• 변수명은 어떤 데이터를 가지고 있는지 어떤 동작을 하는지 명확하게 작성하는 것이 좋다.
  • ex) 데이터를 가지고 있는 변수를 모두 data라고 하는 것보다는 userData, postData와 같은 변수명을 써서 어떤 데이터가 있는지 알 수 있도록 하는 것이 좋다.
• state의 최소 집합을 찾는것이 좋다.

   

  React로 사고하기 – React

  A JavaScript library for building user interfaces

  ko.reactjs.org

• async - await 동작 이해하고 사용하기
  • async return → Promise
  • await → Promise resolve or reject
  • 무의미한 catch 활용 줄이기
  • 무의미한 async await 활용 줄이기
• 다른 문맥끼리는 공백으로 구분하기, 일관성 있는 포맷팅
• 코드 작성 순서
  • css-in-js 스타일링 방법을 사용할 때 스타일링 코드를 위에 작성하는 것보다는 로직과 렌더링 되는 코드 밑에 작성하는 방법으로 작성하는 것이 좋다. 
• 스타일링 방식 혼용 지양
  • 스타일링을 할 때 한가지 방법만 사용하여 작성하는 것이 유지보수하기 편하다.

📝 라이브 세션 내용

첫 시간에는 렌더링을 최적화하는 방법과 react.memo, useMemo, useCallback을 사용하는 방법과 왜 사용해야 하는지에 대해서 설명해주셨다. 항상 최적화를 한다고 하지만 메모이제이션 방식을 사용해서 최적화를 해본적은 손에 꼽는 것 같다.

전에 인프런 답사를 다녀왔을 때 들었던 내용이 있기 때문에 사용하는 것을 최소화 하려고 했었기 때문도 있다. 너무 이른 최적화는 좋지 않고 useMemo, useCallback을 사용했을 경우 코드의 가독성이 좋지 않기 때문에 잘 사용하지 않는다고 했던 내용이 머리에 자리잡았기 때문인 것 같다. 하지만, 정확하게 최적화를 할 수 있을 경우에는 사용한다는 것도 있어서 최적화를 언제 적용해야 하는지에 대한 부분에 고민을 많이 해봐야 할 것 같다.

또한, 강의 내용에서도 마지막에 최적화는 꽁짜가 아니고 최적화를 해야 하는 시기나 명확하게 가치를 창출해낼 수 있는 것이라고 생각 됐을 때 최적화를 하면 된다고 말해주셨다.

두번째 시간에는 useEffect, ContextAPI를 조금 더 잘 사용할 수 있는 방법에 대해서 설명해주셨다.

useEffect에 의존성 배열을 잘 설정하는 방법은 모든 의존성을 빼먹지 말고 의존석 배열에 명시하지만 가능하다면 의존성을 적게 만드는 것이 좋다고 한다.

원티드 프론트엔드 인턴십을 진행중에 커리어 챌린지도 들어야 하는 2주차였고, 화요일, 수요일 총 이틀을 진행했다.

👀 커리어 챌린지 현직자 QnA (22.12.27(화))

큰 파트로 2개정도 말씀해주셨다. 이력서를 작성하기 전에 알아야 할 것과 취업준비를 하면서 공부하는 방법에 대해서 설명해주셨다.

이력서를 작성하기전에는 나의 장점이 무엇인지를 정확하게 파악하고 작성하는 것이 중요하다고 했다. 그래야 면접에 갔을 때도 나에대해 숨김없이 잘 나타낼 수 있다고 했다. 

취준하면서 공부하는 방법에는 온라인 강의, 개발 서적, 사이드 프로젝트 등 많은 방법이 있지만 혼자진행하는 것보다는 같이 진행하는 것이 좋다고 하셨다. 이유는 혼자 하게되면 잘하고 있는지도 잘 모를 뿐더러 결국 현업에 가게 된다면 협업을 진행해야 하는데 그러한 경험이 없다면 취업을 하더라도 해매기 때문이라고 한다. 또한, 혼자서 공부를 하게 되면 번아웃도 쉽게 올 수 있다고 했다.

그리고 어느것을 공부해야하나요에 대한 질문에 답변도 해주셨는데 결국 개발자는 모든것을 다 공부해야하니 다 해보는 것이 좋다고 한다....

📝 커리어 챌린지 이력서 코칭(22.12.28(수))

이력서를 작성할 때 중요사항과 이력서를 제출할 때 해야할 것에 대해서 설명해주셨다.

이력서 관련 특강은 많이 들었지만 조금 더(?) 어떤 이력서가 통과하고 통과된 이력서 중에서 어떤 단어가 많이 작성되어 있는지 통계를 보여주었고 빼야 할 내용과 넣을 내용에 대해서 알려주셨다.

✍  회고

오늘은 배포 자동화에 대해서 세션을 진행해주셨다. AWS S3를 항상 build 파일을 생성하여 수동적으로 올려줬었고, 이전에 진행했던 프로젝트에서도 적용해보려 했지만 실패했다. (FE / BE가 같은 레포를 써서 그럴수도 있다고 생각은 든다.) 
Github -> Github Actions -> AWS S3를 사용해서 배포를 진행하는 과정을 세션에서 직접해주셨고, 라이브 세션이 끝나고 개인적으로 진행을 해봤는데 잘 됐다. vercel, netlify 등 배포 자동화를 진행해주는 과정이 어떻게 되는지 정확히 알 수 있는 날이었다.

팀 과제 주간 회고

• 화 ~ 금요일까지 진행한 팀 과제 회고 (제출링크)
• 처음엔 어떻게 하는지 많은 고민을 했지만 팀장님이 잘 이끌어 주셔서 꽤 만족할 만한 결과가 나왔다.
• 내가 맡은 부분은 API호출 코드 (Axios instance), 로그인/회원가입 기능 및 디자인에 참가했다.
• 이번에는 모두 제출된 코드를 가지고 진행했기 때문에 빠른 진행을 위해 파트를 나눠서 진행했다. 다음엔 어떻게 진행하면 좋은지는 아직도 생각하게 되는 것 같다. 

✍  회고

선별과제를 어떻게 진행하는지 설명해주셨는데 개인이 작업해서 Best Practice를 뽑아서 하나의 프로젝트로 제출을 하는 방식이라고 하셨다. 살짝 모호한 부분이 있는 것 같긴 했다.

개발자의 기본 덕목인 GIt & Github사용시 지켜야할 컨벤션 정하는 방법과 merge 방법에 대해 설명해주셨는데 오기전에 팀 프로젝트 기획을 진행하면서 많은 자료를 찾아봤었고, 부트캠프 내 프로젝트에서 정한 컨벤션과 알려주신 것이 다르지 않았다.

ESLint와 Prettier, Git hookt, Husky에 대해서 강의를 해주셨는데 ESLint와 Prettier는 프로젝트에서 많이 사용했기 때문에 ESLint는 코드를 분석하여 일관적인 코드 규칙을 적용할 수 있고, Prettier는 코드의 포맷팅 스타일을 공유할 수 있도록한다.
ESLint는  Lintting, Prettier는 Code Formatting이라고 한다.

Husky

• 개인이 매번확인해서 ESLint와 Prettier를 확인해서 실행하는 것은 실수가 발생할 여지가 있는데 이것을 해결하기 위해 자동화를 통해서 신경쓰지 않아도 자동으로 적용이 되게하고 특정 상황에서 강제로 적용이 되게 해주는 것이다.
• commit된 코드는 무조건 formatting 되어야 하며, push된 코드는 무조건 ESLint가 pass된 상태에서 push 할 수 있도록 자동화 시키는 것이다.
• githook을 도입해서 사용할 수 있다.

githook

• git에서 특정 이벤트가 발생하기 전, 후로 특정 hook을 실행할 수 있게 하는 것이다.
• git hook 설정을 도와주는 npm package - Husky

팀 과제 회의 안건

• 팀장 정하기
• 팀 레포 만들기
• ESLint, Prettier, Husky 설정
• 커밋컨벤션
  • 커밋컨벤션은 복잡하지 않게 기본 설정으로
  • 커밋컨벤션 규칙
    • feat : 새로운 기능 추가
    • fix : 버그 수정
    • docs : 문서 수정
    • style : 코드 formatting, 세미콜론(;) 누락, 코드 변경이 없는 경우
    • refactor : 코드 리팩터링
    • test : 테스트 코드, 리팩터링 테스트 코드 추가(프로덕션 코드 변경 X)
    • chore : 빌드 업무 수정, 패키지 매니저 수정(프로덕션 코드 변경 X)
    • design : CSS 등 사용자 UI 디자인 변경
    • comment : 필요한 주석 추가 및 변경
    • rename : 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
    • remove : 파일을 삭제하는 작업만 수행한 경우
    • !BREAKING CHANGE : 커다란 API 변경의 경우
    • !HOTFIX : 급하게 치명적인 버그를 고쳐야 하는 경우본문과 꼬리말은 생략 가능타입의 첫 글자는 소문자로 작성
    • 콜론 앞뒤로 한칸씩 띄워서 작성
    • 제목은 고유어를 제외하고 한글로 작성
    • 타입 : 제목 본문 꼬리말

다음 회의 준비사항

• 자기 코드 설명. 좋았던 부분과 어려웠던 부분.

오늘은 원티드 프리온보딩 프론트엔드 인턴십 8기 OT가 있는 날이었다. 설레는 마음으로 참석을 했다.

시간이 변동되어 12시에서는 커리어 챌린지 OT를 듣게 되었는데 많은 지원을 해주는 것 같다. (수료시) 끝나고 30분정도 쉬고 난뒤 오후 2시에 프론트엔드 과정 OT를 시작했다. 

OT에서는 과정이 어떻게 진행되는지 여부를 알려주는데 진행중인 프로젝트는 잠시 내려두고 과정에 힘을 쏟을 수 있도록 하자라고 말씀하셨지만, 이전기수와는 달리 1주일에 과제 1개가 진행되기 때문에 같이 진행해도 될 것 같다. 

2주차에는 연말이기 때문에 커리어 챌린지 관련 이력서 특강을 들으면 된다고 한다. 이건 나름 잘 들어야겠다.

과제는 총 4~5개의 프로젝트를 진행할 예정이고 기업과제는 1개(?) 나머지는 멘토과제나 이전 기수의 과제를 수행한다고 한다.
이수 후 한달간은 취업할동 기간으로 보고, 참여 완료 후 20개 이상의 이력서를 제출해보며 본격 취업에 나선다고 한다.