가수면

이번 주는 리덕스와 기타 리액트 훅들을 접하고 연습하는 시간을 가졌다. 생성, 변경, 소멸에 대한 라이프 사이클에 취약했던 함수형 스타일이 떡상할 수 있었던 건 모두 리액트 훅들 덕분아니겠는가. 훅들을 연습하면 할수록, 새로운 기능을 구현해보면 해볼수록 점점 리액트라는 녀석과 제법 친해지고 있는 느낌이 든다. 기술의 발전에 따라, 지식의 축적에 따라 시간이 지날수록 개발하기 편한 환경이 조성되고 있다. C에 뒤를 이어 C++가 나오고 자바, 파이썬, 자바스크립트, 리액트, 리액트 훅... 이렇듯 편하게 코딩할 수 있는 환경에 감사한 마음도 들지만, 한편으로 AI로 인해 박살난 미술계를 보고 있노라니 미래에 대한 불안이 엄습해오는 것도 사실이다. 그런데 뭐, 별 수 있나. 실력 있는 개발자가 되어 살아남는..

예제 코드) input의 useState를 커스텀훅으로 만들어 대체해보기 // src/App.jsx import React from "react"; import { useState } from "react"; const App = () => { // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [title, setTitle] = useState(""); const onChangeTitleHandler = (e) => { setTitle(e.target.value); }; // input의 갯수가 늘어날때마다 state와 handler가 같이 증가한다. const [body, setBody] = useState(""); const onChangeBodyHandle..

Memo input창에 타이핑하면 그때마다 리렌더링 되는 것을 막아줌. // components/Button.js import React, { memo } from "react"; const Button = () => { console.log("리렌더링되고 있어요."); return 버튼; }; export default memo(Button); 그러나 Memo는 아래와 같이 함수를 props로 전달 받게 되면 다시 리렌더링되기 시작하는 한계가 있음 (useState의 변경으로 인해 App.js가 리렌더링되면서 App.js에 있는 함수, 배열이나 객체가 재실행, 재생성되기 때문에 그 값을 props로 부모로부터 넘겨받으면 당연히 리렌더링이 일어남) // components/Button.js import ..

thunk 미들 웨어 비동기 처리. dispatch 를 할 때 객체가 아닌 함수를 dispatch할 수 있게 해줌. thunk 사용하기 간단한 예제) // src/redux/modules/counterSlice.js import { createAsyncThunk, createSlice } from "@reduxjs/toolkit"; export const __addNumber = createAsyncThunk( // 첫번째 인자 : action value "addNumber", // 두번째 인자 : 콜백함수 (payload, thunkAPI) => { setTimeout(() => { thunkAPI.dispatch(addNumber(payload)); }, 3000); } ); 이후 App.js의 액션..

json server 설치 yarn add json-server json server 실행 yarn json-server --watch db.json --port 3001 Axios 설치 yarn add axios 형태 Promise를 기반으로 한 비동기 처리 (async await 이용) // src/App.js import React, { useEffect, useState } from "react"; import axios from "axios"; // axios import 합니다. const App = () => { const [todos, setTodos] = useState(null); // axios를 통해서 get 요청을 하는 함수를 생성합니다. // 비동기처리를 해야하므로 async/a..

redux toolkit 설치 yarn add react-redux @reduxjs/toolkit 순서 1. modules 작성 // src/redux/modules/counterSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0, }; const counterSlice = createSlice({ name: "counter", //모듈의 이름 initialState, reducers: { addNumber: (state, action) => { state.number = state.number + action.payload; }, minusNumber: (state, action) => { st..

코드를 요약하지 않고 정석적인 방법을 적음 useState를 이용해 true, false 값으로 모달창 여닫는 기능 만들어 줌 // 부모 컴포넌트 const Todo = (props) => { const [modalIsOpen, setMdalIsOpen] = useState(false) const deleteHandler = () => { setMdalIsOpen(true) } const closeModalHandler = () => { setMdalIsOpen(false) } . . . {modalIsOpen && } {modalIsOpen && } ) } export default Todo 자식 컴포넌트들 import React from 'react' const Modal = (props) => { ..

해당 프로젝트가 컴퓨터에 설치된 노드의 버전과 맞지 않는 경우 이런 오류가 발생한다. 해결 방법은 두 가지가 있다. 1. 노드를 다운그레이드한다. 2. 터미널을 열고 다음과 같이 붙여넣는다. Linux 및 macOS(Windows Git Bash) export NODE_OPTIONS=--openssl-legacy-provider Windows 명령 프롬프트- set NODE_OPTIONS=--openssl-legacy-provider Windows PowerShell- $env:NODE_OPTIONS = "--openssl-legacy-provider" 3. 그래도 안 될 경우 package.json에서 다음 줄을 변경. "start": "react-scripts start" ↓ "start": "rea..

const data = [ { id: 1, todo: '리액트 배우기' }, { id: 2, todo: '노드 배우기' }, { id: 3, todo: '자바스크립트 배우기' }, { id: 4, todo: '파이어 베이스 배우기' }, { id: 5, todo: '넥스트 배우기' }, { id: 6, todo: 'HTTP 프로토콜 배우기' }, ]; data.map으로 돌려서 붙이려면 위와 같은 형태를 갖춰야함. 변환하는 방법들 .then(data => { const meetups = [] for (const key in data) { const meetup = { id: key, ...data[key] } meetups.push(meetup) } setLoadMeetups(meetups) }) 빈 배..

이번 주차에서 익힌 것들을 정리해보고자 한다. props, state를 이용한 Todo List Todo List 구현 (CRUD) 구조 분해 할당을 통한 코드 정리 리액트 리렌더링 조건에 대한 개념 이해 스프레드 연산자의 다양한 활용법 고유한 ID값에 대한 이해 (...칭찬받음) id: `todos_${new Date().getTime() + Math.random()}` redux redux를 이용한 Create, Read기능 구현 다음 주에는 라우터를 곁들여 나머지 Update, Delete까지 구현해볼 계획이다. 아쉬웠던 점 Update와 Delete 구현에 상당히 애를 먹었었다. 특히나 Update 기능인 완료와 취소를 구현하는 데 있어서 접근법 단계에서부터 막혔었는데, 팀원들과 기술 매니저님에게..

패키지 설치 yarn add react-router-dom 폴더 구성 라우터 설정 Router.js 대문자로 넣었어도 주소는 소문자로도 먹힘 import React from "react"; // 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다. import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../Pages/Home"; import About from "../Pages/About"; import Contact from "../Pages/Contact"; import Works from "../Pages/Works"; // 2. Router 라는 함수를 만들고 아래와..

기본 동작 원리 컴포넌트가 렌더딩될 때마다 실행 // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; } export default App; 의존성 배열 무한 렌더링을 방지해줌 의존성 배열이 빈 배열인 경우 처음 바뀔 때만 useEffect 실행 // src/App.js import React, { useEffect, useState } from "react"; const App = () => { const [value, setValue] = useState(""); useEff..

준비물 'styled-components' 플러그인 styled-components 설치하기( yarn add styled-components ) 스타일 컴포넌트 적용하기 // src/App.js import React from "react"; import styled from "styled-components"; // 1. styled-components를 만들었습니다. const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. margin: 20px; `; const App = () => { return ( /..

리덕스 설치 yarn add redux react-redux 데브툴 설치 npm install redux-devtools-extension // 저장소에 추가해야할 것 import { composeWithDevTools } from "redux-devtools-extension"; const store = createStore(rootReducer, composeWithDevTools()); 리덕스 기본 폴더 구성 초기값, reducer 설정 (modules 폴더) // src/modules/counter.js // 초기 상태값 (useState와 비슷한 역할) // 객체 형태가 아니어도 됨. const initialState = { number: 0, }; // 리듀서 (setState와 비슷한 역할)..

props로 넘겨준 데이터를 props. 찍고 사용하다보면 이게 넘겨 받은 데이터가 무엇인지 읽는 이도 쓴 이도 헷갈려서 다시 부모 컴포넌트로 가는 일이 생길 수 있다. 그런 일을 발생하지 않도록 props를 비구조화 할당해서 보다 명료하게 코드를 짤 수 있다. 부모 컴포넌트 보다시피 부모 컴포넌트인 App에서 TodoList로 data와 setData를 넘겨주고 있는 걸 확인할 수 있다. 자식 컴포넌트 다음과 같이 props가 붙은 것들을 비구조화 할당을 해줌으로써 아래처럼 바꿀 수 있다.

1. 동적 리스트 2. 입력한 데이터 동적으로 출력 3. 필터에 해당되는 값들만 출력하기 반드시 map으로 돌려서 태그로 붙여줘야 값이 제대로 출력됨. 4. 삭제하기 5. 조건부 렌더링 5-1. 조건 1. '완료' 누르면 아래로 가고 '취소' 누르면 위로 올라가게 하기 조건 2. 버튼 글씨 완료 취소로 유동적으로 바꾸기 삼항연산자 쓸 때 반드시 ()붙여야함! 다른 방법 5-2. 버튼 여닫기 열기 버튼을 만들어준 뒤 상태 변화를 적용해줄 useState를 작성하고 핸들러를 작성, 조건부 렌더링 식을 짜주고 부모 컴포넌트로 내려준다. 취소 버튼을 만든 뒤 props적용 6. 동적 차트 만들기

순서 1. 바꿀 부분 지정하고 이벤트 부여하기, useState추가하기 useState 방법 (1) useState 방법 (2) - 추천 X, 이 방법을 쓸 거면 방법 (3) 을 추천 useState 방법 (3) - 이전 상태에 기반하는 방법(ex. 카운터) 1번과 차이점은 1번은 변경이 독립적으로 적용되지만, 이 경우 묶어준 값을 전부 변경해줘야 함. 2. 양방향 바인딩으로 제출하기 기능 만들기 3. 자식 속성을 부모에게 전달시키기 (ExpenseForm의 입력된 데이터를 App의 데이터에 추가 시키기) 3-1. ExpenseForm 데이터를 NewExpense로 전달하기 onSaveExpenseData기능이 활성화되도록 만들기 NewExpense에 적었지만, 그 함수를 다른 컴포넌트에서 실행하도록 만..

이번 주의 대부분은 알고리즘 문제를 풀면서 보냈던 것 같다. 이를 바탕으로 한 주간 겪었던 일들을 간단히 적어보고자 한다. Javascript 함수와 친해지기 화살표 함수와 고차 함수가 중요하다는 소리를 계속 들을 수 있었다. 사실 함수 개념도 헷갈리는 마당에 그런 것들까지 신경 쓸 겨를이 있을까 했었지만... 역시 뭐든 하면 느는 법이었나. 주차를 진행하며 아래의 결과들을 얻을 수 있었다. 함수에 대한 이해도 증가 고차 함수, 삼항 연산자, 화살표 함수에 대한 숙련도 증가 ES6와 친해지기 자바스크립트의 표준과 규격을 가리키는 용어 ES. 고차함수, 화살표 함수와 더불어 ES6가 중요하다는 소리를 귀에 딱지가 앉도록 들었기에 찾은 결과를 쉽게 옮겨보고자 한다. const and let Arrow fun..

순서 1. 컴포넌트 생성 2. 컴포넌트 내용물 채워넣기 3. props 적용 App.js ExpenseItem.js 4. 날짜 컴포넌트 쪼개기 ExpenseItem.js ExpenseDate.js 5. App 목록 부분 컴포넌트로 한번 더 쪼개기 App.js Expenses.js 추가 6. 겹치는 css를 컴포넌트화 둥근 테두리를 Card.js로 만들어서 분리 적용되는 js파일에 Card를 import한 뒤 적용 7. 컴포넌트 정리 각 js파일에 수정된 경로 수정 손코딩하다가 막힌 부분들을 전부 적어봄. 컴포넌트 파일들은 전부 props가 붙음. 마찬가지로 함수에 props도 붙어야 함. App에 Expenses를 그냥 추가하는 게 아니라 ExpenseItem을 삭제하고 import해야 됨 1. App에..

프로젝트 생성하기 yarn create react-app (폴더명) ※ yarn 또는 npx. 경로 설정하지 않으면 사용자 폴더가 기본 경로로 설정됨. https://kim-oriental.tistory.com/14 [Node.js 개발환경] Node.js 및 VS code 설치, Node.js 초기 프로젝트 생성 및 실행 안녕하세요, 윈도 OS 환경에서 Node.js (노드js) 및 VS code (Visual Studio Code, 비주얼 스튜디오 코드) 설치 후, VS Code에서 Node.js 프로젝트 생성 및 실행에 대해 포스팅하도록 하겠습니다. Node.js 설치 먼저, kim-oriental.tistory.com 프로젝트 다운받기 다른 react 파일을 받을 경우 => yarn install..