강의 실습/한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지63 Open Graph 설정하기 Open Graph 라는 것은 meta 데이터에 해당하는 속성이다. 1. Open Graph 설정 (1) 썸네일 지정 (2) 사이트 이름 (3) 사이트 설명 - index.html ... ... 이후 빌드 후 배포한다. - CMD npm run build > emotion_diary@0.1.0 build > react-scripts build Creating an optimized production build... Compiled with warnings. [eslint] src\components\DiaryItem.js Line 30:17: img elements must have an alt prop, either with meaningful text, or an empty string for de.. 2024. 2. 16. Firebase로 프로젝트 배포하기 DEPLOY2 프로젝트 배포 방법) - 서버 구축하기 - 배포 솔루션 Firebase 이용하기 구글 검색창에 'firebase' 검색 후 홈페이지 접속. 이후 시작하기 버튼 클릭하여 Firebase 콘솔 접속. 참고링크 : https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 이후 '프로젝트 만들기' 클릭. 프로젝트 이름 지정 후 체크박스 체크 후 '계속' 클릭. Google 애널리틱스 체크 해제 후 '프로젝트 .. 2024. 2. 15. 배포 준비 & 프로젝트 빌드하기 DEPLOY1 1. 프로젝트 타이틀 바꾸기 head 태그 내의 title 태그에 프로젝트 타이틀이 있다. public\index.html 에서 수정한다. - index.html ... 감정 일기장 ... 'React App' 에서 '감정 일기장'으로 수정한다. 사이트의 성격을 설명할 수 있는 요약을 작성하는 부분도 수정한다. 'Web site created using create-react-app' 에서 '나만의 감정 일기장'으로 수정한다. - index.html ... ... 마지막으로 언어를 'en' 에서 'ko' 로 수정한다. - index.html ... ... 페이지마다 타이틀이 바뀌도록 수정한다. 먼저 상세 페이지(Diary 컴포넌트) 부터 수정한다. - Diary.js ... // 타이틀 변.. 2024. 2. 14. 프로젝트 최적화 Optimization 최적화 확인 방법 2가지) - 정적 분석 : 코드의 상태를 보고 판단 - 동적 분석 : 프로젝트를 켜서 도구의 힘을 빌려 낭비되는 부분 찾기 ((React Developer Tools)개발자 도구의 Components 탭 - General - Highlight updates when components render 체크 활용) 1. Home 최적화 1) ControlMenu 컴포넌트 최적화 Home 화면의 헤더에서 화살표를 통해 날짜 변경시 필터와 버튼 부분이 렌더링 된다. Home 컴포넌트가 렌더링 되면 자식인 DiaryList 도 렌더링 되고 또 그 자식 요소인 ControlMenu 컴포넌트도 렌더링 된다. - DiaryList.js import React, { useEffec.. 2024. 2. 13. 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. 이전 1 2 3 4 ··· 7 다음
