단의 개발 블로그

웹 브라우저의 화면은 DOM이다. 브라우저의 엔진은 HTML를 해석하여 DOM 트리를 구성한다. HTML 구문은 웹 서버나 브라우저가 생성한다. 이때 웹 서버가 생성하는 것을 SSR, 브라우저가 생성하는 것을 CSR라고 부른다. SSRServer Side Rendering의 약자로, 서버에서 정적 파일을 렌더링 하는 것을 의미한다. SSG라는 개념이 종종 사용되기도 하는데 Static Site Generation으로 정적 화면만 제공할 때 사용하는 렌더링 방식을 의미한다. 장점초기 페이지 로딩 시간이 빠르다.검색엔진 최적화가 된다.보안이 좋다.실시간 데이터를 보여줄 수 있다단점서버 자원을 많이 사용한다.페이지 깜빡임이 발생한다CSRClient Side Rendering의 약자로, 클라이언트(브라우저)에..

JWTJSON Web Token의 약자로 인증을 위한 데이터 형식이다. JSON 형식으로 암호화된 문자열로 구성하여 데이터를 전송한다. 이 문자열은 서버와 클라이언트 간의 인증과 정보 전달에 사용된다. 즉, 클라이언트 - 서버 간 안전한 정보 전달을 위한 인증 권한 부여 메커니즘으로, 토큰 기반 인증 (Token-Based Authentication) 방식에 사용된다. 형식은 헤더, 페이로드, 서명으로 구성된다.JWT 구조빨간색이 헤더, 보라색이 페이로드, 하늘색이 서명이다. HeaderJWT 토큰의 정보를 담고 있는 메타데이터다.사용되는 알고리즘과 토큰의 타입을 정의한다.위 예시에서는 HS256 알고리즘과 JWT 타입으로 지정되어 있다.PayloadJWT 토큰에 실제 정보가 담긴 부분이다.사용자 정보를..

실제 서비스 되는 애플리케이션은 빌드 작업을 거쳐 배포된다. 불필요한 주석, 경고메세지, 주석을 제거해서 파일 크기를 최소화 하고, jsx문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드 트랜스 파일 작업도 가능하다. 이런 작업은 웹팩이라는 도구가 담당하는데, 별도의 설정을 하지 않을 경우 프로젝트에서 사용 중인 모든 자바스크립트 파일과 css 파일이 합쳐진다. CRA로 빌드할 경우 최소 두 개 이상의 자바스크립트 파일이 생성되는데, CRA의 기본 웹팩 설정에는 splitChunks라는 기능이 적용되어 modules에서 불러온 파일, 일정크기 이상의 파일, 여러 파일 간 공유된 파일을 자동으로 분리시켜 캐싱 효과를 누릴 수 있게 해준다. 빌드하기yarn build 명령어를 실행하면 다음과 ..

리액트 애플리케이션에서 API 서버를 연동할 때 API 요청에 대한 상태도 관리해야 한다. 요청 시작 시 로딩, 성공 실패에 따른 각각 응답 상태 관리를 해야한다는 뜻이다. 미들웨어를 사용하여 효율적이고 편하게 상태 관리를 할 수 있다. 아래 패키지를 추가한다.yarn add redux react-redux redux-actions  리덕스 생성import {createAction, handleActions} from "redux-actions";const INCREASE = 'counter/INCREASE';const DECREASE = 'counter/DECREASE';export const increase = createAction(INCREASE)export const decrease = crea..

전역 상태관리리액트에서 상태관리는 부모 컴포넌트가 진행한다. 그러면 결국 app 루트에서 자식 컴포넌트로 전달 과정을 여러번 거치게 된다. 이를 방지하고자 전역에서 상태 관리하는 방법이 고안됐다. 단순히 ContextAPI로 작업을 해도 되지만, 보통 리덕스라는 리액트 상태 관리 라이브러리를 많이 사용한다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있기 때문이다. 액션상태에 어떤 변화가 필요하면 액션이란 것이 발생한다. 하나의 객체로 표현된다. 리듀서변화를 일으키는 함수다. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 그리고 두 값을 참고하여 새로운 상태를 만들어 반환한다. 스토어프로젝트에 리덕..

라우팅라우팅은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 보통 애플리케이션은 여러 페이지로 구성되어 있는데, 페이지 별로 컴포넌트를 분리해서 관리할 때 필요하다. 리액트에서 사용되는 라우팅은 두가지 방식이 존재한다.리액트 라우터 : 라우팅 관련 라이브러리들 중에 가장 오래됐고, 많이 사용된다. 컴포넌트 기반으로 라우팅 시스템을 설정한다.Next.js : 리액트 프로젝트의 프레임워크다. 프로젝트 설정 및 라우팅 시스템, 최적화, 다국어, 서버 사이드렌더링 등 다양한 기능을 제공한다. 리액트 라우터 대안으로 많이 사용된다.SPASingle page Application이란 하나의 페이지로 이루어진 애플리케이션이다. 멀티 페이지 애플리케이션은 사용자가 다른 페이지로 이동할 때마다 ..

Hooks란?리액트에 도입된 기능으로 함수 컴포넌트에서 다양한 작업을 도와주는 기능이다. useState기본적인 훅으로 함수 컴포넌트에서 가변적인 상태를 지니게 해준다. 함수 컴포넌트의 상태를 관리할 때 사용된다.import {useState} from "react";const Counter = () => { const [count, setCount] = useState(0); return ( count의 값: {count} setCount(count + 1)}>+1 setCount(count - 1)}>-1 )}export default Counter;import './App.css';import..

이벤트란?사용자가 웹 브라우저와 상호 작용을 하는 것을 이벤트라고 한다. 마우스 클릭, 마우스 아웃, form 입력 등이 있다. 여러 이벤트에 따라 리액트는 해당 이벤트를 받아서 처리할 수 있다.  이벤트 사용 주의사항이벤트 명은 카멜 표기로 작성 ex) onclick -> onClick이벤트에 실행할 자바스크립트 코드가 아닌 함수 형태로 전달DOM 요소에만 이벤트 설정 가능 ex) div, button, inpu등 , 즉 직접 제작한 컴포넌트에는 사용이 불가능 이벤트 종류리액트에서 지원하는 이벤트 종류이다. 이외에도 다양한 이벤트가 있으므로 공식 문서를 참고해서 각자 필요한 이벤트를 사용하면 된다.ClipboardCompositionKeyboardFocusFormMouseSelectionTouchUIW..

컴포넌트리액트는 여러 컴포넌트로 구성하여 사용한다. 컴포넌트는 속성값 props와 상태 값 state를 사용한다. 원래는 클래스형 컴포넌트와 함수형 컴포넌트가 존재해서 사용되어 왔는데 요새는 함수형 컴포넌트가 주로 사용된다. 클래스 형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용하고, 임의 메소드를 정의할 수 있다. 함수형 컴포넌트는 선언하기 편하고, 메모리 측면에서 유리하다. 또한 클래스 형 컴포넌트가 가진 장점들을 훅을 사용해서 구현이 가능하기 때문에 요즘 대부분의 애플리케이션에서는 함수형 컴포넌트를 사용하여 많이 작업한다. 사용하기src/components/MyConponent.js 생성const MyComponent = () => { return 컴포넌트 테스트}export..

각 운영체제에 맞게 node js를 설치한다.https://nodejs.org/en/download/package-manager node js란 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 실행할 수 있게 해주는 런타임이다.리액트로 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 통해서 사용되기 때문에 설치하여 사용한다.개발도구에는 ECMAScript를 호환 시켜주는 바벨, 모듈화 된 코드를 한 파일로 합치는 것을 번들링, 코드를 수정할 때마다 웹 브라우저를 갱신 시켜주는 리로딩 기능을 하는 웹팩이 묶여있다. nodejs를 설치하면 패키지 매니저 도구인 npm도 같이 설치되는데 이를 통해 다른 개발자가 만든 패키지를 설치하여 사용할 수 있다. 프로젝트 생성터미널에 아래 명령어를 사..