826(금) 새로운 한 주가 시작됐다.
이번 주차는 리액트 심화 과정이고 개인 과제가 아니라 팀 프로젝트를 한다.
우리 조는 <독서 후기 공유 페이지>를 만들 예정이고
페이지는 홈(List) / 기록하기(Form) / 상세페이지(Detail + 댓글창)으로 구성하기로 했다.
사다리타기로 역할을 나눈 결과 나는 Form을 맡게 되었다.
- 작성자
- 책 이름
- 내용
- 이미지 업로드 (파일찾기 버튼)
- 버튼: 취소 / 추가
추가할 기능
유효성 검증 기능 (ex.제목 10자 이하 기입) => Alert로 안내하기
Form에서 모든 input에 값을 입력하지 않으면 버튼 비활성화
- Chanllenge 기능 구현
Form의 유효성을 체크하고, 유효성을 체크하지 못했을 때 사용자에게 유효성을 체크하지 못한 이유에 대해서 안내하는 기능을 구현하기
중간회고1) 1pm
<코딩애플 git/github 강의>
git: 버전 관리 프로그램 (파일 버전 기록)
repository: git이 파일을 기록해두는 장소
(git기능 쓰고 싶으면(git repository생성하는 거) ) git init
git add .
git commit -m '커밋메시지'
git branch 브랜치명
git switch 브랜치명
git log --graph --oneline --all
git status
git merge 브랜치명 (git status, master에서 브랜치 합치는 거 주의 => git log로 확인)
! merge conflict 발생시 : 파일 열어서 어떤 코드 남길지 결정 후 수정하고 git add. / git commit -m '메시지'
git branch -M main (깃허브는 master말고 기본 브랜치 이름 main으로 해야 된다고 함)
중간회고2) 3pm
소연님이 git repository 만드셔서 브랜치 생성 후 Form 구현 시작!
리액트 프로젝트 시작시
yarn add react-router-dom 패키지 설치
yarn add styled-components
yarn add redux react-redux
yarn start
trouble shooting)
1. Uncaught Error: Cannot find module 'styled-components'
styled-components를 설치했는데도 이런 에러가 나와서 vscode 재실행하니까 해결됨.
중간회고3) 6:30pm - 팀 회의
오늘 html 구현 완료할 것
- 이미지 업로드 후 바로 미리보기 구현
(미리보기 방법 찾아보다가 accept="image/* 를 넣으면 이미지 파일만 업로드되게 할 수 있다는 걸 알았다.)
회고4) 11pm
html 구현 완료
리덕스 툴킷 설치 yarn add react-redux @reduxjs/toolkit
