본문 바로가기

전체 글

[2023.07.06] 개발일지 2023. 7. 9. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 import { useNavigate, useParams } from 'react-router-dom'; import { useSelector } from 'react-redux'; import { styled } from 'styled-components'; function Detail() { const todos = useSelector((state) => { return state.todos }); const todo = todos.filter((todo) => todo.id === id)[0]; const navigate = useN..
[2023.07.05] 개발일지
[2023.07.05] 개발일지 2023. 7. 9. 리듀서 부분에 액션 함수 title_INPUT과 body_INPUT을 각각 하나의 객체 title, body로 작용하는 것을 하나의 input액션 함수로 합쳐보았다. 1 2 3 4 5 6 7 8 9 10 11 switch (action.type) { case INPUT: return [ ...state, { id: shortid.generate(), title: action.payload.title, body: action.payload.body, isDone: false, } ]; cs 리듀서 부분을 이렇게 짜고 1 2 3 4 5 6 7 { dispatch(addTodo({ title, body })); setTitle(''); setBody(''); }}>추가하기 Colored by Color Scr..
[2023.07.04] 개발일지
[2023.07.04] 개발일지 2023. 7. 9. 여전히 todo list를 만드는 중 문제가 하나 발생했다. title input값과 body input값이 화면에 출력되어야하는데 title input값밖에 출력되지 않는 문제였다. todos의 리듀서 부분에 state 데이터를 넣어주어야 값이 반영되는데 그것을 넣지 않은 것이 문제였다.
[2023.07.03] 개발일지
[2023.07.03] 개발일지 2023. 7. 9. 드디어 Level 2 과제를 시작!! map() 메서드를 사용해서 input태그에서 받아온 값을 todo list 객체에 추가하고 그 업데이트된 todo list 값을 화면에 출력헤보려고 하는 과정에서 에러가 발생했다. 내가 짠 코드는 이러한데 문제가 되는 것은 map() 메서드를 사용해 title 요소의 값을 출력해주려면 고유 key값이 필요하다는 것이다. 그래서 나는 고유 key값을 입력해 코드를 짜 보았다. 1 2 3 {data.map((item) => { {item.title} })} Colored by Color Scripter cs 고유 key값을 지정하니 원활하게 출력이 되는 것을 확인할 수 있었다. Map() 메서드를 사용해 화면에 배열의 값을 차례로 출력하려고 할 때 고유 Key값을 지정..
WIL Week 04 [7월 둘째 주] : State, props, 리렌더링 발생 조건 2023. 7. 9. ◈ 이번 주 나에게 어떤 일들이 있었는가... react 숙련 주차 강의를 마무리하고 레벨 2 과제에 돌입했다. 레벨 2 과제는 저번 주와 똑같은 My Todo List를 만드는 것이었지만 이번에는 redux와 route-DOM를 사용해서 UI들을 완성하고 새로운 페이지로 이동해서 todo list의 id, 제목, 내용을 화면에 띄워주는 과정이 추가된 과제였다. 페어를 통해 redux와 route-DOM을 어떻게 활용해야 할지 고민하며 해결해 나간 한 주였다. ◈ 이번 주 나는 어떤 감정을 느꼈나... 과제를 이어나가는 동안 정말 내가 해결할 수 없는 거대한 벽을 만난 느낌이었다. 분명 같은 강의를 들었음에도 남들은 금방 해결해나가는 것처럼 보인 것과 다르게 나는 눈 앞의 작은 에러조차 어찌할 바를 모르..
WIL Week 03 [7월 첫째 주] 2023. 7. 2. ◈ 이번 주 나에게 어떤 일들이 있었는가... 주특기 1주차; react 입문 주차 강의를 완강하고 강의를 토대로 LV 1 과제인 My Todo List 를 완성해서 제출 하는 것이 목표. 강의를 완강 후 과제를 푸려고 했으나 시작조차 하지 못했고 팀원들에게 질문을 하고 수 많은 구글링을 통해 어찌저찌 과제를 제출하는 데는 성공했다. 그 후 이어진 테스트에도 통과했다. ◈ 이번 주 나는 어떤 감정을 느꼈나... 이번 주 과정을 통해 정말 뼈저리게 느낀 것은 실전에서 프로젝트를 절대 혼자서는 진행할 수 없다는 것과 기본적인 단어들의 숙지와 코드 작동 원리를 확실하게 이해해야한다는 것이다. ◈ 이번 주 나는 어떤 것을 배웠나... 조건에 맞는 새로운 값을 계속 재할당해주는 state와 컴포넌트 분리법, 그리..
[2023.06.30] 개발일기
[2023.06.30] 개발일기 2023. 6. 30. 강의를 들으면서 같이 따라하다보니 분명 똑같이 따라했을텐데도 강의 선생님과는 다르게 어떤 오류가 발생한다. 부모 컴포넌트인 App.jsx 파일에서 TestPage를 찾을 수 없다는 에러 메세지. 확인해보니 자식 컴포넌트인 TestPage 파일에서 TestPage를 import해오지 않아서였다. import TestPage from './TestPage'; 를 입력하니 간단하게 해결되었다. 오류는 이것 뿐만이 아니다. 이번에 뜬 에러 메세지는 이거다. 무언가 알아보기 힘들 정도로 길게 써져있는 메세지지만 그렇게 어려운 메세지는 아니다. 해석하자면 문자열의 읽기 전용 속성인 'length'에 할당할 수 없다는 내용. 내가 짠 코드 전체를 확인해보자면 1 2 3 4 5 6 7 8 9 10 11 12 13 14..
[2023.06.29] 개발일지
[2023.06.29] 개발일지 2023. 6. 29. My Todo List를 제작해서 배포하는 이번 주 테스트! 대체적으로 테스트 전 제출했던 과제에서 오히려 간소화된 문제여서 어렵지 않게 풀 수 있었다. 하지만 그렇다고 문제점이 아예 없었던 건 아니었다. useState()를 이용해 todo값을 iuput에서 입력한 값으로 새로 set하게끔 하고 그 값을 출력하게 만드는 과정에서 문제가 발생한 것이다.분명 todo의 text값을 div내에 렌더링하도록 만들었다 생각했는데 todo의 초기값을 설정했음에도 그 처음 값이 나오지 않는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 return ( 추가하기 My Todo List {todo.text} ); Colored by Col..

티스토리툴바