분류 전체보기 (27) 썸네일형 리스트형 [Error] EPERM: operation not permitted, scandir 해결 방법 문제 발생 오랫만에 vscode로 확인할게 있어서 평소처럼 `yarn dev` 명령어를 통해 작업 중이던 프로젝트를 실행했다. 그런데 다음과 같은 에러가 발생하고 동작하지 않았다. `[Error] EPERM: operation not permitted, scandir ... ` 원인 Mac으로 금융 업무를 보려는 시도로 인하여 시스템 설정을 잘못 건드렸었다. 해결 방법 1. 시스템 설정 > 개인정보 보호 및 보안 > 전체 디스크 접근 권한 2. Visual Studio Code 접근 허용 vscode를 찾아서 스위치를 on으로 켜주고 프로그램 재실행을 한다. 결론 시스템에서 막은 파일 스캔 에러라는 문구를 보고 바로 이런 간단한 문제였단걸 알 수 있지 않았을까... 조금씩 성장 중 [React] 웹 페이지 복귀, 이탈 탐지 (가시성) 웹 페이지 복귀와 이탈 이벤트 설정 방법 배경 React 프로젝트를 하던 중 웹 페이지 이탈과 복귀 시점에 특정 작업을 수행해야하는 상황이 있었다. 해결 방법 웹 페이지 이탈, 복귀에 대한 이벤트는 `window`객체에 내장된 `visibilityState`를 활용하여 구현할 수 있다. React 프로젝트에서는 `useEffect` Hook을 사용해서 컴포넌트 생명 주기에 따른 이벤트 처리가 필요하다. 자세한 방법은 다음과 같다. useEffect(() => { function handleVisibilityChange() { // 페이지 복귀 if (document.visibilityState === 'visible') { console.log('복귀'); } // 페이지 이탈 if (document.v.. React 앱을 Vite + gh-pages로 빌드 및 배포하기 요즘 속도가 빠르고 가벼운 느낌이 드는 Vite를 프로젝트에 자주 활용한다. 그러던 중 간단한 프로젝트를 gh-pages를 이용하여 배포하려고 했는데 여러 난관이 있었다. 이번 일을 계기로 Vite로 생성한 react.js 프로젝트를 gh-pages 위에 배포하는 방법을 정리하였다. 배포 환경 yarn, react, vite, gh-pages 배포 방법 1. gh-pages 라이브러리 설치 yarn add gh-pages 2. 파일 설정 vite.config.js base 추가 import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ base: '/repo-name',.. [React] ReferenceError: Buffer is not defined Web(React)에서 MQTT 개발 시 발생하는 Buffer 레퍼런스 에러 해결 방법 문제 발생 React 웹 앱에서 MQTT 통신을 구현하기 위해 mqtt 라이브러리를 사용하였다. 그런데 다음과 같은 레퍼런스 에러가 발생했다. 해결 방법 다음과 같이 mqtt 라이브러리를 import하는 코드를 수정한다. // Before import mqtt from "mqtt"; // After import mqtt from "mqtt/dist/mqtt" 만약 TypeScript 환경에서 프로젝트를 개발 중이라면 다음과 같은 내용의 mqtt.d.ts 파일을 생성한다. // mqtt.d.ts declare module "mqtt/dist/mqtt" { import MQTT from "mqtt" export = MQT.. [백준 1260번] DFS와 BFS - Python 백준 1260문제 문제 파악 그래프에 대한 정보가 주어진다. 해당 그래프의 노드(정점)들에는 숫자가 주어져있으며 DFS와 BFS 각각의 방법으로 탐색했을때 지나가는 순서를 구해야한다. 이 문제를 푸는 과정은 크게 다음과 같이 단계를 나누어서 접근했다. 입력 데이터들을 사용하기 쉽게 변환하여 그래프 배열을 구한다. DFS와 BFS를 수행하는 함수를 만든다. 그래프와 시작 노드 그리고 DFS, BFS 함수 등을 이용하여 방문하는 노드 순서 출력 2번의 경우 이전에 DFS, BFS 알고리즘에서 다루었다. 그래서 나머지 부분은 큰 어려움이 없었다. 무엇을 찾아야하는 조건이 없었고 전역 탐색만 수행하면 되었기에 쉬운 문제라고 생각했다. 하지만 이 문제의 관건은 1번이었다. 주어진 입력 데이터들을 2차원 배열로 정.. [알고리즘] DFS 및 BFS - Python 그래프를 탐색하는 방법으로 DFS와 BFS가 많이 언급된다. 실제로 코딩 테스트 문제로 자주 출제되며, 경험상 해당 문제들을 이러한 알고리즘 기법 도구들을 사용하지 않고 다가가면 아주 어려웠다. 그러나 DFS와 BFS라는 도구를 익힌다면 엄청 어려워 보이던 최단 거리 구하기 같은 문제들에 자신감이 생기게 된다. 알기 전과 후의 차이가 극명한 알고리즘으로 이번 기회에 정리를 해두면 도움이 될 것 같다. (엘리스 sw트랙 스터디 활동으로 [이것이 취업을 위한 코딩 테스트]다의 DFS 및 BFS 강의를 기반으로 작성한다.) 깊이 우선 탐색 (DFS : Depth First Search) 우선 DFS라고 불리는 깊이 우선 탐색을 먼저 살펴본다. 트리나 그래프 구조에서 각 노드를 검사하는 방법으로 다음 branc.. [프로그래머스] 체육복 - 자바스크립트(JavaScript) 문제 파악 프로그래머스 그리디 유형의 문제 중 하나인 체육복 문제를 풀어보았다. 그리디 알고리즘에 관한 문제는 문제 파악이 중요하다. 우선 문제부터 보자. 문제 설명 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 .. [JavaScript] sort() 숫자 정렬 안되는 문제 해결법 - 숫자 정렬 / 비교 함수 문제 발생 함수 입력으로 들어오는 숫자들을 정렬하려는 상황이었다. [11, 1, 8]을 예를 들어보자. 내가 원하는 대로 정렬을 한다면 결과는 [1, 8, 11]과 같다. Javascript에 배열을 정렬해주는 내장 함수 sort()가 있어서 아무 생각 없이 사용하였다. 그런데 원하는 대로 결과가 잘 나오지 않았다. let arr = [11, 1, 8]; arr.sort(); console.log(arr); // [1, 11, 8] 왜 그럴까? sort() 함수를 사용할 일은 코딩 테스트뿐만 아니라도 꽤 있을것 같으니 이번 기회에 제대로 알아보려고 한다. 원인 사실 sort() 함수에는 비교 함수를 파라미터로 넣어줄 수 있다. 위 예시에서는 옵션을 아무 것도 주지 않아서 기본 동작대로 실행이 된 것으로 .. [알고리즘] 구현 알고리즘 - 시뮬레이션 및 완전 탐색 구현이란? 알고리즘을 공부하는데 구현은 뭐지? 그런 생각이 들었다. 구현이란 머릿속에 있는 알고리즘을 소스 코드로 바꾸는 과정을 말한다고 한다. 알고리즘 문제를 푸는 입장에서 당연한 것이 아닌가 싶었지만, 풀이를 떠올리기 쉽지만 구현(소스 코드로 옮기기) 이 어려운 문제들을 구현 문제라 부른다고 한다. 다음과 같은 구현 문제에 대한 특징들이 있다. 알고리즘은 간단한데 코드가 지나칠 만큼 길어지는 문제 실수 연산을 다루고, 특정 소수점 자리까지 출력해야 하는 문제 문자열을 특정한 기준에 따라서 끊어 처리해야 하는 문제 적절한 라이브러리를 찾아서 사용해야 하는 문제 생각해낸 풀이 방법을 코드로 구현함에 있어서 실수 연산, 문자열 처리, 복잡한 로직 등의 장애물을 돌파하는 것이 관건인 유형이라 볼 수 있다. .. [알고리즘] 그리디 알고리즘(탐욕법) 그리디 알고리즘이란? 알고리즘 중에서 그리디 알고리즘(Greedy Algorithm)은 탐욕법이라고도 불린다. 탐욕이라는 단어는 해당 알고리즘을 가장 잘 표현하지 않았나 싶다. 특정 상황에서 사용되는 방법으로 매 선택 순간마다 묻지도 따지지도 않고 가장 최적의 선택을 반복하여 해답을 구해나가는 방식이다. 선택하는 시점 이후의 상황(최종적인 상황)은 고려하지 않는 방식이라서 그리디 알고리즘을 적용할 수 있는 문제인지 파악하는 것이 관건이다. 그리디를 적용할 수 있는 상황을 다시 말하자면, 지역적인 최적의 선택이 곧 전역적 최적의 선택일 때 사용할 수 있다. 좀 더 확실하게 알아보기 위하여 그리디 알고리즘에 대한 구글링을 통해 자세히 정리된 자료를 가져왔다. 그리디 알고리즘을 적용하기 위한 조건을 다음과 같.. 이전 1 2 3 다음
