공공연히 개발하기 🧑‍💻 32

[React] 리액트 프로젝트 환경 관리

1. 리액트 프로젝트 환경은 개별적으로 관리됨리액트 프로젝트는 create-react-app, Vite, Next.js 등 다양한 방법으로 생성할 수 있는데,모든 방식에서 프로젝트마다 독립적인 환경을 가진다.예를 들어, create-react-app을 사용하여 새 프로젝트를 생성하면:npx create-react-app my-project이렇게 하면 my-project 폴더 내부에 새로운 node_modules, package.json, package-lock.json이 생성되며,기존 프로젝트와는 완전히 분리된다. 2. 프로젝트 생성 시 라이브러리 리셋 여부새 프로젝트를 만들면 기본적으로 제공되는 라이브러리 외에는 별도로 설치한 라이브러리는 포함되지 않음.예를 들어, 기존 프로젝트에서 axios, sty..

[React] 컴포넌트 선언 방식 비교 export default vs const

1. export default function 방식 (네이밍 함수 선언)export default function App() { return Hello, World!; }특징:function App()은 기명 함수(네이밍 함수) 선언 방식.export default를 함수 선언부에서 바로 적용 가능.디버깅 시 오류 메시지에 함수명이 명확하게 표시됨.this 키워드 사용이 가능 (클래스 컴포넌트에서는 중요하지만, 함수형 컴포넌트에서는 거의 필요 없음). 2. const App = () => {}; export default App 방식 (화살표 함수 선언)const App = () => { return Hello, World!; }; export default App;특징:App은 익명 함수(Anonym..

[Git] React를 Git Pages에 호스팅 할 때 404 만 뜨는 문제

React 프로젝트를 Git Pages에 호스팅 했다.단일 페이지일 때는 잘만 되더니  Router를 걸어놓으니까 계속 404만 떴다. 원인은 내가 사용한 BrowserRouter 라이브러리 때문이었는데결론말 말하면 BrowerRouter -> HashRouter로 바꿔주면 해결된다. 📌 BrowserRouter vs HashRouter 차이1️⃣ BrowserRouter (기본)BrowserRouter는 HTML5의 History API(pushState, replaceState)를 사용하여 URL을 조작하는 방식import { BrowserRouter as Router } from 'react-router-dom'; function App() { return ( {/* 라우트 설정 */} ); ..

[JavaScript] 함수표현식(Function Expression)이란?

함수 표현식 (Function Expression)란?함수 표현식(Function Expression)은 함수를 변수에 할당하는 방식으로 정의하는 함수이다.JavaScript에서는 함수를 값(value)처럼 다룰 수 있기 때문에, 변수에 할당하는 것이 가능하다. 1. 함수 표현식의 기본 형태const greet = function() { console.log("Hello!");};greet(); // "Hello!"위 코드에서 function() { console.log("Hello!"); }는 익명 함수(Anonymous Function)이며,greet 변수에 저장된다. 이제 greet()를 호출하면 해당 함수가 실행된다. 2. 함수 표현식 vs 함수 선언문비교 항목함수 선언문 (Function De..

[JavaScript] 호이스팅(Hoisting), 함수를 아무데나 선언해도 되는 이유

호이스팅(Hoisting)이란?Hoist: 감아올리다호이스팅(Hoisting)은 JavaScript에서 변수와 함수의 선언이 실행 전에 해당 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 말한다.즉, 코드가 실행되기 전에 JavaScript 엔진이 변수와 함수 선언을 미리 메모리에 등록하기 때문에, 코드에서 선언보다 먼저 참조해도 오류가 발생하지 않을 수 있다. 호이스팅의 원리JavaScript 코드는 실행되기 전에 두 가지 단계로 처리된다.컴파일 단계(Preparation Step)코드 실행 전에 변수와 함수의 선언을 미리 메모리에 저장.var, let, const로 선언된 변수들은 호이스팅되지만, 초기화는 이 단계에서 되지 않음.함수 선언문(Function Declaration)은 전체 함수..

[Mac] Docker 악성코드 오탐지 오류 해결 'com.docker.vmnetd'에 악성 코드가 포함되어 있어서 열리지 않았습니다. 이 동작은 Mac을 손상시키지 않았습니다.

새해부터 이런 docker 오류를 마주했다.간단하게 말하면 실제로 악성코드가 포함된 것이 아니라 잘못된 탐지로 인한 오류라고 한다.해결방법은 Docker를 최신버전으로 업데이트 하는 것! 인데 나 같은 경우는 새 버전을 설치해도 같은 오류가 반복되었고 아예 도커가 열리지 않는 상황이었다.다행히 방법이 다 나와있었다. 1. 제대로 시작 안되는 Docker의 프로세스를 먼저 종료한다.sudo launchctl bootout system/com.docker.vmnetd 2>/dev/null || truesudo launchctl bootout system/com.docker.socket 2>/dev/null || truesudo rm /Library/PrivilegedHelperTools/com.docker...

[Docker] Docker volume 명령어 모음

Docker 볼륨은 로컬 디렉터리가 아니라/var/lib/docker/volumes 등 Docker 내부 경로에 위치하여 Docker 엔진이 자체적으로 관리한다.docker volume 명령어 생성 docker volume create my-data-volume 볼륨 목록 조회docker volume ls 상세 정보 확인docker volume inspect my-data-volume 컨테이너에 마운트docker run -v my-data-volume:/app/data my-image 백업docker run --rm -v my-data-volume:/data -v $(pwd):/backup busybox tar cvf /backup/my-data-volume-backup.tar /data 복원docker..

[Docker] 컨테이너끼리 데이터 주고 받기 - 실행 중 아니어도 됨

도커 컨테이너가 실행 중이 아니어도 내부의 데이터를 서로 주고 받는 방법이 있다. container1의 데이터를 tmp로 옮김 #Copy data from container1 to the hostdocker cp container1:/path/to/data /tmp/data→ tmp 데이터를 → container2로 옮김#Copy data from the host to container2docker cp /tmp/data container2:/path/to/destination 끝

[Python] 명령어 하나로 requirements.txt 파일 손쉽게 생성 및 설치하기

파이썬에 설치된 라이브러리들을 다른 환경에 적용할 때 활용하는 requirements.txt 파일호옥시나 일일이 옮겨적고 있었다면?명령어 하나로 현재 파이썬에 설치된 패키지 리스트를 바로 requirements.txt 파일로 만들어 보자.1. freeze 로 간단하게 생성pip freeze > requirements.txt를 수행하면 아래 내용처럼 requirements.txt 파일이 생성된다.aiohappyeyeballs==2.4.4aiohttp==3.11.10aiosignal==1.3.1annotated-types==0.7.0anyio==4.7.0asgiref==3.8.1attrs==24.2.0certifi==2024.8.30charset-normalizer==3.4.0distro==1.9.0Djan..