Redux Redux 로 상태 관리 하기 Redux 란? 프로젝트 규모가 커지거나, 관리해야 할 상태 (State)가 많아질때, 혹은 컴포넌트 구조가 복잡해질때 보다 쉽게 상태관리를 하기 위해서 사용. 예시 이미지 (출처 : 링크) Redux 에서 사용되는 키워드 Action, Reducer, Store 핵심 3가지 + dispatch, Subscribe 추가 키워드 2가지 액션 (Action) 상태에 어떠한 변화가 필요할때, 발생시킴. 하나의 객체로 표현됨. "액션 타입 선언"과, "액션 생성 함수"를 만든뒤 상태변화가 필요할때 dispatch를 통해 reducer로 보내주는 구조. 액션 생성자를 통해 액션 객체를 만들고 리덕스 스토어로 보냄 리덕스 스토어가 액션 객체를 받으면 스토어의 상태값이 변경됨..

1. React 소개 리액트 설치 및 기초 Docs 링크 npm install -g create-react-app // 리액트 설치 create-react-app . // 디렉토리 생성 Vue와 마찬가지로 VirtualDOM 을 사용하는 라이브러리. 기본적으로 CSR (Client Side Rendering) 로 동작. 리액트 핵심 모듈 2가지. //1. 리액트 컴포넌트 => HTMLElement 연결하기 import ReactDOM from 'react-dom'; //2. 리액트 컴포넌트 만들기 import React from 'react'; JS/JSX 를 이용한 리액트 컴포넌트 사용. //main ReactDOM.render( ); //component class Vhows extends React..

SPA 이전에 생긴 개념... 변천사 Static Sites iframe XMLHttpRequest AJAX SPA (Single Page Application) AJAX등을 이용하여, 하나의 어플리케이션을 이용하듯 사용자가 하나의 페이지에 머무르면서 필요한 데이터를 부분적으로 받아와 업데이트를 해줌. CSR (Client Side Rendering) 특징 클라이언트에서 전반적인 렌더링을 전부 전담함. HTML의 body 태그 내부가 비어있음. (id=”root” 와 어플리케이션에서 필요한 자바스크립트의 링크만 들어 있음) 웹사이트에 처음 접속하면 빈화면이 보이고, 링크된 자바스크립트를 서버로부터 다운로드 받고, 이 내부에는 필요한 로직뿐만 아니라 어플리케이션을 구동하는 프레임워크와 라이브러리의 소스코드..

서버사이드 렌더링 개요 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시 하는 기법 이동 할때 마다 새로운 페이지 요청 완성된 페이지 형태로 응답 페이지 이동시 화면이 깜빡 거림 SSR vs CSR SSR 장점 초기에 HTML만 렌더링하여 보여주기때문에 초기 로딩속도가 빠름 검색엔진(SEO) 최적화가 가능 SSR 단점 서버에서 처리를 해주기 때문에 서버에 부하가 발생할 수 있음 SPA는 기본적으로 CSR 방식이 기본 React에는 Next, Gatsby 등 도입하여 SSR 방식을 겸함 Vue에는 Nuxt가 SSR 지원 Next.js Next.js 란? 공식 홈페이지 링크 Vercel 에서 제작한 리액트를 서버사이드렌더링(SSR)으로 쉽게 구현할수 있도록 환경을 제공해주는 리액트 프레임워..

1. Formatting 💡 ES, TS, Vue, HTML, CSS, SCSS, Java 등 모든 언어의 포매팅을 지원합니다. Intellij File > Setting > Editor > Code Style 에서 각 언어별로 설정 Scheme 파일을 프로젝트 또는 IDE 단위로 Export/Import 할 수 있어, 통합 관리가 가능함 Prettier 공식 홈페이지 설치 // npm npm install --save-dev --save-exact prettier // yarn yarn add --dev --exact prettier Prettier 의 Configuration은 루트디렉토리에 .prettierrc.js 파일에 설정 IDE 별 초기 설정 방법 WebStorm 마켓플레이스에서 Pretti..

개요 트렁크 기반 개발 (Trunk Based Development) 이란? 참고: https://trunkbaseddevelopment.com/ 일반적인 트렁크 기반 개발 방법은 Trunk 라고 불리는 브렌치( 또는 Master 브렌치) 에 각각의 개발자들이 작은 변동 사항의 커밋들을 직접 커밋하여 개발하는 방법을 말합니다. 즉, 개발자들은 Trunk (Master) 브렌치에서 협업하고, 긴 작업 단위의 브렌치 생성을 피하며, 이로인해 협업간에 생기는 충돌을 최소화 하고 빌드가 실패되는 상태를 막게 됩니다. 이로인해 Trunk (Master) 브렌치는 항상 배포 가능한 상태가 유지 됩니다. 소규모 개발 팀을 위한 TBD 좀 더 큰 규모의 개발 팀을 위한 TBD 개발 규칙 각 개발자들이 Trunk (Ma..