Front-end/React (3) 썸네일형 리스트형 [React] React App 배포하기 1. build란? 컴파일 : 작성한 소스 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 작업 컴파일 작업을 수행하는 프로그램을 컴파일러 라고 하는데, 일반적으로 컴파일의 결과는 .exe파일로 나타난다. (빌드의 한 과정) 빌드 : 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정과 그 결과 개발상태의 리액트는 개발의 편의성을 위해서 여러 가지 기능들을 추가해놓은 상태이기 때문에, 상당히 무거운 편이다. 개발자만 사용하게 된다면 모르겠지만 이 파일을 그대로 유저가 이용하게 된다면 상당히 느려질 것!! --> 이러한 불피요한 용량을 줄이기 위해 빌드를 하는 것이다. 2. build의 과정 npm run build yarn build 위 명령어를 수행하면 터미널에 아래와 같이 d.. [React] React Router DOM (리액트 라우터 돔) 1. 라우팅이란? 웹 어플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것을 의미한다. 리액트에서 라우트 시스템을 구축하기 위해 사용할 수 있는 선택지는 두가지가 있다. 리액트 라우터(React Router) : 리액트의 라우팅 관련 라이브러리들 중에서 가장 오래됐고, 가장 많이 사용된다. 리액트 라우터는 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있다. Next.js: Next.js는 리액트 프로젝트의 프레임워크이다. 우리가 사용했던 Create React App처럼 리액트 프러젝트 설정을 하는 기능,라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능들을 제공한다. 이 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동한다. 이.. [React] React란 무엇인가? (feat. SPA와 Virtual DOM) 1. 리액트(React)란 무엇인가? 리액트(React)는 페이스북에서 제공하는 자바스크립트 라이브러리의 하나로서, 사용자 인터페이스를 만들기 위해 사용된다. 리액트는 컴포넌트 기반인데, 컴포넌트에 데이터를 흘려보내면 설게된 대로 UI가 조립되어 사용자에게 보여진다. 리액트는 이벤트로 인해 데이터를 관리하는 Model에 변화가 생기면Virtual DOM을 생성하고, 이것을 실제 DOM과 비교하고 변화가 발생한 부분만 업데이트 하는 방식으로 작동한다. 2. SPA 와 Virtual DOM 전통적인 웹사이트는 문서 하나에 전달되는 파일의 용량이 적었기 때문에, 한번의 이벤트에 새로운 페이지를 서버에서 전송해주는 방식도 상관이 없었다. 하지만 점치 웹사이트가 고도화됨에 따라 한 페이지에 해당하는 용랴잉 커졌고.. 이전 1 다음
