[ 클론코딩 ] 9주차

안녕하세요! 오늘은 velog 클론 코딩 9주차에 있었던 작업을 한 번 정리해보려고 합니다.

🎉 Done

1. Server API 테스팅 툴 도입

1-1. 관련 패키지 설치

• babel-cli : JS 트랜스 파일러
• babel-preset-env : ES6의 모든 기능을 컴파일할 수 있는 플러그인
• jest : JS 테스팅 툴
• supertest : superagent의 기능을 쉽게 사용할 수 있도록 api 형태로 제공하는 라이브러리
• superagent : 테스트 시 HTTP 요청을 보내는 client 역할을 가진 라이브러리

1-2. 테스트 시 유의사항

• 테스트용 server 코드와 app을 분리할 것
  (실제 서버가 실행중이면 동일한 포트를 사용하는 테스트가 진행되지 않음)
  
• Promise, async-await, supertest 세 가지 형태로 사용 가능

1. Promise
   
2. Async-await
   
3. Supertest
   

• DB connection은 beforeEach를 통해서 사용

  beforeAll을 사용하지 않는 이유는 같은 자원에 대해 같은 connection으로 계속 접근하는 것은 DB의 race-condition을 유발할 수 있음, 실제에서는 이런 상황이 발생하지 않으므로 beforeEach를 통해서 계속 새로운 connection을 생성하는 것을 권장

1-3. 테스트 환경 구축 시 유의사항

1. babel 및 preset-env 설치

Node는 browser에서 실행될 필요가 없기 때문에 babel이 필요 없을 것이라고 생각했는데, jest가 문법을 이해하는데 필요하므로 반드시 설치 및 세팅을 해줘야합니다!

2. DB connection, server listen 처리

연결된 DB connection이나 listen으로 열어둔 포트를 닫지 않으면 Jest에서 에러를 발생시키므로 반드시 닫아줘야 합니다!

express 관련 테스트 내용은 Jest 홈페이지에 있는 link를 참조했고, 환경 구축 시 유의사항은 손수 삽질하며 익혔습니다ㅠ

2. 포스팅 작성 페이지(writePage) 설계

분석은 velog-frontend/src/components/write의 컴포넌트를 기반으로 진행했습니다.

Tab Name

• react-helmet 라이브러리를 사용하여 htm의 헤더 정보 변경

Posting header

• 타이틀, 태그등을 보여줌
• 스크롤이 밑으로 내려가면 사라지는 효과 있음

Edit Area

• 실제 포스팅을 편집하는 영역, codemirror 패키지 사용 중

Posting Footer

• 나가기, 저장 등 사용자 동작에 대한 버튼 제공
• 새 글 작성인 경우 출간하기, 기존 글 수정인 경우 업데이트 버튼

View Area

• 작성한 결과물을 미리보기하는 영역 marked 패키지 사용 중
• 너비가 특정 이하로 좁아지면 사라지는 특성 있음

Toast message

• 일정 간격마다 임시 저장 후 메시지 출력
• setInterval을 통해 30s(30,000ms) 마다 임시 저장 중

3. S3 서비스 Oracle에는 없는가?

Object Storage라는 이름으로 존재함

📝 To-Do

1. Posting view 페이지와 패키지 충돌 없는지 확인

2. writePage 마무리