하루 한 걸음, 개발 블로그

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://vercel.com/123456soobin-choi/test-todo Dashboard – Vercel The deployment that is available to your visitors. vercel.com React 입문 주차 시험 전체 코드 - App.js import { useState } from "react"; import "./App.css"; function App() { const [con, setCon] = useState(""); //새로운 값을 담을 con 초기값 선언 const [toDos, setToDos] = useState([]); //con들을 담을 배열 초기값 선언 const onChangeHandler = (event) => { setCon(event..

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 숫자가 중복되는 문제가 있었다..

[index.jsx] import React from 'react'; import {useState} from 'react; import {ActiveCard} from '@component/Card/ActivityCard'; export default function index(){ const [todoList, settodoList] = useState([ { id: 1, title: "리액트", content="공부하기", isDone="false"} ]); const onClick = () => {}; return( Following {todoList.map((todo) => { return })} ) } list가 가지..

🔐 event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요? A: useEffect() 함수 사용해야 합니다! 함수형 컴포넌트에서는 useEffect의 return구문에서 Clean up 함수 적용해야 합니다. ✔️ useEffect(() => {} , []) 는 인자(parameter)로 함수, 배열 두가지를 넣을 수 있다. 함수: render이후에 동작하게 될 함수 배열: deps(dependency), 동작..

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

React 우리 좀 친해지자 🥹 와 진짜 큰일났다 오전까지만 해도 이 생각밖에 안 들었다. 당장 2주 정도 후부터 프로젝트가 시작되는데 리액트의 ㄹ자도 모르겠는 상태였다. 코드를 한 줄씩 뜯어보고 강의를 다시 보고 계속 들여다보니 아주 조금씩 이해가 됐고 기능 구현까지 마칠 수 있었다. 깃허브에서 가져온 코드를 변형한 것이라서 내가 처음부터 끝까지 완벽하게 해낸 것은 아니지만 기술매니저님과 동기분들의 도움으로 ㄹ자는 어렴풋이 보이는 것 같다. 아직 갈 길이 첩첩산중 구만리이다. 중간중간 에러가 떴었는데 toDos를 todos로 적은 오타였다. 기술매니저님께서 조언해주신 'toDos.length +1' toDos 배열의 길이를 이용해서 추가할 리스트의 id값을 구하는 것이 문제 해결의 키포인트였다. 내가 ..