분류 전체보기 (32) 썸네일형 리스트형 [npm/yarn] package.json 스크립트 명령어 예시 들어가며package.json의 scripts 필드는 단순한 명령어 모음이 아닌, 개발 생산성을 크게 높여주는 강력한 도구입니다.오늘은 실무에서 바로 활용할 수 있는 유용한 스크립트 팁들을 알아볼게요. 😊기본적인 스크립트 활용1. 기본 스크립트 구조{ "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }}실용적인 스크립트 팁들 🚀1. 병렬 실행과 순차 실행{ "scripts": { // 순차 실행 (&&) "build:sequence": "npm run clean && .. [JavaScript] 디바운스와 쓰로틀링 구현하고 활용하기 들어가며안녕하세요! 오늘은 프론트엔드 개발자라면 반드시 알아야 할 디바운스(Debounce)와 쓰로틀링(Throttling)에 대해 알아볼게요.스크롤 이벤트나 검색 입력 등에서 성능 최적화가 필요하다면, 이 두 기법은 여러분의 강력한 무기가 될 거예요! 😊디바운스와 쓰로틀링이 필요한 이유먼저, 문제 상황을 한번 볼까요?// 😱 이런 코드는 성능 저하의 지름길입니다!window.addEventListener('scroll', () => { // 스크롤할 때마다 실행되는 무거운 작업 doSomethingHeavy();});// 🤔 검색창에서도 문제가 발생해요searchInput.addEventListener('input', () => { // API 호출이 입력할 때마다 발생! searchAPI.. [JavaScript] axios 인터셉터로 전역 에러 처리하기 들어가며API 요청 시 발생하는 에러를 각 컴포넌트에서 개별적으로 처리하다 보면 코드가 중복되고 관리가 어려워집니다. axios 인터셉터를 활용하면 이러한 에러 처리를 전역적으로 깔끔하게 관리할 수 있습니다.axios 인터셉터 설정하기1. 기본 인스턴스 생성// src/api/axios.tsimport axios from 'axios';export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, timeout: 5000, headers: { 'Content-Type': 'application/json', },});2. 요청(Request) 인터셉터instance.interceptors.request.use( (.. [React] 렌더링 최적화하기 - React.memo 현명하게 사용하기 들어가며React 애플리케이션에서 불필요한 리렌더링은 성능 저하의 주요 원인입니다. React.memo는 이러한 문제를 해결할 수 있는 강력한 도구지만, 무분별한 사용은 오히려 성능을 저하시킬 수 있습니다. 언제, 어떻게 React.memo를 사용해야 할지 알아보겠습니다.React.memo가 필요한 이유// 부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 불필요하게 리렌더링됩니다const ParentComponent = () => { const [count, setCount] = useState(0); return ( setCount(count + 1)}> Count: {count} );};React.memo 기본 사용법1. 간단한 사용 .. [Git] 실수로 올린 커밋 되돌리기 - reset, revert 차이점 들어가며Git을 사용하다 보면 "앗!" 하는 순간이 있습니다. 중요한 정보를 실수로 커밋했거나, 잘못된 코드를 푸시했을 때죠.이런 상황에서 사용할 수 있는 git reset과 revert의 차이점과 적절한 사용법을 알아보겠습니다.git reset vs git revert간단히 말하면:git reset: 커밋 히스토리를 실제로 지웁니다 (혼자 작업하는 브랜치에 적합)git revert: 새로운 커밋을 만들어 변경사항을 되돌립니다 (협업하는 브랜치에 적합)git reset 사용하기1. reset의 세 가지 모드# 1. Soft Reset: 커밋만 되돌리고 변경된 파일은 스테이징 영역에 유지git reset --soft HEAD~1# 2. Mixed Reset (기본값): 커밋과 스테이징을 되돌리고 변경된 파.. [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차원 배열로 정.. 이전 1 2 3 4 다음
