hr0513 님의 블로그

안녕하세요, hr0513입니다!제가 직접 사용하고 있는 라이브러리들을 소개해드리려구 해요1. react-router-domnpmnpm install react-router-dom yarnyarn add react-router-dom@6 App.jsimport { Routes, Route } from "react-router-dom";import Home from "./pages/Home";import MainLayout from "./layouts/MainLayout";function App() { return ( }> } /> );}export default App; index.jsimport { StrictMode } ..

안녕하세요, hr0513입니다!npx 설치 시 오류 해결방법에 대해 알려드리겠습니다1. npx 설치 시 버전 맞추기 (2025년 기준)npx create-react-app ./ 명령어 실행 시, 최신 버전과의 충돌로 인해 오류가 발생할 수 있습니다. 이를 해결하려면 React 및 관련 라이브러리를 수동으로 설치해주는 것이 좋습니다.해결 방법프로젝트를 생성할 디렉터리에서 다음 명령어를 실행합니다.npx create-react-app ./React 및 React DOM을 특정 버전으로 설치합니다.npm install --save react@^18.0.0 react-dom@18.0.0@testing-library/react도 버전을 맞춰 설치합니다.npm install @testing-library/react..

스타일드 컴포넌트에서 색상 미표시와 자동 완성 문제 해결법! ✨혹시 styled-components 사용할 때 색상이 안 나오고 IntelliSense(자동 완성)도 안 돼서 일일이 코드 치고 계셨던 분 계신가요? 저도 얼마 전까지 그런 상황이었어요... 하지만 이제 해결 방법을 알아냈습니다!필수 플러그인: vscode-styled-componentsVS Code를 사용 중이라면 vscode-styled-components 플러그인을 설치해 보세요! ✅ 이 플러그인을 설치하면:CSS 문법 강조가 템플릿 리터럴 안에서도 제대로 표시돼요IntelliSense(자동 완성) 기능이 활성화돼요설치 방법VS Code의 Extensions(확장 프로그램) 메뉴로 이동검색창에 vscode-styled-component..

SurveyPie 기술스택 라이브러리설명recoil전역 상태 관리axiosAPI 연동react-router라우팅styled-components스타일링immer데이터 불변성 유지 SurveyPie Admin 기술스택라이브러리설명redux전역 상태 관리useSWR, axiosAPI 연동react-router라우팅styled-components스타일링immer데이터 불변성 유지amtdUI 라이브러리

이분 검색: 정렬된 배열에서 탐색 범위를 절반씩 줄이며 원하는 값을 효율적으로 찾는 알고리즘  코드 예시function solution(target, arr) { let answer; // 오름차순 정렬 arr.sort((a, b) => a - b); let lt = 0; let rt = arr.length - 1; while (lt target) { rt = mid - 1; } else { lt = mid + 1; } } return answer;}let arr = [23, 87, 65, 12, 57, 32, 99, 81];console.log(solution(32, arr));

삽입 정렬: 현재 요소를 그보다 앞쪽의 정렬된 부분과 비교하여 적절한 위치에 삽입하여 정렬을 완성하는 알고리즘 코드 예시function solution(arr) { let answer = arr; for (let i = 0; i = 0; j--) { if (arr[j] > tmp) { arr[j + 1] = arr[j]; } else { break; } } arr[j + 1] = tmp; } return answer;}let arr = [11, 7, 5, 6, 10, 9];console.log(solution(arr)); 개념 문제다음 자료에 대하여 삽입 정렬을 사용하여 오름차순으로 정렬한 경우 Pass 2의 결과는?64, 28, 33..

버블 정렬: 인접한 두 요소를 비교하여 정렬하는 단순한 정렬 알고리즘 코드 예시function solution(arr) { let answer = arr; for (let i = 0; i arr[j + 1]) { [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]; } } } return answer;}let arr = [13, 5, 11, 7, 23, 15];console.log(solution(arr)); 개념 문제다음 자료에 대하여 버블 정렬을 사용하여 오름차순 정렬할 경우 1회전 후의 결과는?8, 5, 6, 2, 4 1회전:5, 8, 6, 2, 45, 6, 8, 2, 45, 6, 2, 8, 45, 6, 2, 4, 8

선택 정렬주어진 리스트에서 가장 작은 요소를 찾아서 맨 앞의 요소와 교환하는 과정을 반복하여 정렬  코드 예시function solution(arr) { let answer = arr; for (let i = 0; i  개념 문제다음 자료에 대하여 선택 정렬(Selection Sort)을 이용하여 오름차순으로 정렬하고자 한다. 3회전 수행 결과는?8, 3, 4, 9, 7 1회전: 3, 8, 4, 9, 72회전: 3, 4, 8, 9, 73회전: 3, 4, 7, 9, 8

스택: 후입선출, LIFO (Last-In, First-Out)마지막에 들어온 것이 가장 먼저 나가는 방식ex. 웹 브라우저에서 뒤로 가기 / 앞으로 가기명령어설명push()스택의 맨 위에 요소를 추가pop()스택의 맨 위 요소를 제거하고, 제거된 값을 반환peek() 또는 top()스택의 맨 위 요소를 제거하지 않고 반환isEmpty()스택이 비어 있는지 확인  큐: 선입선출, FIFO (First-In, First Out)처음에 들어온 것이 가장 먼저 나가는 방식ex. 은행에서 대기열 처리 명령어설명push()큐의 맨 뒤에 요소를 추가 (enqueue)shift()큐의 맨 앞 요소를 제거하고, 제거된 값을 반환 (dequeue)front()큐의 맨 앞 요소를 제거하지 않고 반환isEmpty()큐가 비..

React를 깃허브에 배포하는 방법에 대해 알려드리려고 해요 1. 필수 패키지 설치yarn add gh-pages --dev 2. package.json 수정package.json 파일에 다음 내용을 추가합니다: 1. 홈페이지 URL 추가저장소 이름에 따라 URL을 설정합니다:"homepage": "https://your-username.github.io/your-repo-name" 2. 스크립트 추가기존 스크립트 아래에 배포 스크립트를 추가합니다:"scripts": { "predeploy": "yarn build", "deploy": "gh-pages -d build"} 3. 배포 실행yarn run deploy 4. 배포 확인배포가 완료되면 저장소의 GitHub Pages 설정에서 배포된 사이트를..