🏃12/17 내배캠 React(30~34일) 7주차 WIL

회고

 

이번주도 너무나도 빠르게 일주일이 흘러갔다.

react를 이용하여 간단한 todo-list만드는 법을 배웠고, 만드는 과정에서 많은 스트레스를 받았다. 

실력이 너무나도 부족한것 같다는 생각이 들고, 열정도 부족한가하는 생각이 많이 들어 정말 많이 고민했던 일주일 인것 같다.

그래도 제대로 한번 하기로 했으니까 끝까지 높은 텐션, 높은 열정 유지하고, 잘 조절하면서 내배캠에 배우고, 활용할 수 있는 것들은 다 배우고 활용하고 싶다. 자유자재로 활용하고, 조절할 수 있게 열심히 똑똑하게 공부해보자!!

 

 

 

이번주 배운 것

Todo-list 녹화

todo-list녹화 중 오류가 나서 다시 찍었습니다. 몇시간을 날리고 다시 말하면서 찍다보니 어느정도 익숙해져서 공부가 더 많이 된 것 같습니다.

https://www.youtube.com/watch?v=wqLycnHctuY 

" 항상 영상 찍기전 테스트를 해보고 진행합시다..." 제발 제발 다들 메모하세요 🥲

팀 Notion 만들기

매니저님의 조언으로 우리팀 만의 공유할 수 있는 파일을 만들어 보았습니다.

원활하고 의미있는 소통을 위해  노션을 이용하기로 했습니다.

적극 활용해서 조금 더 오늘 배운 내용들, 어려운 것들, 배우고 싶은 것들을 문서화 하는 작업을 진행하고, 팀원들과 소통하여 도움이 되게 해야겠습니다.

 

순서를 글로 작성하며 머릿속에 들어가 있는지 확인해보기

 

• 터미널 - yarn create react-app “파일명 “ 으로 파일만들기
• yarn start
• app.jsx 변경 후 그것부터 설정하기
• 구조잡기
• app.jsx파일 내 header등 테그들 만들기
• 인풋을 만들어 입력하는 부분, 투두리스트를 출력하는 부분 만들기(주석으로 표시하기)
• 컴포넌트 나눠보기src폴더에 하위폴더 componenets를 만들고 Header.jsx파일 생성 후 기본 값 작성
• Input
• Header 컴퍼넌트 만들기
• 자식 컴포넌트 내용 넣기
• 자식 컴포넌트의 children이 들어간 부분을 넣어보기 {children}의 형태여야 함
• import(해당 컴포넌트) export 하기
• Input.jsx 생성
• useState만들기 React에서 데이터를 저장하는 방법은 state이다.const [todos,setTodos] = useState()
• useState import해오기 react로부터
• (투두리스트 조회,편집,삭제,출력 등 하기위하여)
• useState() <-안의 값을 지정해주기 초기값 설정
• // todos : todo라는 객체를 가지고 잇는 배열! { title: '제목1', contents: '내용1', isDone: false, id: },
• uuid설치하기import { v4 as uuidv4 } from "uuid";
• id : uuidv4()
• 터미널에 uuid 설치하기, npm install uuid
• useState의 초기값이 지저분하다면 따로 잘라내서 const로 변수 만들어주기
• const initalState = [ 초기값 ] 을 잴 밑에 만들고, useState(initalState)로 넣기
• todos라는 state값을 만들었고, 그걸 이용하기
• TodoList라는 컴포넌트 생성하기완료된 것들 두가지가 나옴
• todos의 초기값에서 isDone값만 true,false로 변경되면 되니 나머지는 내용이 다 같음
• todo가 완료되지 않은 것들
• TodoList가 두가지니 isActive라는 값을 설정
• isActive={true} / isActive={false}
• TodoList에 초기값 설정해서 넣기
• 같은 형태의 다른 설정값 두개이니 그걸 잘 명심하고 만들기
• TodoList에서 추가하기 버튼 넣기todos state를 활용하여 추가 버튼값을 만든다.
• newTodo라는 초기값을 넣고, setTodos를 이용하여 todos(즉, 해야할것list)에 넣어준다.
• const 변수(handle…)를 만들어 input,form의 성질을 이용하여 onsubmit,onchange에 맞는 값을 만든다.
• Todo의 값이 계속 반복되니 Todo라는 컴포넌트 만들기
• 삭제버튼 만들기삭제버튼 클릭시 → setTodos를 이용하고 filter를 통해서 걸어준다.지금 filtering하면서 돌면서 test.id(삭제버튼 누른 id)가 페이지에 나와있는 item.id와 다르면 남겨두고, 같은 것(클릭한거)은 삭제한다.
• filter(test => test.id !== item.id))
• input.jsx와 비슷하게 진행 하면서
• 완료버튼 만들기같이 setTodos를 이용하고 map을 이용하여 걸러준다.
• “구조분해할당을 이용하라!!!!!”
• 삭제버튼과 비슷하게 진행하돼 → item.isDone값을 true/false로 수정할 수 있게 만들기

노션에서 토글로 글을 작성해서 이런식으로 글이 정리가 되어있는데, tstory에 옮기면서 지저분해졌다..