TIL
-
[22.12.12] TILTIL 2022. 12. 19. 21:14
오늘은 Todolist 혼자 만들어보기를 했는데, ㅎㅎ 잘 안된다. 뭐부터 해야될지 조금 막막한 느낌이랄까? 익숙해지지 않아서 그런 것 같다. 그리고, 오늘 TIL에 꼭 적고싶은 오류가 있었다. react-jsx-dev-runtime.development.js:87 Warning: Each child in a list should have a unique "key" prop. Check the render method of `TodoList`. See https://reactjs.org/link/warning-keys for more information. at Todo (http://localhost:3000/static/js/bundle.js:362:5) at TodoList (http://local..
-
[22.12.10] TILTIL 2022. 12. 19. 21:13
todo list를 계속 만들고있다. 오류는 나지 않는데 onSubmitHandler가 작동하지 않는다. 이유가 뭘까? AddTodo.jsx 파일 29번째줄 state.todos.todos 콘솔에 출력하면 const initialState = { todos:[ { id: 1, title: '리액트 강의보기', body: '챕터 1부터 챕터 12까지 학습', isDone: false, }, { id: 2, title: '점심 먹기', body: '점심 뭐먹지..?', isDone: false, }, ] }; 이 내용이 잘 나오고 있다. 이것때문은 아닌것같고.. 뭔가 내가 문법을 잘못쳤나 ㅠㅠ 일단 자고 내일 일어나서 한번 더 찾아보고 튜터님께 물어보거나 커뮤니티에 질문글 올려야겠다.. -----------..
-
[22.12.09] TILTIL 2022. 12. 19. 21:12
TODO LIST 만들기 2번째~~ redux,styled component, router 를 이용해서 만들어보고 있다. 일단 레이아웃을 짜야할 것 같아서 레이아웃 먼저 만들고있다. children 사용해 header,footer 페이지에 연결하기 이건 생각보다 간단했다. shared 폴더에 Layout.jsx 폴더를 만든다. children을 구조분해할당으로 매개변수에 넣어 땡겨준다. header footer import 해오기 header,footer 컴포넌트를 return문 안에 넣고 그 사이에 {children} 입력 router.js 가서 BrowserRouter 컴포넌트 바로 안에 Layout 컴포넌트 집어넣기 잘 연결이 되었다. styled component 만들기 지금 컴포넌트를 잘게잘게 ..
-
[22.12.08] TILTIL 2022. 12. 19. 21:11
오늘 배운 것 react 숙련주차 완강 정리본 업로드 styled-components useState 함수형 업데이트 useEffect Redux(1)-설치 및 counter app 만들기 Redux(2)-action creaotr, payload Redux(3)-react-router-dom, props children, Dynamic Route 새벽 2시까지 다 들었다아아아아......넘힘드렁.. 근데 react 강의 퀄이 생각보다 만족스럽다. 약간의 편집에러가 있었던 것 같지만.. 정리하는데 조금 애를 먹긴 했는데, 전부 다 정리를 하면서 실습을 해보니 머릿속으로 정리가 되고 손에도 조금 익는 것 같기도 하고.. 내일되면 또 까먹을 것 같긴 한데 내일부터는 todolist를 다시 만들어보려고 한다 ..
-
[22.12.07] TILTIL 2022. 12. 19. 21:11
오늘 투두리스트를 만들며 배워본것을 적어보고자 한다. //App.jsx {todos.map((todo) => { if (todo.isDone == true) { return ( ); } })} 이렇게 props로 정보를 전달해주기 위해서는, "무엇을" "무슨이름으로" 전달해줄지 명시를 해주어야 한다. export default function Cards(props) { return ( {props.todo.title} {props.todo.todo} { props.handleDelete(props.todo.id); }} > 삭제하기 { return props.todo.isDone ? props.handleCancel(props.todo.id) : props.handleComplete(props.todo...
-
[22.12.06] TILTIL 2022. 12. 19. 21:10
json에 대해 보충강의를 듣다 fetch('https://jsonplaceholder.typicode.com/todos/1') .then((res) => res.json()) .then((data) => { console.log(data); }); 이 문구만 봤을 때 음..뭐지 이해가 잘 되지 않았는데, 어제 보충수업을 통해 완벽히 이해해버렸다. fetch 는, json에서 프로미스 형식의 객체로 자료들을 가지고 오려고 사용한다. 첫번째 then은, fetch에서 자료들을 정상적으로 다 가지고 왔을 때 실행된다. 첫번째 then이 실행될 때 (res) => res.json() 은 가지고온 자료 중에서 body 부분만 따로 프로미스 형식의 객체들로 추출하는 함수이다. 두번째 then은, 첫번째 then의..
-
[22.11.30] TILTIL 2022. 12. 19. 21:08
프로젝트가 끝나니 뭔가 후련하기도하고 정든 팀원들과 헤어져야 한다니 아쉽기도 하다. 새로운 팀원들을 만날 생각에 기대도 된다. 그렇게 오늘하루를 시작, javascript 심화과정을 시작했다. 음.. 영상을 줘서 보는데 심화라서 그런지 딥하게 들어가는것이 아주 좋았다. 오늘은 데이터 관련해서 배웠는데 기본형,참조형 데이터 배울 때부터 조금 어려웠다. 류제천튜터님을 괴롭히고 난 뒤 이해가 되었다. 그리고 불변객체에서 얕은복사와 깊은복사가 나왔는데 음....... 얕은복사는 이해가 됐는데 깊은복사는 무슨말인지는 알겠는데 한번 직접 써봐야 이해가 잘 될 것 같다.(2중..3중 for문이 들어간다..) 깊은복사에서 재귀 라는 단어가 나왔는데 개발자 커뮤니티에서 질답에 재귀 얘기를 많이 들었다. 뭔지 궁금한데 배..
-
[22.11.23] TILTIL 2022. 12. 19. 21:07
기초프로젝트 진행중..죽을거같..지만 많은것을 배웠다. 오늘 배운것 및 느낀점을 나열해보고자 한다. 안될때는 의심가는곳에 콘솔 찍어보기 로그아웃 함수 export const logout = (event) => { event.preventDefault(); // a태그가 가지고있는 새로고침하는 기본 이벤트를 없애줌 console.log('로그아웃클릭'); signOut(authService) .then(() => { // Sign-out successful. localStorage.clear(); console.log('로그아웃 성공'); }) .catch((error) => { // An error happened. console.log('error:', error); }); }; a태그는 기본적으로 누..
-
[22.11.18] TILTIL 2022. 12. 19. 21:06
14일차는 깜박하고 못썼다.. 이날은 음.. 기초 프로젝트 시작하는 날으로 와이어프레임 짜고 html,css 구성하는거 연습으로 끄적였던 것 같다. 와이어 프레임 짜는게 이렇게 힘들줄은.. 여러명이서 의견을 내고 괜찮은 의견을 골라서 적용했는데, 5명이 의견을 내다보니 조금 힘들었던 것 같다. 역시 창의적인 활동은 힘든것 같다;;;; 오전부터 오후까지 계속 회의를 하고, 오후에 특강듣고 또 회의하고... 결국 와이어프레임은 저녁시간까지 완성하고, 기능분담도 다 마쳤다. 와이어프레임을 너무 잘 만드신 팀원분이 계셔서, 정규시간이 끝나고 html,css로 와이어프레임과 비슷하게 만들어본 것 같다. 거의 한 5시간..? 걸린 것 같은데, 퍼블 실력이 많이 늘은 것 같다. 이제 flex를 어디에 줘야 원하는 레..