강의 실습159 LocalStorage를 일기 데이터베이스로 사용하기 Web Database Storage 버그는 아니지만 새로 작성한 일기는 새로고침하면 사라진다. 자바스크립트의 state 가 값은 유지되기 힘들다. 즉 휘발성 메모리다. 이 때 간단한 데이터베이스 역할을 하는 Web Storage API 를 사용한다(브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법 제공). sessionStorage 와 localStorage 가 있는데, 브라우저가 꺼지더라도 데이터가 유지되는 localStorage 를 사용한다. 참고링크 : https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API Web Storage API - Web API | MDN Web Storage API는 브라우저에서 키/값 쌍을 쿠.. 2024. 2. 12. (서브 챕터) 흔히 발생하는 버그 수정 하기 REACT 를 사용하면서 자주 만나볼 수 있는 버그들에 대한 대처방법 1. key 값 중복 버그 재현을 위해 2개의 일기를 작성한다. 개발자 도구 콘솔에 보면 Warning 이 뜨는 것을 확인할 수 있다. - 콘솔 더보기 react-dohttp://m.development.js:86 Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and.. 2024. 2. 11. 페이지 구현 - 일기 상세 (/diary) /DIARY 1. 일기 상세 일기 상세 페이지의 헤더, 오늘의 감정, 오늘의 일기를 구현한다. 먼저 Diary 컴포넌트에서 state context 를 통해 일기 목록을 가져온다. 이후 일기 상세 데이터가 있을 때와 없을 때 분기하여 마크업을 진행한다. 일기 데이터가 없을 때 alert 를 추가한다(Edit 컴포넌트에도 적용). - Diary.js import { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { DiaryStateContext } from "../App"; const Diary = () => { // 사용자 정의 Hooks (커스텀.. 2024. 2. 10. 페이지 구현 - 일기 수정 (/edit) /EDIT 1. 일기 수정 App 컴포넌트에서 일기 수정 페이지 라우팅을 확인한다. id 변수가 전달되도록 Path Variable 을 지정한다. - App.js ... ... Edit 컴포넌트에서는 전달받은 id 를 통해 state context 로 공급되는 diary list 들을 가져와 id 에 해당하는 데이터를 출력한다. 데이터 출력은 컴포넌트가 마운트 되는 시점에 진행한다. 이후 수정할 데이터를 DiaryEditor 컴포넌트에 props 로 전달한다. - Edit.js import { useContext, useEffect, useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; import { Dia.. 2024. 2. 9. 페이지 구현 - 일기쓰기 (/new) /NEW 1. 일기쓰기 헤더, 시간 선택, 감정 선택, 일기 쓰기, 버튼을 구현한다. 1) 헤더 - New.js import { useNavigate } from 'react-router-dom'; import MyHeader from './../components/MyHeader'; import MyButton from './../components/MyButton'; const New = () => { const navigate = useNavigate(); return ( } /> ); }; export default New; useNavigate() 의 반환값으로 받은 함수의 매개변수로 '-1' 을 넣어준다. 2) 시간 선택 달력을 띄워 날짜를 선택하는 입력창을 구현한다. section 은 의미론.. 2024. 2. 8. 페이지 구현 - 홈 (/) HOME 일기 홈 페이지의 헤더, 필터링 및 버튼, 리스트를 구현한다. 1. 헤더 화면에 나타남과 동시에 현재의 년, 월을 표시하고 왼쪽, 오른쪽 버튼을 구현한다. 1) 현재 년월 표시 - Home.js import { useState } from "react"; import MyHeader from './../components/MyHeader'; const Home = () => { const [curDate, setCurDate] = useState(new Date()); console.log(curDate); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월` return ( ); }; export default Home.. 2024. 2. 4. 프로젝트 기초 공사 2 프로젝트 상태관리 기초 공사 하기 기초공사 항목) - 상태 관리 세팅하기 프로젝트 전반적으로 사용될 일기 데이터 State 관리 로직 작성하기 - 프로젝트 State Context 세팅하기 일기 데이터 State 를 공급할 Context 를 생성하고 Provider 로 공급하기 - 프로젝트 Dispatch Context 세팅하기 일기 데이터 State 의 Dispatch 함수들을 공급할 Context 를 생성하고 Provider 로 공급하기 1. 기초공사 1 : 상태 관리 App 컴포넌트 : 일기 데이터 State ↘ ReactRouter → Home(일기 리스트), New(일기 생성 로직), Edit(일기 수정 로직), Diary(일기 하나의 데이터) 일기 데이터를 관리할 state 를 App 컴포넌트.. 2024. 2. 3. 프로젝트 기초 공사 1 폰트, 공용 레이아웃, 이미지 에셋, 공용 컴포넌트 제작하기 기초공사 항목) - 폰트 세팅 Google Web Fonts 를 이용한 프로젝트에 사용되는 폰트 세팅 - 레이아웃 세팅 모든 페이지에 반영되는 레이아웃 세팅 - 이미지 에셋 세팅 감정 이미지들을 프로젝트에서 불러와 사용할 수 있는 환경 세팅 - 공통 컴포넌트 세팅 모든 페이지에 공통으로 사용되는 버튼, 헤더 컴포넌트 세팅 1. 기초공사 1 : Font Nanum Pen Script (Sandoll), Yeon Sung (Woowahan brothers) - Google Fonts Open Font License : SIL 개방형 글꼴 라이선스(OFL)는 글꼴 디자인 및 언어 소프트웨어 엔지니어링 경험을 바탕으로 글꼴 및 관련 소프트웨어용으로 특.. 2024. 2. 3. 페이지 라우팅 2 - React Router 응용 CSR 1. React Router Dom 의 유용한 기능 React Router V6 : React 에서 CSR 기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리 - Path Variable useParams - Query String useSearchParams - Page Moving useNavigate Diary 페이지 경로 : /diary 특징 : 어떤 일기를 보여줘야 할 지 전달 받아야 함 예 : /diary/1 -> 1번 일기 1) Path Variable : URL 에 변수를 담아서 전달하는 방법 - App.js ... ... 이렇게 콜론을 사용하여 id 라는 이름으로 뒤에 있는 값을 전달하겠다고 설정한다. 이후 http://localhost:3000/diary/1 경로로 접속하면 D.. 2024. 1. 31. 이전 1 ··· 5 6 7 8 9 10 11 ··· 18 다음
