코딩연습장

//App.js 더하기 빼기먼저 App.js를 다음과 같이 설정한다.input에 숫자를 입력하고 더하기 버튼을 누르면 더해지고, 빼기버튼을 누르면 빼지는 기능을 구현할 것이다.// src/App.jsimport React, { useState } from 'react';import { useDispatch, useSelector } from 'react-redux';import { addNumber } from './redux/modules/counter';const App = () => { const dispatch = useDispatch(); const [number, setNumber] = useState(0); //store에서 state의 counter모듈에서..

function solution(players, callings) { //rank배열 생성 let rank = [...players] //callings의 요소들을 돌면서 해당 순서의 값의 위치를 찾아내 //앞 등수의 이름을 저장해두고, call요소를 앞으로 보내고 저장해둔 앞 등수의 이름을 //call의 등수였던 곳으로 바꿀 생각이다. for (let call of callings) { let presentCallRank = rank.indexOf(call) let aboveRankName = rank[presentCallRank-1] rank[presentCallRank-1] = call rank[presentCallRank..

프로그래머스 - 개인정보 수집 유효기간terms로 제공된 약관 종류에 따라 설정된 유효기간에 맞추어 개인정보 수집일에 더해 현재날짜인 today와 비교하여같은날이거나 지난 개인정보는 answer에 해당 번호를 넣어 리턴하는 문제이다. 처음 작성한 코드function solution(today, terms, privacies) { var answer = []; //비교하기 위해 today를 연 월 일로나눠 배열에 넣음 let todaySplit = today.split('.') let todayYear = todaySplit[0] let todayMonth = todaySplit[1] let todayDate = todaySplit[2] //각 약..

// 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..