REACT19 (react) 리액트앱 설치 예전에는 웹팩이나 바벨과 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었으나, 요즘은 "npx create-react-app [폴더이름]"과 같은 명령어로 간단하게 리액트를 설치할 수 있다고 함. 설치 과정Node.js 설치npm(또는 yarn)에서 create-react-app 전역 설치새폴더 만들기create-react-app 실행하여 프로젝트 생성npm start 명령어로 개발 서버 실행#터미널에서 아래 명령어만 타이핑해주면 됨npx create-react-app #설치(설치가 되어있다면 패스)npm install (yarn인 경우는 yarn install)#개발 서버 실행npm start (yarn인 경우는 yarn start) 공부할 때는 설치하는 것들이 심플하게 느껴지지만실제 프로.. 2024. 11. 19. (react) SPA란? SPA란?기존 웹 사이트를 만들 때 여러 페이지를 만들고 링크를 이동하는 방식을 Multi Page Application라고 한다면, React에서는 웹 사이트 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것을 SPA(Single Page Application)라고 함.SPA에서 페이지 전환(브라우징)은 HTML5의 History API를 사용하여 기능을 구현함. 즉, 자바스크립트에서 History API를 이용하여 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 됨. History APIHistory.back()세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드History.forward()세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드History.go()특.. 2024. 11. 18. (react) package.json Node.js에서 package.json이란? package.json은 Node.js 프로젝트에서 핵심적인 역할을 하는 파일로 프로젝트에 대한 메타데이터와 프로젝트가 의존하는 패키지들에 대한 정보를 담고 있음. 마치 프로젝트의 신분증과 같은 역할을 수행하며, npm(Node Package Manager)을 통해 패키지를 관리하는 데 필수적임. package.json의 주요 역할프로젝트 정보: 프로젝트의 이름, 버전, 설명, 저자 등 기본적인 정보를 기록의존성 관리: 프로젝트에서 사용하는 외부 패키지(모듈)들의 목록과 버전을 관리스크립트 정의: npm 명령어를 통해 실행할 수 있는 스크립트(예: 시작, 테스트, 빌드 등)를 정의프로젝트 설정: 프로젝트의 다양한 설정 값들을 저장 package.json의 주.. 2024. 11. 17. (react) 브라우저 렌더링 브라우저 렌더링 과정HTML, CSS 파싱: 브라우저는 HTML과 CSS 파일을 읽어서 DOM(Document Object Model)과 CSSOM(CSS Object Model)을 생성함. DOM은 HTML 문서의 구조를 나타내는 트리 구조이고, CSSOM은 스타일 정보를 담고 있는 객체 모델을 말함.렌더 트리 생성 : DOM과 CSSOM을 결합하여 렌더 트리를 생성함. 렌더 트리는 화면에 보여질 요소와 스타일 정보를 포함하고 있음.레이아웃: 렌더 트리의 각 요소의 위치와 크기를 계산함.페인팅: 계산된 레이아웃 정보를 바탕으로 실제 화면에 픽셀을 그림. React에서 사용하는 가상 DOM이란?자바스크립트 객체로 표현된 실제 DOM의 복제본으로 메모리 상에서 관리되며, 실제 DOM과 동일한 구조를 가짐.. 2024. 11. 16. (react) DOM이란? DOM(Document Object Model)이란?DOM은 웹 페이지의 문서 구조를 트리 형태의 표현해서 만든 객체 모델을 의미함. HTML 문서를 읽어 들인 브라우저는 이 HTML 문서를 DOM이라는 객체로 표현하여 JavaScript를 통해 이 객체를 조작할 수 있음. DOM은 웹 페이지를 자바스크립트로 조작할 수 있도록 만들어진 인터페이스라고 할 수 있음. DOM의 구성 노드(Node): DOM의 기본 단위로, HTML 문서의 모든 요소(Element), 텍스트, 주석 등요소(Element): HTML 태그에 해당하는 노드(예: div, p, button 등)속성(Attribute): 요소의 특성을 나타내는 값(id="...", class="..." 등)텍스트 노드: 요소 내의 텍스트를 나타내는.. 2024. 11. 15. (react) 컴포넌트 React 컴포넌트란?React 컴포넌트는 React 애플리케이션의 UI를 구성하는 가장 기본적인 단위. 마치 레고 블록처럼 작은 컴포넌트들을 조립하여 복잡한 UI를 만들 수 있음. 각 컴포넌트는 독립적으로 관리되고 재사용될 수 있어 코드의 유지보수성과 재사용성을 높여줌. 컴포넌트 특징재사용성: 한 번 만들어진 컴포넌트는 여러 곳에서 반복적으로 사용 가능독립성: 각 컴포넌트는 자체적인 로직과 상태를 가지고 있기때문에 다른 컴포넌트에 영향을 주지 않음.캡슐화: 컴포넌트 내부의 구현은 외부에 노출되지 않고 숨겨져 있어 복잡도를 줄이고 유지보수가 용이함.계층 구조: 컴포넌트는 부모-자식 관계를 통해 계층 구조를 형성하며, 이를 통해 복잡한 UI를 효과적으로 관리. 컴포넌트의 종류함수형 컴포넌트: 함수로 정.. 2024. 11. 14. (react) Node.js Node.js 개요Node.js는 Google Chrome의 V8 JavaScript 엔진을 기반으로 만들어진 JavaScript 런타임**으로 쉽게 말하면, 브라우저 밖에서도 자바스크립트 코드를 실행할 수 있는 환경을 제공하는 도구라고 할 수 있음. **런타임(runtime): 컴퓨터 프로그램이 실행되고 있는 동안의 동작 Node.js의 특징비동기 I/O: 여러 작업을 동시에 처리할 수 있어 서버 성능의 극대화.단일 스레드: 하나의 스레드로 동작하지만 비동기 방식으로 많은 요청을 처리.이벤트 드리븐: 이벤트 발생 시 특정 함수를 실행하는 방식으로 동작.모듈 시스템: 다양한 기능을 가진 모듈을 활용하여 개발 생산성 향상.크로스 플랫폼: 다양한 운영체제(윈도우, 리눅스, macOS 등)에서 동작. No.. 2024. 11. 13. (react) 리액트란? React란 무엇인가?React는 사용자 인터페이스(UI)를 만들기 위한 "자바스크립트 라이브러리"로써 Facebook에서 개발되었으며, 복잡하고 인터랙션이 많은 웹 어플리케이션을 효율적으로 개발하기 위해 널리 사용됨. 웹 어플리케이션을 만드는 다른 도구로 Vue.js나 Angular.js와 많이 비교를 하게 되는데, Vue나 Angular는 프레임워크이나 React는 라이브러리라는 차이점이 있음. 프레임워크: 어떤 앱을 만들기 위해 필요한 대부분의 것을 갖고 있음라이브러리: 어떤 특정 기능을 모듈화 해놓음 즉, 프레임워크는 라이브러리를 포함하고 개발자가 작성한 코드를 호출하는데, 이렇게 호출한 코드는 어떤 기능을 구현하기 위해 라이브러리를 호출하게 됨. 라이브러리들은 특정 기능을 위해 모듈화 되어 있.. 2024. 11. 12. (react) yarn이란? Yarn이란?Yarn은 JavaScript 프로젝트에서 패키지(모듈)를 관리하는 도구로써 npm과 비슷한 기능을 제공하지만, 더 빠르고 안정적인 패키지 설치를 보장하며, 몇 가지 추가적인 기능을 통해 개발자의 편의성을 높여줌. Yarn의 주요 특징병렬 다운로드와 캐싱 기능을 통해 npm보다 훨씬 빠른 설치 속도yarn.lock 파일을 통해 정확한 패키지 버전을 관리하여, 다양한 개발 환경에서도 동일한 결과한 번 설치한 패키지는 캐시에 저장되어 오프라인 상태에서도 설치가 가능다양한 플러그인을 통해 Yarn의 기능 확장 예시# 특정 패키지 설치yarn add react# 프로젝트 초기화yarn init -y# package.json 파일 생성 및 의존성 관리# package.json 파일은 프로젝트에 필.. 2024. 11. 10. 이전1 1 2 3 다음 728x90 반응형
