Just Do It

클로저MDN 정의 : 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합함수형 컴포넌트에 대한 이해는 클로저에 달려 있다.함수형 컴포넌트의 구조와 작동 방식, 훅의 원리, 의존성 배열 등 대부분의 기술이 모두 클로저에 의존하고 있다.예제function add() { const a = 10; function innerAdd() { const b = 20; console.log(a + b); } innerAdd() // 30}add()변수 a의 유효 범위는 add 전체이고, b의 유효 범위는 innerAdd 전체다. innerAdd는 add 내부에 선언돼 있어 a를 사용할 수 있게 된 것이다.즉, “선언된 어휘적 환경” 이라는 것은, 변수가 코드 내부에서 어디서 선언됐는지를 말하는 것이다..

firebase 연결최종 완성된 감정일기장은 웹 스토리지 DB를 사용하다보니 다른 사람과 일기 데이터를 공유할 수 없어 아쉬웠다.그래서 firebase 를 사용하여 원격 DB를 연결해보았다. Chatgpt의 엄청난 도움을 받았다..^-^처음에는 몽고DB에 연결해보려 하였으나, 기존코드를 많이 수정해야할 것 같아서 패스.. 하고 새로운 것을 찾아보았다. 이 때 firebase 라는게 있는 것도 처음 알았고, 사용법도 당연히 몰랐기 때문에 공식문서, 지피티, 블로그에 의존하며 하나씩 해보았다.먼저 파이어베이스 가입하고 프로젝트를 생성한 뒤, SDK라는 것을 복사한다. SDK란 내 프로젝트의 config 정보를 말하는 것인데 밑에 나온다.터미널에 npm install firebase 명령어를 통해 fireba..

웹 스토리지(Web Storage)웹 브라우저 내장 DB웹 브라우저에 기본적으로 내장되어 있는 데이터베이스별도의 프로그램 설치가 필요 없다. 라이브러리 설치도 필요 없다.그냥 자바스크립트 내장함수 만으로도 접근이 가능하다.값을 저장 : localStorage.setItem(key, value)값을 꺼냄 : localStorage.getItem(key)SessionStorage브라우저 탭 별로 데이터를 보관한다.탭이 종료되기 전에는 데이터를 유지한다. (새로고침 가능)탭이 종료되거나 꺼지면 데이터를 삭제한다.LocalStorage사이트 주소별로 데이터를 보관한다.사용자가 직접 삭제하기 전까지는 데이터를 보관한다.예시 // key값은 무조건 원시타입만 가능 // 값 저장 localStorage.setI..

Diary Page 구현하기상세보기 페이지컴포넌트 구조는Header 컴포넌트Viewer 컴포넌트Diary.jsximport { useParams, useNavigate } from "react-router-dom";import Header from "../components/Header";import Button from "../components/Button";import Viewer from "../components/Viewer";import useDiary from "../hooks/useDiary";import { getStringedDate } from "../utill/get-stringed-date";const Diary = () => { const params = useParams();..

Edit Page 구현하기컴포넌트 구조는Header 컴포넌트Editor 컴포넌트Edit.jsx의 기능 중 존재하지 않는 페이지에 갔을 경우 코드를 이렇게 구현하게 된다면 에러가 발생한다. const getCurrentDiaryItem = () => { const currentDiaryItem = data.find( (item) => String(item.id) === String(params.id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다람쥐"); **nav("/", { replace: true });** } return currentDiaryItem; }; const currentDia..

New Page 구현하기UI 구현하기컴포넌트 구조는Header 컴포넌트Editor 컴포넌트EmotionItem 컴포넌트New.jsximport Header from "../components/Header";import Button from "../components/Button";import Editor from "../components/Editor";const New = () => { return ( } /> );};export default New;Editor.jsximport "./Editor.css";import EmotionItem from "./EmotionItem";import Button from "./Button";const emotionL..

Home Page 구현하기UI 구현하기컴포넌트 구조는Header 컴포넌트DiaryList 컴포넌트Home.jsximport Header from "../components/Header";import Button from "../components/Button";import DiaryList from "../components/DiaryList";const Home = () => { return ( } rightChild={" />} /> );};export default Home;DiaryList.jsximport Button from "./Button";import "./DiaryList.css";import DiaryItem from "./D..

일기 관리 기능 구현하기App.jsximport "./App.css";...생략const mockData = [ { id: 1, createdData: new Date().getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createdData: new Date().getTime(), emotionId: 2, content: "2번 일기 내용", },];function reducer(state, action) { return state;}function App() { const [data, dispatch] = useReducer(reducer, mockData); return ( ..

공통 컴포넌트 구현하기모든 컴포넌트에 공통적으로 사용되는 Button 컴포넌트부터 구현해보자.Button.jsximport "./Button.css";const Button = ({ text, type, onClick }) => { return ( {text} );};export default Button;Button.css.Button { background-color: rgb(236, 236, 236); cursor: pointer; border: none; border-radius: 5px; padding: 10px 20px; font-size: 18px; white-space: noWrap;}.Button_POSITIVE { background-color:..

폰트, 이미지, 레이아웃 설정하기 폰트 적용폰트 파일을 드래그하여 public 폴더 안에 넣는다.index.css@font-face { font-family: "kyoboHand"; src: url("/KyoboHandwriting2019.ttf");}body * { font-family: "kyoboHand";}font-family에 내가 설정하고 싶은 이름을 정하여 적어준다.src의 경로를 적을 때는 확장자까지 명시해야 한다. 이미지 불러오기이미지를 드래그하여 src > assets 폴더 안에 넣는다.App.jsximport "./App.css";import { Routes, Route, Link, useNavigate } from "react-router-dom";import Home from..