리액트

# 들어가며 지난번까지 React.js를 학습하며 간단한 일기장 프로젝트를 만들어보았다 이제 React와 연계해서 배우면 좋을 것들에 대해서 알아보자 구현을 편하게 만들어 서비스 기능을 개발하는 데 집중할 수 있도록 Styling, state management, API Calls, Froms 등의 여러 라이브러리가 존재한다 따라서 이번 시간부터는 스타일링에 집중하여 현업에서 쓰이는 CSS 라이브러리로 어떻게 화면을 빠르게 만드는가에 대해 학습해보겠다 즉, 이미 구현되어 있는 것을 잘 활용하는 방법을 배워볼 것이다 # CSS 라이브러리 1. matrial ui (mui) - 구글 개발 - 문서화가 잘 작성되어있음잘 작성되어 있는 문서 - 가장 많이 쓰이는 라이브러리 2. antDesign - 알리바바 개..

# 배포 준비하기 우선 서비스 실행 시 브라우저 상단의 이름부터 바꿔보자 1. 타이틀 변경 프로그램 실행 시 React App 으로 뜬다 이걸 변경해보자 public 디렉토리의 index.html 에서 진행한다 React App 이 부분을 수정하자 감정 일기장 추가적으로 사이트 설명 부분도 수정해보자 이 부분도 아래와 같이 수정하고 마지막으로 lang 도 ko로 변경하면 끝 2. pages 컴포넌트마다 타이틀 변경 pages에 위치한 컴포넌트마다 타이틀을 정해주자 우선 Diary 컴포넌트 먼저 바꿔주자 useEffect(() => { const titleElement = document.getElementsByTagName("title")[0]; titleElement.innerHTML = `감정 일기장..

# LocalStorage를 일기 데이터베이스로 사용하기 새로운 일기를 추가한 다음 새로고침 하면 기존의 dummuData 말고 새로 작성한 일기들은 사라진다 왜 그럴까? 자바스크립트는 Client Side이기 때문에 웹 브라우저에서만 동작한다 자바스크립트의 state 는 휘발성 메모리라서 새로고침 시 모두 사라지게 된다 원래는 Date Base에 값을 저장하고 꺼내오고 해야하지만 이번 강의에는 DB 를 대신해서 LocalStorage 를 사용해보도록 하자 # Web Storage API key-value 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공하는 기능이다 # Storage 종류 session storage : 출처에 대해 독립적인 저장 공간을 제공하는데 페이지 세션이 유지되는 동안만..

# Diary 컴포넌트 구현 Diary 컴포넌트 즉, 일기 상세 페이지를 구현해보자 우선 상세 내용을 보여줄 일기 데이터의 id 값을 받아와서 해당 id 값으로 일기 데이터를 가져와야 한다 useContext 를 사용해서 App 컴포넌트에 위치한 DiaryStateContext 가져오자 diaryList 라는 변수를 생성해서 해당 변수에 일기 데이터들을 담아주자 수정 구현과 마찬가지로 useEffect 를 사용해서 id 일치 여부를 확인한다 useEffect(() => { if (diaryList.length >= 1) { const targetDiary = diaryList.find( (it) => parseInt(it.id) === parseInt(id) ); if (targetDiary) { set..

# NEW 컴포넌트 구현 # Header 기존에 만들어놨던 MyHeader 컴포넌트와 MyButton 컴포넌트를 가져와서 필요한 부분을 바꾸면 헤더를 쉽고 빠르게 구현할 수 있다 } /> 뒤로 가는 방법은 navigate 에 -1을 넣어주면 된다 # 날짜 입력받기 input 태그의 type을 date로 지정해서 일기 작성 날짜를 입력 받을 수 있도록 구현해보자 new 컴포넌트 화면이 렌더링되자마자 오늘의 날짜를 받아와서 input 태그에 띄워주어야 한다 현재 날짜가 어떨게 들어오고 있는지 확인해보니 2024-02-27 과 같은 형식으로 들어오고 있다 그렇다면 해당 형식에 맞춰서 날짜를 받아오자! 날짜 형식을 맞춰주는 getStringDate 함수를 생성하자 const getStringDate = (dat..

# 프로젝트 기초 공사 2 전체 프로젝트 구조를 살펴보자 각각의 컴포넌트는 다른 state가 필요하다 우선 App 컴포넌트에서 일기 데이터를 관리할 수 있는 state 를 만들어보자 # 상태 관리 세팅하기 useReducer 를 사용해서 App 컴포넌트에서 상태 관리를 세팅하자 const reducer = (state, action) => { let newState = []; switch (action.type) { case "INIT": { return action.data; } case "CREATE": { const newItem = { ...action.data, }; newState = [newItem, ...state]; break; } case "REMOVE": { newState = sta..

# React Router 응용 지난 시간에 설정한 page routing 을 응용해보자! # Path Variable Diary 컴포넌트에서 각각의 다이어리를 보여줄 때 어떤 일기를 보여주어야 할 지 정보를 전달받아야 한다 즉 /diary/1 과 같이 몇번 째 일기인지 숫자를 받아야 할 수 있다 Route path 에서 path variable인 id를 붙여주자 Diary 컴포넌트에서는 useParams 를 사용해서 id 값을 꺼낼 수 있다 useParams란 뭘까? 사용자 정의 hook, custom hook # Query String Query 웹 페이지에 데이터를 전달하는 가장 간단한 방법이다 /edit?id=10&mode=dark 와 같은 것들이 Query String 이다 Query Strin..

지난 시간에는 리액트의 기능들을 사용해서 아주 간단한 일기장을 만들어보았다면 이번 시간부터는 기능도 더 추가되고 디자인적으로도 훨씬 발전된 감정 일기장 프로젝트가 진행된다 지금까지 배운 기능들을 활용하고 새로운 기능들을 배워서 멋진 토이 프로젝트를 만들어봐야겠다 # SPA & CSR # Page Routing 라우팅이란? 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 데이터의 경로를 실시간으로 지정해주는 행위 자체와 그런 과정들을 포함하여 일컫는 말이다 따라서 페이지 라우팅은 요청에 따라서 해당 페이지를 반환하는 과정 # MPA Multipage Application 여러 개의 페이지 중 요청에 따라 적절한 페이지를 보내주는 방식이다 페이지 이동 시마다 웹 서버에게 페이지를 요청한..