[POB#04] 강의 노트, 1차 과제 코드 리뷰, 피드백 후기

dongwon·2021년 7월 29일
Code ReviewPre-OnboardingTIL
1

원티드-프리온보딩

목록 보기
4/25
post-thumbnail

7월 29일 강의를 정리했습니다.
1차 과제 코드 리뷰, 피드백 후기를 정리했습니다.

🎯 팀 미션 정리

이론, 정리 글보단 직접 사용해보고 장단점을 파악하는 게 중요합니다 !

✔️ CRA Structure

직접 구조를 잡아보고 하나만 고집하지 않고 여러 구조를 사용하는 것이 중요합니다.
정답이 정해져 있지 않고 사용하던 것이 나중엔 레거시 코드가 될 확률도 있습니다. 프로젝트를 설계 전 충분한 회의를 거쳐 정해야 합니다.

기본적으로 지켜야 할 원칙

정답은 없지만 꼭 지켜야 할 원칙 !

한 파일은 하나의 기능을 합니다.
유지 보수, 확장성을 위해 파일 이름만 봐도 이것의 기능이 무엇인지 알아야 합니다.
더 나아가 깊숙한 구조라도 이 기능이 어디에 위치하고 있는지는 알 수 있도록 합니다.

✔️ CSS 작성 방식

SASS, styled-components, css-module 등 여러 가지가 있지만 어느 하나가 좋다고 말할 수 없고 회사마다 다릅니다. 대표적인 SASS와 styled-component의 장단점을 알아보겠습니다.

SASS

👍🏼 장점

  • 문법적으로 좋습니다.

👎🏼 단점

  • className을 신경 쓴다 해도 전역 공간을 오염시켜 className 중복을 일으킬 수 있습니다.

styled-component

👍🏼 장점

  • 유니크한 className을 지정해 전역 공간 오염을 막을 수 있습니다.

👎🏼 단점

  • 태그가 아닌 컴포넌트 이름을 사용하면서 태그들의 구조를 한눈에 파악하기 힘듭니다.

✔️ Commit Message

이전 포스트에서 작성한 Commit Convention을 따릅니다.

추가로 날짜나, 리뷰어가 작성자를 쉽게 알아보기 위해 이름을 쓰는 경우도 있습니다.

🎯 기업 과제 코드 리뷰

✔️ HTML 무시 금지

div 태그 남발 금지 !
한 파일에 2개 컴포넌트 작성하지 말자

✔️ CSS 공부하기

어떻게든 돌아가도록 하자라는 식으로 하면 유지 보수가 굉장히 하기 어려워집니다. CSS를 공부해 정확히 알고 사용해야 합니다.

자주 하는 실수들

  1. 쓸모없는 property는 지웁니다. 예를 들어 디폴트로 세로 정렬인데 굳이 flex-direction : column 할 필요 없습니다.
  2. 자신의 모니터만 생각하면 안 됩니다. 여백을 pixel 값으로 설정한다면 자신의 모니터에는 정 중앙 일지라도 다른 환경의 모니터에서는 그렇지 않습니다. ( margin: 0 auto로 설정 ! )
  3. height 값 설정하지 않습니다. height는 내부 컨텐츠 자체의 height으로 설정되게 합니다. height를 설정한다면 컨텐츠에 한참 모자라거나 튀어나오는 상황이 발생할 수 있습니다.

styled component 안에 className을 사용하는 경우, 스타일 컴포넌트를 다른 곳에서 재사용할 때 className이 전역 공간 오염을 일으킬 수 있습니다. 이것은 styled-components의 장점을 이용하지 않는 경우입니다. styled-component 안에 태그를 쓰는 경우는 괜찮습니다.

✔️ 유지 보수 관련

상수 사용하기

API 주소와 같은 여러 곳에서 사용하는 값들은 값이 변한다면 값을 사용하는 모든 곳을 찾아 일일이 바꿔야 하는 불편함이 있습니다. 이를 위해 상수화 시켜 한 번에 관리하는 것 이 좋습니다.

BASE_URL과 END_POINT

BASE_URL은 공통으로 사용하는 API 주소까지, END_POINT는 뒤에 사용할 변수로 설정합니다.
예를 들어 댓글 정보 API 주소가 https://dongwon.com/comment, 유저 정보 API 주소가 https://dongwon.com/user 라면, https://dongwon.com까지가 BASE_URL입니다.

export const BASE_URE = "https://dongwon.com/";
export const DEFAULT_LIMIT = 10;

게으른 개발자에게 좋은 코드가 나온다

import 관련

절대 경로 사용해 긴 폴더 경로 대신 @나 ~ 사용할 수 있습니다. ( 생산성을 위해! )
import도 관련된 것들 끼리 모아서 선언합니다. sort-imports eslint 사용하기 !

✔️ Infinity Scroll 기능 리뷰

이번 과제에서 아무 생각 없이 라이브러리를 사용했음을 반성합니다.

실무에선 당연하게도 라이브러리를 사용했지만 공부할 땐 라이브러리보단 내가 어떤 로직을 이용해서 이 기능을 구현했는지를 더 중점적으로 보고 개발할 수 있도록 합니다.

Throttle과 Debounce

Throttle
스크롤 이벤트를 할 때마다 수많은 이벤트가 발생하는 경우 타이머를 걸어두고 일정 시간 동안에만 이벤트를 발생시킬 수 있습니다.
Debounce
계속 호출하도록 되어있지만 처음과 끝에만 실행하도록 할 수 있습니다. 예를 들어 구글 타이핑, 결제하기 버튼 연속 클릭과 같은 경우에 사용합니다.

intersection observer 관련

  1. 브라우저별 지원하는지 확인하자.
    intersection observer는 IE에서 지원을 안 합니다. 이런 경우 polyfil을 사용해 해결할 수 있습니다.
    caniuse.com 사이트를 이용해 각 브라우저마다 사용 가능한지 확인할 수 있습니다.

    IE는 꼭 고려해야 하는가 ?
    실제로 마케터님이 테스트를 할 때 IE에서 접속한 사람의 수가 많다고 합니다. 꼭 고려할 것 !!

  2. 더 이상 데이터가 없을 경우, 마지막까지 스크롤 한 경우 처리를 해야 합니다. DEFAULT_LIMIT=10으로 설정했다면, 10보다 작은 comment를 불러올 경우 마지막을 알립니다.

🎯 다음 과제 이론

✔️ utils 폴더 사용하기

utils 폴더는 재사용될 것들을 모아놓은 폴더입니다.
형식을 바꾸는 formatter 함수나, 여러 번 사용할 로직들, 혹은 custom hook과 같은 파일들을 모아놓을 수 있습니다.

주니어 개발자와 미들웨어 개발자의 차이는 남이 만든 걸 잘 사용하느냐 vs 남이 사용할 걸 잘 만드냐의 차이입니다. utils 폴더를 미리 만들어보면서 함께 사용할 것들을 미리 만들어봅니다.

유닛 테스트 사용하기

utils 안에 있는 함수나 로직에는 어떤 input이 들어갈지 알 수 없습니다. 예를 들어 날짜를 string 타입으로 들어왔는지, date 타입으로 들어왔는지 알 수 없고 일일이 다 체크해야 합니다. unit test를 작성하면 이러한 타입이나 형식의 오류를 사전에 잡을 수 있습니다.

✔️ Client 리소스로 데이터 사용 ( mock data )

아직 백엔드 개발자가 API를 못 만들었을 때 어떻게 해야 할까 ?
정답은 가짜 데이터(mock data)를 이용하는 것입니다.
mock data를 만드는 방법은 간단하게 data.js 파일에 상수로 만들어 import 하는 방법, json을 이용해 만드는 방법이 있습니다.

JSON이란 ?

프론트는 javascript를, 백엔드는 여러 가지 언어로 개발합니다. 따라서 프론트와 통신하기 위해 통일할 무엇인가가 필요했고, 프론트는 javascript 사용하니 javascript 문법을 빌린 형식, 즉 json이 만들어졌습니다.

  • json에 사용 가능한 타입들
    Stirng, Number, boolean, null, object, array
  • 사용할 수 없는 것
    function, date, undefined
  • js와 다른 점
    변수 사용이 불가능하고 오로지 데이터 형식만 제공합니다. 데이터 형식은 "쌍따옴표"로 감싸야 합니다.
  • 파싱과 직렬화
    1. stringify() : 쌍따옴표 없던 객체조차도 json으로 변환해 줍니다.
    2. parse() : json을 파싱 해 자바스크립트 값으로 바꿔줍니다.

public 폴더에 대해

public 폴더 안에는 잘 보진 않지만 다양한 기능을 하는 파일들이 있습니다.

index.html

React에서 브라우저가 가져오는 단 하나의 파일인 index.html에는 React에서 node_modules로 패키지 관리를 할 수 없는 경우 직접 추가할 수 있습니다.

robots.txt

robots.txt는 검색 정보에 관한 파일이 들어있습니다. 실제 서버에 들어가 직접 접근할 수 있는 리소스들 있고 fetch 함수를 이용해 json으로 통신할 수 있습니다.

🙏 코드 리뷰, 피드백 후기

Infinity Scroll 라이브러리 사용하지 않고 구현하자.

당연하단 듯 라이브러리를 사용했습니다. 공부하는 입장에서 최대한 라이브러리를 사용하지 않고 구현해야겠다 생각했습니다.

라이브러리 사용한다면 브라우저별 지원하는지 살펴보고 polyfill 사용하자.

앞으로 IE가 없어진다는 기사를 보고 당연히 고려를 안 했습니다. 하지만 실제로 IE가 굉장히 많이 사용되는 것을 알게 되었고 문서를 통해 확인하고, 사용하기 위해 polyfill 사용법을 익혀 적용해야겠습니다.

Redux를 함부로 사용하지 말자. 사용해야 할 상황에만 사용하자.

이것 역시 익숙해서 사용했는데 잘 판단 후 사용을 해야겠다고 생각했습니다. Redux를 사용하지 않아도 되는 프로젝트에 사용한다면 오히려 마이너스가 될 수 있다는 생각을 못 했습니다.

profile
dongwon
데이원컴퍼니 프론트엔드 개발자입니다.
이전 포스트

[POB#03] 커밋 컨벤션 정리

다음 포스트

[POB#05] Assignment 2 : 미스터카멜 기업 과제 기술 정리. mock data와 메서드

0개의 댓글