짧은코딩

이유 및 코드 강의를 보며 만들었던 emotion-diary 프로젝트를 큰 흐름을 기준으로 분석해보려고 한다. 아직은 리액트의 로직을 잘 모르는 것 같아서 분석을 하면서 정리하면 도움이 될 것이라고 생각한다. -깃허브 https://github.com/5hyun/emotion-diary GitHub - 5hyun/emotion-diary Contribute to 5hyun/emotion-diary development by creating an account on GitHub. github.com 코드는 여기서 보면된다. 초기 설정 1. 폰트, 레이아웃, 이미지 등을 세팅 2. 버튼, 헤더 등 여러 페이지에서 공통으로 사용 할 컴포넌트 세팅 App.js 1. 복잡한 컴포넌트의 로직 분리를 하기 위해 us..

https://firebase.google.com/?hl=ko&gclid=CjwKCAjwquWVBhBrEiwAt1KmwqeeO0K9y1fW7fUkjnXFKQDGtMiHhVxEyKU0q0aBc0-nNwwdUyCOUxoCQmYQAvD_BwE&gclsrc=aw.ds Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 프로젝트 만들기를 한다. 프로젝트를 만들고 나면 이런 페이지가 나온다. 그리고 빌드 -> hosting -> 시작 npm install -g firebase-tools 이 명령어를 입력한다. firebase login vsc 터미널에 이 명령어를 입력한다. 그러고 구글 아이디로 ..

상단 제목 바꾸기 public/index.html에 가서 부분을 수정한다. 감성 일기장 description description은 사이트의 성격을 요약해서 나타낼 수 있다. 언어 변경 이렇게 ko로 해야 번역하기가 안뜬다. 페이지마다 제목 바꿔주기 -Diary.js useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감성 일기장 - ${id}번 일기`; }, []); -Edit.js useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHT..

웹 최적화 방법 1. 코드들을 하나하나 보면서 찾는 방법, 정적 2. 프로젝트를 키고 프로그램에 의해 동적으로 분석한다. => 우선은 정적 분석을 할 만큼 실력이 뛰어나지 않기 때문에 정적으로 분석한다. 그렇기에 개발자 도구의 Components의 설정에서 Highlight updates when components render를 체크하고 분석하면 된다. 최적화 하기 1. 달력을 바꿨을 때, 버튼들은 리렌더 될 필요가 없다. -Home.js // 오른쪽 버튼 누르면 1달씩 증가 const increaseMonth = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate()) ); }; // 왼쪽..

Web Storage https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API Web Storage API - Web API | MDN Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. developer.mozilla.org seeionStorage: seeionStorage는 브라우저가 열려있는 동안만 저장이 된다. LocalStorage: 브라우저를 닫아도 저장 공간에 저장되어 있다. -LocalStorage 저장하기 useEffect(() => { localStorage.setItem("item1", 10); localStorage.setItem("item2", "2..

글 추가 이렇게 글 2개를 추가하면 id가 같은 일기가 생성된다. -에러 Encountered two children with the same key 이런 버그를 만나면 key가 여러 개 존재한다는 것이다. 테스트해보는 dummy data를 사용할 때 자주 발생한다. -App.js const dataId = useRef(6); dummy data가 5개 있었으니까 초기값을 6을 줘야 에러가 발생하지 않는다. 최신순 정렬에서 글 추가하면 정렬 안되는 버그 이건 놀랍게도 오타 때문이었다. TypeScript는 이런 오타를 해결할 수 있다고 한다. -DiaryList.js const [sortType, setSortType] = useState("latest"); latest가 아닌 lastest라고 썼다. ..

같은 함수를 여러 번 사용할 때 src에 util이라는 파일을 하나 만든다. 그리고 date.js로 파일을 만들고 // 처음부터 오늘의 날짜가 오게 해주기 위한 기능 export const getStringDate = (date) => { // 0~9까지 잘라준다. return date.toISOString().slice(0, 10); }; 반드시 앞에 export를 쓰고나서 중복해서 사용 하는 함수를 저장한다. 그 후에 중복 사용하는 파일에 가서 import { getStringDate } from "../util/date.js"; import를 한다. 헤더 데이터 가져오기 import { useContext, useState } from "react"; import { useNavigate, useP..

App.js 우선 App.js에서 경로를 수정한다. path="/edit/:id"로 해야 /1이 붙어도 잘 나온다. Edit.js import { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { DiaryStateContext } from "../App"; import DiaryEditor from "../components/DiaryEditor"; const Edit = () => { const navigate = useNavigate(); // id 불러오기 위한 useParanms const { id } = useParams(); // tar..

헤더 및 오늘 날짜 -new.js import { useState } from "react"; import { useNavigate } from "react-router-dom"; import MyHeader from "./../components/MyHeader"; import MyButton from "./../components/MyButton"; // 처음부터 오늘의 날짜가 오게 해주기 위한 기능 const getStringDate = (date) => { // 0~9까지 잘라준다. return date.toISOString().slice(0, 10); }; const New = () => { const [date, setDate] = useState(getStringDate(new Date())..

헤더 -Home.js import { useState } from "react"; import MyHeader from "../components/MyHeader"; import MyButton from "../components/MyButton"; const Home = () => { const [curDate, setCurDate] = useState(new Date()); // month는 1월이 0월로 표시되기 때뮨에 +1 해줘야 한다. const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; // 오른쪽 버튼 누르면 1달씩 증가 const increaseMonth = () => { setCurDate( new Date(cu..