[네번째 프로젝트/개인] 투두리스트 만들기

작업 기간 및 요구사항

1. Lv 1 과제 : 6/14(1일)
   • 리액트를 이용하여 Todolist 사이트 만들기
   • CRUD
2. 선발 과제 추가기능: 6/15(1일)
   • ES6 문법(Template Literals, Destructuring, Spread Operator, Arrow Functions) 사용
   • LocalStorage
   • Git-flow
   • 의미있는 Commit 메시지 작성 및 PR 생성
3. Lv 2 과제: 6/21 ~ 6/22(2일) 
   • react-router-dom
   • styled-components
   • redux

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

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

 

 

---

배운 점

• CRA 프로젝트 생성 후 불필요한 파일 정리하기
  https://rrecoder.tistory.com/110
• .prettierrc 기본 설정
  https://velog.io/@planethoon/.prettierrc-%EA%B8%B0%EB%B3%B8-%EC%84%A4%EC%A0%95
• 리액트 폴더구조
  https://velog.io/@jhjeong00/React-%ED%8F%B4%EB%8D%94-%EA%B5%AC%EC%A1%B0%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0
• 컴포넌트 분리
  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

 

• commit 메세지 스타일 가이드
  https://blog.ull.im/engineering/2019/03/10/logs-on-git.html
  https://overcome-the-limits.tistory.com/entry/%ED%98%91%EC%97%85-%ED%98%91%EC%97%85%EC%9D%84-%EC%9C%84%ED%95%9C-%EA%B8%B0%EB%B3%B8%EC%A0%81%EC%9D%B8-git-%EC%BB%A4%EB%B0%8B%EC%BB%A8%EB%B2%A4%EC%85%98-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
  https://greenzoo.tistory.com/36
  https://velog.io/@wkdgus7113/git-%EC%BB%A4%EB%B0%8B-%EC%BB%A8%EB%B2%A4%EC%85%98
  https://nohack.tistory.com/17
  https://velog.io/@wkdgus7113/git-%EC%BB%A4%EB%B0%8B-%EC%BB%A8%EB%B2%A4%EC%85%98
  https://sungwookoo.tistory.com/1
• readme가 소개와 개요라면 Github Wiki는 사용설명서와 같은 것입니다.
  Read me에는 어떤 프로젝트인지, 스택, 시스템 아키텍처, 팀원소개 등 내용을 한 눈에 볼 수 있도록 담아야 한다.
  해당 프로젝트의 버전, 이전 버전과 변경사항들, 파일 목록, 시스템 구조도 등을 작서앟여 사용자들이 특이 사항들을 바로 알 수 있다.
  https://velog.io/@movie/Github-Github-Wiki-%EC%93%B0%EA%B8%B0
  https://chunggaeguri.tistory.com/entry/GitHub-Wiki%EB%9E%80
• Github Projects, Issues
  https://codesyun.tistory.com/322
  https://devlog-wjdrbs96.tistory.com/227

 

• 중복되는 코드를 커스텀 훅스로 만들기
  https://velog.io/@ahsy92/React-LocalStorage-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
• setState의 Batch 처리
  https://velog.io/@juunghunz/ReactuseState-setState-%EC%9D%B8%EC%9E%90-%EA%B0%92-%ED%95%A8%EC%88%98
• useState로 local storage 관리
  const [todo, setTodo] = useState( () => JSON.parse(localStorage.getItem("todo")) || [] );
• Redux Persist로 local storage 관리하기
  https://haragoo30.medium.com/redux-persist%EB%A5%BC-%EC%86%8C%EA%B0%9C%ED%95%A9%EB%8B%88%EB%8B%A4-94cb7c8d7020

 

• Styled-components Naming Convention 이름 규칙
  https://usgnuscodenote.tistory.com/entry/Styled-components-Naming-Convention-%EC%9D%B4%EB%A6%84-%EA%B7%9C%EC%B9%99
• Styled-components S-dot 네이밍
  https://velog.io/@sonic/%ED%9A%8C%EA%B3%A0-Styled-Components%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B0
• Styled-components, S 객체로 묶어서 관리하기
  https://velog.io/@rayong/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%93%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-S-%EA%B0%9D%EC%B2%B4%EB%A1%9C-%EB%AC%B6%EC%96%B4%EC%84%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0
• Styled-components props 전달 시 $ 붙여서 사용 
  https://github.com/Devfolio-team/Devfolio-Client/wiki/styled-components-%EC%8A%A4%ED%83%80%EC%9D%BC-%EA%B4%80%EB%A0%A8-props-%EC%A0%84%EB%8B%AC-%EC%BB%A8%EB%B2%A4%EC%85%98

 

• find 함수: '배열'에서 조건을 만족하는 값을 찾아 그 중 첫번째 '값'을 리턴
  filter 함수: '배열'에서 조건을 만족하는 모든 값을  '배열'의 형태로 리턴
• 리덕스 불변객체로 관리하기 위한 전개연산자
  https://as-you-say.tistory.com/226
•  

ull.im

[협업] 협업을 위한 git 커밋컨벤션 설정하기

Git 커밋 메세지 스타일 가이드 및 Issue 종료하기

styled components 스타일 관련 props 전달 컨벤션

[Github] 협업시 프로젝트(Projects)와 이슈(Issue) 사용하기

[Github] Github Wiki 쓰기

[GitHub] Wiki란

git 커밋 컨벤션

React 폴더 구조에 대한 고찰

React/useState setState 인자 (값, 함수)

.prettierrc 기본 설정

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

[React] LocalStorage 사용하기

Redux Persist를 소개합니다.

느낌 있는 Commit Message 작성하기

git 커밋 컨벤션

 

[Git] commit(커밋) 메세지 스타일 가이드

[Frontend/React] 23. 리덕스의 구조 - 리듀서, 스토어

스타일드 컴포넌트, S 객체로 묶어서 관리하기

[회고] Styled-Components를 사용하며

React Styled-components Naming Convention 이름 규칙

 

 

.