코딩연습장

// src/App.jsimport React from 'react';import { useSelector, useDispatch } from 'react-redux'; // import 해주세요.const App = () => { const dispatch = useDispatch(); const number = useSelector((state) => state.counter.number); return ( { dispatch({ type: 'PLUS_ONE' }); }} > +1 { ..

1. 리덕스 라이브러리 설치yarn add redux react-reduxredux와 react-redux 라이브러리 두개를 한번에 설치한다. 2. 모듈, 스토어를 분리해둘 폴더를 생성한다. 3. 스토어 파일을 작성한다.//configStore.jsimport { createStore } from 'redux';import { combineReducers } from 'redux';const rootReducer = combineReducers({});const store = createStore(rootReducer);export default store;1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드이다. 리덕스는 단일 스토어로 모든 상태 트리를 관리하며, 리덕스를 사..

프로그래머스 - 성격유형검사하기survey, choices 각 순서에 맞는 요소들이 해당 성격유형에 점수를 매기는 걸 결과를 리턴하는 함수를 만드는 것이다.   먼저 작성한 코드function solution(survey, choices) { var answer = ''; let scoreMap = new Map() scoreMap.set('R', 0).set('T', 0).set('C', 0).set('F', 0).set('J', 0).set('M', 0).set('A', 0).set('N', 0) for (let i = 0; i 4) scoreMap.set('T', scoreMap.get('T')+Math.abs(4-choices[i])); br..

프로그래머스 햄버거 만들기 주어지는 ingredient배열 중 1, 2, 3, 1 순서로 되어있는 요소를 제거하고, 다시 제거된 배열에서 1, 2, 3, 1이 없을때까지 해당 순서의 개수를 찾는 문제이다.   먼저 작성한 코드function solution(ingredient) { var answer = 0; let ingredientStr = ingredient.join('')+'' if (ingredientStr.includes(1231)) { do { ingredientStr = ingredientStr.replace(1231, '') answer++ } while (ingredientStr.includes(1231))..

Batching이란?리액트의 useState훅에서 setState는 state 값을 바꾸면서 리렌더링을 유발한다.이 때 여러번 setState를 사용하여 여러번 리렌더링을 하게되면 효율적이지 못하므로 일괄적으로 모아서 처리하는것을 batching이라 한다.batching을 이용하여 리액트는 불필요한 리렌더링을 방지한다.  Batching필요성 예시만약, 우리가 버스를 탔을 때 하차벨을 누른 즉시 버스가 멈추고 해당 승객이 하차한다고 가정해보자.그렇다면 짧게는 몇초, 길게는 몇십초마다 버스가 멈추고 하차한뒤 다시 버스가 출발할 것이다.다수의 인원을 정해진 구역마다 돌아다니며 수송시키는 대중교통의 목적성에 어긋난다. 따라서 우리는 정류소를 지정하고, 하차벨을 누르면 정류소에 버스가 정차하여 하차를 원하는 승..

초기엔 이렇게 컴포넌트를 나눠 재사용하려 했다.하지만 코드를 작성하면서 TodoBox의 존재이유를 잘 모르겠어서 TodoBox를 삭제하고 InputBox안에 합치는 컴포넌트를 하나 넣기로 하였다.이렇게 한 이유는 기능적인 부분에서 나왔다. InputBox에서 Todo를 추가하면 해당 TodoList 배열 변화가 아래 TodoList 컴포넌트에도 전달되어야한다.만약 InputBox와 TodoList컴포넌트가 완전히 분리되어있었다면, App.js에서 state를 관리해야하므로, 쓸모없는 리렌더링이 일어날 수 있어 TodoList를 InputBox에 넣기로 결정하였다. import React, { useState } from 'react';import CustomInput from './commons/Cust..

Map 객체는 키-값 쌍인 집합이다. 한 Map에서의 키는 오직 단 하나만 존재한다. 이를 Map의 유일성이라 한다. Map은 다른 객체들과 동일해 보인다. 또한 객체와 비슷한 방법으로 데이터를 넣을 수도 있다.const wrongMap = new Map();wrongMap['wrong'] = 'wrongMap!'console.log(wrongMap); // Map { wrong: 'wrongMap!' }객체 형식으로도 데이터를 넣을 수도 있지만, Map이 제공하는 메서드로 접근할 순 없다.const wrongMap = new Map();wrongMap['wrong'] = 'wrongMap!'console.log(wrongMap); // Map { wrong: 'wrongMap!' }wrongMap.ha..

프로그래머스 - 대충 만든 자판 어떤 버튼을 반복해서 누르면 keymap의 각 요소대로 순서대로 나온다. (스마트폰 천지인 자판, 피쳐폰 자판)이때 targets의 각 요소마다 몇번의 자판누름이 필요할지 각각 배열에 넣어 리턴하는 함수를 만드는 것이다.다만, keymap 배열로 만들 수 없는 targets요소가 있다면, -1을 리턴해야한다.  처음엔 keymap의 요소를 모두 split시키고, 반복문에따라 targets의 각 요소를 split시켜 비교해 결과를 낼 생각이었다.하지만 코드를 작성하면서 이게 맞나 싶었다. keymap과 targets 배열의 요소가 각각 100개까지 가능했고, 각 원소의 길이도 100까지 가능했기 때문이다.비교하는 과정과 계속 split을 시켜야하는 부분에서 시간적으로 손해일..

이전에 만들었었던 todolist 관리 페이지를 만들고자 한다. 재활치료하는 느낌으로 리액트 props를 내려주고 state를 바꾸고하는 과정들을 연습해보고자하는 의미이다.CRA이후 추가한 라이브러리는 없으며, 기회가 된다면 TodoList를 저장할 firebase나 supabase를 사용해볼 생각이다. 현재까지 진행한 상황은 다음과 같다. 일단 페이지를 먼저 나누어 보았다.제일 위에 있는 Header부분Todo를 추가하기 위한 inputBox부분todo의 상태에 따라 다르게 저장하는 todoList부분 코드 작성을 시작하기 전 inputBox의 input과 inputBox, todoList에 반복되어 사용되는 button, todoList에 반복사용되는 todo, title, todo를 모아두는 tod..

학생의 수n / 체육복을 잃어버린 학생 목록 lost / 여벌의 체육복을 가지고있는 학생목록 reserve 가 인자로 들어온다.여벌의 체육복을 가진 학생의 번호 양옆으로만 체육복을 빌려줄 수 있다.체육복을 가진 학생만 체육수업을 들을 수 있다고 할 때, 가능한 최대의 수는 얼마인지 리턴하는 문제이다. 먼저 작성한 코드function solution(n, lost, reserve) { var answer = n; lost.sort((a,b) => a-b) reserve.sort((a,b) => a-b) let realLost = lost.filter((x) => !reserve.includes(x)) let realReserve = reserve.filter((x) => ..