[React] 리액트 프로젝트 구조
리액트의 흐름1. 리액트는 App.jsx 에 작성한 코드를 index.html 에 맞게 갈아끼우고, 이 html 파일을 클라이언트(브라우저)에 띄운다.2. App.jsx 의 코드를 index.html 에 갈아끼우게 도와주는 파일이 main.jsx (혹은 index.js)3. 리액트는 SPA 이어서 프로젝트에는 단 하나의 html 파일만 존재하는데, 그 파일이 index.html 임 * 나머지 폴더 설명node_modules : 설치한 라이브러리가 들어있는 폴더 (라이브러리 := 모듈)public : 이미지파일이나 데이터 파일 보관 폴더. 리액트 프로젝트를 빌드, 발행, 컴파일 등을 할 때 코드가 압축되는데 이 폴더에 있는 것은 압축되지 않음App.css : App.jsx 랑 연결되는 css 파일inde..
Single Page Application (SPA)란?- 하나의 HTML 파일에서 모든 컨텐츠를 동적으로 로드하는 애플리케이션 인스타그램이나 음악 사이트 등 어떤 웹사이트에서 특정 기능을 누르면 새로고침 없이 화면이 표출된다. 마치 앱처럼 작동하는 웹사이트들을 Web-App(웹 앱) 이라 한다. 이런 웹앱은 Single Page Application 으로, 새로고침 없이 부드럽게 움직인다. 앱처럼 작동하게 만들어진 웹이므로, 앱으로 발행 쉽다. SPA의 특징 및 장점1. 하나의 HTML 파일: 처음 로드 시 하나의 HTML 만 로드하고, 이후 필요한 콘텐츠는 JavaScript로 동적으로 가져와 렌더링한다.기존의 여러 페이지를 로드하는 방식(MPA, Multi Page Application)과 달리..
[React] node.js 사용하여 리액트 설치 및 프로젝트 환경설정 + SPA 설명
- 리액트는 SPA를 구현할 때 사용하는 자바스크립트 라이브러리이다.* SPA : Single Page Application 의 약자로, 하나의 html 파일에서 모든 컨텐츠를 동적으로 로드하는 애플리케이션 JavaScript로도 SPA 구현할 수 있지만 코드가 복잡하고 길어지니까 리액트를 쓰면 좋다. SPA에 대한 설명은 아래 게시글 참고https://dev-traveler.tistory.com/34 SPA란? Single Page ApplicationSingle Page Application (SPA)란?- 하나의 HTML 파일에서 모든 컨텐츠를 동적으로 로드하는 애플리케이션 인스타그램이나 음악 사이트 등 어떤 웹사이트에서 특정 기능을 누르면 새로고침 없이 화면이dev-traveler.tistor..