9AM 오전 회의
- Redux toolkit으로 수정
- Modules 파일 두 개로 나누기
- Form: 카테고리 선택 추가
- Form: 이미지 미리보기 구현
중간회고1) 11AM
Redux toolkit수정 완료Modules: comment.js / form.js생성 완료 (sourcetree에서 pull했는데 왜 내 파일에 바로 반영 안 되는지 모르겠다. 그냥 내가 파일 만들고 메인에서 복붙함)Form 카테고리 선택하는 input추가 완료이미지 업로드했을 때 미리보기구현 완료
- 유효성 체크 넣기
중간회고2) 1pm
trouble shooting) 갑자기 localhost:3000/form에서 이미지 업로드하는데 파일선택을 눌러도 반응이 없음.
에러도 아니라서 왜 안 되는지 검색할 수도 없어서 계속 붙잡고 있었는데 localhost:3001로 새로 서버 열었더니 해결
기술매니저님은 가끔 input이 이렇게 말썽을 부릴 때가 있다고 함...
다행히 잘 해결됨. 별일 아니어서 다행이야 ㅠㅠ
중간회고3) 4pm
home이랑 연결했더니 리스트에 input으로 입력받은 값들 잘 들어가는 거 확인. 휴 다행이야 ㅠㅠ 오늘은 일찍 잘 수 있겠다.
이제 카테고리랑 이미지만 들어가게 하면 된다...
구글링구글링
중간회고4) 8pm
- json-server
설치 yarn global add json-server
(trouble shooting 그냥 설치했더니 안 돼서 global 넣어서 전역으로 설치하니까 됨)
json-server가 간단한 패키지이긴 하나, 말그대로 서버 입니다. 그래서 리액트와는 별개로 따로 실행을 해줘야 합니다. 다시 말해 리액트도 start하고, json-server로 start 해야 합니다. 그래야 리액트와 json-server가 서로 통신 할 수 있습니다.
json-server --watch db.json --port 3001
-
Axios
node.js와 브라우저를 위한 Promise 기반 http 클라이언트
다시 말해 http를 이용해서 서버와 통신하기 위해 사용하는 패키지.
설치 yarn add axios -
(1) Axios get
get은 서버의 데이터를 조회할 때 사용합니다. 기본적인 사용방법은 아래와 같습니다.
axios.get(url[, config]) // GET //url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정을 추가할 수 있습니다.
전체 정보나 상세 정보는 아래와 같이 path variable 로 url을 작성하면 되네요.
그리고 filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query로 보내라고 명시하고 있습니다. -
(1) Axios POST
axios.post(url[, data[, config]]) // POST
post는 보통 서버에 데이터를 추가할 때 사용
보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용
