• webpack OR parcel 고민..

• node.js
• express.js

• unit: jest
• e2e: cypress OR supertest

• ex) 5개 보기 / 10개 보기 / 30개 보기 / 50개 보기 / 100개 보기

• 이 때 캐시된 데이터를 갱신한다.

• 수정 페이지로 이동하는 경우, 해당 게시글의 내용이 기본적으로 입력된 상태로 보여져야 한다.

• 없는 게시물을 조회할 경우에 대한 페이지(혹은 UI)를 만든다.

• 없는 페이지로 접근할 경우 404 페이지를 만들고
• 500 관련 에러가 발생할 경우, 에러에 대한 메세지를 띄워준다.
  • alert로 해도 좋고
  • 경고창 관련 UI를 만들면 더 좋다

typescript + webpack + babel를 이용하여 개발환경 구축하기

• 프론트엔트 코드를 webpack으로 build하여 production code 생성하기
• build된 code를 server에 연동하여 사용할 것

컴포넌트 기반 설계

• 상태(State)를 기반으로 렌더링하는 형태로 작성할 것
• 설계는 자신 있는 형태(객체지향 or 함수지향)로
• Observer Pattern을 이용해서 상태가 변경될 때 자동으로 렌더링 되도록 만들어보기

SPA(Single Page Application)기반

• Router 만들어서 사용해보기
  • 페이지간에 이동이 발생할 때 새로고침이 발생하지 않도록 한다.
  • 새로고침을 했을 경우에도 현재 페이지의 내용을 유지해야 한다.
  • 위의 기능들은 빌드 후에 서버에서 붙였을 때에 정상적으로 작동해야 한다.

전역 상태관리를 위한 Store 만들기

• Vuex, Redux, Mobx, Recoil 등과 같은 상태관리 라이브러리를 직접 만들어서 사용해보기

이벤트 관리를 최적화하기

• 불필요한 이벤트는 해제하기
• 이벤트 위임 사용하기

XHR(ajax) 관련

• fetch 사용
• API 요청중(loading)/실패(fail) 등에 대한 UI 처리

렌더링 최적화 - 필요한 부분만 렌더링

• 가상돔 혹은 DIFF 알고리즘을 이용
• 참고아티클
  • Proxy와 가상 돔을 사용하여 나만의 프레임워크 만들기
  • 가상돔 직접 만들기 (1)
  • 가상돔 직접 만들기 (2)

API 캐싱

• GET Method로 보내는 요청의 경우 캐싱하여 재요청 하지 않도록 한다.
  • localstorage를 이용해도 좋고, 단순하게 로컬 변수를 이용해도 무관함
  • ex) 게시물 조회, 페이징 등
• POST, DELETE, PUT 과 관련된 Method로 요청을 보낼 경우, 캐싱된 데이터를 갱신함
  • ex) 게시물 추가/수정/삭제 등

• read할 경우 캐싱된 데이터만 반환한다.
• create, update, delete 관련 로직을 수행하면 캐싱을 초기화한다.

• 서버와 클라이언트가 주고받는 데이터에 대한 Type을 만들어서 사용할 것 (즉, 서버와 클라이언트가 Request/Response type을 공유하도록 만들 것)

• 예시1) 간단하게 data.json 파일을 하나 만들어서 관리함

  function getData() {/* JSON 파일을 읽어옴 */ }
  function setData(data) {/* JSON 파일을 저장함 */ }
  
  app.post("/api/post", (req, res) => {
    const posts = getData();
    posts.push(req.body);
    setData(posts);
    res.send();
  });
  
  app.get("/api/post", (req, res) => {
    res.send(getData());
  })
  
  /** 구현 코드 **/
  app.listen();

• 예시2) 로컬 변수로만 관리함

  const posts = [];
  
  app.post("/api/post", (req, res) => {
    posts.push(req.body);
    res.send();
  });
  
  app.get("/api/post", (req, res) => {
    res.send(posts);
  })
  
  /** 구현 코드 **/
  app.listen();

• e2e test
  • cypress 등의 도구를 활용하여 기능 요구사항에 대한 테스트 진행
  • 테스트만 돌려도 기능이 구현 되었는지 확인할 수 있으면 좋음
• unit test
  • test coverage 90% 이상

• e2e test
  • supertest 등을 활용하여 endpoint에 대한 테스트 진행
• unit test
  • test coverage 90% 이상