프로그래머스 데브코스 96일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 프로젝트를 진행하겠습니다.

 

📖웹 기반 문서 편집기 제작 프로젝트

📄BE 설계

📑구조 설계서

구조 설계서는 SW의 구조를 설계해 기술해 둔 정의 문서입니다. 주 내용은 어떤 도구를 사용할 것이고, 패키지 구조는 어떻게 할 것인지에 대해 작성된  문서입니다.

• 도구와 도구의 버전
• 패키지 구조
  • 세팅
  • 라우터
  • 모델
  • 유틸
  • 미들웨어

📑데이터베이스 설계

프로덕션(실제)용 데이터베이스와 로컬 테스트용 데이터베이스는 분명히 구분해서 사용해야 합니다.

 

📑개발 환경 셋업

빈 프로젝트에 기본 패키지를 설치하고, 환경 변수 및 설정 코드 작성, 뼈대와 응용 코드까지 작성을 했습니다. 작성된 코드를 바탕으로 로컬 실행과 빌드 후 결과까지 간단하게 확인했습니다.

🍯tip! 빌드 후 따로 서버 배포 없이 확인하기 위해서는 npx serve <빌드 폴더 위치>를 통해 확인해 볼 수 있다.

 

📑사용자 인증(Authentication)

인증 정보를 통해 유효한 사용자인지 확인하는 과정입니다. 암호화된 비밀번호와 이메일을 통해 인증을 진행합니다. 암호화는 bcrypt 라이브러리를 활용하겠습니다.

 

📑사용자 인가(Authorization)

자원에 접근하고자 할 때 해당 사용자가 권한을 가지고 있는지를 확인하는 과정입니다.

 

📑CORS 정책

정해진 URL로부터의 요청만 허용하는 과정입니다.

 

📄FE 설계

📑구조 설계서

전반적인 구조를 나타내는 설계서 입니다.

• 도구 및 도구의 버전
• 패키지 구조
  
  • 컴포넌트
  • Utility
  • React Query Hooks

📑상세 설계서

구조 설계서에서 자세하게 파일의 위치와 역할까지 기술된 문서입니다.

• 컴포넌트
  • 일반
  • 페이지
  • HOC
• 디자인

📑개발 환경 셋업

react와 typescript를 바탕으로 프로젝트를 설정합니다. CRA를 통해 기본 템플릿을 생성하고 CRACO를 이용해 기본 환경에 대한 설정을 합니다.

🍯tip! 지저분한 상대 경로를 없애기 위해 tsconfig-paths-webpack-plugin 라이브러리를 이용할 수 있습니다.

🍯tip! .env에 환경 변수를 지정하고 사용한다면 실제 production build에는 적용되지 않는다. 그렇기에 컨테이너 빌드 타임에 env.js 파일을 만들어서 DOM의 window의 환경 변수를 담고 사용한다.

 

다음 시간에 계속...

 

출처 & 참고

John Ahn 강사님의 강의

SW 설계 20년 해보고 깨달은 '좋은 설계'의 조건, 안영회, 2024.08.19

React - 로컬에서 build 후 서버 띄우기, 여의도스토리, 2024.08.19