TIL/React
-
[TIL] import / export 문법TIL/React 2023. 8. 25. 17:04
고급 자바스크립트 프로젝트나 리액트 프로젝트는 여러 파일에 코드를 분리해 관리하기 쉽게 만드는 것이 좋다. 이를 위해서 import와 export 구문이 사용된다. 1. import / export [util.js] export let apiKey = "asdasdaghlkl"; [app.js] import { apiKey } from "./util.js" 경로는 같은 폴더인 경우 ./ 상위 폴더인 경우 ../ 과 같다. 확장자 .js를 생략해도 빌드 프로세스에서 자동으로 추가된다. import와 export를 사용하더라도 결과물의 소스 코드를 보면 type="module"이 없는 것을 확인할 수 있는데 이는 빠른 전송을 위해 빌드 프로세스에서 파일을 하나로 합치기 때문이다. 2. default [uti..
-
[TIL] React 빌드 원리TIL/React 2023. 8. 25. 11:08
HTML에 자바스크립트를 삽입하려면 script 태그가 필요하지만 리액트 프로젝트에서 index.html 파일을 열어보면 script 태그가 존재하지 않는 것을 알 수 있다. 이는 리액트 프로젝트가 빌드 프로세스를 사용하기 때문이다. 즉 작성한 코드가 바로 브라우저에서 실행되는 것이 아니라 내부적으로 코드가 수정된다. packeage.json의 react-scripts패키지가 코드를 변환하는 역할을 한다. (HTML에 script태그를 추가) 실제로 리액트로 빌드한 앱을 개발자 도구로 분석해보면 script 태그가 들어간 것을 확인할 수 있다. 빌드 프로세스가 필요한 이유 리액트 코드(JSX 코드 - 표준 자바스크립트 기능이 아님)를 브라우저에서 바로 실행할 수 없기 때문에 JSX 코드 등을 자바스크립트..
-
[TIL] React 프로젝트 생성TIL/React 2023. 8. 24. 22:37
리액트 프로젝트를 새로 시작하는 방법은 크게 두 가지가 있다. 로컬에서 생성 웹 기반 개발 환경 이용(CodeSandbox 등) 📘로컬에서 생성 외부에서 파일 다운로드 Create React App 이용 참고 Vite 이용 참고 로컬에서 직접 생성할 경우에는 세부 사항(타입스크립트 사용 여부 등)을 직접 지정할 수 있다는 장점이 있다. 이 때 로컬에서 생성한 프로젝트를 실행하기 위해서는 Node.js 설치가 필수적이다. Node.js가 설치되어있으면 아래 커맨드를 통해 리액트 앱을 실행할 수 있다. > npm install > npm start 📙원격 생성 https://codesandbox.io/ https://replit.com/ https://vscode.dev/ 외부 서비스를 이용해 원격으로 프로..
-
[TIL] React를 사용하는 이유TIL/React 2023. 8. 24. 21:32
📘React란? 웹 및 네이티브 사용자 인터페이스를 구축을 위한 라이브러리 리액트는 자바스크립트 라이브러리로서 브라우저의 자바스크립트를 이용해 웹페이지와 페이지에 표시되는 사용자 인터페이스를 재로딩 없이 업데이트한다. (자바스크립트는 웹사이트 백그라운드에서 실행되며 로딩이 완료된 페이지를 읽고 조작할 수 있다) 이를 이용해 SPA를 구현하고 백그라운드의 데이터를 가져와 컨텐츠를 업데이트하고 페이지끼리 부드럽게 전환되게 한다. ex) 페이스북, 넷플릭스 📙자바스크립트 대신 리액트를 사용하는 이유 리액트는 바닐라 자바스크립트보다 더 단순한 심상 모델을 제공하고 복잡한 웹앱과 사용자 인터페이스를 더 쉽게 구축하게 해준다. 자바스크립트는 명령형으로 작성하여 거쳐야 할 단계를 모두 정의해야 해서 번거롭고 단계를 ..
-