Intro 리액트 프로젝트를 사용자에게 제공할 때는 빌드 작업을 거쳐서 배포해야 한다. 빌드 작업에선 불필요한 주석, 경고 메시지, 공백 등을 제거해 파일 크기 최소화 JSX문법이나 최신 자바스크립트 문법이 원활하게 실행되도록 코드의 트랜스파일 작업 진행 이미지와 같은 정적 파일의 경로 설정 과 같은 일을 한다. 빌드 작업은 웹팩 이라는 도구가 담당한다. 프로젝트의 모든 자바스크립트 파일 하나로 합치기 프로젝트의 모든 CSS 파일 하나로 합치기 스플리팅이란? 파일을 분리하는 작업 CRA를 통해 React 프로젝트를 만들 경우 기본으로 탑재되어있는 SplitChunks 기능을 통해 스플리팅이 되지만, 단순한 캐싱 효과만 있을 뿐이다. 애플리케이션의 규모가 커질 경우에 기본적인 스플리팅 기능만 이용하면 로딩..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

1. 작업환경 준비 프로젝트 생성) $ yarn create react-app learn-redux-middleware 라이브러리 설치) $ yarn add redux react-redux redux-actions counter 리덕스 모듈 작성) ✅ 복습! 모듈이란 Ducks 패턴을 사용해 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 말한다! import { createAction, handleActions } from "redux-actions"; //액션타입 정의 const INCREASE = "counter/INCREASE"; const DECREASE = "counter/DECREASE"; //액션 생성 함수 export const increase = createAction(INCREA..

21-22/21-22 리액트 마스터 2022. 1. 24. 18:05

배포를 위한 사전 작업 배포(AWS, GCP) 1. 서비스 운영을 위한 패키지 (1) morgan과 express-session 미들웨어를 개발용에서 배포용으로 변경 1. app.js : morgan //변경 전 app.use(morgan('dev')); //변경 후 if (process.env.NODE_ENV === 'production') { app.use(morgan('combined')); } else { app.use(morgan('dev')); } process.env.NODE_ENV : 배포 환경인지 개발 환경인지 판단할 수 있는 환경변수(.env파일에 넣을 수 없음-정적파일이기 때문 ->cross-env) 배포환경일 때, morgan을 combined모드로 사용: 더 많은 사용자 정보를 로..

21-22/21-22 Node.js 2022. 1. 24. 13:01

CLI(Command Line Interface - 명령줄 인터페이스) : 콘솔 창을 통해 프로그램을 수행하는 환경 ex) 리눅스의 셸, 브라우저의 콘솔, 명령 프롬프트 GUI(Graphic User Interface - 그래픽 사용자 인터페이스) : 그래픽을 통해 프로그램을 수행하는 환경 ex) 윈도나 맥 운영체제, 웹 어플리케이션 1. 간단한 콘솔 명령어 만들기 콘솔 명령어 : 콘솔에서 입력하여 어떠한 동작을 수행하는 문장 ex) node, npm, nodemon 1) node-cli 폴더 생성 후, package.json 생성 { "name": "node-cli", "version": "0.0.1", "description": "nodejs cli program", "main": "index.js"..

21-22/21-22 Node.js 2022. 1. 24. 13:00

13.1 SPA Single Page Application의 약어, 한 개의 페이지로 이루어진 어플리케이션이라는 뜻입니다. 전통적인 웹 페이지는 다음과 같이 구성되어 있었습니다. 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여줍니다. 이후 사용자에게 보이는 화면을 서버 측에서 준비하고, 사전에 html 파일을 만들어 제공하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용합니다. 그러나 요즘은 웹에서 제공하는 정보가 많이 때문에, 서버 측에서 모든 뷰를 준비하면 성능상의 문제가 발생할 수 있습니다. 또한 html을 서버에 요청할 때, 인터페이스에서 사용하고 있던 상태를 유지하는 것도 번거롭고,..

21-22/21-22 리액트 스타터 -1 2022. 1. 24. 13:00

INDEX 13장 리액트 라우터로 SPA 개발하기 1. SPA란? 1.1 SPA의 단점 2. 프로젝트 준비 및 기본적인 사용법 2.1 프로젝트 생성및 라이브러리 설치 2.2 프로젝트에 라우터 적용 2.3 페이지 만들기 2.4 Route 컴포넌트로 특정 주소에 컴포넌트 연결 2.5 Link 컴포넌트를 사용하여 다른 주소로 이동하기 3. Route 하나에 여러 개의 path 설정하기 3.1 App에서 todos 상태 사용하기 3.2 항목 추가 기능 구현하기 3.3 지우기 기능 구현하기 3.4 수정 기능 4. URL 파라미터와 쿼리 4.1 App에서 todos 상태 사용하기 4.2 항목 추가 기능 구현하기 5. 서브 라우트 6. 리액트 라우터 부가 기능 6.1 history 6.2 withRouter 6.3 ..

21-22/21-22 리액트 스타터 -2 2022. 1. 24. 13:00

안녕하세요, 컴퓨터공학전공 개발 소모임 𝘾𝙤𝙧𝙣𝙚𝙧입니다. 코너의 첫 번째 정기 콘텐츠를 공개합니다! 이번 정기 콘텐츠는 Team Undefined의 가상 환경에 대한 이야기인데요, 가상 환경이 무엇인지, 왜 사용하는 것인지에 대해 알아봅시다!

Corner 코너 2022. 1. 19. 13:04

INDEX 12장 immer를 사용하여 더 쉽게 불변성 유지하기 1. immer를 설치하고 사용법 알아보기 1.1 프로젝트 준비 1.2 immer를 사용하지 않고 불변성 유지 1.3 immer 사용법 1.4 App 컴포넌트에 immer 적용하기 1.5 useState의 함수형 업데이트와 immer 함께 쓰기 2. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 immer 라이브러리 구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하며 업데이트할 수 있게 해주는 라이브러리 불변성을 유지하며 업데이트해야할 때 immer를 사용하지 않으면? 배열 또는 객체를 복사할 때: 전개 연산자(...)와 배열의 내장 함수 사용 객체의 구조가 엄청나게 깊어지면: 하나의 값을 업데..

21-22/21-22 리액트 스타터 -2 2022. 1. 17. 13:01

리덕스 : 리액트 상태 관리 라이브러리 컴포넌트의 상태 업데이트 관련 로직 분리 컴포넌트 상태 똑같게 공유 시, 여러 컴포넌트를 거치지 않고 상태 값 전달 및 업데이트 가능 전역 상태 관리 시, 효과적 코드의 유지 보수성 높여 줌 작업 효율 극대화 편리한 개발자 도구 지원 미들웨어 기능 제공하여 비동기 작업 효율적 관리 가능 16.1 개념 미리 정리하기 1) 액션 상태에 변화가 필요하면 액션이 발생 액션은 객체로 표현되며, type 필드(액션의 이름)를 반드시 가지고 있어야 함 { type: 'TOGGLE_VALUE' data: { id:1, text:'리덕스 배우기' } } 2) 액션 생성 함수 액션 객체를 만들어주는 함수 → 직접 작성하기 번거롭거나, 실수하는 일을 방지하기 위함 function ad..

21-22/21-22 리액트 마스터 2022. 1. 17. 13:00

바닐라 자바스크립트 환경에서 리덕트 사용 시, store.dispatch나 store.subscribe 함수를 사용했으나, 리액트 애플리케이션에서 리덕트 사용 시, react-redux 라이브러리에서 제공하는 유틸 함수(connect)와 컴포넌트(Provider)를 사용 17.1 작업 환경 설정 $ yarn add redux react-redux //.prettierrc { "singleQuote":true, "semi":true, "useTabs":false, "tabWidth":2, "trailingComma":"all", "printWidth":80 } 17.2 UI 준비하기 리덕스에서 가장 많이 사용하는 패턴 : 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 분리 ⇒ 코드의 재사용도↑, UI 작성 시..

21-22/21-22 리액트 마스터 2022. 1. 17. 13:00

10장에서 만든 일정 관리 애플리케이션은 데이터가 많지 않아 사용하는 데 불편하지 않았습니다. 그러나 데이터가 무수히 많아지면 애플리케이션이 느려지는 것을 체감할 수 있습니다. 이번 11장에서는 성능을 최적화하는 방법에 대해 알아보겠습니다. 11.1 많은 데이터 렌더링하기 먼저 실제로 랙(lag)을 경험할 수 있도록 많은 데이터를 렌더링해 보겠습니다. 데이터를 일일이 입력하지 않고 코드를 사용하여 추가하겠습니다. App 컴포넌트를 다음과 같이 수정하세요. // App.js import { useState, useRef, useCallback } from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from..

21-22/21-22 리액트 스타터 -1 2022. 1. 17. 13:00

13.1 프로젝트 구조 갖추기 프로젝트 이름: NodeAuction // node-auction/package.json { "name": "node-auction", "version": "0.0.1", "description": "노드 경매 시스템", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "Zero Cho", "license": "ISC", "dependencies": { "bcrypt": "^3.0.7", "cookie-parser": "^1.4.4", "dotenv": "^8.2.0", "express": "^4.17.1", "express-session": "^1.17.0", "morgan": "^1.9.1", "mu..

21-22/21-22 Node.js 2022. 1. 17. 13:00