# Today I Learn - 2022.05.08
# Pre Onboarding Course
-
To do List 프로젝트 정리 : 최종 수정 및 리드미 작성을 진행하였다.
-
공부해야 할 개념 리스트업 진행 : 주니어 개발자로서 공부해야 할 개념들을 리스트업 하였다.
-
To do List 코드 리뷰 : 모든 팀의 프로젝트 코드 리뷰가 진행되었다.
- 코드의 길이를 줄이기 위한 컴포넌트와 커스텀 훅 : 코드의 길이는 개인적인 기준으로 제한하여 작성한다. 멘토님의 경우 150줄으로 한정하였다. 코드가 길면 가독성이 떨어진다. 컴포넌트 혹은 커스텀 훅을 활용한다. 컴포넌트와 커스텀 훅의 원래 사용 이유는 재사용성이다.
- 라이브러리 지양 : 내장 기능으로 구현할 수 있는 경우 라이브러리를 사용하지 않는다.
- 메소드 내부의 변수와 함수 : 메소드 내부에서 변수 선언 및 함수 선언은 하지 말아야 한다.
- map index를 key로 사용시 후 가공 처리 : map 메소드 내부에서 key값을 index로 사용할 때에는 예를 들어 const key =
categoris+${i}과 같이 메소드 내부에서 index를 가공하여 사용해야한다. - 로컬스토리지를 편하게 사용할 수 있는 라이브러리 : store.js 라이브러리를 사용하여 로컬스토리지에 간단하게 저장하거나 가져올 수 있다. JSON.parse나 JSON.stringify 사용하지 않아도 된다. (ex store.set('user', user))
- 네이밍 컨벤션 : 변수, state, 함수 등 네이밍 컨벤션에 대한 중요성을 다시 한번 강조하셨다.
- 부동 소수점 이슈 : js에서 소수점 자릿 수가 큰 숫자를 연산할 때는 부동 소수점 문제가 발생할 수 있기 때문에 라이브러리를 사용하는 것이 좋다.
- alear를 사용하면 안되는 이유 : alert을 사용하지 않는 이유는 alert이 실행되면 다음 코드가 멈추는 현상이 발생할 수 있기 때문에 사용하지 않는 것이 좋다. alert사용 시 커스텀 alert(직접 토스트 메시지 구현)를 사용한다.
- carousel 라이브러리 : carousel 기능 구현 시 관련 라이브러리(ex slick.js)를 활용하여 구현한다.
- 상수 데이터의 가독성 : 함수 내부에 상수 데이터를 사용하는 경우 함수 외부로 뺴주면 가독성이 좋아진다.
- 메서드 체이닝의 가독성 : 메서드 체이닝의 경우 메서드마다 엔터 처리해야 가독성이 좋아진다.
- useMemo와 useCallback : useMemo와 useCallback을 활용한다. useMemo는 값을 저장하고 useCallback은 함수를 저장한다. 디펜던시가 변하지 않는 이상 연산되지 않는다 즉 메모리(캐시)에 값을 저장해놓고 디펜던시가 변하는 경우만 새로 연산한다. useMemo와 useCallback을 사용하지 않는 경우 렌더링 될 때마다 계산되므로 비효율적일 수 있다. 단, 무조건 사용하는 것이 아니다. useMemo와 useCallback을 사용했을 때 퍼포먼스 올라가는 대비 메모리(캐시)만 먹는 경우도 있다. 상황에 따라 적절하게 사용해야한다. 연산 횟수 혹은 연산 양에 따라 달라질 수 있다.
- context API의 퍼포먼스 : context API로 상태관리하는 것보다 다른 대안을 활용하는 것이 좋다. 상대적으로 퍼포먼스가 떨어진다.
- 컴포넌트 안티 패턴 : 안티 패턴 중 하나로 컴포넌트 두 개를 한 파일에 선언하는 안티 패턴이 있다.
- ?? 연산자 : A ?? B 처럼 물음표 두개 ?? 연산자를 사용하여 A가 null일 경우, null이 아닌 경우를 반환할 수 있다.
- overflow-x 모바일 : css에서 overflow-x로 처리 된 경우 모바일에서 터치 후 이동이 가능하다.
- useNavigate 내부 state 전달 지양 : useNavigate hook사용하여 페이지 이동 할 때 useNavigete 내부에 state를 담아 전달여 useLocation으로 받아 사용하는 패턴이 있는데 이럴 경우 라우팅 될 때 데이터가 전달되므로 문제가 발생할 수 있다. (ex 사용자가 이동 되는 페이지에 직접 접근 시 페이지 이동 시 받아오는 데이터가 존재하지 않을 수 있다.)
- 다크 모드 구현 : CSS의 :root속성을 통해 문서 트리의 루트 요소를 선택할 수 있다. HTML의 루트 요소는
<html>요소 선택자를 나타낸다. 다크 모드같은 경우 유용하게 사용할 수 있다. - useEffect 마운트 유틸 함수 : const useMount = mount => useEffect(mount, []) 와 같이 useEffect hook을 유틸 함수로 만들어 사용할 수 있다.
- To do List 타팀 코드 참고
- 자동 포커스 : useRef hook과 useEffect hook을 함께 활용하여 input 자동 포커스를 구현하였다.
- 퍼지 서치 : 검색 기능 구현 시 퍼지 서치 라이브러리 활용하였다.
- 드래그 감지 : 마우스 커서 position의 값을 구하여 리스트를 커서로 클릭 한 상태에서 좌로 이동 시 아이콘이 노출되도록 구현하였다.
- framer-motion 라이브러리 : 리액트 애니메이션 & 제스쳐 라이브러리인 framer-motion 라이브러리를 사용하였다.
- 자동 만료 기능 : expiry date를 사용하여 데이터가 자동 만료 되도록 구현하였다.
- 강의 내용
- CSS 브라우저 지원 범위 : Can I Use 사이트를 통해 지원되는 브라우저에 범위를 알 수 있다.
- 크로스 브라우징 범위 : 실무에서는 IE는 대응할 필요가 거의 없다. 대부분 크롬이나 사파리만 대응하도록 한다.
- 개발 관련 검색 : 개발 문서는 영어로 검색하는 습관을 들여야 한다. 영어로 된 자료가 압도적으로 많다. 또한 영어 문서를 읽는 연습도 많이 하는 것이 좋다.
- 라이브러리 이슈 : 오픈 소스 라이브러리같은 경우 해당 라이브러리의 공식 github에 접속하여 issue탭에서 검색하는 것이 빠르다.
- 질문하는 기술 : 질문하는 기술이 중요하다. 핑퐁으로 대화하는 긴 커뮤니케이션은 좋지 않다. 정확한 질문 방식이 중요하다. 재현 -> 실제결과 -> 기대결과 등
- 이미지 최적화 방법 : 네트워크 탭에서 페이지가 로딩되는데 사용하는 총 용량(브라우저 창 하단 탭에 나옴)을 확인할 수 있다. 또한 이미지 개별로 크기를 확인해볼 수 있다. 이미지 최적화 방법으로는 이미지 컨버팅 사이트(ex https://squoosh.app/)를 활용하는 방법이 있다. 사이즈를 줄이거나 이미지의 형식(WebP, jpg2000 등)을 변환한다. WebP는 사파리에서 최신 사파리만 지원하므로 jpg2000을 사용한다. 예를 들어 260px크기의 들어가는 이미지의 크기가 4500px인 경우 쓸데없이 이미지가 크기때문에 잘라주는 것이다. 또한 색상이 많은 경우 jpg, 이미지의 색상이 적은 경우 png형식을 사용한다. jpg는 손실 압축으로써 원본을 뭉개면서 용량을 줄인다. 예시로 인스타그램의 경우 사용자가 이미지를 하나를 등록하면 이미지를 사용 용도에 맞게 여러 버전으로 저장하여 사용한다. 또한 다른 방법으로 캔버스로 원본을 다시 그려서 품질 낮추고 해상도 조절하는 방법 등이 있다.
- npm vs yarn : 의존성 모듈 설치 시 npm과 yarn을 사용하는 것은 상관이 없다. 하지만 협업 시 같은 것을 사용하는 것이 좋다.
- ts 인터페이스 모듈화 : 타입스크립트 인터페이스 정의 시 모듈화하여 모아서 사용하며 export로 내보내고 import하여 사용할 수 있다. 또한 타입 모듈의 파일명은 '파일명'.d.ts와 같이 정의한다.
- ts 인터페이스 컨벤션 : 인터페이스 타입 작성 시 앞이 대문자인 파스칼케이스를 사용한다.
- ts depth가 깊은 데이터 타입 : 데이터 depth에 따라 interface 타입 내부에 abc[]와 같이 내부 데이터에 타입을 지정해서 사용할 수 있다.
- ts에 함수 props : 타입스크립트에서 props의 타입은 꼭 지정되어야 한다.
- ts 인터페이스 확장 : 만약 중복이 많은 타입 지정 시 interface를 확장하여 사용한다. extends키워드를 사용하여 확장할 수 있다.
- ts event 타입 : interface 내부에 함수 타입 지정 시
onClick?: (e: MouseEvent<HTMLButtonElemont> => void) - 자동 타입 지정 JSON to TS extension : vscode 내부에 extension 중 JSON to TS 를 사용하면 타입을 지정해준다. 개인적으로 타입스크립트 초반에 사용하기 무섭다.
- 날짜 관련 라이브러리 : 많이 사용되는 moment js는 용량이 크다. day js는 2KB로 용량이 작다. day js를 사용하여 날짜의 Format을 변경해줄 수 있다.
# Takeaway
오늘은 To do List 프로젝트를 최종적으로 마무리하고 제출하였다. 그 후 주니어 개발자로서 공부해야 할 내용들에 대해 리스트업을 진행하였다. 자료구조, 알고리즘, js, react, ts, nextjs, os, cs 등 공부해야할 것들이 참 많았다. 어찌보면 막막하기도 하지만 이런 것들을 내 것으로 습득하게 되면 수 많은 개발자들 사이에서 손에 꼽히는 엘리트 개발자가 되는 길에 한발 한발 다가간다고 생각하면 얼른 다 습득하고 싶다는 욕심이 생기기도 했다. 오늘 강의 시간에 진행되었던 코드 리뷰 중에는 준혁님이 코드 리뷰 내용과 다른 팀들의 코드에서 배울 점들이 많았다. 이번 프리온보딩 코스에 참여하며 준혁님께 배운 내용들을 내 것으로 만드는게 목표이다. 좋은 코딩 습관을 들여 좋은 코드를 짜고 싶다. 또 오늘 준혁님께서 추후에 있을 개인/팀 프로젝트에 대해 간략하게 설명해주셨는데 기획안은 다르지만 퍼블리싱 하던 때에 기획안을 보는 것 같아서 추후에 있을 프로젝트를 진행하면 정말 일 하는 느낌이 날 것 같다는 생각이 들었다. 또한 한편으로 걱정이 되기도 하였다. 일정이 2-3일 안에 프로젝트를 완성해야하는 빠듯한 일정이기 때문에 새로운 개념을 습득하고 그것을 바로 적용시켜야하는 상황이다. 이렇게 되면 프로젝트를 완성하는데에 급급하고 좋은 코드를 짤 수 없을 수도 있겠다는 생각도 들었다. 또 이런 상황 속에서 최선의 방법은 리팩토링 할 내용들이 최소한의 분량이 되게끔 애초에 좋은 코드로 짤 수 있도록 해야겠다. 이제 일주일 정도 지났는데 앞으로 더 많은 프로젝트와 경험들을 하며 많이 성장하고 싶다.
프론트엔드 개발자