Programming/React16 [React] Bundle 최근 CRA가 종료되어서 CRA 였던 프로젝트들을 Vite로 묶어가는 과정중에 있다. 그러다보니 Bundle이라는 부분에 대해 명확하게 알고 있어야 기존의 프로젝트 속성 그리고 다른 OS환경과의 연동관의 문제점을 발견해야했다.번들은 React 자체 기능은 아니고, React 앱을 웹에서 실행 가능하게 묶어주는 과정이다.💡 React에서 "번들(bundle)"이란?여러 개의 JavaScript, CSS, 이미지 파일 등을👉 하나(또는 몇 개)의 최종 실행 가능한 파일로 묶는 작업예를 들어 React 앱에 다음처럼 다양한 파일이 있다면:1234567src/├── App.tsx├── List.tsx├── styles.css├── utils.ts cs".. 2025. 3. 26. Typescript – 동기 / 비동기 단일 스레드로 동작하는 자바 스크립트Thread는 CPU가 프로그램을 동작시키는 최소 단위. 운영체제에서 프로그램이 실행되고 있는 상태를 프로세스라고함. 프로세스는 한개의 주 스레드와 여러개의 작업 스레드를 동작시킴.자바 스크립트 코드는 항상 한개의 작섭스레드에 실행되며 웹 브라우저나 Node.js에서 프로그램 자체에서 다중 스레드를 지원하지만 자바스크립트는 단일 스레드에서 동작.동기 / 비동기동기(synchronous)란, 어떤 작업을 실행할 때 그 작업이 끝나기를 기다리는 방식을 의미한다. 즉, 작업이 완료될 때까지 다음 코드의 실행을 멈추고 기다리는 것이다. 이러한 방식은 작업의 순서를 보장하고, 작업이 끝날 때까지 결과를 기다리는 것이 가능하다.비동기(asynchronous)란, 어떤 작업을 실행.. 2025. 3. 21. React 프로젝트 구조와 폴더 설명 React는 효율적인 UI 개발을 지원하는 강력한 라이브러리입니다. React 프로젝트를 체계적으로 관리하기 위해 적절한 폴더 구조를 설계하는 것은 매우 중요합니다. 이번 글에서는 React 프로젝트의 기본 구조와 주요 폴더의 역할에 대해 자세히 알아보겠습니다.프로젝트 기본 구조React 프로젝트의 기본 폴더 구조는 다음과 같습니다:java코드 복사react-project/│├── build/├── node_modules/├── public/├── src/│ ├── components/│ ├── containers/│ ├── pages/│ ├── store/├── package.json1. build/npm run build 명령어를 실행하면 생성되는 배포 폴더입니다. 이 폴더는 브라우저에.. 2025. 3. 21. react 에서 navigate 사용하기 (useNavigate / Navigate) 🤙 Link 는 특정 주소로 이동해주는 태그였다면, Navigate 는 특정 행동을 했을 때 해당 주소로 이동해줄 수 있게 만들어줍니다. 1. useNavigate 쓰기 useNavigate는 양식이 제출되거나 특정 event가 발생할 때, url을 조작할 수 있는 interface를 제공합니다. import { useNavigate } from 'react-router-dom'; function Func() { const navigate = useNavigate(); const onClickImg = () => { navigate(`/comment/id/등등 내가 원하는 주소`); }; return ( ); } export default Func; 이렇게 작성한다고 합니다. 이 코드에서의 url이 ww.. 2022. 7. 23. React npx create-react-app You are running `create-react-app` 4.0.0, which is behind the latest release (4.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove create-react-app The latest instructions for creating a new app can be found here: https://create-react-app.dev/docs/gettin.. 2022. 4. 5. [React] npx create-react-app 설치오류 "We no longer support global installation of Create React App" 요새 도커로 개발하고 왠만한 개발환경들인 사전에 설치되어있어서 오랜만에 새프로젝트나 공부하려고 하다보니 설치오류가 종종발생한다 이처럼 버전문제가 항상 발생하는데 이때 발생하는 문제를 가볍게 해결할수 있는 방법을 몇가지 메모하고자한다. 방법 1. 1 2 npx clear-npx-cache cs 방법 2. 1 npx create-react-app@5.0.0 my-app cs 이 두가지 명령어를 사용하면 왠만한 설치 문제 오류는 해결될것이다. 2022. 2. 14. [ React ]"npm run build" = "react-scripts: Permission denied" 필자는 리눅스나 맥에서 도커환경을 대부분 웹개발중인데 서버가 가끔 바뀌면 리엑트가 권한 문제가 해결이 안되서 이러한 문제가 종종 발생한다... 그래서 Stackoverflow나 여러 군대 찾아본결과 아래와 같은 명령어를 통하면 대부분은 해결이되는 것 같았다. Solution 1: npm install react-scripts --save Solution 2: 리엑트가 node_modules를 참고해서 빌드해야 하는데 아래와 같이 node_modules 권한도 풀어줄 필요가 있다. sudo chmod +x node_modules/.bin/react-scripts Solution 3: 본질적인 문제를 해결해보자 먼저 sudo 관리자 권한으로 빌드를 진행해보자. sudo npm run build Step 1:.. 2021. 12. 8. [오류해결] npm ERR! code ERESOLVE 가끔 npm install 또는 npm install package.json 설치시 오류가 종종 발생한다. 개인적인생각은 캐쉬메모리가 남아있어서 그런지 않은가 싶다. 아래와 같이 명령어를 통해 캐쉬를 삭제후 해보면 설치가 잘 된다. 해결방법 npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 된다. npm install react-paypal-express-checkout --save --legacy-peer-deps 참고 https://iancoding.tistory.com/154 2021. 10. 29. [오류해결] npm ERR! code ERESOLVE 가끔 npm install 또는 npm install package.json 설치시 오류가 종종 발생한다. 개인적인생각은 캐쉬메모리가 남아있어서 그런지 않은가 싶다. 아래와 같이 명령어를 통해 캐쉬를 삭제후 해보면 설치가 잘 된다. 해결방법 npm install react-paypal-express-checkout --save npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 된다. npm install react-paypal-express-checkout --save --legacy-peer-deps 참고 https://iancoding.tistory.com/154 2021. 10. 4. [REACT] .env 를 이용한 변수선언 및 사용법 ENV란? 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. .env 파일 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. .env 파일은 프로젝트의 최상위 루트에 파일을 만들어놓는다. 환경변수 설정 규칙 변수명은 반드시 ‘REACT＿APP＿‘으로 시작되어야한다. create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시.. 2021. 9. 7. [REACT] .env 를 이용한 변수선언 및 사용법 ENV란? 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등.. 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL,포트, API_KEY등.. 을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. .env 파일 외부 파일(.env)에 환경변수를 정의하여 변수로 받아오는 이유는 보안과 유지보수에 용이하기 때문이다. .env 파일은 프로젝트의 최상위 루트에 파일을 만들어놓는다. 변수명은 반드시 ‘REACT＿APP＿‘으로 시작되어야한다. create-react-app에서는 보안이 필요한 환경변수의 유출을 미연에 방지하기 위해 REACTAPP으로 시작되지 않는 환경변수.. 2021. 8. 27. [React] WebPack Webpack Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다. 그리고 다수의 자바스크립트 파일을 하나의 파일로 번들링하므로 html 파일에서 script 태그로 다수의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다. 웹팩을 사용하는 이유 각기 다른 자바스크립트를 로딩할 때, 스크립트 로딩 순서와 해당 HTML에서 필요하지 않은 js 파일들까지 로딩하여 리소스 낭비가 생김. 필요한 파일만 로딩하고 관리하고자 웹팩을 사용하게 됨. 1. 웹팩 시작하기 node.js를 설치하고, npm을 설치한다. 그런다음 CLI 환경에서 아래와 같이 작성한다. 1 2 3 4 .. 2020. 9. 12. 이전 1 2 다음
