개발 메모리

1. 깃허브 저장소 만들기GitHub에 로그인 후 .github.io로 새로운 저장소를 생성한다. 2. 리액트 프로젝트 생성 및 패키지 설치npx create-react-app 프로젝트명cd my-app위에 코드로 리액트 프로젝트를 생성한다이미 리액트 프로젝트가 있으면 생략 가능npm install gh-pages --save-devReact 프로젝트에서 GitHub Pages로 배포하려면 gh-pages 패키지를 설치해야 한다.위에 코드를 터미널에 적어 패키지를 설치해준다 3. 프로젝트 설정 파일 수정"homepage": "https://.github.io"package.json 파일의 맨 위에 homepage 속성을 추가한다."scripts": { "predeploy": "npm run build"..

Redux 개요Flux 패턴MVC 패턴이란 Model에 데이터를 저장하고, Controller를 사용하여 Model의 데이터를 관리하는 소프트웨어 디자인 패턴의 하나다. 이러한 MVC 패턴에서는 사용자가 View를 통해 데이터를 입력하면 View에서도 Model를 업데이트 할 수 있기 때문에 데이터가 양방향으로 전달될 수 있다.하지만 이렇게 구현된 프로젝트는 프로젝트의 규모가 커질수록 수많은 Model과 View가 생성되고, 이때 Model의 상태에 변화가 생길 경우 Model과 View 사이에 엄청난 양의 데이터가 양방향으로 전달되게 된다. 이로 인해 데이터의 흐름을 예측하기가 점점 힘들어지고, 수많은 버그를 발생시키는 원인이 된다.이러한 문제를 해결하기 위해 2014년 페이스북에서는 Flux 패턴이라..

라우팅(routing)이란?라우팅(routing)이란 사용자가 요청한 리소스를 얻기 위해 웹 서버 내에서 URL에 명시된 리소스를 찾아가는 과정을 가리킨다. 일반적으로 사용자가 요청한 URL을 해석하고 새로운 페이지로 전환하기 위한 데이터를 얻기 위해 웹 서버에 필요한 데이터를 요청하여 전달받고 화면을 전환하는 작업을 통틀어 의미한다.라우팅은 웹 서버 측에서 진행되지만 브라우저 객체 모델(BOM)를 이용하면 실제로는 웹 브라우저에서 동작하는 라우팅 작업을 사용자에게는 서버 측에서 동작하는 것 같이 보여줄 수 있다. 이렇게 웹 브라우저, 즉 클라이언트 측에서 발생하는 라우팅을 클라이언트 사이드 라우팅(Client-Side-Routing, CSR)이라고 한다. 이러한 라우팅 시스템을 활용하면 SPA 방식의 ..

Hook이란?Hook은 React v16.8 부터 새롭게 도입된 기능으로, 이를 활용하면 클래스 컴포넌트를 작성할 필요 없이 함수 컴포넌트에서도 state 관리와 생명 주기(lifecycle) 메소드 등 여러 다양한 React 기능들을 사용할 수 있다.Hook은 state, context, ref, lifecycle 등과 같은 다양한 React 개념을 사용자가 손쉽게 사용할 수 있도록 좀 더 직관적인 API(내장 Hook)를 제공한다. 또한, 컴포넌트 사이의 state 관련 로직을 재사용하기 위해 사용자가 직접 자신만의 Hook을 만들어 사용할 수도 있다.Hook의 특징Hook을 사용하면 컴포넌트로부터 state 관련 로직을 추상화할 수 있으며, 이를 활용하여 독립적인 테스트와 로직의 재사용이 가능해진다..

조건부 렌더링(conditional rendering)React에서는 상황에 따라 동일한 컴포넌트이지만 서로 다른 내용을 화면에 표시해야 할 경우가 생길 수 있다. 이러한 경우 다음과 같은 방법들을 사용하여 조건부로 JSX 코드를 렌더링할 수 있다.if / else 조건문삼항 연산자(? :)논리 AND 연산자(&&)React에서 조건부 렌더링은 자바스크립트의 조건문 처리와 비슷하게 동작한다. if 문이나 조건부 연산자와 같은 자바스크립트 연산자를 사용하여 현재 상태를 나타내는 엘리먼트를 생성하면, React는 현재 상태에 맞도록 UI를 업데이트할 것이다.if / else 조건문// LoginPanel.js// 사용자의 로그인 상태에 따라 Login 버튼과 Logout 버튼의 렌더링 여부를 결정const ..

이벤트 핸들링이벤트 핸들러 추가하기이벤트 핸들러(event handler)란 사용자의 마우스 클릭이나 키보드 동작, 사용자 입력의 포커스 등과 같은 이벤트가 발생했을 때 그 처리를 담당하는 실행 함수를 가리킨다. React에서는 이러한 이벤트 핸들러를 JSX 코드 내에 작성하여 추가함으로써 해당 이벤트를 처리할 수 있다.// 버튼을 클릭하면 간단한 경고 대화 상자를 띄우는 예제// App.jsconst App = () => { const handleClick = () => { alert("버튼을 클릭했습니다!"); }; return 클릭하세요!;};export default App;React에서 이벤트 핸들러의 이름은 일반적으로 ‘handle’이라는 단어로 시작하여 처리하고자 하는 이벤트명을 ..

CSSCSS 클래스를 활용한 스타일링기존부터 사용해 왔던 전통적인 방식의 CSS 스타일링을 계속 사용하는데 문제가 없고, 새로운 스타일링 방식을 적용하는 것이 불필요하다고 판단된다면 기존의 CSS 스타일링 방식을 그대로 사용해도 무방하다.React 컴포넌트에 스타일을 적용하는 가장 간단한 방법은 인라인(inline) 스타일을 적용하는 것이다. HTML 태그에 인라인 스타일을 적용하는 것과 마찬가지로 style 속성을 사용하여 React 엘리먼트에 인라인 스타일을 곧바로 적용할 수 있다.하지만 React에서는 웹 페이지와는 달리 인라인 스타일을 적용할 때 style 속성값으로 일반 문자열이 아닌 자바스크립트 객체를 할당해야만 하고, CSS 속성명을 카멜 표기법(CamelCase)으로 바꿔 작성해야만 한다...

Props(properties)란?React 컴포넌트가 자바스크립트 함수의 개념과 비슷하다. 이와 같은 맥락으로 props는 함수에서 인수(argument)의 개념과 비슷하게 이해할 수 있다.props는 컴포넌트에 데이터를 전달하고자 할 때 사용하며, 이렇게 전달된 값은 변수를 통해 참조할 수 있다.React에서 데이터의 흐름은 위에서 아래로(부모 컴포넌트로부터 자식 컴포넌트에게) 전달되므로, props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.props 설정하고 사용하기React에서 props를 설정하는 방법은 HTML 요소에 속성을 설정하는 문법과 동일하다.// App.jsconst Laptop = (props) => { return 내 노트북은 {props.bran..

엘리먼트(element)란?엘리먼트(element)는 View에 렌더링 할 내용을 React에 알려주기 위한 수단으로, React 애플리케이션을 구성하는 가장 작은 블록이다.const element = Hello, WorldReact 엘리먼트는 HTML 태그의 이름을 값으로 가지는 type 필드와 그 외 속성들을 값으로 전달받는 props 필드로 구성된 객체(object) 형태로 정의되며, React는 이 객체를 읽어들여 DOM을 구성하고 최신 상태로 업데이트하는데 사용한다.React 엘리먼트는 일반 객체(plain object)로 손쉽게 생성할 수 있지만, 불변 객체(immutable object)이기 때문에 일단 생성된 후에는 상태나 속성을 변경할 수 없다. 따라서 React에서 UI를 업데이트하는 ..

JSX란?JSX는 자바스크립트를 확장한 문법으로, React에서는 UI를 어떻게 표현해야 하는지를 설명하기 위해 React와 함께 사용할 것을 권장한다.JSX를 사용하면 자바스크립트 코드 내에서도 HTML 코드처럼 UI를 바로 표현할 수 있기 때문에 UI 관련 작업을 할 때 좀 더 직관적이고 용이한 개발이 가능하게 한다.하지만 JSX는 표준 자바스크립트 문법이 아니기 때문에, 웹 브라우저는 JSX 코드를 그대로 이해하지는 못한다. 따라서 JSX 코드는 웹 브라우저에서 실행되기 전 Babel과 같은 도구를 사용하여 표준 자바스크립트 문법으로 변환되어야만 한다.JSX를 사용하면 아래와 같이 복잡하고 중첩된 React.createElement() 호출 코드를 여러 번 작성할 필요가 없어지므로, UI 개발이 매..