mykuromi.dev.log

공부하다 보니, 리덕스 부분이 부족한 것 같아 공부할 겸 리덕스 공식 튜토리얼 보고 정리.

📍Redux란
"actions"이라는 이벤트를 사용하고, 애플리케이션 상태 관리, 업데이트하는 라이브러리이자 패턴

✔️ Redux를 사용하는 이유

• 애플리케이션 전체를 아우르는 centralized store 제공 -> "global" state
• 예측가능한 방식에서만 상태가 업데이트 되도록 보장
• 애플리케이션 내에서 state가 어떻게, 언제, 어디서, 왜 업데이트 되고 변화가 생길 시 애플리케이션 로직이 어떻게 흘러가는 지 이해하기 쉽게 도와줌
• 사용하기에는 다소 까다롭지만 애플리케이션 내에 관리할 state가 많고 복잡하거나, 자주 바뀌는 경우 또는 많은 사람들이 사용하는 경우 리덕스를 사용하는 것이 유용함

📎 Redux Libraries & Tools

• React-Redux : official packages, reading state & dispatching actions 를 통해 리액트 컴포넌트와 리덕스 store가 소통할 수 있도록 하는 패키지
• Redux Toolkit : 리덕스 로직 작성 도구, packages & functions
• Redux DevTools Extension : Redux store가 바뀔 때, store의 history를 보여주는 개발자 도구 + 디버깅

✉️ Redux 용어 및 개념

• State : 애플리캐이션을 이끄는 근원, 상태
• View : 현재 state에 기반을 둔 description
• Actions : the UI definition, 주로 return으로 반환하는 컴포넌트
• One-way data flow : 단방향 데이터 흐름

-> 특정 시점의 state를 기반해 UI가 렌더링 됨, 버튼 클릭과 같은 이벤트가 발생한 경우 state 변화, new state에 기반한 UI 리렌더링

• Lifting State Up : 여러 개의 컴포넌트에서 하나의 state를 사용하는 경우, 컴포넌트 트리를 통해 부모 컴포넌트로 state를 끌어올리는 방법 -> 하지만 이 방법으로 모든 문제를 해결할 수 있는게 아니기 때문에, 컴포넌트 트리(view) 밖의 centralized location(store)에 저장

✖️ Immutability
Not changable, 자바스크립트는 기본적으로 객체나 배열을 reference할 시 얕은 복사를 함. 하지만 전역적으로 state를 관리하기 위해서는, 깊은 복사가 필요 -> 리덕스에서는 state update시 깊은 복사로 진행되기 때문에, 좀 더 update logic을 작성하기 쉽게 도와줌

❕ Actions

• type, payload 필드가 있는 자바스크립트 객체
• type : 애플리케이션 내에서 발생한 일을 서술하는 이벤트, domain/eventName 형태의 String으로 작성
• payload : 발생한 이벤트에 대해 부가적인 정보를 제공하는 필드

❕ Action Creators
action 객체를 리턴하는 function

❕ Reducers

• 자바스크립트 Array.reduce() 와 유사 : 배열의 각 요소에 대해 주어진 reducer(callback) 함수를 실행하고, 하나의 결과값을 반환(reducing the array down to one value, previous result "state" + current item "action object")
• 현재의 state와 action 객체를 받는 function
• 어떻게 state가 업데이트 되는 지 서술하고 새로운 state를 리턴 : (state, action) => newState
• action (event) type에 기반하여 이벤트를 핸들링하는 이벤트 리스너
• 현재 존재하는 state를 바꾸지 않으며, 기존의 state를 복사해서 업데이트
• state(copied & updated) 또는 기존의 state를 return

❕ Store

• Redux 애플리케이션은 store라는 오브젝트 내에서 존재
• store는 reducers를 통해 만들어짐
• store.getState() : 현재 store value 반환

❕Dispatch

• store의 method, 이벤트 트리거
• state를 업데이트 할 수 있는 유일한 방법 -> call store.dispatch() & pass in an action object

❕ Selectors
store에서 특정한 정보를 추출하는 function, state.value

➰ Redux Application Data Flow

• one-way data flow에서 좀 더 세분화 된 data flow
• Initial setup : store에서 root reducer(function)를 호출한 return 값 initial state 저장 -> UI가 처음으로 렌더링 될 때, UI의 각 컴포넌트는 Redux stored의 현재 state를 참고해 무엇을 렌더링 해야할 지 결정, 또한 각 컴포넌트는 store 업데이트에 따라 변화되는 state 참조
• Updates : 애플리케이션 내 이벤트 발생 -> store로 aciton dispatch -> store에서 reducer function 작동(이전 state와 action을 참조해 새로운 state 반환) -> store는 업데이트를 각 UI parts에 알림 -> UI 컴포넌트는 각자 부분에 해당하는 state가 변화하였는지 체크 -> 변화된 경우 새로운 데이터로 다시 렌더링

출처) Redux Essentials Tutorial

✔️ 페이지 라우팅 0 - React SPA & CSR

• ROUTER : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 것
• ROUTE+ING : 경로를 정해주는 행위 자체와 일련의 과정들을 포함
• 웹 서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고 그 페이지를 반환해서 사용자가 페이지에 접속
• MPA(Multipage Application) : 여러 개의 페이지를 가지고 있다가 요청에 따라 적절한 페이지 반환
• 리액트 : SPA(Singlepage Application), CSR(Client Side Rendering) 방식

✔️ 페이지 라우팅 1 - React Router 기본

• React Router : https://reactrouter.com/en/main
• npm install react-router-dom@리액트버전
• ex. <BrowserRouter><Routes><Route path="/" element={<Home />} /></Routes></BrowserRouter> <RouterTest />
• SPA는 <a> 태그 대신 컴포넌트를 통해 이동
• 페이지를 이동하기 보다 컴포넌트가 바꿀 페이지를 바꿔 끼우는 형식

✔️ 페이지 라우팅 2 - React Router 응용

• REACT ROUTER V6 : REACT에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리 
• 1. Path Variable : useParams - 전달받아서 들어오는 Path Variable을 객체로 반환  ex. localhost:3000/diary/1
• 2. Query String : useSearchParams - 웹 페이지에 데이터를 전달하는 가장 간단한 방법  ex. /edit?id=10&mode=dark
• 3. Page Moving : useNavigate
• 사용자 정의 Hook(Custom Hooks) : 리액트가 제공하는 Hook은 아니지만, 라이브러리가 자신의 라이브러리를 조금 더 편하게 쓸 수 있게 제공하는 Hook

✔️ 프로젝트 기초 공사 1

• 1. 폰트 세팅 : Google Web Fonts를 이용해서 프로젝트에 사용되는 폰트 세팅(오픈 폰트 라이센스 / Google Fonts)
• 2. 레이아웃 세팅 : 모든 페이지에 반영될 레이아웃 세팅
• 3. 이미지 에셋 세팅 : 감정 이미지를 프로젝트에서 불러와 사용할 수 있는 환경 세팅
• 4. 공통 컴포넌트 세팅 : 모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트 세팅
• process.env.PUBLIC_URL : 어느 위치에 있던 public url을 가리키게 됨(절대 경로)

✔️ 프로젝트 기초 공사 2

• 1. 상태 관리 세팅하기 : 프로젝트 전반적으로 사용될 일기 데이터 State 관리 로직 작성하기
• 2. 프로젝트 State Context 세팅하기 : 일기 데이터 State를 공급할 Context를 생성하고 Provider로 공급하기
• 3. 프로젝트 Dispatch Context 세팅하기 : 일기 데이터 State의 Dispatch 함수를 공급할 Context를 생성하고 Provider로 공급하기

✔️ 페이지 구현 - 홈 (/), 일기 쓰기 (/new), 일기 수정 (/edit), 일기 상세 (/diary)

✔️ (서브 챕터) 흔히 발생하는 버그 수정 하기

• Dummy Data를 사용하는 경우, useRef(초기값)은 더미 데이터의 개수 + 1 이어야 자식 컴포넌트 추가 시 id가 중복되는 문제를 해결할 수 있음
• lastday로 마지막 일자를 지정하는 경우 시, 분, 초(23 59 59)까지 지정해야 마지막 일자 필터 가능

✔️ LocalStorage를 일기 데이터베이스로 사용하기

• 자바스크립트의 State가 갖는 값은 유지 되기 힘듦, 휘발성
• Web Storage API : https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
• sessionStorage : 웹 브라우저가 유지되는 동안
• localStorage : 브라우저를 닫았다 열어도 유지, 캐시를 지워야 사라짐
• localStorage.setItem("key", value); -> 문자열로 저장 
• 배열, 객체는 직렬화해서 저장 -> JSON.stringify({ key: value });
• localStorage.getItem("key"); -> number 타입과 같은 경우 parseInt
• 직렬화된 객체를 자바스크립트 객체로 복원 -> JSON.parse( localStorage.getItem("key") );

✔️ 프로젝트 최적화

• 정적 최적화 : 코드 리뷰
• 동적 최적화 : 도구 이용 -> React Developer Tools - Highlight updates when components render.
• React.memo : 컴포넌트를 React.memo의 인자로 전달하면 강화된 컴포넌트 반환(고차 컴포넌트), 전달받는 Prop의 값이 바뀌지 않으면 렌더링이 일어나지 않도록 Memoization
• 사용자 정의 함수(ex. 핸들러 함수)가 아니라, useState를 통해 반환받는 setData와 같은 함수들은 렌더링이 되었을 때에도 동일한 ID 보장(useCallback 처리가 됨, 재사용)

✔️ 배포 준비 & 프로젝트 빌드하기

• Web Application 타이틀 변경 : pubic/index.html
• <title> 변경하고자 하는 제목 </title>
• <meta name="description" content="사이트 설명" />
• <html lang="ko">
• 페이지를 이동할 때 마다 타이틀 변경 : document.getElementByTagName('title')[0].innerHTML = "변경하고자 하는 제목";
• 사이트 아이콘 변경 : public/favicon.ico
• 공백 제거 등 필요한 파일만 압축 -> 빌드 npm run build
• 빌드를 통해 압축된 형태로 배포 : npm install -g serve -> serve -s build
• 에러 발생 시 ctrl+c로 shutdown 후 rebuild

✔️ Firebase로 프로젝트 배포하기

• Firebase : https://firebase.google.com/
• Hosting
• https://mykuromi-simple-diary.web.app

✔️ Open Graph 설정하기

• index.html <meta propery> 속성을 지정하여 카카오톡과 같은 채팅방에 미리보기 창 설정 

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

✔️ React에서 사용자 입력 처리하기

• const [state, setState] = useState()의 파라미터로 객체를 전달하여 함수 재사용
• useState("초기값") 지정, input 태그에서 그 값을 활용할 때 onChange 이벤트 내 setState 함수를 호출해야 키보드 입력 시 state 변화
• 객체의 기본 값을 활용할 때 스프레드 연산자(...객체명) 이용, 스프레드 연산자는 변경하고자 하는 프로퍼티 앞에 사용
• setState({ ...state, [e.target.name]: e.target.value });

• useRef() 호출 반환 값 = React.MutableRefObject<undefined> : HTML DOM 요소 접근
• <input ref="레퍼런스객체"/> 레퍼런스객체.current : 현재 가리키는 값

✔️ React에서 배열 사용하기 1 - 리스트 렌더링(조회)

• map( (it) => { // 반복할 내용 } ) 
• map으로 반복 시 각 반복 시 고유한 id(또는 idx) 지정해야 함 -> 자식 컴포넌트에 id 부여  ex. <div key={it.id}> 
• 컴포넌트명.defaultProps 로 초기값을 지정하면 props로 undefined가 내려와도 에러 방지
• 렌더링된 아이템을 별도의 컴포넌트로 분리할 수 있음

✔️ React에서 배열 사용하기 2 - 데이터 추가하기, 데이터 삭제하기

• 리액트에서는 같은 레벨(트리)끼리 데이터 주고받기 불가 -> 단방향 데이터 흐름
• 데이터를 공통 부모요소로 끌어 올리기(State 끌어 올리기) : 자식요소에 data(state) 렌더링 및 setData(setState) Props로 전달
• Event(UP 자식->부모) Data(Down 부모->자식)

✔️ React의 Lifecycle 제어하기 - useEffect

• Component Mount(ex. 초기화 작업) -> Update(re-render, ex. 예외 처리 작업) -> Unmount(ex. 메모리 정리 작업)
• Class React Component Only(cf. 함수형 컴포넌트 X) : Mount(ComponentDidMount), Update(ComponentDidUpdate), Unmount(ComponentWillUnmount)
• 본래 State도 클래스 컴포넌트만 사용할 수 있는 기능이지만, 함수형 컴포넌트에서는 'Hooks'(useState, useEffect, useRef)를 통해 클래스형 컴포넌트 기능을 사용
• 굳이 클래스형 컴포넌트 대신 함수형 컴포넌트를 사용하는 이유 : 컴포넌트 코드 길이 문제, 중복 코드 및 가독성 문제 해결
• useEffect를 통해 컴포넌트의 Lifecycle를 관리
• useEffect( () => { // to do.. CALLBACK함수 }, [Dependency Array 의존성 배열] ); // 의존성 배열 내의 값이 변화하면 콜백 함수가 수행됨
• Mount : 의존성 배열에 빈 배열 [] 을 전달하게 되면, 컴포넌트가 마운트 되는 시점에만 콜백 함수 동작
• Update : 컴포넌트가 업데이트 될 때 1) State 변경 2) 부모로부터 내려받는 Props 변화 3) 부모 컴포넌트 리렌더 -> 의존성 배열 없이 콜백 함수만 작성하는 경우 Update될 때 마다 콜백 함수 동작 OR 의존성 배열에 [state] 의 형태로 작성하는 경우 state가 변화할 때 마다 콜백 함수 동작
• UnMount : 콜백 함수 내 return값 부여

✔️ React에서 API 호출하기

• async, fetch 함수 이용해서 더미 데이터 넣기

✔️ React Devloper Tools

•  https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=ko 

✔️  최적화 1 - useMemo

• Memoization : 이미 계산한 연산 결과를 기억해 두었다가, 동일한 계산 시 다시 연산하지 않고 기억해 두었던 데이터를 반환하는 방법
• object의 경우 비원시(객체) 타입이라 값이 저장될 때 마다 메모리 주소가 달라짐, 이를 해결하기 위해 useMemo 사용
• return을 가지고 있는 함수를 Memoization해서 연산 최적화
• useMemo : Memoization하고 싶은 함수를 콜백 함수 형태로 감싸서 사용 + Dependency array
• useMemo는 함수가 아니라, 콜백 함수 내에서 return하는 값을 리턴  cf. 콜백함수(); - (X)

✔️  최적화 2 - React.memo

• 부모 컴포넌트 업데이트 시 자식 컴포넌트가 무조건 렌더링 되지 않고, 조건부로 렌더링하기 위해 사용 -> 성능 최적화
• React.memo : 함수형 컴포넌트에 업데이트 조건 걸기, HOC 
• HOC(Higher Order Component) : 컴포넌트를 가져와(매개변수) 새로운 컴포넌트 반환, 컴포넌트 로직 재사용
• React.memo로 조건부로 렌더링할 컴포넌트를 감싸서 사용
• 다만 부모가 아닌 자신의 state가 업데이트 되는 경우 리렌더링
• 자바스크립트는 비원시 타입의 자료형(ex. 객체, 함수, 배열)을 비교할 때 얕은 비교를 함(객체의 메모리 주소에 의한 비교)

✔️  최적화 3 - useCallback

• 메모이제이션된 콜백 반환  cf. useMemo : 값 반환
• Dependency Array [a, b] 중 두 번째 인자인 b가 변하지 않는다면 첫 번째 인자로 전달한 콜백 함수 a를 계속 재사용 할 수 있게 해줌
• 함수가 컴포넌트가 재생성될 때 다시 생성되는 되는 이유 : 현재의 State값을 참조하기 위해 
• 함수형 Update : 상태 변화 set 함수에 값 대신 함수 전달 -> Dependency array로 빈 배열 [] 을 전달해 마운트 시점에만 업데이트 되도록 설정해도, 업데이트 시 기존 data 값을 잃지 않고 최신의 state를 인자를 통해 참조

✔️  복잡한 상태의 로직 분리하기 - useReducer

• useReducer : 컴포넌트 밖으로 상태 변화 로직 분리
• const [state, dispatch] = useReducer(reducer, 초기값);
• dispatch : 상태를 변화시키는 action을 발생시키는 함수, 상태 변화 raise
• reducer : 상태 변화를 처리하는 함수
• dispatch(action 객체) -> action 객체  = { type : '처리 구분값', action에 필요한 데이터 }

✔️  컴포넌트 트리에 데이터 공급하기 - Context

• context : 문맥, 컴포넌트 트리에 전역적으로 데이터 공급
• props drilling 방지
• Context 생성 : const MyContext = React.createContext(defaultValue);
• Context Provider를 통한 데이터 공급 : <MyContext.Provider value={ 전역으로 전달하고자 하는 값 }> { /*Context 안에 위치할 자식 컴포넌트들*/ } </MyContext.Provider>

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

✔️ Why React?

• 중복된 코드(Shotgun Surgery) -> Component(Module)로 제작하여 유지 보수를 용이하게 함 
• Component 기반의 UI 라이브러리(컴포넌트화 방식)
• 명령형 프로그래밍(절차 나열, ex. jQuery) -> 선언형 프로그래밍 방식으로 전환, 코드의 단순화
• Virtual DOM(Document Object Model) : 기존 트리 형태의 DOM을 사용하여 나타나는 성능 저하 문제를 해결, 기존 DOM은 요소가 추가될 때 마다 State Change -> Compute Diff -> Re-render의 과정을 거쳤으나, Virtual DOM에서는 Virtual DOM을 이용하여 업데이트 된 요소를 모아서 Rendering

✔️ Create React App

• React.js : Node 기반의 Javascript UI 라이브러리
• Webpack : 다수의 자바스크립트 파일을 하나의 파일로 합쳐주는 모듈 번들 라이브러리
• Babel : JSX 등의 쉽고 직관적인 자바스크립트 문법을 사용할 수 있도록 해주는 라이브러리
• Boiler Plate : 패키지를 감싼 패키지, 기초 세팅 작업을 해주는 패키지 ex. create-react-app
• npx : 패키지를 한 번만 사용하고 싶을 때 npm 대신 사용
• public > index.html > <div id='root'/>
• node_modules : 외부 모듈 저장
• JSX : html + js -> extensions, 자바스크립트의 변수나 함수같은 값을 html에 쉽게 포함할 수 있도록 고안된 문법
• Component : 별도의 html 요소들을 묶고 모듈화하여 다른 파일에서 사용할 수 있도록 한 것
• export default 함수; // ES module system (cf. common.js : module.exports) -> 다른 파일에서 import 이름 from 파일 경로로 사용

✔️ JSX

• 최상위 root -> 최상위 컴포넌트 App(관례상)
• 닫힘 규칙 : 닫는 태그, jsx에서는 꼭 닫아줘야 함 + 셀프 클로징 태그
• 최상위 태그 규칙 : return 문 내에서 다른 모든 태그를 감싸는 가장 바깥의 태그  cf. <React.Fragment> 로 감싸는 경우 최상위 태그를 두지 않아도 됨, 또는 빈 태그 <> 두기
• import React from "react"; : 리액트를 사용하지 않는 js 파일은 굳이 import 할 필요 없음
• <div className="클래스명">
• jsx 스타일링 : css / inline 스타일링(객체 생성)
• 값 사용 : { 변수명, 표현식, 문자열, 함수 호출 }  cf. 배열이나 true/false는 렌더링 불가
• 삼항 연산자를 이용한 조건부 렌더링 가능

✔️ State(상태)

• 계속해서 변화하는 특정 상태, 상태에 따라 각각 다른 동작을 함
• 컴포넌트가 가지는 동적인 데이터
• import React, {useState} from 'react';
• 컴포넌트는 자신이 가지고 있는 상태가 변경되면 리렌더(함수 재호출)

✔️ Props

• 컴포넌트에 데이터를 전달하는 방법(부모->자식 컴포넌트)
• Properties
• initialValues, defaultProps 설정 가능(부모 컴포넌트에서 initialValues를 넘겨주지 않을 때)
• 자신에 내려오는 Props가 바뀔 때 리렌더
• 부모 요소의 State가 변경될 때 자식 요소도 리렌더
• 컴포넌트 자체도 Props로 전달 가능

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

✔️ Node.js 란?

• 배경 : 원래 JS는 브라우저에서만 실행 가능, 하지만 크롬이 개발한 V8은 C++로 개발되어 어디서든 사용 가능(탈브라우저)
• 자바스크립트를 브라우저가 아닌 곳에서도 독립적으로 사용할 수 있도록 -> 자바스크립트 실행 환경
• 자바스크립트로 웹 서버도 개발 가능 ex. 웹 서버, 미디어 서버, 채팅 서버
• Node.js로 주로 웹 서버 개발
• 브라우저가 URL로 웹 서버에 요청, 웹 서버는 URL에 알맞는 파일을 던져줌

✔️ Node.js & VsCode 환경 설정

• Node.js : https://nodejs.org/ko/
• VSCode : https://code.visualstudio.com

✔️ Node.js 기초

• 터미널(CLI)로 실행 ex. node index.js
• 모듈 : 기능을 담당하는 분리된 파일
• common.js 모듈 시스템 : module.exports = { };  // 객체 단위로 모듈 내보내기, require("url"); // 모듈 불러오기 

✔️ 프로젝트 & NPM

• NPM : Node Package Manager
• Package를 통해 다른 사람들이 만든 모듈 사용 가능  
• 패키지 초기화 : npm init
• package.json : 패키지 환경설정 파일 - scripts(자주 실행하는 명령어 스크립트 정의)
• Node.js package : https://www.npmjs.com

참고) 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

22.09.19(mon) Day 1. 한입 크기로 잘라 먹는 리액트 0.강의 및 강사 소개 - 1. 기본 자료형과 형변환

22.09.20(tue) Day 2. 개더 프론트엔드 스터디

22.09.22(thur) Day 3. 한입 크기로 잘라 먹는 리액트 1. 연산자 - 1. 조건문

22.09.25(sun) Day 4. 한입 크기로 잘라 먹는 리액트 1. 함수 - 2. 단락 회로 평가, 개더 프론트엔드 스터디

22.09.27(tue) Day 5. 한입 크기로 잘라 먹는 리액트 2. 조건문 Upgrade - 2. Spread 연산자

22.09.28(wed) Day 6. 한입 크기로 잘라 먹는 리액트 2. 동기 & 비동기 - 2. API & Fetch

22.09.29(thru) Day 7. 개더 프론트엔드 스터디

22.10.02(sun) Day 8. 한입 크기로 잘라 먹는 리액트 3. Node.js란? - 4. Create React App, 개더 프론트엔드 스터디

22.10.05(wed) Day 9. 4. JSX - 5. 프로젝트 소개, 개더 프론트엔드 스터디

22.10.09(sun) Day 10. 5. React에서 사용자 입력 처리하기 - 5. React에서 배열 사용하기 3 - 데이터 삭제하기, 개더 프론트엔드 스터디

22.10.12(wed) Day11. 5. React에서 배열 사용하기 4 - 데이터 수정하기 - 5. React에서 Lifecycle 제어하기 - useEffect, 개더 프론트엔트 스터디

22.10.15(sat) Day12. 5. React developer tools - 5. 최적화 4 - 최적화 완성, 개더 프론트엔드 스터디

22.10.19(wed) Day13. 5. 복잡한 상태 관리 로직 분리하기 - useReducer - 6. 컴포넌트 트리에 데이터 공급하기 - Context

22.10.20(thur) Day14. 개더 프론트엔드 스터디

22.10.21(fri) Day15. 6. 페이지 라우팅 0 - React SPA & CSR 

22.10.23(sun) Day16. 6. 페이지 라우팅 1 - React Router 기본 - 6. 페이지 라우팅 2. - React Router 응용, 개더 프론트엔드 스터디

22.10.30(sun) Day17. 6. 프로젝트 기초 공사 1 - 6. 프로젝트 기초 공사 2, 개더 프론트엔드 스터디

22.11.03(thur) Day18. 6. 페이지 구현 - 홈 (/)

22.11.06(sun) Day19. 6. 페이지 구현 - 일기 쓰기 (/new) - 6. 페이지 구현 - 일기 수정 (/edit), 개더 프론트엔드 스터디

22.11.07(mon) Day20. 6. 페이지 구현 - 일기 상세 (/diary) - 6. Open Graph 설정하기 💗완강 !