이번시간에는 pulic/index.html파일에서만 진행할 예정이다. Open Graph는 meta data에 속하는 속성이기 때문에 이 아래에서 한번 진행해보자. 우선 우리는 Open Graph로 세가지를 진행해 볼것인데 첫번째로 썸네일을 지정해보자. 1. 썸네일 지정하기 우선 이 이미지를 아래와 같이 public폴더 안에 넣어보자. 그리고 index.html 파일안에 Open Graph를 넣기 위해 다음과 같이 코드를 입력해 주면된다. 그리고 다음으로 아래와 같이 추가해주자. 2. 사이트 이름 넣어주기 3. 사이트 Description 넣어주기 자 그럼 npm run build 로 다시 빌드를 해주고 firebase deploy 로 다시 배포작업을 해보자 그럼 우리가 링크를 카카오톡에 보내게 된다면,..

프로젝트를 배포하는 방법 1. 서버 구축 이는 복잡하기때문에 다른 방법을 사용하지. 2. 배포 솔루션 사용 그래서 우리는 배포 솔루션을 사용하여 배포를 시행해볼 것이다. Firebase에 접속하여 시작하기를 클릭하여 Firebase Console로 접속해보자. https://firebase.google.com Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com https://console.firebase.google.com/ 로그인 - Google 계정 이메일 또는 휴대전화 accounts.google.com 그럼 프로젝트 추가 버튼을 클릭하여 프로젝트를 하나 생성해보자. 프로젝트 이름..

먼저 우리의 프로젝트의 이름을 React App으로 나갈 수 없으니 title을 변경해보자. 우선 개발자 도구의 Elememts 탭에서 보면 아래와 같이 head 티그 안에서 title이 React App이라고 되어있는 것을 확인할 수 있다. 이는 public 폴더 안의, index.html에서 찾아볼 수 있다. 그럼 우리는 여기서 한번 직접 편집해보자. 그럼 다음과 같이 title이 변경된 것을 확인할 수 있다. 그리고 이 project의 description도 수정해주자. 그리고 language도 en이 아닌 ko로 수정하여 한국어로 변경시켜주자. 그런데 모든 페이지에서 title이 모두 감정일기장으로 고정되어있는 것을 볼 수 있는데, 이번에는 페이지별로 title을 다르게 한번 주어보자! 이는 in..

오늘은 프로젝트를 최적화 해보자! 컴포넌트와 연산간의 최적화를 해보자. 자 그럼 어떤 부분이 연산을 낭비시키고 있는지 찾아보아야한다. 우선 정적분석, 동적분석으로 확인할 수 있는데 이에대해 먼저 알아보자. 정적분석, 동적분석이란? 출처 : https://isc9511.tistory.com/33 더보기 * 정적 분석 : 소프트웨어가 실행되지 않는 환경 하, 소스 코드 의미를 분석, 결함을 찾아내는 분석 기법 * 정적 분석 분류 분류 내용 소스 코드 분석 시큐어 코딩 가이드 기반 취약한 항목의 존재 확인 시멘틱 분석 인터페이스 & 함수 호출의 구조적 취약점을 분석 바이너리 구조 분석 역공학 분석 도구를 이용 * 동적 분석 : 소프트웨어가 실행중인 환경 하, 다양한 입/출력 데이터, 사용자 상호작용의 변화들을..

일기를 추가 작성했을 때에 dummy로 입력된 data들만 남고 새로운 데이터들은 다 날아가는 것을 확인할 수 있다. JavaScript는 Client side로 웹브라우저에서만 동작하기 때문에 새로고침을 하면 다시 초기데이터로 돌아가게 된다. 그러므로 JavaScript값은 휘발성을 가지고 있어 유지되기 힘들다는 것을 알 수 있다. 그래서 이러한 값들은 Database에 저장을 하고, 새로고침을 했을 때 Database에서 가져오도록 만들면되는 것이다. 그때에 이때 Database를 사용하지 않고도 Data를 저장하고 불러올 수 있는 기능을 알아보자~! Web Storage API Web Storage API는 브라우저에서 키/값 쌍을 쿠키 (en-US)보다 훨씬 직관적으로 저장할 수 있는 방법을 제공..

dataId 시작 정하기 우선 일기를 새로 작성을 2개를 하게 된다면 아래와 같은 에러가 나게 된다. 이는 두개의 자식이 똑같은 트리를 가지고 있다라는 것인데, 컴포넌트 탭에 들어가서 확인해 보니 똑깉아 key가 1인 것들이 두개가 있었다. 이렇게 계속 새로운 글을 작성하면 2, 3, 4 계속 버ㅓ그가 발생하게 될 것이다. 이전에 App.js에서 dataId를 useRef(0)으로 설정해 두었었다. 근데 dummydata로 등록해 놓은것들이 1부터 5까지 있다. 그래서 우리는 dataId를 6번부터 시작했어야하는데 0부터 시작해서 에러가 난것이다! React를 사용하다 보면 이러한 에러를 많이 접하는데 이를 주의해서 개발하면 좋다! 근데 31일 일자로 일기를 등록하면 컴포넌트 영역에는 출력이 되나, 리스..