React

: 크롬의 V8엔진을 이용해서 JS를 브라우저 외에서도 사용가능하게 만들어주는 환경. : JS의 실행환경 (JS 런타임)React는 JS의 라이브러리임.JS 코드는 브라우저 내장 자바스크립트 엔진을 이용하여 실행됨. \- 엔진은 사파리, 크롬 등 웹브라우저위에 있

그래픽 사용자 인터페이스아이콘 등의 그래픽을 기반으로 마우스로 명령을 입력하는 방식장점 : 조작이 직관적이고 간단함단점 : 명령할 대상에 대해 프로그래밍이 되어있어야함.명령줄 인터페이스직접 줄글로 명령을 입력하여 조작하는 방식장점속도가 빠르며 안정적프로그램 조작 시 사

Node.js의 패키지 관리 도구패키지 설치하고 나면 packagae.json 파일이 생성됨.packagae.json : 우리가 만들 패키지의 정보를 기록하는 환경설정 파일scripts : 패키지 개발 시 자주 실행하는 명령어 정의하는 곳이제 start만 입력해도 no

Shotgun Surgery같은 구조를 가지고 있는 여러 페이지로 구성된 홈페이지의 경우 동일한 영역을 수정하기 위해 여러 파일을 모두 수정해야했음중복 코드 작성 및 유지보수가 힘듦\--> 컴포넌트화 방식 사용특정 기능을 하는 페이지들을 각각 컴포넌트로 만들어 불러와서

리액트 앱에 도움을 주는 추가 라이브러리 Webpack : 다수의 JS파일을 하나로 합쳐주는 모듈 번들 라이브러리 Babel : 여러 JS코드를 작성할 수 있도록 도와주는 라이브러리 Create React App 리액트의 Boiler Plate 리액트를 사용하는데 필

JS의 확장문법JS와 HTML을 혼합하여 사용할 수 있음JSX에서는 꼭 닫는 태그가 있어야 한다.<div></div>, <h1></h1><a /> <image />, <br /> 와 같은 self-closing-teg 등 html

: 컴포넌트의 동적인 값 (동적인 데이터를 다룰 때 사용됨): 계속해서 변화하는 특정 상태. 상태에 따라 각각 다른 동작을 함(0) 기본 화면 그리기(1) state 설정상태값으로 사용. 값이기 때문에 JSX에서 {}을 통해 return 받아서 html으로 화면에 표시

Props 부모 컴포넌트에서 자식 컴포넌트로 데이터에 이름을 붙여서 전달하는 방식 자식 컴포넌트에서는 매개변수를 통해 props를 받아서 사용할 수 있음 (1) 부모 컴포넌트에서 props 전달 자식 컴포넌트에 여러 값을 전달 가능함 (2) 자식 컴포넌트에서 pro

작성자, 내용 input 생성 DiaryEditor.js 생성 후 export App.js에서 DiaryEditor.js import 작성자와 컨텐츠 input 입력값을 실시간으로 인식할 수 있도록 state 기능 추가 이렇게만 설정하면 setAuthor, se

input 길이 측정 & input 포커스React에서 DOM 요소 선택하는 기능 = {useRef}const authorInput: React.MutableRefObject -> MutableRefObject : html 돔 요소에 접근할 수 있는 기능

리스트 객체를 순회하며 차례대로 화면에 랜더링하기 일기 객체를 보여줄 DiaryList 컴포넌트 생성 및 export & app.js 에서 import 일기 리스트(dummy)를 DiaryList 컴포넌트에 props로 전달 DiaryList.js에서 dummyL

리액트는 단방향으로만 데이터 전송이 가능함 즉, 같은 레벨의 형제 요소끼리는 데이터를 주고받을 수 없다. 위 이미지처럼 동일한 레벨의 DiaryEditor 컴포넌트에서 DiaryList로는 일기 아이템 데이터를 주고받을 수 없다. 이러한 경우, state를 Dia

삭제 : 일기 data state의 배열에서 삭제할 id의 일기 데이터를 삭제하여 state를 업데이트하는 것.props drilling : 두 계층 이상을 건너 props를 넘겨주는 것?onDelete함수 생성filter() : 주어진 함수의 테스트를 통과하는 모든

React 컴포넌트의 LifeCycle 컴포넌트 라이프사이클 제어 컴포넌트가 생성 ~ 사라지기 까지의 과정에 우리가 원하는 작업을 수행시킬 수 있음 리액트 라이프사이클 메서드 리액트는 각 생애주기마다 사용할 수 있는 메서드를 가지고 있음 아래 메서드들은 클래스형 컴

https://jsonplaceholder.typicode.com/무료로 dummy JSON 데이터를 받을 수 있는 곳await 메소드를 이용하기 위해, async 키워드를 붙여서 함수 작성API호출 함수 getData = promise를 반환하는 비동기함수

: 이미 계산해 본 연산 결과를 기억해 두었다가 동일한 계산 수행 시, 다시 연산하지 않고 기억해 주었던 데이터를 반환하는 방법함수 호출이 2번 된 이유초기 data는 빈 배열이었음api로 데이터 받아오면서 App 컴포넌트 리랜더 -> 전체 함수 한번 더 호출일기 수정

count와 text 두 개의 state를 가지고 있는 앱 컴포넌트가 있을 때, count state만 업데이트 하여도 자식 컴포넌트인 CountView 컴포넌트와 TextView 컴포넌트 둘 다 리랜더링 된다.컴포넌트 리랜더링의 낭비를 방지하기 위해 자식 컴포넌트(C

최적화할 컴포넌트 대상 찾기React developer tools -> Highlight updates when components render 사용일기 리스트 삭제 시, 일기 작성 폼도 리랜더됨 -> 일기 작성폼 최적화 하기!DiaryEditor 함수는 너무 길기때문

App 컴포넌트데이터 생성, 수정, 삭제 로직을 모두 가지고 있음상태를 업데이트 하기 위해서는 기존의 상태를 참조해야 하기 때문에, 앱 컴포넌트 내에 모든 로직 함수가 존재: 상태변화 로직들을 컴포넌트에서 분리할 수 있게 해주는 react hookshttps:

현재 컴포넌트 계층구조 DiaryList 컴포넌트는 diaryList, onRemove(), onEdit() 프롭스를 받지만, 실제 사용하는건 diaryList 프롭스뿐임 Prop Drilling : props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴

위키백과 Routing : 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 Router : 데이터의 경로를 실시간으로 지정해주는 역할을 하는 것 Routing : 경로를 정해주는 행위 자체 + 그런 과정들을 모두 포함하여 일컫는 말

새로운 프로젝트 (emotion-diary) 생성 npx create-react-app emotion-diary React Router 페이지 라우팅을 사용하기 위해 CSR(Client Side Rendering)을 도와주는 라이브러리 npm install react

useParams hook 사용각 일기의 상세페이지를 보려면 /diary/1 과 같이 주소가 연결되어야함/diary 뒤에 /1 과 같이 url을 추가하면 인식하지 못함path variable 전달단, <Route path="/diary" element={<D

1. 폰트 세팅 폰트 사용 시 저작권을 주의해야함 Open Font License 상업적 용도만 아니면 자유롭게 사용 가능한 폰트 > Google Web Fonts 에서 폰트 다운로드 및 사용 https://fonts.google.com/ font Import

data state를 컴포넌트 트리 전역에 공급최상위 문맥 : data 공급하위 문맥 : data를 변화시킬 수 있는 dispatch 함수들을 객체로 공급

1. HOME 컴포넌트 mount와 동시에 현재 년/월 표시 좌우 이동 버튼 좌우 버튼 클릭 시 월 변경 일기 데이터 불러오기 임시 dummy data 생성 Home.js 에서 일기 데이터 가져오기 ![](https://velog.velcdn.com/imag

1. Header 2. 입력란 날짜 입력 날짜 입력할 수 있는 캘린더 생성 `` input 에 저장되는 숫자를 state로 관리하기 ![](https://velog.velcdn.com/images/sungwoncho94/post/02d70e62-6e29-4914

수정페이지 경로 설정No routes matched location "/edit/3"path variable 받기수정 전 일기 데이터 가져오기 \- 원본 데이터 : App.js > data state \- useContext 사용하여 컨텍스트로부터 데이터 받

일기 데이터 가져오기 일기 존재여부에 따라 함수 생성 일기가 존재할 때 일기가 존재하지 않을 때 header 날짜 입력

https://developer.mozilla.org/en-US/docs/Web/API/WebStorageAPI sessionStorage 웹 브라우저가 켜져있는 동안만 데이터를 저장해둠 브라우저가 닫히면 데이터가 날아감 데이터를 서버로 전송하지 않음 localSto

코드 최적화 확인 방법1\. 코드를 보고 파악하기 (정적 분석)2\. 프로그램을 활용하여 파악하기 (동적 분석)날짜 변경 버튼을 누르면 setState(상태변화함수)가 실행되고, state가 변경되어 Home 컴퍼넌트가 리랜더링됨DiaryList는 Home 컴퍼넌트의

프로젝트 타이틀 및 설명 수정 index.html 페이지마다 title 변경하기 1. 상세페이지 2. 수정 페이지 3. 일기 작성 페이지 파비콘 변경 ![](https://velog.velcdn.com/images/sungwoncho94/post/e3045b1d

https://firebase.google.com/?hl=kofirebase 홈페이지 -> 구글 계정 연동 -> 새 프로젝트 만들기하나의 프로젝트에 여러 웹을 배포할 수 있기 때문에, 고려하여 프로젝트 이름 설정GA 설정은 자유!빌드 -> Hoasting ->

https://developers.kakao.com/여기서부터는 강의 내용과 조금 달라서 검색해서 따로 진행URL 입력칸에 내 도메인 주소 입력 후 디버그 선택현재 적용되어있는 캐시 정보가 나옴캐시 정보 확인 후 캐시 초기화 선택캐시 초기화 및 새 정보 반영