[React & Typescript 프로젝트] Happy-Christmas !

▶ 소개

• 크리스마스 편지를 ('나' 한정) 주고 받을 수 있는 웹사이트

 

 

 

▶ 요구사항

• 이름을 입력해 등록된 메세지가 있는지 확인할 수 있다.
• 비밀번호를 입력해 본인에게 등록된 메세지를 확인할 수 있다.
• sian(나)에게 크리스마스 편지를 쓸 수 있다.

 

 

 

▶ 개발환경

• Backend : Typescript, TypeORM, Express
• Frontend : React, Typescript
• Test : Jest, Cypress

 

 

 

▶ 목표

• Node.js 학습
• React 학습
• TypeScript & typeORM 학습
• Express 학습
• 분리 서버 환경의 이해
• 프론트 테스트 코드 작성

 

 

 

▶ 진행과정

JS 는 HTML 을 꾸미는 용도로만 사용해봤다. (jQuery 같은 ..)

관련지식이 많이 부족한 상태이기에

해당 프로젝트를 완성하기 위해서는 기초부터 단계별 학습이 필요하다고 느꼈고,

아래와 같은 절차로 학습을 진행했다.

 

 

2022년 12월 캘린더

 

 

 

before	input	after
모놀리틱 아키텍쳐만 경험해 봄	1. BE , FE 서버가 분리된 환경 (Decoupled Architecture) 에서 데이터 교환해보기 2. CORS 에러 핸들링	1. 분리환경에서 데이터 요청/응답에 대한 의문점 해결 2. CORS 이해
JS 프레임워크에 대한 지식 無	Express.js REST API 제작	1. Node 이해 2. Express 이해
Typescript 아예 모름	Typescript-typeORM-API 제작	1. Typescript 이해 2. TypeORM 이해
React 조금 학습했었는데 어렵다고 느꼈어서 물러남	React.js SPA 메모장 제작	React 재밌다

 

 

 

 

 

▶ 스토리보드

 

HomePage

   - 이름을 입력 후 버튼을 눌러 해당 이름으로 등록된 메세지가 있는지 확인할 수 있다

 

AlertCard

   - 비밀번호를 입력해 일치한다면 메세지를 확인할 수 있다

 

 

 

AlertCard

   - 등록된 메세지를 읽을 수 있으며 편지를 작성하는 페이지로 이동이 가능하다

 

CreatePage

   - 새로운 메세지를 등록할 수 있다

 

 

▶ 코드상세

코드리뷰 게시글을 작성했습니다. 아래 링크에서 확인 가능합니다.

https://feelfreetothink.tistory.com/174

 

 

 

 

---

 

 

▶ 느낀점

현실적인 일정을 산출한다.

지속적으로 피드백을 요청한다.

타입스크립트를 공부해야겠다.

 

 

▶ 어려웠던 점

타입스크립트

환경설정

JS 비동기개념

 

 

▶ 아쉬운점

git 으로 버전관리를 하지 못한 점

Error 상황을 테스트 하지 못한 점