ㄴ 사진 출처
오늘부터 메인 프로젝트를 시작하게 됐다! 예정대로 오늘 기획 회의를 주최하고, 기능을 확정해가며 종일 백/프론트가 달라붙어 사용자 요구사항 정의서를 작성했다. (우리 팀의 사용자 요구사항 정의서는 아래 해당 목차에 가면 볼 수 있다)
하지만 아직 Pre 가 마무리되지 않았다. 백/프론트 개발은 모두 끝낸 상태이지만, 백-프론트의 연결과 서버 배포는 아직이다. 일단 오늘부터 Main을 시작했으니 차차 하루에 1~2시간씩 맞춰볼 예정이다. 또 Pre에서 클론코딩을 삽질해가며 조금이나마 감을 잡아가고 있다.
아자아자 화이링!!! 프리야가라!!! 제발 가!!!
팀별 진행 상황
BE
- 질문 상세 페이지 연결
- 사용자 요구사항 정의서 작성 중
FE
- 사용자 요구사항 정의서 작성 중
오늘 배운 것
1. useEffect, axios로 API 데이터 불러오기
useEffect와 axios를 활용해서 API를 불러올 수 있다. .get 뒤에 적힌 게 API 링크인데, 지금 불러온 주소는 아래 설명할 MSW로 가져온 가짜 API 주소이다. 후에 백엔드의 API 주소가 생성되면 그 주소를 입력하면 된다.
아마도 주소를 입력하면 배열의 id, object 값의 이름이 안 맞거나 해서 오류가 날 순 있지만, 그때 가서 다시 고치면 된다.
팀장님이 새롭게 알아온 라이브러리인데 꽤나 쓸만한 거 같고, 다른 개발자들의 평도 좋아보인다.
2. MSW(Mock Service Worker)로 API 데이터 가져오기
MSW(Mock Service Worker)는 서비스 워커(Service Worker)를 사용하여 네트워크 호출을 가로채는 API 모킹(mocking) 라이브러리이다. 백 엔드 API가 아직 나오지 않은 상황에서 API 연결을 시험해보고 싶을 때, 백 엔드 QPI 대신 프론트 엔드의 요청에 가짜 데이터를 응답해준다.
(1) msw 라이브러리를 터미널에서 설치한다. npm과 yarn 모두 설치 가능하다.
npm install -D msw //npm으로 msw 설치하기
yarn add msw // yarn으로 msw 설치하기(2) 설치가 완료되면 mocks라는 폴더를 만들고, browser.js, handlers.js 파일을 생성한다.
(3) browser.js에는 아래와 같은 코드를 입력한다.
import { setupWorker } from 'msw'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)(4) handlers.js에는 아래와 같은 코드를 입력한다.
import { rest } from 'msw'
export const handlers = [
// 기본형
rest.post('/login', async(res,req,ctx)=>{
return res(
ctx.json("뱉어줄정보들!")
)
}),
// Handles a GET /user request
rest.get('api로 사용할 주소', async(req,res,ctx)=>{
return res(
ctx.json({ // 백엔드의 API 명세서를 참고해서 실제로 사용하게 될
//API 배열의 id와 object와 흡사하게 적는다.
ex) questionId: 1,
title: "제목입니다~",
content: "콘텐츠입니다~!",
vote: 1,
createdAt: "2022-10-01",
modifiedAt: "",
userInfo: {
userId: "1",
nickname: "junguman",
},
{...}
})(4) 이제 이 데이터를 사용할 파일에 가서 useEffect로 불러온다. id명이나 주소에 오류가 안 나게 조심!!!
3. react-hook-form 사용하기
react-hook-form은 말 그대로 라이브러리에서 form을 제공해준다. 그래서 헤메지 않고 더 쉽게 코드를 짤 수 있다는 장점이!
(1) react-hook-form 라이브러리를 터미널에서 설치한다. npmr과 yarn 모두 설치 가능하다.
npm install react-hook-form // npm으로 react-hook-form 설치하기
yarn add react-hook-form // yarn으로 react-hook-form 설치하기(2) import로 react-hook-form을 사용할 파일 최상단에 불러온다.
import { useForm } from 'react-hook-form';(3) DaleSeo의 블로그에 들어간다! (무책임 탈주ㅋ)
아무튼 더 잘 알려주시는 듯하니 여기서부터는 이 분을 따라하시길! 우리는 Login 페이지 구현을 위해 이 블로그를 참고했고, 결국 성공했다!
오늘 한 것
사용자 요구사항 정의서 작성
.
.
.
완벽한 내용은 아니니 형식에 참고만 하시길. 팀원들에게 공유 허락을 맡은 뒤 풀버전을 업로드 하겠다. 그럼 오늘은 이만!
최종 회고
서류 작성하는 일은 즐겁다. 코드 짜는 것보다 훨씬! 앱을 기획하는 것도. 확실히 내가 주도하고 있다는 기분도 들고... 하지만 일단은 개발자가 되기로 했으니 집중해서 끝내고 최대한 빨리 코딩을 시작해야만 한다!! 팀장님 최고! 팀원들두 화이팅!!
