코딩연습장

기존에 CRA로 리액트 프로젝트를 생성하려면 수십초가 걸렸었다. 하지만 vite를 사용하면 다르다!vite가 오래 걸린것으로 보이지만, 직접 프로젝트 명과 프레임워크(라이브러리)를 지정하면 엄청나게 빠르다. 엔터를 누르면 프로젝트가 생성되어있다. 정말 생각지도 못한 속도... 프로젝트 폴더 삭제 또한 빠르다.CRA는 초기 설정을 포괄적으로 잡은 반면, vite는 필수요소만 설치하여 빠른 것이다.또한 필요없는 파일이 없으므로 삭제도 빠르다.   ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev 1. 프로젝트 생성하기yarn create viteyarn create vite 프로젝트명 --template 사용할프레임워크(라이브러리)//ex 리액트 프로젝트 생성yarn create vite ..

//최대 공약수let gcd = (a, b) => a%b === 0 ? b : gcd(b, a%b);//최소 공배수let lcm = (a, b) => a*b / gcd(a,b)

1. 라이브러리 설치yarn add json-server //json server 추가yarn add axios //axios 추가 2. 공식문서를 통해 사용법 확인하기 시작하기 | Axios Docs시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코axios-http.com  json-server[](https://github.com/typicode/..

프로그래머스 - 이진 변환 반복하기 작성한 코드function solution(s) { let binaryNum = 0; let zeros = 0; let sLength; while (s.length > 1) { sLength = s.length; s = s.split('0').join('') binaryNum++ zeros += (sLength - s.length) s = s.length.toString(2) } return [binaryNum, zeros]}이진법 변환 횟수인 binaryNum과 없앤 0의 개수인 zeros 변수를 만든다.s.length가 1이 될때까지 반복하는데먼저 s에 0을 제거해주고 변..

프로그래머스 - JadenCase 문자열 만들기 처음 작성한 코드function solution(s) { var answer = ''; let sSplit = s.split(' ') for (let i = 0; i 들어온 문자열을 띄어쓰기 기준으로 나눠주고나눠진 단어를 알파벳별로 나누어 첫 글자만 대문자로, 나머지는 소문자로 만들어 answer에 그대로 넣는 방식이다.그리고 마지막에 띄어쓰기가 더해져 trim으로 제거하였다.8번 케이스가 실패했다.아마도 띄어쓰기가 문제인것으로 생각된다.띄어쓰기가 연속해서 나오게 되면 split할 때에 빈 문자열이 sSplit배열에 들어가기 때문이라고 생각하며, s로 들어온 문자열 중 단어의 맨 앞만 대문자, 나머지 단어는 소문자로 바꿔야한다.예를 들어 '..

1. react-router-dom 라이브러리 설치//vscode 터미널에 입력yarn add react-router-dom 2. 페이지 컴포넌트 생성페이지 폴더로 구분지어서 생성해주는 것이 알아보기 좋다. 3. Router생성//Router.jsimport React from 'react';// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.import { BrowserRouter, Route, Routes } from 'react-router-dom';// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.//BrowserRouter를 Router로 감싸는 이유는,//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니..

프로그래머스 - 최댓값과 최소값띄어쓰기로 각 숫자를 구분한 문자열이 들어올 때 해당 문자열에서 최댓값과 최소값을 리턴하는 문제이다. 먼저 작성한 코드function solution(s) { let numArr = s.split(' ').sort((a,b) => a-b) let positiveNum = [] let negativeNum = [] numArr.map((num) => Number(num)>0 ? positiveNum.push(Number(num)) : negativeNum.push(Number(num)) ) if (positiveNum.length === 0) { return [negativeNum[0], negativeNum[negativeNum.len..

프로그래머스 - 신고 결과 받기id순서배열과 신고내역 배열, 정지기준이 인자로 들어오고, 피신고인의 피신고량이 정지기준을 넘기면 신고자에게 신고결과메일을 발송한다.이때 모든 id_list에 대한 신고결과메일 발송량을 리턴하면 된다. function solution(id_list, report, k) { var answer = []; //누가 누구들을 신고했는지에 대한 배열 let reportArr = {} //누가 누구들에게 의해서 신고당했는지에 대한 배열 let reportedArr = {} //각 id마다 신고, 피신고 배열을 만들어 객체에 넣어줌 id_list.forEach((id) => { reportArr[id] = [] report..

기존 TodoList는 props를 자식 컴포넌트에 넘겨주어 상태를 관리했다.이번엔 redux 라이브러리를 사용하여 전역 store에 state를 저장하고, 그것을 가져와 사용하는 것을 적용해보고자 한다. 먼저, redux 폴더를 만들고 config, modules폴더를 만들어 configStore, todo파일을 생성했다. 그리고 todo.jsx파일에 리듀서코드를 작성했다.Todo는 추가, 제거, 완료/취소 기능만 구현하면 되므로, 세가지 ActionValue를 만들어 기능을 구현하고자 한다.// src/modules/todo.js//Action Valueconst ADD_TODO = 'ADD_TODO';const TOGGLE_TODO = 'TOGGLE_TODO';const DELETE_TODO = '..

프로그래머스 - 공원산책   처음 작성한 코드function solution(park, routes) { var answer = []; let startX = 0; let startY = 0; let XObj = {}; for (let i = 0; ipark.length-1 || flag) { startY = beforeStartY break; } } break; } case ('W') : { let beforeStartX = startX ..