미니 프로젝트 시작 yarn 설치 명령어 yarn 이렇게 하나의 명령어만 쳐도 그 안의 모듈을 같이 설치해준다. main branch 를 clone 한 후 깃허브에서 dev branch 를 만들면 remote dev branch 가 생긴다. git branch -r 내 vs code 에서 해당 폴더의 원격 브랜치를 확인하면 origin/HEAD -> origin/main origin/dev origin/main 이렇게 확인할 수 있다. 이제 내 local branch에 remote branch dev를 가져와야 한다. git pull origin dev 그러나 내 local branch에 dev가 생기지 않았다. 나의 yarn version 과 remote 에서 설치된 yarn version 이 달랐기 ..
어제 오늘 만났던 수많은 오류들... - .get(`http://localhost:3001/comments`) 여기서 url 을 ‘’로 썼는데 백틱으로 `` 써야 했음 - comments인데 comment로 써서 몇 시간 날리기 - console 창에 뜬 아래의 오류 A non-serializable value was detected in an action, in the path: `payload` -> 미들웨어 추가하니 해결됨 그런데 getDefaultMiddleware 이렇게 보임.. middleware: getDefaultMiddleware({ serializableCheck: false, }), https://guiyomi.tistory.com/116 Redux Toolkit - A non-ser..
리덕스 프로젝트 만들고 toolkit 추가 npx create-react-app [프로젝트 명] --template redux npm i redux npm i react-redux npm install @reduxjs/toolkit npm install styled-components npm install react-router-dom --save ESLint, Pretteir 설치 명령어 npm install eslint prettier --save-dev npx eslint --init npx install-peerdeps --dev eslint-config-airbnb npm install --save-dev eslint-plugin-prettier npm install --save-dev --sa..
Prev KEYWORD 1. HTTP(Hypertext Transfer Protocol) - 상태가 없는(stateless) protocol : 데이터를 주고 받기 위한 각각의 데이터 요청이 서로 독립적. 이전 - 다음 데이터 요청이 서로 관련이 없다. *HTTP 프로토콜은 일반적으로 TCP/IP 통신 위에서 동작하며 기본 포트는 80번 URL(Uniform Resource Locators) : 서버에 자원을 요청하기 위해 입력하는 영문 주소 Http Request Methods - HTTP Verbs : url을 이용해서 Server에 특정 데이터를 요청할 때, 데이터에 특정 동작을 수행하기 위해 이용하는 것 - 주요 매서드 GET - read 데이터 조회할 때 값을 가져올 때 사용함 POST - cr..
리덕스 https://velog.io/@hwang-eunji/%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%A0%95%EB%A6%AC-redux-1 리덕스+리액트 Redux with React #1 설치와 리덕스 개념 리덕스 Redux 공식문서 스토어라는 가상공간에 데이터를 모아두어, 필요한 컴포넌트에서 데이터를 가져다 사용,변경 할수 있다.중간 컴포에게 데이터전달-전달-전달 하지 않고, 중앙관리되는 데 velog.io https://velog.io/@lchyung1998/React-Redux-Saga-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC%EB%A5%BC-%EB%81%9D%EC%9E%A5%EB%82%B4%EB%B2%84%EB%A0%B8%EB%8B%A4#reducer..
https://todo-list-one-delta.vercel.app/ To-do List todo-list-one-delta.vercel.app https://github.com/123456soobin-choi/TodoList GitHub - 123456soobin-choi/TodoList: project_TodoList_React project_TodoList_React. Contribute to 123456soobin-choi/TodoList development by creating an account on GitHub. github.com React-redux 숙련 주차 개인 과제_TodoList v.2 - v2.0.0 수정 및 추가한 기능(과제 요구사항 외) 1. favicon 넣었음 - 북마..
React 숙련 주차 개인 과제 react-router-dom, styled-components, redux를 사용해서 My Todo List 다시 만들기 - Requirement todos 데이터는 React-redux 를 사용해서 전역으로 상태를 관리 todo modules - Ducks pattern Todo 추가하면 제목과 내용 input 다시 빈 값이 되도록 구현 input에 값이 있는 경우에서 상세페이지로 이동하는 경우, input의 value가 초기화되도록 구현 상세보기 클릭하면 상세페이지, 이전으로 클릭하면 리스트 화면으로 되돌아가기 기능 및 요구사항 구현 완료 React 입문 주차 팀 과제 🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사 배열의 각 요소를 수정하고 싶다면 어..
1. 모듈 초기값 만들기 todo.js //초기값 const initialState={}; //리듀서 : 인자로 state와 action받는 함수 const reducer = (state = initialState, action){ switch (action.type){ default: return state; } }; //반드시 reducer를 export default 해야 함 export default reducer; ex) const initialState = { todos: [{id: 1, title: "react"}], }; const reducer = (state = initialState, action) => { switch(action.type){ case "ADD_TODO"://추가하는..
REDUX npm 명령어 리액트 + 리덕스 프로젝트 시작하기 $ npx create-react-app [프로젝트명] --template redux 기존 리액트 프로젝트에 리덕스 추가하기 $ npm i redux $ npm i react-redux 해당 프로젝트 vs code 터미널에서 styeld-components 설치 $ npm install styled-components 폴더 세팅(이거 아님) src/configStore.js 설정 코드 추가 import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 리덕스는 단일 스..
터미널 꾸미기, 예쁜 게 최고야! 미련 못 버리고 다시 건드린 oh my zsh(z-shell)! 파일을 다 지우고 다시 설치했다. 노마드 코더 아저씨의 강의를 보며 하나하나 따라하고 에러가 나면 해결될 때까지 폭풍 구를링을 했다. 예쁜 사과와 아이콘들이 잘 보인다! 🍎📂🏠 너무 뿌듯해서 바로 캡쳐했다. 그런데 리액트 파일을 실행하니 한글이 다 깨져서 보였다. "fontFace": "MesloLGS NF", 그래서 저 부분을 추가했더니 해결됐다. - zsh path 경로가 안 맞아서 code . 이 터미널에서 실행이 안되는 문제도 있었는데 terminal.integrated.profiles.widows 안에 있는 path : "(여기)"를 지우니 해결됐다. (이제 터미널로 vscode를 실행할 수 있고 ..