[POB] 세션정리 - 2주차 월

📌 React 학습 가이드

리액트 영상 추천

 

• 영잘알 : 유데미 - 리액트의 아버지
• 한국어 : 인프런 - 리액트의 삼촌

책 추천

 

• 초보자 : 리액트를 다루는 기술
• 경험자: 실전 리액트 프로그래밍

---

📌 기업과제 Review

😀 좋은 케이스!

 

상수관리 (route)

 

class AppRouter extends Component {
  render() {
    return (
      <Router>
        <Route exact path={ROUTES.HOME}>
          <Home />
        </Route>
        <Route exact path={`${ROUTES.PRODUCT}/:id`}>
          <Product />
        </Route>
        <Route exact path={ROUTES.RECENT_LIST}>
          <RecentList />
        </Route>
      </Router>
    );
  }
}

// src/constants/routesPath.js

const ROUTES = {
  HOME: '/',
  RECENT_LIST: '/recentList',
  PRODUCT: '/product',
};

export default ROUTES;

• route의 path도 상수다. 다른 페이지에서도 path를 사용할 수 있으니 상수로 처리! (유지보수)

디자인

 

• 프론트엔드 개발자는 디자인도 할 줄 알아야 한다. 신경쓰자.

Storage Class

 

export default class Storage {
  constructor(title) {
    this.title = title;
  }

  save = (list = []) => {
    const obj = {
      data: list,
      timestamp: new Date().getDay(),
    };

    if (!localStorage.getItem(this.title)) {
      localStorage.setItem(this.title, JSON.stringify(obj));
    } else {
      let previousTime = JSON.parse(localStorage.getItem(this.title))?.timestamp;
      let currentTime = new Date().getDay();

      if (previousTime !== currentTime) {
        return localStorage.clear();
      } else {
        return localStorage.setItem(this.title, JSON.stringify(obj));
      }
    }
  };

  load = () => {
    return JSON.parse(localStorage.getItem(this.title))?.data;
  };
}

• 이 부분은 utils 함수로 깔끔하게 처리!

 

🤔 다시 한 번 생각해 볼 케이스!

 

화면깜빡임

 

• 리액트는 SPA인데 화면깜빡임이 발생한다는 것은 설계가 잘못되었다는 것

 

url 설계

 

예시) http://localhost:3000/productdetail/prod4/나이키%20윈드러너%20블랙%20L/나이키/60000/false

• 사용자가 알 수 없는, 불필요한 정보는 url에서 제외하자. (prod4 -> id로 대체)

 

컴포넌트 파일명

 

• 컴포넌트 파일명의 시작은 대문자로 한다.
• CRA로 생성한 리액프 프로젝트 파일명은 JSX대신 JS만 써도 된다. (JS로 만들어도 JSX 문법으로 작성할 것을 알기 때문에)
• page폴더의 하위 파일들엔 page란 파일명을 쓰지 않아도 된다. (page폴더 하위에 있기 때문에 알 수 있음)

 

Class Component의 Life Cycle method

 

• 리액트 클래스 컴포넌트는 라이프사이클에 의해 실행되기 때문에 예시코드처럼 멤버변수를 사용할 필요가 없다.
• componentDidMount메서드는 다음에 실행 될 라이프사이클 메서드가 없기 때문에 async를 사용해도 side effect가 발생하지 않는다.
• componentDidMount 앞에 async를 붙이는 것은 이상할 수 있으나 문제있는 코드가 아니다. (네트워크 요청을 위한 코드를 이 메서드에서 작성하는데... 메서드에 직접 사용하지 말라는 걸까??)

 

관심사의 분리

 

• App컴포넌트에서 장황하게 Routes 관련 코드를 작성하지 말고 Routes 컴포넌트에 분리 작업 하자.
• Routes에선 route작업만 하고 데이터 fetching은 각 컴포넌트에서 하자.

 

! 연산자 활용

 

this.setState({ isCheckNotInterest: !checked });

• ! 연산자를 적극적으로 활용해 if - else문을 가독성있게 바꾸자

 

React에서 (모듈 내) 전역변수를 쓸 일은 거의 없다.

 

• let으로 선언된 전역변수를 쓸 일이 없다.
• 다른 개발자가 변수를 사용할 경우도 있어서 side effect가 발생 할 수 있다.
• 함수 내에서 선언하거나, 함수 호출 시 인자로 넘겨준다.
• 변수명, 파라미터 네임을 명확하게 선언한다.

 

React에서는 DOM을 직접 접근할 일이 거의 없다.

 

예시) document.querySelector()

• React에서 DOM 직접 접근은 지양하자.

 

참조 하면 좋은 convention

 

Airbnb JavaScript Style Guide

 

---

📌 Class/Functional Component

왜 Functional인가?

 

• 코드가 간결해지고 재사용성이 증가하며 유지보수가 쉬워진다.
• 클래스형 컴포넌트는 로직이 너무 복잡해지면 side effect가 발생할 수도 있다. (페이스북 오피셜)

왜 Class도 공부해야 하는가?

 

• 많은 회사의 레거시 코드가 클래스 컴포넌트로 작성되었기 때문에 공부해야 한다.

Class component lifecycle 정리 링크

React 컴포넌트 라이프사이클

함수형 컴포넌트와 클래스형 컴포넌트의 차이는? → 다음 포스팅으로 다뤄보자

---

📌 Frontend Libraries

라이브러리란?

 

• 프로그래밍에서의 라이브러리란 필요한 기능들이 모여있는 코드의 집합, 개발자는 필요시 공개된 라이브러리를 자신의 프로그램에 호출하여 사용할 수 있다.
• 자주 사용되는 기능들을 라이브러리(객체 또는 함수의 형태)로 만들어두면 필요할 때마다 직접 호출하여 사용할 수 있다.

라이브러리 선정 기준 / 주의점 / 오류 확인

 

• npm 페이지에서 weekly downloads, last publish, issue, pr 등 활발한지 체크한다.
• 라이브러리는 우리와 같은 개발자가 만들어낸 코드이기 때문에 오류가 발생할 수 있다. (이러한 점을 주의하며 사용하자)

 

실무에서 라이브러리를 적용하려면?

 

• 단기간에 프로그램을 만들어야 하거나 직접 구현하지 않고도 라이브러리를 사용함으로써 충분히 커스터마이징해서 쓸 수 있다면 사용하자 (이슈가 생기거나, 업데이트 됐을 경우 주기적으로 관리해야하기 때문에 사용을 충분히 고려하자)

---

📌 Agile = 기민한, 날렵한

 

• 일정한 주기를 가지고 계속 검토해 나가며 필요할 때마다 요구사항을 더하고 수정하여 커다랗게 살을 붙이면서 개발해 프로세스 모델 방식이다.
• 미리 정해진 몇 개의 단계에 따라 엄격한 순서대로 이루어지는 일직선의 과정인 waterfall의 프로세스와는 비교가 많이되는 반대의 개념이다.

scrum

 

• 스크럼(Scrum)은 고객의 요구사항을 충족시키는 데 초점을 맞추기 위해, 작은 목표를 짧은 주기로 점진적이며 경험적으로 제품을 지속적으로 개발하는 관리 프로세스

sprint : 기능개발의 한 사이클

planning meeting : sprint동안 무엇을 할 것인지 계획세우기  (SW 기능과 제약조건을 정의하는 명세서 작성, 기능분담 등)

daily standup : 무엇을 하고있는지, 무엇을 할 예정인지, 무엇을 못하고 있는지 (길게하면 좋지 않다 짧게짧게)