티스토리

신림쥐's Woorking group

검색하기

블로그 홈

신림쥐's Woorking group

sillimmouse.tistory.com/m

신림쥐 님의 블로그입니다.

구독자: 3

방명록 방문하기

728x90

주요 글 목록

리액트 컴파일러란? 리액트 컴파일러란?리액트 컴파일러는 빌드 과정에서 사용되는 도구입니다. 리액트 19 프로젝트에서 리액트 도구 생태계가 제공하는 설정 옵션을 사용하여 명시적으로 설정해야 합니다. 리액트 컴파일러 주요 설정 요소바벨 플러그인: 컴파일 과정에서 코드 변환을 돕습니다.ESLint 플러그인: 리액트 규칙 위반을 포착하고 보고하는 데 도움을 줍니다.컴파일러 코어: 코드 분석과 최적화를 수행하는 핵심 컴파일러 로직입니다. 바벨과 ESLint 플러그인 모두 코어 컴파일러 로직을 사용합니다.리액트 컴파일 흐름바벨 플러그인은 컴파일할 함수(컴포넌트 또는 훅)를 식별합니다. 나중에 컴파일 과정에 포함하거나 제외하는 방법을 배우기 위해 몇 가지 설정을 볼 것입니다. 플러그인은 각 함수에 대해 코어 컴파일러 로직을 호출하고 최.. 공감수 2 댓글수 0 2025. 4. 17.
브라우저 렌더링 엔진 | V8, JavaScript 엔진 개요V8엔진 특징과 Javascript가 어떻게 해석되고 실행되는지 알면 JavaScript 엔진의 작동 방식을 더 깊이 이해하면 코드의 성능 특성을 추론하는 데 도움된다!V8 엔진이 무엇인지, 왜 그리고 어떻게 동작 하는지 알아보자. 렌더링 엔진이란?JavaScript 엔진을 내장한 브라우저의 표시 기능을 담당하는 모듈Blink, Gecko, WebKit렌더링 엔진은 자바스크립트뿐만 아니라 HTML과 CSS를 해석하고 화면 드로잉을 종합적으로 수행 Javascript 엔진이란?자바스크립트는 동적 타입의 인터프리터 언어이며 자바스크립트에서 실행되는 모든 것들은 엔진에 의해 처리된다.엔진은 주변 환경과 상호작용하면서 컴퓨터가 프로그램을 실행하는 데 필요한 machine code(바이트코드)를 변환/생성 역.. 공감수 0 댓글수 0 2025. 4. 17.
리다이렉트 URL은 어떻게 설정 하나요? Redirect(리다이렉트)사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 뜻입니다. 예를 들어, 웹사이트 A의 주소로 접속한 사용자를 웹사이트 B로 이동시키는 것을 말합니다. Redirect URL결제 요청 결과를 알려주고, 성공하거나 실패한 후에 사용자가 돌아갈 수 있는 웹사이트의 URL입니다. 요청 결과를 알려주고, 결과 값으로 최종 비즈니스를 진행할 수있는 중간역할을 합니다.아닌 경우 서버측에 cors설정을 할 수도 있지만, 이벤트를 호출한 URL과 같은 origin 주소를 권장합니다. Redirect URL 사용하는 경우URL 단축 서비스 (e.g. 소셜 미디어에서 공유)더 이상 업데이트되지 않는 페이지요청시 새로운 페이지로 리다이렉트 설정 및 삭제사이트 도메인 변경 (e.g. .. 공감수 2 댓글수 0 2025. 4. 17.
[window] window10 시작화면 크롬 아이콘 깨지거나 보이지 않는 문제 오류 화면일부 사용자에게서 시작 화면에 고정된 Chrome 바로가기 아이콘이 깨져 보이거나 아예 표시되지 않는 현상이 발생하고 있습니다. 해당 증상은 기능적인 오류는 없으나, 가시성과 사용성 측면에서 불편을 초래할 수 있습니다. 시작 화면에서 해당 바로가기를 제거하고 다시 Chrome 아이콘을 우클릭 > 시작 화면에 고정해도 같은 현상이 지속됩니다. 해결 방법1. 데스크탑에 cmd 창 엽니다. 아래 명령어를 복사한다음 붙여넣습니다.REG ADD "HKCU\Software\Microsoft\Windows\CurrentVersion\ImmersiveShell\StateStore" /V ResetCache /T REG_DWORD /D 1 /Ftaskkill /f /im explorer.exestart expl.. 공감수 0 댓글수 0 2025. 4. 14.
Node.js Docker image Docker Official Image?Docker 공식 이미지는 Docker 오픈 소스 및 즉석 솔루션 저장소의 큐레이션된 세트입니다. 공식 이미지는 명확한 설명서를 포함하고 있으며, 모범 사례를 홍보하고 있으며, 가장 일반적인 사용 사례에 맞춰 설계되었습니다.Node.js란 무엇인가요?Node.js는 확장 가능한 서버 측 및 네트워킹 애플리케이션을 위한 소프트웨어 플랫폼입니다. Node.js 애플리케이션은 JavaScript로 작성되었으며, Mac OS X, Windows 및 Linux에서 Node.js 런타임 내에서 변경 없이 실행할 수 있습니다.Node.js 애플리케이션은 논블로킹 I/O와 비동기 이벤트를 사용하여 처리량과 효율성을 극대화하도록 설계되었습니다. Node.js 애플리케이션은 단일 스.. 공감수 1 댓글수 1 2025. 4. 11.
Docker 명령어 정리 Docker 라이프사이클Docker ImageDocker Image 조회$ docker imagesDocker Image 생성// 도커 경로가 package.json 에 있는 경우$ docker build ./// 도커 경로가 package.json 외부에 있는 경우// docker build -t {이름공간}/{이미지이름}:{태그} {빌드 컨텍스트(DockerFile이 있는 경로)}$ docker build -t dp -f docker/Dockerfile .Docker Image 삭제$ docker rmi {이미지이름}// 이미지를 사용중인 컨테이너가 있어도 이미지만 강제 삭제$ docker rmi -f {이미지이름}Docker ContainerDocker Container 조회$ docker ps /.. 공감수 0 댓글수 0 2025. 4. 11.
Docker Container, Host 파일시스템 파일시스템(File System)모든 운영체제에는 파일 시스템을 가지고 있다.사용자가 파일을 저장, 검색, 수정하는 데 필요한 모든 기능을 제공하며 컴퓨터 시스템에서 데이터를 저장하고 구성하는 방식을 정의한다.Host, Docker Container 파일시스템 특징Host컨테이너 변경 여부에 상관없이 파일 시스템이 계속 유지 된다.Host 파일 시스템을 공유하면 보다 안전하고 효율적으로 프로그램을 만들 수 있다.Docker Container도커 이미지 배포시 새로운 디렉토리를 만들어서 사용한다.컨테이너가 변경 될때마다 데이터가 초기화/삭제 되기 때문에 필요 없을때 삭제하고, 필요할 때 추가해서 사용할 수 있어서 간편하지만 지속적으로 필요한 파일(DB, 리소스)이 있다면 컨테이너에 올릴 때마다 필요한 파일.. 공감수 0 댓글수 0 2025. 4. 11.
Docker 설치 방법 & Dockerfile 구성 요소 설명 개요이 포스팅에서는 먼저 Docker의 설치 방법을 소개한 후, 컨테이너 환경을 정의하는 데 사용되는 Dockerfile의 주요 구성 요소에 대해 자세히 설명합니다. DockerDocker는 리눅스 컨테이너 기반의 가상화 기술을 제공하는 오픈 소스 플랫폼입니다. 가상화 기술이란 하드웨어 리소스를 논리적으로 분할하여 하나의 시스템에서 여러 가상 환경을 생성하는 것을 말합니다. Docker 역할컨테이너 기반 가상화 및 환경 표준화애플리케이션과 필요한 실행 환경(라이브러리, 설정 파일 등)을 하나의 컨테이너로 패키징합니다. 이로 인해 개발, 배포, 실행 과정이 단순화되고 효율성이 향상됩니다.호스트 OS 위에서 격리된 환경으로 동작하여 일관된 개발/실행 환경을 제공하여 모든 개발자가 동일한 컨테이너 이미지를 사.. 공감수 1 댓글수 0 2025. 4. 11.
[ERROR] Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Error Component St 오류 내용Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Error Component Stack 경고: 언마운트된 컴포넌트에서 React 상태 업데이트를 수행할 수 없습니다. 이는 아무런 작업을 하지 않지만, 애플리케이션에 메모리 누수가 발생했음을 나타냅니다. 이를 해결하려면, useEffect의 cleanup 함수에서 모든 구독과 비동기 작업을 취.. 공감수 0 댓글수 0 2025. 4. 11.
2025년 React 라이브러리 생태계 정리 | Full-Stack React Tech Stack 개요리액트는 2012년에 배포된 이후, 2025년 현재 가장 인기 있는 UI 개발 라이브러리로 자리 잡았다.10년 이상 오랜 기간 동안 사용되면서 React만의 라이브러리 생태계가 형성되었다.이번 포스팅에서는 2025년 대규모 애플리케이션 개발에 필수적인 리액트 라이브러리를 알아보고자 한다. React 라이브러리React 프로젝트 시작하기Vite : React 프로젝트를 설정하는 가장 인기 있는 도구. 빠른 빌드 속도와 간편한 TypeScript 지원 제공Next.js :React 기반 메타 프레임워크로 서버사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 지원파일 기반 라우팅, API 라우트, 캐싱, React Server Components(RSC) 등 다양한 기능 제공서버 컴포넌트 및 서버 함수.. 공감수 3 댓글수 0 2025. 3. 17.
React 파일 업로드, 드래그 앤 드랍, 미리보기 기능 구현하기 file 요소란?file 유형의 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다. https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#accept 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다." data-og-title=" - HTML: Hypertext Markup Language | MDN" data-og-type="website" data-ke-align="al.. 공감수 2 댓글수 0 2025. 2. 28.
JavaScript 모듈 시스템 | CJS, AMD, UMD, ESM 모듈화 방식CommonJS : exports 키워드로 모듈을 생성, require() 함수로 임포트하는 방식장점 : 모든 파일을 로컬에 저장하고 동기적으로 동작하여 전역변수와 지역변수를 분리할 수 있게 되었다.단점 : 필요한 모듈을 가져오는데 대기하게 됨.AMD(Asynchronous Module Definition): CommonJS를 비동기적으로 사용할 수있는 도구ESM : import, 와 export 로 임포트하는 방식(ES6가 도입 이후)장점 : 키워드 만으로 모듈화 가능단점 : 모듈별로 을 네트워크 통신을 통해 가져오면서 비용과 시간 소요 https://beomy.github.io/tech/javascript/cjs-amd-umd-esm/#%ED%8A%B9%EC%A7%95-%EB%B9%84%.. 공감수 1 댓글수 0 2025. 2. 13.
CSS 확장 / Sass에만 존재하는 기능이 CSS에 통합 되다 ! 개요스타일 개발을 효율적으로 할 수 있게 지원해주는 기능이 많다는 것은 많은 사람들이 Sass를 사용하게 만들었습니다. 하지만 여전히 Sass를 설치하고 컴파일하는 과정이 존재한다는 것은 대체 가능한 도구를 찾게 되는 이유 중 하나입니다. 아직까지 Sass 고유 기능rem으로 변환하는 함수와 믹스인(Mixins)반복문 CSS 확장 기능1. 변수 지정CSS에서도 Sass와 유사한 방식으로 변수를 정의할 수 있습니다. 중요한 차이점은 Sass 변수는 전처리기 컨텍스트 내에서만 존재하지만, CSS 변수는 브라우저에서 사용될 수 있으며 자바스크립트를 통해 동적으로 덮어쓸 수도 있다는 점이 다르다.:root { --button-padding: 10px 20px; --button-bg-color: #007b.. 공감수 1 댓글수 0 2025. 2. 12.
웹개발 아키텍처 스타일 | Model 1, Model 2 개요웹 개발에서 모델1(Model 1)과 모델2(Model 2)은 흔히 사용되는 아키텍처 스타일입니다. 두 모델은 웹 애플리케이션을 설계하는 방식에 큰 차이를 보이며, 각각의 장점과 단점이 존재합니다. 이 포스팅에서는 모델1과 모델2의 차이점, 특징, 그리고 어떤 상황에서 각각을 사용하는 것이 좋은지에 대해 알아보겠습니다. 모델1 (Model 1)모델1은 초기 웹 애플리케이션 개발에서 자주 사용되었던 아키텍처입니다. 주로 JSP와 서블릿을 사용하여 모든 처리를 하나의 페이지에서 처리하는 방식입니다.Model 1 특징단일 페이지 처리: 모델1에서는 모든 요청 처리와 응답을 하나의 JSP 페이지 또는 서블릿에서 처리합니다. 즉, 클라이언트의 요청이 들어오면 서블릿이 직접 비즈니스 로직을 처리하고 결과를 JS.. 공감수 0 댓글수 0 2025. 2. 10.
웹 성능 분석 및 INP 최적화 | Lighthouse INP (Interaction to Next Paint, 페인트에 대한 상호작용)웹 성능 지표 중 하나로, 사용자가 웹페이지와 상호작용(클릭, 키보드 입력 등)한 후 브라우저가 그에 반응하여 콘텐츠를 화면에 렌더링하는 데 걸리는 시간을 측정합니다. DOM (Document Object Model, 문서 객체 모델)HTML 문서 구조를 반영해서 만든 객체입니다.DOM의 계층은 트리 자료 구조로 구축돼요. 트리 자료 구조는 하나의 최상위 노드(Node)에서 다른 자식 노드들이 뻗어나가는 구조를 가지고 있습니다. DOM은 HTML로 구성된 웹 페이지와 스크립트 및 프로그래밍 언어를 연결시켜주는 역할을 해요. DOM 생성되는 순서HTML 웹 페이지는 HTML 파서에 의해 DOM으로 변환됩니다.여기서 파서가 .. 공감수 1 댓글수 0 2025. 2. 10.
Git Tag로 버전 관리와 릴리스를 쉽게 개요Git은 버전 관리 시스템으로 소프트웨어 개발에 필수적인 도구입니다. 그중에서도 Git Tag는 특정 커밋을 참조하고 버전을 관리하는 데 유용한 기능입니다. 이번 포스트에서는 Git Tag를 사용하여 버전 관리와 릴리스 관리를 어떻게 쉽게 할 수 있는지 알아보겠습니다. Git TagGit Tag는 특정 커밋을 쉽게 참조하기 위한 버전 관리 도구입니다. 주로 릴리스 버전을 기록하거나, 중요한 커밋을 표식하는 데 사용됩니다.Git에서 tag는 이름을 붙여 커밋을 참조할 수 있도록 해주며, 이로 인해 프로젝트의 버전 관리가 용이해집니다. branch와 달리 변경되지 않는 참조이므로, 프로젝트의 중요한 지점(예: 릴리스, 안정된 버전)을 표시하는 데 이상적입니다. Git Tag, Branch 비교Git에서 .. 공감수 0 댓글수 1 2025. 1. 15.
마크다운(.md 파일) 문서 작성법 | README.md, CHANGELOG.md 개요프로젝트를 개발하다 보면 코드 못지않게 중요한 것이 바로 문서화입니다. 특히 Git 기반 프로젝트에서는.md 문서로 프로젝트의 품질을 높힐 수 있습니다. 특히 깔끔한 README.md와 체계적인 CHANGELOG.md를 갖춘 프로젝트는 신뢰감을 주고, 협업이나 오픈소스 기여도 훨씬 쉬워집니다. 이 글에서는 마크다운 문서 중에서도 README.md와 CHANGELOG.md의 역할과 작성 요령에 대하여 정리해보겠습니다. 마크다운(Markdown) 문서란?마크다운(Markdown)은 텍스트 기반의 경량 마크업 언어로 간단한 문법만으로 HTML처럼 문서의 구조를 표현할 수 있는 형식입니다..md 확장자를 가지며, 개발자 문서, 블로그, README 등 다양한 곳에서 널리 사용됩니다.README.md – 프.. 공감수 1 댓글수 0 2025. 1. 15.
JavaScript window 객체: 주요 속성, 메서드, 이벤트 알아보기 개요window 객체는 JavaScript에서 전역 객체(global object)로, 브라우저 환경에서 제공하는 다양한 기능과 속성을 제공합니다. 브라우저의 전체 창(window)에 대한 정보를 제공하며, 전역 범위에서 접근 가능합니다. Node.js에서는 window 객체 대신 global 객체를 사용합니다. window 객체는 웹 개발에서 핵심적인 역할을 하며, DOM, 브라우저 상태, 이벤트 관리 등 다양한 작업에 사용됩니다. 다만, 전역 네임스페이스를 오염시킬 수 있으므로 과도한 사용은 피하는 것이 좋습니다. window 객체의 대표적인 속성1. document현재 로드된 HTML 문서를 나타내는 객체.DOM 트리 조작 및 HTML 요소 접근 가능.2. location현재 페이지의 URL .. 공감수 2 댓글수 1 2024. 11. 22.
GB와 GiB: 기가바이트와 기비바이트의 차이점 GB, GiB 이란 무엇인가요?공통점두 접두사 모두 디지털 기기의 측정 단위 차이점GB : 전통적인 단위입니다,metric 1GB는 1,000³ 바이트에 해당하는 측정 스타일GiB : 바이너리 메서드를 사용한 컴퓨터 저장장치의 단위,1 GiB는 1024³ 바이트 에 해당하는 측정 스타일 GiB 사용하는 경우바이너리 메서드는 메모리 크기 즉, 컴퓨터의 저장장치의 용량을 말한다.GiB는 메모리나 저장장치의 용량을 보다 정확하게 계산하고 표기하는 데 활용한다.예시)컴퓨터의 RAM이나 SSD/HDD의 용량은 실제 데이터 저장 공간을 바이트 단위로 나열하는 방식이므로, 이진 접두사인 GiB, TiB 등을 사용해 용량을 표시하는 것이 보다 정확한 표현이 됩니다.GB vs GiB-왜 소문자 'i'인가요?기비바이트.. 공감수 0 댓글수 0 2024. 11. 15.
패키지 로드 방법 비교: NPM vs CDN의 차이점 개요프론트엔드 개발을 하다 보면 라이브러리를 추가하는 방법으로 NPM과 CDN을 자주 접하게 됩니다. 하지만 이 두 가지 방식은 각각의 장점과 단점이 있으며, 상황에 따라 적절한 방식을 선택하는 것이 중요합니다. 이번 글에서는 NPM과 CDN의 차이점을 정리하고, 언제 어떤 방법을 사용하는 것이 좋은지 알아보겠습니다. NPM (Node Package Manager)NPM은 JavaScript 패키지 매니저입니다. 주로 주로 Node.js 및 웹 개발에 사용됩니다.오픈소스 라이브러리를 관리하고 설치할 수 있게 해줍니다. npm 특징로컬 환경(개발 환경)에서 패키지를 설치하여 사용package.json을 통해 패키지 및 버전 관리 가능node_modules 폴더에 라이브러리를 저장하여 오프라인에서도 사용 가.. 공감수 3 댓글수 2 2024. 11. 8.
npm 패키지 설치 및 호환성 관리 | npm install, update 개요라이브러리 업데이트와 버전 관리는 프로젝트에서 중요한 부분입니다. 의존성 모듈과 개발 환경 모듈을 명확하게 구분하는 것이 중요합니다.Node.js 버전은 프로젝트에서 확실히 정의해야 하며, 라이브러리는 신중하게 추가하고 필요할 때만 정기적으로 업데이트하는 것이 좋습니다.라이브러리가 많아질수록 관리가 어려워지므로, 의존성 관리에 신경을 써야 합니다. [Node.js] Node.js 기본 개념 및 환경 설정: package.json 파일 구성 방법https://sillimmouse.tistory.com/82 npm install// 실제 애플리케이션에서 필요한 라이브러리를 설치$ npm install // 개발 환경에서만 필요한 라이브러리를 설치$ npm install --save-dev 플래그 효.. 공감수 1 댓글수 0 2024. 11. 8.
Git submodule 시작하기 배경다른 프로젝트의 기능을 앱에 추가하는 방법으로 모노레포 방식을 사용할 수 있지만, 각 프로젝트를 독립적으로 관리해야 하는 경우에는 적합하지 않다.Git Submodule은 메인 프로젝트에서 외부 링크 형태로 서브 프로젝트를 연결해 두었다가, 필요할 때 최신 변경 사항을 가져와 작업한다.이 방식은 서브 프로젝트의 별도 사본을 만들지 않으며, 원래 저장소의 최신 상태를 유지하면서 개발을 진행할 수 있게 해줍니다. 서브 프로젝트는 독립적으로 버전 관리를 유지하면서도, 메인 프로젝트와 쉽게 통합할 수 있습니다. main project와 submodule project 관계main project에 submodule을 추가하여 사용한다.main project에 root에 submodule들을 관리하기 위한 .g.. 공감수 2 댓글수 1 2024. 9. 27.
Window 10 단축키 완벽 정리 개요효율적으로 윈도우를 사용하기 위해, window 에서 자주 사용하는 단축키를 알아보자 가장 많이 사용하는 TOP 10 Ctrl + C : 선택한 항목 복사Ctrl + V : 선택한 항목 붙여 넣기Ctrl + X : 선택한 항목 잘라내기Ctrl + Z : 작업 실행 취소Ctrl + A : 모든 항목 선택Alt + Tab : 열려 있는 앱 전환Alt + F4 : 활성 항목 종료 (앱 또는 창 닫기)윈도우 키 + D : 바탕 화면 숨기기 또는 표시윈도우 키 + L : 로그인 화면으로 이동 (컴퓨터 잠금)Ctrl + F : 문서나 웹 페이지에서 찾기 단축키 상세기본 단축키Ctrl + X : 선택한 항목 잘라내기Ctrl + C (또는 Ctrl + Insert) : 선택한 항목 복사Ctrl + V (또는 S.. 공감수 0 댓글수 0 2024. 9. 27.
WSL에서 개발 환경 구축하기 | Node.js, Git, VSCode 개요Windows 환경에서도 리눅스 개발 환경을 사용할 수 있게 해주는 WSL(Windows Subsystem for Linux)은 많은 개발자들에게 사랑받는 기능입니다. 이번 포스팅에서는 WSL 위에 개발 환경을 구성하는 방법을 소개합니다. 특히 VSCode, Git, Node.js를 중심으로 단계별로 설치해보겠습니다. WSL 설치 및 설정 WSL 활성화 및 리눅스 배포판 설치 https://sillimmouse.tistory.com/104 WSL에 개발 도구 설치하기Git 설치 및 설정git 설치sudo apt updatesudo apt install git git 설치 확인git --version git 설정git config --global user.name "Your Name"git config.. 공감수 1 댓글수 1 2024. 9. 26.
인클루시브 디자인(inclusive design) | 웹 접근성 개요디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자 인클루시브 디자인 (Inclusive Design) 이란?다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인.. 공감수 3 댓글수 0 2024. 9. 26.
[ERROR] react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 오류 메시지react_devtools_backend_compact.js:13851 Warning: Failed prop type: Invalid prop `onChange` of type `boolean` supplied to `ForwardRef(TextField)`, expected `function`. 원인value로 받는 타입과 리턴으로 받는 타입이 일치하지 않아서 발생하는 메시지이다.정해진 타입으로 받을 수 있도록 코드를 수정해야 한다.해당 코드const value: string;onChange: (_e: React.ChangeEvent) => void;const handleChange = () => { if (maxLength) { if (value.length > maxLen.. 공감수 0 댓글수 0 2024. 9. 19.
WSL을 사용하여 Windows에 Linux를 설치하기 개요Docker는 리눅스 환경을 기반으로 설정되어 있기 때문에, Windows에서 mount나 파일 수정 같은 작업에서 제약을 느끼곤 합니다. 리눅스 환경으로 접근하는 방법은 다양하지만, 이번 포스팅에서는 WSL을 사용하여 리눅스에 접근하고 설정하는 방법을 다루려고 합니다.또한, 리눅스로 설정된 환경에 노드 프로젝트를 띄우기 위해 필요한 도구들을 설치하고, Windows 앱에 설정을 해준 뒤 프로젝트 환경을 구축해보려고 합니다. WSL (Windows Subsystem for Linux)란 무엇인가. 윈도우 운영체제에 포함된 리눅스용 하위 시스템별도의 가상 머신 또는 이중 부팅 없이 Windows 컴퓨터에서 Linux 환경을 실행할 수 있는 Windows의 기능을 지원해준다.Windows와 Linux를.. 공감수 7 댓글수 5 2024. 8. 30.
React Router 핵심 개념과 버전 | react-router-dom React RouterReact Router는 React를 위한 다중 전략 라우터입니다.react-router-dom 라이브러리를 통해 React 애플리케이션에서 주로 사용합니다.React 애플리케이션에서 여러 페이지를 쉽게 관리하고 내비게이션을 구현할 수 있습니다. } /> } /> }> } /> } /> } /> } /> } /> React Router 버전별 특징v5 : v4의 안정성을 높힌 버전, v5이상 부터 모던 프론트엔드에 적합한 버전이라고 한다.v6 : 구조적 개선이 진행, v7을 데이터 패칭 강화를 위한 마련한 버전이다.v7 : v6을 유지하면서 성능 및 데이터 패칭을 강화한 버전이다. React Router v4 이하React Router v.. 공감수 0 댓글수 0 2024. 8. 22.
[ERROR] npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 상황window에 npm을 사용하여 도구를 설치하려고 하는데, 실패했다.node, nvm은 버전이 조회되는데 npm은 아래 '오류 내용'처럼 보여졌다. 오류 내용npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내 용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + npm install -g n + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : Unaut.. 공감수 8 댓글수 0 2024. 8. 13.
자주 사용하는 Git CLI 개요각 명령어와 예제를 통해 Git 작업을 보다 쉽게 이해하고 사용할 수 있게 자주 사용하는 cli를 정리해보자 Git 설정기본 global 설정# 기본적인 Git 설정git config --global user.name "Your Name"git config --global user.email "your.email@example.com"브랜치 목록 정렬기본적으로 Git은 브랜치를 알파벳 순으로 정렬하지만, 최근 커밋 날짜 순으로 정렬하는 것이 더 유용할 수 있음다음 설정을 통해 브랜치를 최근 커밋 순으로 정렬하고, 열 형식으로 표시할 수 있음git config --global column.ui auto git config --global branch.sort -committerdate 태그 목록 정렬.. 공감수 0 댓글수 0 2024. 6. 17.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.