REACT

vscode extensions : live serversetting (ctrl + ,) 들어가서 : format on save 체크박스 \- 저장눌렀을때 자동으로 깔끔하게 코드 세팅 해줌

웹 브라우저에 포함된 '자바스크립트 엔진'이 없으면 우리는 자바스크립트를 실행할 수 없다\-> 자바스크립트 엔진 내장한 웹 브라우저 : 자바스크립트의 실행환경(Runtime)변수 : 이름 붙은 저장소상수 : 바꿀수 없는 저장소원시타입자료형1) Number, String

Truthy & Falsy 삼항 연산자 단락 회로 평가

\-> 우린 각 브라우저에 내장된 자바스크립트 엔진을 사용해야함!js는 html문서에서 사용되기 시작했음\-> 자바스크립트를 브라우저가 아닌 어디에서나 실행해보려고 만든것임!(node.js)리액트 : 자바스크립트파일들을 쉽게 만들어놓은 라이브러리gui방식(graphic

\-> 공통적이고 재사용하는 요소들을 '컴포넌트화' 함!\-> 리액트는 컴포넌트 기반의 ui 라이브러리!(like 레고!)dom(document object model): 문서 객체 모델\-> 만약 dom을 계속 변경할수 있다면? 필요이상으로 많은 연산 수행하고 ->

\-> 우린 기초 세팅작업 완료된 패키지(Boiler Plate)를 사용할것임!\-> 원래는 npm으로 사용하는게 맞는데, 우리는 세팅작업 완료된 boiler plate 사용할것이므로 npx로 함!(한번쓰고 말것)\-> 이런식으로 뜨면 된것!=> 다 설치 됐다면 터미널

계속해서 변화하는 특정 상태, 상태에 따라 각각 다른 동작을 함 \-> '다크테마' 처럼 컴포넌트가 갖는 '테마(다크 or 일반)'처럼 값이 바뀔 동적인 데이터 이고,'상태를 바꾸는것'은 이걸 가진 컴포넌트가 관리한다!

Porps? 프로퍼티란? 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다.(단방향 데이터 흐름 갖는다.) 프로퍼티는 수정할 수 없다는 특징이 있다.(자식 입장에서는 읽기 전용 데이터이다.) 프로퍼티에 문자열 전달할때는 "", 문자열 이외의 값 전달할때는 {}

mydiary라는 파일 생성후, terminal에 npx create-react-app 파일명(나는 mydiary)파일 안에 생성되어서-> 잘라낸 후 위로 빼기!(바로 파일에 접근 가능하게!)안쓰는 파일 지우기\-> 요 상태로 되어있으면 된다(안쓰는거 다 지워도됨!)c

Myheader.js => myheader라는 변수 만들어서 내보내기 해주고!(언제나 리턴값이 있어야한다.) app.js에서 import Myheader해주면 바로 자동완성됨! 그 밑 태그에! 라고 입력해줘야함!!('는 태그 안보여서 쓴것임~) 리액트 앱이

\-> 근데 요새는 alert보다는, focus주는 방식을 이용하고있어서 focus 줄것임~useRef라는 기능!

일기의 내용들은 배열로 저장할것!(리스트 랜더링)=> 항상 만들때 최상위 태그의 className을 컴포넌트이름과 같게설정!

\-> 같은 계층끼리는 데이터 못전달해줌🙋‍♀️그럼 어떻게 전달?

1) 삭제버튼 누르면 리스트가 삭제되어야함!2) app.js의 data가 바뀌어야한다.3) 삭제된 데이터를 뺀 나머지 배열만 리스트에서 보여야함!어디에? app.js에!✔️즉 app.js에서 diaryitem.js에서 onDelete(id) 그 아이디 해당하는 애를

=> 원래 코드는 button onClick안에 함수가 들어있었는데, 이는 보기 불편하므로=> 변수만들어서 함수를 저장해둔후, 호출하는 방식으로!=> 수정하기 버튼을 누르면 표시한 부분이 폼으로 바뀌면서 수정가능하게 바꿀거다!😎언제나 데이터를 수정하려면? useSta

lifecycle? 프로그램 실행, 종료 나타내는 생애주기\-> class형 컴포넌트만 사용가능(함수형 컴포넌트를 쓰는 지금은 사용못한단 얘기)\-> 원래 state개념들은 함수형 컴포넌트에선 사용못하는데, hooks가 개발되면서 함수처럼 불러오게 사용가능해진것!\->

\-> RESOURCES => COMMENTS 사용할거다!

세부정보 들어가서\-다시 끄고 새로 npm start 해서 켜면개발자도구에서 어떤 hook 쓰는지, 어떤 props인지 확인가능리랜더 되는 부분 알려주기=> 톱니바퀴모양 클릭하면바로 바뀌는 state 확인가능

=> 즉 컴퓨터 프로그램이 동일 계산 반복해야할때, 이전에 계산한 값을 메모리에 저장해서 반복 수행 제거하여 프로그램 수행속도 빠르게 하는것!컴포넌트 props가 바뀌지 않을때 리랜더링되는것 방지1~2 안좋은 감정3~5 좋은 감정코드에서 데이터가 20개로 잘려서 다시

React.memo https://ko.reactjs.org/ 고차 컴포넌트 기존의 컴포넌트를 새로운 컴포넌트(더 좋아진 컴포넌트)로 반환하는 함수 즉 리액트 메모란 ![](https://velog.velcdn.com/images/gyeongmi_lee/post/

with. devtools(component보면서 할거다!)현재 상황에서는 삭제하기를 하면 => DiaryEditor도 깜빡이는걸 볼수있다(최적화해야함!)

=> 요 두개를 최적화해볼거다!\-> 보니까 onRemove, onEdit은 데이터 state가 변하면 재생성될수밖에 없는 함수들임 => 즉, useCallback이용해서 setState에 배열로 바뀌는 값 담아줘야!여기에서이렇게 변화해야함데이터를 다루는 부분을 전달해

=> app컴포넌트는 코드의 길이가 길고, data를 계속 참조해서 써야하므로 함수 안에 onCreate, onEdit, onRemove가 들어가있어야했다!useReducer 이용하면 컴포넌트 가볍게 만들 수 있다!

어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정!=> 즉 ROUTER : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가=> ROUTING : 경로를 정해주는 행위 자체와 그런 과정들을 다 포함하여 일컫는 말!즉 우리가 웹사이트에 접속한다

새로 파일 생성한 후, 세팅까지 완료함!https://reactrouter.com/en/main(installation 없음~)=> 확인

/:이런식으로 url에 변수를 담아서 전달하는 방법을 pathVariable이라고 부름=> &으로 엮어서 전달하게 되는 방식!=> 결과

img url 불러올때는{process.env.PUBLIC_URL+경로} => 이 말이 PUBLIC안에 있는 애들 바로 가져다 쓴다는말!4\. 공통 컴포넌트 세팅

현재 컴포넌트가 아닌 다른 곳에 state를 저장하고 싶을 때 유용(상태 업데이트 로직 분리, useState와는 다르게 컴포넌트 바깥에서 작성 & 다른 파일에 작성 후 불러와서 사용)useReducer : 컴포넌트에서 관리하는 값이 여러개가 되어서 상태의 구조 복잡u

1) 현재 년 , 월2) < 왼쪽 버튼3) 오른쪽 버튼dummydata만들기

=> setState가 바뀌는건 여기서 확인가능1️⃣ import부터 옮김2️⃣ 순서대로 옮기는데 RETURN을 마지막으로~3️⃣ 다 옮기면 DiaryEditor import하면 끝DiaryEditor - return문DiaryEditor 앞쪽파트css스타일링

=> 안됨

1) 헤더 섹션 : myheader + mybutton 사용2) 오늘의 감정 + 이미지 (선택된 id 사용해서 이미지, 감정점수 가져오기)3) 오늘의 일기 => id 가져와서 content 보여주기=> 날짜 데이터를 알아보게 해줘야하므로DiaryEditor의 getSt

=> 왜? => 키를 이런식으로 중복해서 받아오고 있음=> App.js에서 확인해보면=> 6으로 바꾼다=> 잘 추가된거 확인 \~~!=> 오타인 경우 정어ㅓ어엉말 많다!!시간객체를 사용할때=> 원래 이렇게만 해뒀는데=> 요렇게 바꿔둬야 마지막날 선택해도 버그가 없다!

=> 즉 우린 db가 필요하다!https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API=> sessionStorage : 즉 웹브라우저가 꺼지면 데이터가 날아간다!@=> localStorage : 데이터를

하나하나 클릭해보면 연산낭비가 어떻게 되는지 보임home.js에서 살펴보면=> < > 누를때는 setState, 즉 상태변화에서 수행되고 있다.=> 연산낭비되는 컴포넌트인 DiaryList에서 확인해야함(DiaryList는 home 컴포넌트의 자식요소이므로, 부모

타이틀 변경하기 페이지마다 타이틀 변경하기 상세페이지 수정페이지 새일기페이지

https://firebase.google.com/?gclid=EAIaIQobChMI5Nbc0oLE_AIVyqmWCh2WcQqCEAAYASAAEgLCpvD_BwE&gclsrc=aw.ds\-> 이름 짓고 -> 구글 애널리틱스(동의안함)-> 다 넘어가면=> 복붙다

index.html에서 npm run buildfirebase deploy 입력해서 다시 배포https://developers.kakao.com/tool강의에서처럼 말고https://developers.kakao.com/tool/debugger/sha