React Study5 React에 대한 전반적인 이해 우리는 React를 사용하기 전 React가 무엇이고 왜 사용하는가에 대한 이해먼저 할 필요가 있다. 다음 순서대로 React에 대한 전반적인 이해를 해보려고한다.1. React가 무엇인가?2. React가 왜 등장했는가?3. React의 주요 특징이 무엇인가?4. 대체할 수 있는 다른 라이브러리나 프레임워크가 있다면 그 차이는 무엇인가?1. React가 무엇인가? 공식문서에서 확인한 React의 개념은 다음과 같다.React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 즉, 기본적으로 React는 UI 즉 View를 개발하기 위한 프론트엔드 라이브러리이다.2. React가 왜 등장했는가?React의 등장 배경을 설명하기 위해서는 이전의 프론트엔드(view) 개발에 대한 기본.. 2024. 5. 30. CRA(Create React App) 직접 구현하기 (2) - 구현 바벨과 웹펙에 대하여 CRA(Create React App) 직접 구현하기 (1) - 바벨과 웹팩이란CRA(Create React App)은 React App을 구현하기 위해 필요한 여러 보일러플레이트를 자동으로 설정해주는 도구이다.자동으로 설정되기 때문에 Webpack과 Babel의 지식이 없어도 개발을 진행할 수 있도록 도audtjqxx.tistory.com 1. npm initReact App에서는 npm을 통한 모듈 의존성 관리를 한다. 따라서 npm init 이라는 명령어를 통해 의존성 관리를 도와주는 pakage.json 파일을 생성한다. (-y를 통해 빠르게 생성하자) 위와 같이 package.json 파일이 자동생성된 것을 알 수 있다.그렇다면 package.json은 무엇일까?pack.. 2024. 5. 22. CRA(Create React App) 직접 구현하기 (1) - 바벨과 웹팩이란 CRA(Create React App)은 React App을 구현하기 위해 필요한 여러 보일러플레이트를 자동으로 설정해주는 도구이다.자동으로 설정되기 때문에 Webpack과 Babel의 지식이 없어도 개발을 진행할 수 있도록 도와준다. 하지만 이러한 CRA를 직접 구현한다면, 기본적인 Webpack, Babel에 대한 지식 뿐만아니라 React 어플리케이션에 이해에도 도움이 될 것이다. CRA를 하면서 자동으로 구성되는 요소에 대해서 먼저 알아보자. 1. 바벨 (Babel)바벨은 자바스크립트의 컴파일러이다. 즉 자바스크립트 코드를 변환시킨다는 이야기이다.그렇다면 스크립트 언어인 자바스크립트를 왜 컴파일 시켜야하는가?바로 자바스크립트에는 여러가지 버전이 있기 때문이다.특히 자바스크립트는 ECMAScrip.. 2024. 5. 21. useState란 무엇일까 (feat. 클로저) useState는 함수형 컴포넌트에서 상태를 관리하기 위한 react hook useState는 리액트 개발을 처음 배울 때 가장 먼저 배우는 개념이라고 할 수 있다. 이러한 useState에 대하여 더 자세하게 알아보면서 개발하면서 느꼈던 의문점들을 해결해보고자 한다. 다음은 클래스형 컴포넌트의 구성 예시이다. import {Component} from 'react' interface State{ count:number } class CountComponent extends Component { private constructor(){ this.state={ count:1, } } private handleClick = () => { const newValue = this.state.count + 1 .. 2024. 3. 21. React 개발을 위한 Flux 패턴이란? 리액트는 2011년 페이스북(현 meta)에서 선보인 SPA 라이브러리이다. 각종 사용자 인터렉션을 실시간으로 처리해야하는 페이스북과 같은 소셜 웹에서 UX를 개선하고 실시간성을 보장하기 위해 페이스북에서는 React 라이브러리를 개발하기 시작하였다. React를 통한 개발을 할 때 기존 MVC 패턴을 통한 개발은 어려움을 주었고 이때 등장한 패턴이 Flux 패턴이다. 기존 MVC 패턴과 비교하며 Flux 패턴의 이점에 대하여 알아보겠다. MVC 패턴 MVC 패턴은 Model-View-Controller의 줄임말로 Model, View, Contoller 각각의 개념을 역할로 나누어 작업을 처리하는 개발 디자인 패턴이다. 각각의 역할은 다음과 같다 Model 어플리케이션에서 보여줄 모든 데이터, 정보를 .. 2024. 3. 14. 이전 1 다음
