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

📚요약

지난 시간에 이어 프로젝트를 진행해 보겠습니다. 오늘은 라우팅을 시작하고, 모델(타입)을 작성하며 서버와 통신까지 진행해 보겠습니다.

 

📖Book Store 프로젝트

📄라우터

화면을 이동하기 위해서는 url을 사용합니다. 개발자가 알아보기 쉽게 url과 화면을 일치시키는 작업이 필요합니다. 이를 하기 위해서 React-Router-Dom을 활용합니다.

npm install react-router-dom

위 명령어를 사용해 설치를 하는데 타입스크립트를 사용하려면 타입이 필요하기 때문에 추가로 @types/react-router-dom 패키지도 설치합니다.

 

createBrowerRouter() 함수를 사용해 path와 element를 묶고 RouterProvider 컴포넌트를 사용해 화면을 그립니다.

 

자세한 사용 방법은 튜토리얼에서 확인할 수 있습니다.

 

📄Model 폴더

타입스크립트를 사용하면 타입을 관리하는 것이 중요하다는 것을 알 수 있습니다. 서버를 이용하는 경우 프론트에서 어떤 데이터를 받을지 알아야 합니다. 해당 데이터들을 타입으로 미리 기록해 두는 폴더가 model 폴더입니다.

예를 들어, 사용자 정보에 id, email, password가 있다고 해보겠습니다. 서버에서 데이터를 받을 때마다 해당 값들이 있는지 확인하는 방법은 JS에서 사용하는 방법입니다. 저희는 미리 interface를 만들어 두고 타입을 지정하면 오류를 쉽게 찾을 수 있습니다.

// user.model.ts
export interface User {
  id: number;
  email: string;
  password?: string;
}

🍯tip! 파일 이름을 작성할 때 더 구분하기 쉽게 하기 위해서 확장자 앞에 .으로 구분하기도 한다. ex) App.test.tsx, user.model.ts 등등

 

📄서버와 통신

서버와 통신하는 방법은 Ajax, fetch, axios, XMLHttpRequest 등 다양한 방법으로 할 수 있습니다. 이번 시간에는 axios를 활용해 서버와 통신을 진행해 보겠습니다.

 

axios의 자세한 활용 방법은 공식 사이트에서 확인할 수 있습니다.

시작하기 | Axios Docs

 

서버는 지난 백엔드 수업시간에 진행했던 BOOKSHOP을 활용합니다.

ProgrammersSchool/PROJECT-BOOKSHOP at main · nulzi/ProgrammersSchool

 

📑CORS 에러

서버를 구동하고 연결하는 과정에서 CORS 문제가 발생했다. 해당 에러는 서버에서 cors를 허용해 주는 방법으로 해결했습니다. 해결 과정은 다음 글을 참고하면 좋습니다.

[CORS 에러] nodejs에서 발생한 cors 에러 해결하기

 

📄React Hook Form

회원가입 화면을 만드는 과정에서 코드가 복잡해지는 불편함을 겪을 수 있습니다. 어떤 불편함인가 하면, submit 하는 과정부터 input 태그 내부 onChange 속성 등등 코드가 길어지는 불편함을 겪을 수 있습니다. 이를 보완하기 위해서 사용할 수

있는 도구가 React Hook Form입니다.

 

useForm() 함수를 사용하면 기존에 있는 onChange()와 value 속성을 대신해서 사용할 수 있는 register, submit을 관리해 주는 handleSubmit, 에러가 발생하면 확인하고 활용할 수 있는 formState.errors 등 다양한 기능들을 활용할 수 있습니다.

 

더 자세한 내용은 공식 사이트에서 확인할 수 있습니다.

Get Started

🍯tip! 리액트에서 button을 커스텀해서 사용하고 싶은데 기존 속성들을 props로 넘겨주고 싶다면 React.ButtonHTMLAttributes<HTMLButtonElement>를 상속받으면 된다. 이처럼 기존 태그를 커스텀해서 사용하고 싶다면 속성을 상속받아서 사용할 수 있다.

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의

자바스크립트 서버 통신 Ajax, fetch, axios, XMLHttpRequest, 슬기로운 동네 형, 2024.07.18