본문 바로가기

728x90

javascript/[TIL] 리액트를 다루는 기술

(18)

프론트엔드 프로젝트 : 글쓰기 기능 구현하기 Quill 라이브러리 : 글을 작성하는 에디터 https://quilljs.com/docs/quickstart/ Quickstart - Quill Quickstart The best way to get started is try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. Hello World! Some initial bold text var quill = new Quill quilljs.com toolbar const Editor = ({ title, body, onChange..

프론트엔드 프로젝트 : 시작 및 회원 인증 구현 회원 인증 UI 구현, 회원 인증 리덕스 연동, 헤더 컴포넌트 만들기, 로그인 유지 및 로그아웃 프로젝트를 처음 만들고 나서 설계를 시작할 때 가장 먼저 리액트 라우터를 프로젝트에 설치하고 적용하기 그리고 주요 페이지의 라우트 컴포넌트를 미리 만들어 먼저 틀을 갖추고 하나씩 개발 styled-component styled-component로 만든 컴포넌트(StyledButton)를 바로 내보내면 자동 import가 작동되지 않는다. 그러므로 리액트 컴포넌트(Button)를 만들어서 그 안에 styled-component로 만든 컴포넌트(StyledButton)를 렌더링해준다. import styled from 'styled-components'; const StyledButton = styled.butt..

리액트를 다루는 기술 - JWT를 통한 회원 인증 시스템 구현하기 JWT(JSON Web Token) : 데이터가 JSON으로 이루어져 있는 토큰을 의미합니다. 두 개체가 서로 안전하게 정보를 주고 받을 수 있도록 웹 표준으로 정의되었다. 사용자의 로그인 상태를 서버에서 처리하는 대표적인 두 가지 인증방식 1. 세션 기반 인증 시스템 2. 토큰 기반 인증 시스템 1. 세션 기반 인증 시스템 : 서버가 사용자가 로그인 중임을 기억하고 있다. 세션 기반 인증 시스템에서 사용자가 로그인시, 서버는 세션 저장소에서 사용자의 정보를 조회하고 세션 id를 발급한다. 발급된 id는 주로 브라우저의 쿠키에 저장한다. 그 다음에 사용자가 다른 요청을 보낼 때마다 서버는 세션 정장소에서 세션을 조회한 후 로그인 여부를 결정하여 작업을 처리하고 응답한다. 세션 저장소는 주로 메모리, 디스..

리액트를 다루는 기술 - mongoose를 이용한 MongoDB 연동 - MongpDB란? - 작업 환경 설정 - mongoose로 DB 연결하기 - esm으로 ES 모듈 import/export 문법 사용하기 - 스키마와 모델 이해하기 - REST API 구현하기 - 페이지네이션 구현하기 MongoDB 문서 지향적 NoSQL 데이터 베이스 ↔ RDBMS(관계형 데이터 베이스 : MySQL, OracleDB) 이 데이터베이스에 등록하는 데이터들은 유동적인 스키마를 지닌다. 장점 1. 종류가 같은 데이터라고 하더라도, 새로 등록하는 데이터 형식이 바뀐다고 하더라도 기존 데이터를 수정할 필요가 없다. → 데이터의 구조가 자주 바뀐다면 MongoDB가 유리합니다. 장점 2. 서버의 데이터양이 늘어나도 한 컴퓨터에서만 처리하는 것이 아닌, 여러 컴퓨터로 분산하여 처리하도록 확장하..

리액트를 다루는 기술 - Koa 프레임워크, nodemon, koa-router Node.js 환경에서 웹 서버를 구축하는 Koa 웹 프레임워크 1. Koa는 필요한 기능들만 붙여서 서버를 만들 수 있다. Koa는 미들웨어 기능만 있으며 나머지는(라우팅, 템플릿 파일 호스팅 등) 기능들은 다른 라이브러리를 적용하여 사용한다. (무게 : koa < Express Express는 미들웨어, 라우팅, 템플릿 파일 호스팅 등 다양한 기능이 내장되어있다.) 2. Koa는 async/await 문법을 정식으로 지원해 비동기 작업을 더 편리하게 관리 할 수 있다. Koa 기본 사용법 0. Koa 웹 프레임워크 설치하기 yarn add koa 1. 서버 띄우기 const Koa = require('koa'); const app = new Koa(); // app.use() : 미들웨어 함수를 애플..

리액트를 다루는 기술 - 서버 사이드 렌더링 리액트 vs Next JS vs Gatsby 언제 뭘 써야하지? | CSR vs SSR vs SSG 내 프로젝트 분석하고 맞는 기술스택 선택하는법! 서버 사이드 렌더링 : UI를 서버에서 렌더링 하는 것을 의미합니다. 리엑트 프로젝트는 기본적으로 클라이언트 사이드 렌더링을 하고 있습니다. (* 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것, 처음에는 빈 html 파일을 넘겨주며, 그 이후 자바스크립트를 실행되고 리액트 컴포넌트가 렌더링되면서 우리가 만든 화면이 보입니다.) 서버 사이드 렌더링의 장점 1. SEO(Search Engine Optimization : 검색 엔진 최적화) : 검색 엔진이 우리가 만든 웹 애플리케이션의 페이지를 원활하게 수집할 수 있다. SPA는 검색 ..

리액트를 다루는 기술 - 코드 스플리팅 리액트 프로젝트를 완성해 사용자에게 제공할때, 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업으로 프로젝트에서 사용되는 .js 안에 불필요한 주석, 경고 메세지, 공백을 제거해 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스 파일 작업도 할 수 있다. 정적 파일(이미지)이 있다면 해당 파일을 위한 경로도 설정된다. 이 작업은 webpack이 담당하며, webpack에서 별도의 설정을 하지 않으면 모든 자바스크립트 파일이 하나의 파일로 합쳐지고 모든 CSS 파일도 하나의 파일로 합쳐진다. CRA(create react-app)로 프로젝트를 빌드할 경우, 최소 두 개 이상의 자바스크립트 파일이 생성된다. CRA의 기본 webpack 설정에는..

리액트를 다루는 기술 - 리덕스 미들웨어를 통한 비동기 작업 리액트 웹 애플리케이션에서 API 서버를 연동할 때는 API 요청에 대한 상태도 잘 관리해야 합니다. [ 요청 시작 -> 로딩 중 -> 요청 성공, 실패 -> 로딩이 끝났음 ] 을 명시해야 합니다. 요청 성공 -> 서버에서 받은 응답에 대한 상태를 관리 요청 실패 -> 서버에서 반환한 에러에 대한 상태를 관리 리액트 프로젝트에서 redux를 사용하고 있으며 이러한 비동기 작업을 관리해야 한다면, middleware를 사용하여 효율적이 편하게 상태 관리를 할 수 있습니다. redux middleware는 액션을 디스패치했을때 reducer에서 이를 처리하기에 앞서 사전에 지정된 작업들을 실행합니다. 액션 ▶ middleware ▶reducer ▶ store 미들웨어는 액션과 리듀서 사이의 중간자 reduc..

리액트를 다루는 기술 - 리덕스(Redux) 리덕스는 리액트 상태 관리 라이브러리 : 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 효율적인 관리가 가능하다. (= 업데이트에 관련된 로직을 리액트 컴포넌트에서 완벽하게 분리 -> 유지 보수성이 높은 코드를 작성해 낼 수 있다. ) 컴포넌트끼리 똑같은 상태를 공유할 시 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달, 업데이트 할 수 있다. (전역 상태를 관리할때 효과적) redux 개념 - 액션 객체 상태 변경을 설명하는 객체 반드시 type 필드(=액션의 이름)를 가지고 있어야함. 그 외의 값은 업데이트시 참고해야할 값 액션 객체를 직접 생성하기 보단, 액션 객체 생성함수를 만들어서 관리한다. export const increase = () => ({ type: INCREASE })..

리액트를 다루는 기술 - 컴포넌트 스타일링(CSS, Sass, Css Module, styled-components) 컴포넌트를 스타일링 방식 1. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식 2. Sass(Syntactically Awesome Style Sheets) (.scss, .sass) : CSS 전처리기 - 복잡한 작업을 쉽게 할 수 있도록 해주고 - 스타일 코드의 재활용성을 높여줌 - 코드의 가독성을 높여줌. -> 유지보수를 더욱 쉽게 해줌 // 변수 사용하기 $red : #fa5252; $orange : #fd7e14; // 믹스인(재사용되는 스타일 블록을 함수처럼 사용) @mixin square($size){ $calcualated : 32px * $size; width: $calcualated; height: $calcualated; } .SassComponent{ .box{ // .S..

리액트를 다루는 기술 - Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 (사용자 로그인 정보, 애플리케이션 환경 설정 테마 등) 있을때 유용한 기능 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API를 기반으로 구현되었습니다. Context API를 사용한 전역 상태 관리 흐름 이해하기 리액트 애플리케이션은 컴포넌트 간 데이터를 props로 전달하기 때문에, 전역적으로 사용할 데이터는 최상위 컴포넌트인 App의 state에 넣어서 관리합니다. → 유지 보수성이 낮아질 가능성이 있다. (이유 : 최상위 컴포넌트에서 여러 컴포넌트를 거쳐 props로 원하는 상태와 함수를 전달하기 때문) ★해결 : 리덕스 같은 상태 관리 라이브러리를 사용해 전역 상태 관리 작업을 더..

[구글링] 리액트를 다루는 기술 - 외부 API를 연동하여 뉴스 뷰어 만들기 카테고리별로 최신 뉴스 목록을 보여 주는 뉴스 뷰어 프로젝트 비동기 작업 웹 애플리케이션을 만들다 보면 처리할 때 시간이 걸리는 작업이 있다. 예) 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때 Ajax 기법을 사용해 서버의 API를 호출함으로써 데이터를 수신합니다. 이렇게 서버의 API를 사용해야 할 때는 네트워크 송수신 과정에서 시간 소요, 응답을 받을 때까지 기다렸다가 전달받은 응답 데이터를 처리합니다. ▶ 이 과정에서 해당 작업을 비동기적으로 처리하게 됩니다.(동시에 여러 요청을 처리, 기다리는 과정에서 다른 함수도 호출) 그것이 바로 Ajax 기법(Asynchronous JavaScript and XML) axios : 자바스크립트 HTTP 클라이언트 웹 통신 기능을 제공하는 라이브러리 htt..

리액트를 다루는 기술 - 리액트 라우터로 SPA 개발하기 웹 애플리케이션에서 라우팅이란? 라우팅 : 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 여러 페이지로 구성된 웹 애플리케이션을 만들 때, 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템입니다. 리액트 라우터, Next.js 리엑트에서 라우팅 시스템을 구축할 수 있습니다. - 리액트 라우터 : 컴포넌트 기반으로 라우팅 시스템을 설정할 수 있습니다. - Next.js : 리액트 프로젝트의 프레임워크, 이 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동 라우팅 관련 기능은 리액트 라이브러리에서 공식적으로 지원하는 것이 아닌 서드 파티로 제공됩니다. * 서드 파티란? 편하고 효율적인 개발을 위해, 플러그인이나 라이브러리 또는 프레임워크로, 제작사..

리액트를 다루는 기술 - 컴포넌트 성능 최적화 React DevTools를 활용해 성능을 모니터링 할 수 있습니다. 컴포넌트 리렌더링이 발생하는 상황 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링할 때 4. forceUpdate 함수가 실행될 때 -> 리렌더링이 불필요할 때는 리렌더링을 방지해주어야합니다. 1. React.memo : 이전과 같은 props가 들어올때, 렌더링 과정을 스킵, 가장 최근에 렌더링된 결과를 재사용하여 리렌더링 성능을 최적화 (== React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지 할 수 있다.) 라이프사이클 중 'shouldComponentUpdate'는 리렌더링을 방지합니다. 하지만 ↗이는 함수 컴포넌트에서 사용할 수 없습니다. 그 대신 Reac..

10/11일 오늘 구글링 한 내용 (Prettier Option, CSS) Prettier : 코드 스타일 자동 정리 도구 자동 정렬, 자동 세미콜론 추가, 큰따옴표로 통일 등등 이러한 스타일을 쉽게 커스터마이징 할 수 있다. - "trailingComma" : 항목의 나열에서 마지막 항목에도 콤마를 붙이는 코딩방식 - "printWidth" : 줄 바꿈 할 폭 길이 참고 - https://velog.io/@kyusung/eslint-prettier-config em, rem은 무엇인가? em단위는 상대 길이 단위로 요소의 글꼴 크기와 관련되어있다. 지정된 요소의 font-size의 배수 rem단위는 root em이라는 말 그대로 최상위 요소의 font-size에 대한 em단위 이다. 참고 - https://velog.io/@ursr0706/em%EB%8B%A8%EC%9C%84..

리액트를 다루는 기술 - Hooks 1. useState 2. useEffect 3. useReducer 4. useMemo 5. useCallBack 6. useRef 7. 커스텀 Hooks useEffect VS useCallBack VS useMemo useEffect useCallBack useMemo 특정값(배열 안 값)이 업데이트 될때, 특정 작업을 수행하도록 설정 새로운 함수 인스턴스를 생성하는 것이 아니라, 실행되는지 여부와 관련 특정값이 업데이트 될 때, 함수를 새로 생성, 함수 memoization하여, 같은 함수 인스턴스 재사용 ※ 빈 배열, 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용 특정값이 업데이트 될 때, 연산을 실행(o) 새로 생성(x) 값을 memoization하여, 계산 결과나 객체를 재사용 원하..

이전 1 2 다음

728x90

티스토리툴바