TIL:: Today I Learned

1. Facts (사실, 객관)

오늘은 하루종일 리액트 선발과제 작업해서 제출했다.

버전관리 공부 및 리액트 복습할겸 처음부터 꼼꼼하게 다시 해봤다!

• 프로젝트 초기세팅 구글링
• 커밋 컨벤션 구글링
• 버전관리(브랜치, 커밋 메세지⭐)
• 협업용으로 .prettierrc파일, jsconfig.json파일 생성 및 README.md 작성
• 로컬스토리지를 이용하여 to-do list 저장
• 프로그래머스 0단계 코테
• 코테 스터디

https://github.com/lizzieFEstudy/todolist-advance

GitHub - lizzieFEstudy/todolist-advance: 리액트 선발과제 투두리스트 웹사이트

https://console-log.tistory.com/116

[프로그래머스 Lv. 0] 모스부호 (1)

 

 

2. Feelings (느낌, 주관)

꼼꼼하게 해보려니 생각보다 신경쓸게 많았다

 

3. Findings (배운 점)

컴포넌트를 나누는 기준

리액트는 데이터가 변경되면 그림을 다시 그려줌
검색창에 입력하면 검색창 부분을 계쏙 다시 그림
컴포넌트화해놓으면 검색창만 다시 그림. 전체가 아니라
return위에 기능도 컴포넌트에 옮겨주는게 맞음

state가 기준. 왼쪽에 있는놈 기준!! 걔가 바뀌는게 어디까지 영향을 미치는지.

useState 담긴 함수 전체가 다시 그려져서 나는 app파일이 다 그려지는 듯.

(조원분이 공유해주신 자료)https://velog.io/@sharphand1/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%B6%84%EB%A6%AC-%EA%B8%B0%EC%A4%80%EC%9D%84-%EC%95%8C%EA%B2%8C%EB%90%98%EB%8B%A4

리액트 컴포넌트 분리 기준을 알게되다...

 

리액트 useState에서 localStorage이용하려면

useState(() => JSON.parse(localStorage.getItem("todo")) || [])

 

리렌더링 기준이 useState값이기 때문에

해당 state 아래에서 localStorage를  한번만 setItem해주면

다른 삭제, 수정 이벤트에 별도 코드 추가없이도 localStorage 값이 업데이트 되는 셈

let [todo, setTodo] = useState(getData);
localStorage.setItem("todo", JSON.stringify(todo));

 

 

커밋 메세지틀 정리해서 사용 

• first commit
  cra 후, 폴더 및 파일 정리
• design(*): Add markup and CSS
  퍼블리싱
• feat(Todo): Create a to-do list
  작성
• feat(Todo): Read to-do lists
  조회
• feat(Todo): Update done status
  상태변경
• feat(Todo): Delete a to-do list
  삭제
• feat(Todo): Add localStorage
  로컬스토리지 추가
• refactor(*): Refactor components
  리팩토링
• docs: README.md, jsconfig.json, .prettierrc
  리드미, 협업 파일들 작성(first commit에서 했어야하는 부분인데 깜빡해서 뒤늦게 추가..ㅎ)
• feat: overview.png
• 미리보기 이미지 파일 추가

 

 

(커밋 메세지)https://nohack.tistory.com/17

느낌 있는 Commit Message 작성하기

(CRA초기 세팅)https://rrecoder.tistory.com/110

[React] CRA로 프로젝트 초기 세팅

(.prettierrc파일 설정값)https://velog.io/@planethoon/.prettierrc-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95

.prettierrc 기본 설정

 

 

4. 자기선언

간단해보이는 프로젝트였는데, 차근차근 다시 해보니까 생각보다 신경쓸게 많았다. 

이제 프로젝트들 다 끝냈으니 내일은 이번 주에 공부한 내용들을 정리하는 시간을 가져야겠다!