열심히 만든 웹 페이지를 혼자만 보는 것은 아깝겠지요? 이번 글에서는 10장에서 만든 일정 관리 웹 애플리케이션을 Netlify에서 배포하는 방법을 알아보겠습니다. 먼저, 배포하고자 하는 react 프로젝트가 github에 올라가 있어야 합니다. 1. github에 회원가입이 되어 있지 않은 경우에는 먼저 회원가입을 하고, 회원가입이 되어 있다면 새로운 Repository를 생성합니다. 2. Repository name에 원하는 프로젝트명을 입력하고 Create repository를 클릭합니다. 3. 저장소 주소(URL)를 복사하여 터미널에 다음과 같이 코드를 입력합니다. $ git remote add origin $ git add . $ git commit -m "코멘트" - 코멘트의 내용은 자유롭게 ..

21-22/21-22 리액트 스타터 -1 2022. 1. 10. 13:30

이번 10장에서는 일정 관리 애플리케이션을 만들어 보았습니다. 간단하게 컴포넌트 설명 후 코드 첨부하겠습니다. TodoTemplate: 화면을 가운데에 정렬시켜 주며, 앱 타이틀(일정 관리)을 보여줍니다. children으로 내부 JSX를 props로 받아 와서 렌더링해 줍니다. TodoInsert: 새로운 항목을 입력하고 추가할 수 있는 컴포넌트입니다. state를 통해 인풋의 상태를 관리합니다. TodoListItem: 각 할 일 항목에 대한 정보를 보여 주는 컴포넌트입니다. todo 객체를 props로 받아 와서 상태에 따라 다른 스타일의 UI를 보여 줍니다. TodoList: todos 배열을 props로 받아 온 후, 이를 배열 내장 함수 map을 사용해서 여러 개의 TodoListItem 컴포..

21-22/21-22 리액트 스타터 -1 2022. 1. 10. 13:30

INDEX 10장 일정 관리 웹 애플리케이션 만들기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요한 라이브러리 설치 1.2 Prettier 설정 1.3 index.css 수정 1.4 App 컴포넌트 초기화 2. UI 구성하기 2.1 TodoTemplate 만들기 2.2 TodoInsert 만들기 2.3 TodoListItem과 TodoList 만들기 3. 기능 구현하기 3.1 App에서 todos 상태 사용하기 3.2 항목 추가 기능 구현하기 3.3 지우기 기능 구현하기 3.4 수정 기능 4. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 ⚙️ 애플리케이션을 만들어보자! 프로젝트 준비하기 UI 구성하기 기능 구현하기 1. 프로젝트 준비하기 1.1 프로젝트 생성 및 필요..

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

들어가기 전 Context API란? 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능 ex) 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 Context API를 기반으로 구현된 것들 → 리덕스, 리액트 라우터, styled-components 1. Context API를 사용한 전역 상태 관리 흐름 이해하기 일반적인 전역 상태 관리 흐름) ex) App이 지닌 state값을 F, J, G로 전달 F : App → A → B → F J : App → H → J G : App → A→ B → E → G. 를 거쳐야 한다. Context API를 사용한 전역 상태 관리 흐름) Context를 생성해 한 번에 어느 컴포넌트든 한 번에 원하는 값을 받아 와서 사용할 수 있다. 1) 새 ..

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

INDEX 9장 컴포넌트 스타일링 1. 가장 흔한 방식, 일반 CSS 1.1 이름 짓는 규칙 1.2 CSS Selector 2. Sass 사용하기 ● Sass에서 지원하는 두 가지 확장자 .scss .sass 2.1 utils 함수 분리하기 2.2 sass-loader 설정 커스터마이징 2.3 node_modules에서 라이브러리 불러오기 3. CSS Module 3.1 classNames 3.2 Sass와 함께 사용하기 3.3 CSS Module이 아닌 파일에서 CSS Module 사용하기 4. styled-components 4.1 Tagged 템플릿 리터럴 4.2 스타일링된 엘리먼트 만들기 4.3 스타일에서 props 조회하기 4.4 props에 따른 조건부 스타일링 4.5 반응형 디자인 5. Qu..

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

INDEX 8장 Hooks 1. useState 1.1 useState를 여러 번 사용하기 2. useEffect 2.1 마운트될 때만 실행하고 싶을 때 2.2 특정 값이 업데이트될 때만 실행하고 싶을 때 2.3 뒷정리하기 3. useReducer 3.1 카운터 구현하기 3.2 인풋 상태 관리하기 4. useMemo 5. useCallback 6. useRef 6.1 로컬 변수 사용하기 7. 커스텀 Hooks 만들기 8. 다른 Hooks 9. Question 개념 정리 및 코드 문제 ● 개념 복습 문제 ● 코드 문제 Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해준다. 8.1 useS..

21-22/21-22 리액트 스타터 -2 2021. 12. 27. 13:02

1. SPA란? SPA(Single Page Application) 한 개의 페이지로 이루어진 애플리케이션이라는 의미 1) 전통적인 웹 페이지와 SPA 비교 - 전통적인 웹 페이지 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아온다. 페이지를 로딩할 때마다 서버에서 리소르를 전달받아 해석한 뒤 화면에 보여준다. 사용자에게 보이는 화면을 서버 측에서 준비한다. 사전에 html파일을 만들어 제공하거나, 데이터에 따라 유동적인 html을 생성해 주는 템플릿 엔진을 사용한다. - SPA 먼저, SPA를 사용하는 이유에 대해 알아보자! 1. 웹에서 제공되는 정보가 많아 새로운 화면을 보여 줘야 할 때마다 서버 측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. (트래픽 ↑, 서버 과부하) ..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다. 8.1 Hooks useState는 가장 기본적인 Hook로, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해 줍니다. 함수형 컴포넌트에서 상태를 관리해야 한다면 이 Hook를 사용하면 됩니다. useState를 사용해서 숫자 카운터를 구현해 봅시다. - Counter.js import React, { useState } from "react"; const Counter = () => { const [value, setValue] = useState(0); return ( 현..

21-22/21-22 리액트 스타터 -1 2021. 12. 27. 13:00

INDEX 7장 컴포넌트의 라이프사이클 메서드 1. 라이프사이클 메서드의 이해 ● 개념 2. 라이프사이클 메서드 살펴보기 2.1 render() 함수 2.2 constructor 메서드 2.3 getDerivedStateFromProps 메서드 2.4 componentDidMount 메서드 2.5 shouldComponentUpdate 메서드 2.6 getSnapshotBeforeUpdate 메서드 2.7 comoponentDidUpdate 메서드 2.8 componentWillUnmount 메서드 2.9 componentDidCatch 메서드 3. 라이프사이클 메서드 사용하기 3.1 예제 컴포넌트 생성 3.2 App 컴포넌트에서 예제 컴포넌트 사용 3.3 에러 잡아내기 4. 정리 ● 정리 5. Ques..

21-22/21-22 리액트 스타터 -2 2021. 12. 27. 13:00

객체의 구조가 엄청나게 깊어지면 불변성을 유지하면서 이를 업데이트하기가 매우 힘듦 전개연산자를 여러 번 사용하는 것보다 immer라는 라이브러리 사용하는 것이 더 쉽게 불변성 유지 가능 12.1 immer를 설치하고 사용법 알아보기 yarn create react-app immer-tutorial cd immer-tutorial yarn add immer ▼immer를 사용하지 않고 불변성 유지 하는 코드 더보기 //App.js import React, {useRef, useCallback, useState } from 'react'; const App = () => { const nextId = useRef(1); const [form, setForm] = useState({name:'', userna..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

11.1 많은 데이터 렌더링하기 랙(lag) 경험을 위해 많은 데이터 렌더링 //App.js import React, {useState, useRef, useCallback} from 'react'; import TodoTemplate from './components/TodoTemplate'; import TodoInsert from './components/TodoInsert'; import TodoList from './components/TodoList'; function createBulkTodos() { const array = []; for (let i = 1; i { const [todos, setTodos] = useState(createBulkTodos); const nextId = u..

21-22/21-22 리액트 마스터 2021. 12. 27. 13:00

첫 번째 글에서는 express를 사용하지 않고, 오로지 react로만 메모장 기능을 구현해보았는데요, 이번 글에서는 express를 사용해 메모장 만들기 프로젝트를 진행해보겠습니다. ※ https://gngsn.tistory.com/17 를 바탕으로 만들었습니다. 원글에서는 클래스형 컴포넌트를 사용하였는데요. 저희는 함수형 컴포넌트를 이용해 메모장을 만들어보기로 하였으며, 새 메모장을 생성하는 기능뿐만 아니라, 기존 메모를 수정하고 삭제하는 기능까지 추가해보았습니다. 클래스형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanran33/memo-project 함수형 컴포넌트로 만든 memo-project 구경하기 : https://github.com/Chanr..

21-22/21-22 리액트 마스터 2021. 12. 1. 23:00