코딩 공부/React.js 리액트 썸네일형 리스트형 감정 일기장, 앱 배포단계 - new page는 사용자로부터 새로운 일기를 입력받아 추가하는 기능을 가진 페이지- section은 div와 동일한 기능 - creativeDate에 저장된 데이트 객체를 input태그에 value 속성으로 넣으면input태그는 객체로 설정된 값을 이해하지 못해서 렌더링이 되지 않음 >>> Date객체를 문자열로 변환하여 넣는다 Date를 객체로 변환하여 저장한다Diary- 비교적 구현이 간단함(감정과 일기내용 렌더링)- useEffect가 실행된 후 curDiaryItem에 저장되어 반환한 뒤 렌더링이 된다웹스토리지-페이지가 유지되게 하고 싶다면 스테이트에 저장한 데이터를 외부 데이터 베이스에 저장하고,외부에 저장했던 값을 불러와서 state값으로 넣어준다- 웹 스토리지는 세션 스토리지와 로컬 스토.. 더보기 7주차 퀴즈 O toSorted 라우팅 페이지를 실제로 이동시키는 역할 SPA X * 더보기 감정 일기장 - 레이아웃 설정 폰트, 이미지, 레이아웃 설정하기- public 폴더에 폰트를 넣고, assets폴더에 이미지를 넣는다// index.css파일에서 폰트 설정@font-face { font-family: "NamuPenScript"; src: url("/NanumPenScript-Regular.ttf");}body * { font-family: "NamuPenScript";} import emotion1 from "./assets/emotion1.png"import emotion2 from "./assets/emotion2.png"import emotion3 from "./assets/emotion3.png"import emotion4 from "./assets/emotion4.png"import emotion.. 더보기 감정일기장 - 페이지 라우팅 페이지 라우팅- 특정 주소의 페이지를 요청하면, 서버는 요청에 맞는 페이지를 찾아서 반환한다 - 브라우저는 서버로부터 받은 HTML페이지를 화면에 그대로 렌더링한다 - MPA 방식: 서버가 여러 개의 HTML 페이지를 갖고 있는 것 - 서버 사이드 렌더링: MPA에서 브라우저가 페이지를 요청했을 때 미리 완성되어 있는 페이지를 응답하는 방식MPA 방식: 페이지를 이동할 때마다 기존 렌더링 해뒀던 페이지를 삭제하고,새로운 페이지를 받아화서 화면을 처음부터 렌더링한다 (이 과정에서 새로고침처럼 깜박임) SPA 방식 - 앱이 처음 로드될 때 필요한 모든 HTML, CSS, JS 파일을 한 번에 가져온다. 페이지 이동 시 HTML파일을 요청하지 않고, 자바 스크립트로 화면을 동적으로 바꿔준다. >> 한 페이지로.. 더보기 [6주차] useReducer, 최적화, context useReducer:컴포넌트 내부에 새로운 State를 생성하는 React Hook, 모든 useState는 useReducer로 대체 가능상태 관리 코드를 컴포넌트 외부로 분리할 수 있음- 리액트 컴포넌트의 주요 역할은 UI를 렌더링하는 것, 따라서 스테이트(onCreate, onUpdate 등)를 관리하는 코드가 너무 많아지면 주객 전도된 상황이 된다 dispatch 호출, reducer 호출, 액션 객체 reducer로 전달- dispatch로 상태 변화 요청, 요청 내용은 안에 있는 객체(1씩 증가) - reduce함수에서 새로운 state의 값을 반환하면 state의 값이 변경된다function reducer(state, action) { switch(action.type){ .. 더보기 5주차 퀴즈 컨트롤러 컴포넌트 useEffect x마운트 - 업데이트 - 언마운트 리프팅 스테이트마운트 - 업데이트 - 언마운트 updateconst mount = useRef(false);useEffect(() => { } 23 더보기 [5주차 - 2] 투두리스트 기능 구현 Editor 컴포넌트에 새로운 투두를 입력하고 추가버튼을 클릭하면 List컴포넌트에 새로운 TodoItem이 추가되어야 함추가된 투두 아이템은 List컴포넌트 내부에서 수정, 삭제, 검색이 가능해야 함 >> TodoItem을 state로 만들어서 보관해야 됨 (화면에 변화를 바로바로 렌더링하기 위해)→ State는 모든 컴포넌트의 조상이 되는 App 컴포넌트에 배치 import './App.css'import { useState } from 'react';import Header from './components/Header';import Editor from './components/Editor';import List from './components/List'; // 투두아이템의 보관형태를 정하.. 더보기 [5주차 - 1] 투두리스트 UI 구현 - 날짜, 검색, 리스트 피드 추가 및 삭제 등의 기능을 구현초기 설정- npm create vite@latest, npm i, npm run dev 순서로 터미널- 쓸데없는 파일 삭제, css 파일 코드 전체 삭제, App.jsx 일부 제외하고 다 삭제- 각자의 섹션을 컴포넌트로 나눠서 만들어준다 (상단부터 헤더 컴포넌트, 에디터 컴포넌트, 리스트 컴포넌트) App.css .App{ width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px;}- app요소의 스타일을 display로 flex로 설정한다flex: 유연하게 요소들의 배치를 조절 가능 column: 요소를 세로로 정리 gap: 요소들의 간격 조절 .. 더보기 이전 1 2 3 다음 목록 더보기
