하루 한 걸음, 개발 블로그

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를 실행할 수 있고 ..

TodoList 마무리 1. [key] const [inputs, setInputs] = useState({ title: "", content: "", }); //input들의 초기값 선언 const { title, content } = inputs; //비구조화 할당을 통해 값 추출 const onChange = (event) => { const { name, value } = event.target; setInputs({ ...inputs, [name]: value, }); }; Q: 여기서 name과 value 둘 다 있어야 하는지? value 하나만 넘겨줄 수는 없는지? name과 value과 input의 속성을 뜻하는 게 맞는지? name말고 다른 것을 key로 쓸 ..

https://todo-list-react-puce-seven.vercel.app/ React App todo-list-react-puce-seven.vercel.app 내일 시험을 준비하기 위해 알고리즘은 하루 쉬고 오전부터 리액트를 공부했다. 정주혜 기술매니저님이 설명해주신 React 기본과 내 코드 질문과 답변을 정리했다. 처음에는 그냥 녹화 영상만 보다가 이해가 안 돼서 코드를 다 따라쳤다. 데이터를 주고받고 화면에 보여주는 흐름을 이해하는데 집중했다. 내 코드를 component 별로 화면 구성요소 별로 나눠서 리뷰를 했다. 코드 리뷰를 하는 도중에 공백 입력 방지 예외처리를 했다. key값 id를 toDos.length +1 로 하니까 삭제하고 다시 추가하면 id 숫자가 중복되는 문제가 있었다..

희망찼던 오전 ~ 오전까지만 해도 의욕이 가득했다. 프로그래머스 알고리즘 문제를 풀고 깃허브에 업로드하니 뿌듯했다. 신원님 알고리즘 리포 README랑 markdown form가 잘 만들어져 있어서 정리해놓으니 마음에 들었다. 어제 못다 한 언어 스터디 발표 준비(예외처리 - try catch finally)를 마저 했었다. 다행히 시험 준비를 위해 스터디는 금요일에 재개하기로 했다. css는 예시와 똑같이 구현하고 깃허브에 업로드하려고 했는데 오류가 났다. git status git add 폴더 이름 git commit -m “commit-message” git remote -v *원격리포연결 git remote add origin (주소) *레퍼런스 오류 나면 ..