iris.dew

더 나은 리액트 프로젝트를 위해

July 29, 2021

(작성중)

프리온보딩 두번째 수업! 저번 과제에 대한 리뷰를 듣고 중요한 내용을 많이 배울 수 있었다. ✍

주니어에게 필요한 능력

  • 남이 만들어놓은 걸 갖다 쓰는걸 잘해야한다
    (다른 사람의 코드, 라이브러리)
  • 문서를 잘 읽어야한다
  • 이미 소스코드가 만들어져 있는 시점에 투입됨
  • 남의 코드를 읽고 분석을 잘하는 것 중요!

CRA 구조

  • 하나의 구조만 고집하지 말기!
  • 다른 사람들의 코드, 국내 스타트업의 구조 살펴보기👀

CSS with React

  • Styled component가 등장한 이유 : 전역스타일 오염 떄문! - styled component 안에 className을 쓰면 오염이 일어날 수 있음

  • Styled component의 단점

    • html 구조가 한눈에 잘 안보임 div인지 a인지…
    • 한 파일에 코드가 너무 많아짐. 이해하기가 어려움
  • Sass module

Commit Message

페어 프로그래밍 Tip

  • 둘의 실력차이가 필연적으로 있다
  • 말을 많이 꺼내기👄
    명확히 말할 수 있어야 아는 것인데 페어에게 설명하면서
    내가 아는 것/모르는 것을 알게된다
  • 모르면 까짓것 틀리면 됨! 상대방에게 감사함을 표시🙏
    궁금한건 바로 물어보면 가장 좋고!
    적어도 메모한 뒤 나중에 꼬옥 이해 못한 부분 찾아보기

HTML과 CSS의 중요성 잊지 말기!

  • div 남발해도 되지만, 굳이 필요없는 경우는 depth만 길어진다
  • css는 경험이 중요하다. 백만가지 방법 존재하지만, 꼭꼭 공부해야함! 잘 작성해야 유지보수 가능
  • property를 지웠을 때 동일하다면 쓸모없는 코드!

  • flex

    • default로 원래 세로배치인데 가로배치로 바꾸어준 혁명!
    • 그럼 세로배치를 하고 싶을 때는 flex를 굳이 쓸 필요가 있을까? NO
    display: flex;
flex-direction: column;

    (내가 저번 과제에 딱 이렇게 해서 뜨끔!)

  • 여백 오사용 주의

  • height 유의해서 사용하기

    • 자식의 크기가 부모의 크기를 결정한다
    • 내용 길이가 유동적인 경우! height를 주면 안된다.
    • height가 아니라 여백으로 잡는게 일반적
    • 높이를 줘야하는 경우보다 주지 않아야 할 경우가 더 많다

게으름이 좋은 코드를 만든다

설정하는 시간 <<< 이후의 생산성

  • 상수로 관리해야하는 것들 필수

    export const BASE_URL = `https://jsonplaceholder.fakeapi.com/`
export const ERROR_MESSAGE =
'Failed to fetch data, please check your API or internet connection'
export const LIMIT = 10
export const DEFAULT_PAGE = 1
    • API url, 요소 개수, 에러메세지, 시작하는 페이지
    • 상수 쓸 때 항상 대문자, _
    • BASE_URL은 정말 딱 기본주소까지만!
    • 컴포넌트 안에 넣으면 안됨! (죽어도 이 컴포넌트에서만 쓰는 상수, 함수는 import 라인과 컴포넌트 함수 사이에 해도 거기까지는 OK)

  • 절대경로 설정

    • import 할 때 절대경로, alias 설정하기 ../../ 이런 코드가 줄어듦
    • import도 순서 맞춰서 보기좋게

폴리필과 크로스 브라우징

https://caniuse.com/

  • ex) Intersection Observer API를 사용하면 ie에서는 지원 안됨 (MDN문서 확인)
  • ie는 버릴 수가 없다 😥 (크롬 많이 쓰는 것 같아도 ie 접속자가 아직 많다!)

React를 왜 사용하나요? 대답하기

utils로 관리해야하는 함수

  • 한번만 쓰는게 아니라 다른 곳에서도 어러번 사용되는 함수
  • custom hook도 utils에 포함될 수 있음
  • 2개 이상의 컴포넌트에 사용되는 함수다 → utils 함수로 분리하는 게 좋음

Frontend에서의 unit test

JSON

mock data

이 많은 주제를 2시간 안에 다루다니! 정말이지 너무 알차서 눈물이 난다😂 프론트엔드 개발자라면 필수적으로 무.조.건 알아야하는 것들인데 더더 공부하고 더더 확실히 알아두겠다! 😎

Written by@irisdew
Junior Frontend Developer

GitHub