SUVIN

리액트로 만든 감정일기장이다 이 프로젝트 빌드 전 몇까지 배포준비를 해보자! 1. 타이틀 변경 우선 웹페이지 타이틀을 고쳐보자 index.html의 태그를 감정일기장으로 바꿔주자 ↓ 그리고 맨 위에있는 x o lang 설정도 영어가 아닌 한국어로 바꿔쥬쟈 메인타이틀은 감정일기장이지만 그 페이지마다 페이지가 하는 행동으로 타이틀을 변경시켜 볼 것이다 페이지마다 useEffect의 mount때를 이용해 보자 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감정일기장 - ${id}번 일기`; }, []); title태그의 0번 요소가 우리가 원하는 태그이기 때문에 이..

Page Routing Router -데이터의 경로를 실시간으로 지정해주는 역할을 하는 무언가 Route + ing -경로를 정해주는 행위자체와 그런 과정들을 다 포함하며 일컫는 말 인테넛을 사용해서 웹사이트에 접속한다는 것은 브라우저를 통해서 웹서버에게 경로 요청을 날리고 문서를 받아보는 것이다 우리가 /home이라는 경로 요청을 보내면 home에 해당하는 웹문서은 Home.html 파일을 웹서버가 브라우저에게 보내게 된다 MPA Multipage Application 이렇게 여러 개의 페이지를 준비해뒀다가 요청에 맞는 페이지를 보내주는 게 MPA방식이다 각각의 페이지 이동마다 페이지를 요청하는 방식을 사용하게 된다 그래서 MPA방식 들은 페이지를 이동할 때마다 새로운 페이지를 웹서버에 요청하고 응답을..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(9)] 로직 분리하기 -useReducer 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 두 번째 upgrade를 진행해볼 것이다 현재상태이다 보시..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(8)] 최적화3 - useCallback 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 간단한 일기장 만들기는 최적화도 했으니 모두 완료가 되었다!..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(7)] 최적화2 - React.memo 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 앞서 다룬 useMemo와 React.memo를 통해서 지금까..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(6)] 최적화1 - useMemo 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 앞서서 우리는 함수의 연산결과를 재사용해 최적화를 해 보았다 오늘은..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(5)] 배열사용해서 데이터 조작하기3- 데이터 삭제및 수정 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 지금까지의 코드 ↓ 더보기 App.js i..

Lifecycle? useEffect를 알아보기 전 알아야 할 개념이다 말 그대로 생애주기, 탄생부터 죽음에 이르기까지를 뜻한다 리액트에서도 이 생애주기가 있다 이 생애주기를 함수형으로 다루기 위해 우리는 React hook 기능 중 하나은 useEffect를 사용한다 software를 견고하고 좀 더 효율적으로 개발하기 위해서 자신이 만든 기술의 lifecycle를 잘 이해하고 있어야 한다 useEffect의 구조이다 사용법은 mount, update, unmout 시 각각 다르다 Mount useEffect(()=>{ console.log("Mount!"); },[]); mount 시에는 defendency array를 빈배열로 주면 mount 시 실행이 된다 Update useEffect(()=>{..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(4)] 배열사용해서 데이터 조작하기2- 데이터 추가 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 리스트 렌더링(조회) 데이터 추가 데이터 삭제 데..

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com [React Project: 간단한 일기장(3)] 배열사용해서 데이터 조작하기1- 리스트 렌더링 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응 su-vin25.tistory.com 이어서... 리스트 렌더링(조회) 데이터 추가 데이터 삭제 ..