프론트/react (6) 썸네일형 리스트형 감성 일기장 만들기 -6 (local storage 이용) web storage 브라우저의 데이터를 key-value쌍으로 저장한다 local storage : 브라우저 껐다켜도 남아있음 -> local storage에 key라는 이름의 key와 10이라는 value를 저장하겠다 local storage에 저장한 데이터 확인할 수 있는 공간 여기서 application 들어간 후 Local Storage 들어가기 객체는 브라우저의 storage가 받아들일 수 없는 값이기에 JSON.stringify를 이용해 직렬화(객체를 문자열형으로 바꾸기)를 시켜야 한다 데이터 삭제 : 그냥 바로 위 사진 화면에서 해당 데이터 우클릭 후 delete 데이터 가져오기 cf) local storage에 들어가는 값들은 문자열로 바뀌어 들어가므로 값을 가져올 때도 문자열 형태로 가.. 감성 일기장 만들기 -4 (Edit 페이지 만들기) 일기를 수정하려면 현재 일기의 데이터가 뭔지 정확히 가져와야 한다 -> 원본 일기의 데이터 가져오기 일단 edit 페이지도 id 마다 랜더링 되도록 수정하기 1) Path Variable(ex) /1)을 edit 컴포넌트에서 받아와야 한다 -> useParams 이용하기 edit/1에 접속했을 때 제대로 id 가져왔음을 콘솔창에서 확인할 수 있다 Edit 컴포넌트는 useContext를 이용하여 Context로부터 공급받는 데이터인 DiaryList를 받아와야 한다 diaryList에서 내가 찾는 id 값과 일치하는 id를 갖는 일기를 꺼내주어 현재 수정하려는 일기 찾기 -> edit 컴포넌트가 mount될 때 이 작업이 실행되어야 하므로 useEffect 사용해주기 게시글이 4개밖에 없는데 edit/9.. 감성 일기장 만들기 -4 (new) -> 총 섹션이 5개라 5개로 나눠서 진행하기 새 일기 작성페이지와 edit 페이지가 같다! -> new에 있는 컴포넌트들을 따로 분리해서 얘네들을 import 받아 사용하도록 하기 -> DiaryEditor 구현 (new에 있던 애들을 전부 옮겨오기!!) -> 그냥 new Date 받아오면 밀리세컨드 단위라서 우리가 아는 2024-02-02 처럼 표현하기 위해 getStringDate 함수 정의 -> useState( getStringDate(new Date) ); 로함으로써 글쓰기 페이지 들어가면 default로 오늘 날짜가 선택되어 있음을 확인할 수 있다 -> 기존에 있던 내용 다 지우고 DiaryEditor import 받기 display : grid -> 격자를 만들어준다 grid-templat.. 감성 일기장 만들기 -3 (Home) 페이지 구현 -홈(/) 홈페이지 구성 : 헤더, 필터링, 게시 1) Header 만들기 : 날짜를 저장하는 state가 필요하다 : "" 버튼 누르면 한달 후로 가도록 구현하기 2) 리스트 구현하기 -> 현재 data가 없기에 더미 데이터 만들어서 사용하기 -> App.js에서 data 초기값을 빈 배열이 아니라 더미데이터로 두기 1. Home 컴포넌트에서는 useContext, DiaryStateContext를 통해서 데이터를 공급받고 있다 2. 달을 앞/뒤로 넘기면 표시되는 일기도 달라져야 하기에 diaryList를 curDateState 날짜에 따라 가공하기 -> 현재 달력에 맞는 연도&월에 맞는 일기 데이들을 뽑아내야 함 -> useEffect 사용하기 curDate가 변하는 순간에만 새로 뽑아내.. 감성일기장 - 2 프로젝트 기초공사 - 1 폰트 : google web font 사용하기 app.css 상단에 복사한 폰트 style @import 붙여넣기 -> font-family는 가장 뒤에 있는 속성을 따른다 display:flex; justify-content:center; -> body태그 안의 요소들을 body 태그를 기준으로 가운데다가 둔다 (가로축의 가운데) align-items:center; -> 세로축을 기준으로 가운데다가 둔다 (세로축의 가운데) min-height:100vh; -> 현재 웹 스크린 실제 크기의 100%를 최소 높이로 갖겠다고 선언 양 옆을 띄우고 저만큼을 사용하기 위해 미디어쿼리 사용하기 (for 반응형 웹) 웹브라우저의 크기가 650px일때만 이 규칙이 적용된다 process.en.. 감성일기장 (여러 페이지로 구성된 웹사이트 만들기) - 1 Page Routing -> 요청에 따라 어떤 페이지를 돌려줄지 결정하는 과정 Single Page Application 리액트는 single page application 방식을 따르게 된다 -> 무슨 페이지를 요청하든 똑같은 index.html만 보내준다 무슨 페이지를 요청하든 똑같은 index.html만 보내주고 리액트 앱을 통째로 던져주게 된다 (SPA) - 서버에게 post를 달라고 하는 게 아님! - 페이지의 이동이 서버를 거치지 않고 리액트 앱이 알아서 페이지를 업데이트 시켜준다 (CSR) (통신 이동이 필요없이 브라우저가 알아서 처리해버림) - data가 필요한 경우에만 서버에게 데이터를 전달해달라하고 전달 받는 방식 CSR(Client Side Rendering)을 도와주는 라이브러리를 .. 이전 1 다음
