Vanilla JavaScript로 메모장 CRUD 기능을 구현한 뒤, 이번에는 같은 메모장을 React로 다시 만들어보기 시작했다.이번 단계의 목표는 메모 추가, 수정, 삭제까지 구현하는 것이 아니다.먼저 React 프로젝트를 만들고, 기존 HTML/CSS 메모장 화면을 React로 옮긴 뒤, 입력창 값을 React의 state로 관리하는 것까지 진행했다. 이번 단계에서 한 일은 다음과 같다.React 프로젝트 생성Vite 기본 화면 제거기존 메모장 화면을 JSX로 작성제목 입력값을 state로 관리내용 입력값을 state로 관리onChange로 입력값 갱신onClick으로 버튼 클릭 시 state 확인 React 프로젝트 생성React 프로젝트는 기존 JavaScript 파일을 지우지 않고, 별도 ..

Vanilla JavaScript로 메모장 CRUD 기능을 구현한 뒤, 이제 같은 메모장을 React로 다시 만들어보기 시작했다.이번 React 단계의 목적은 새로운 기능을 추가하는 것이 아니다.기존에 만든 메모장 기능을 React 방식으로 다시 구현하면서, JavaScript와 React의 차이를 이해하는 것이 목적이다. JavaScript에서 했던 방식이전 단계에서는 HTML 요소를 직접 가져오고, 직접 이벤트를 붙이고, 직접 화면을 다시 그렸다.예를 들면 다음과 같은 코드들을 사용했다.document.getElementById(...)addEventListener(...)document.createElement(...)innerHTMLappendChild(...)renderMemos()즉, 직접 D..

Vanilla JavaScript로 메모장의 기본 CRUD 기능을 구현했다.지금까지 구현한 기능은 다음과 같다.메모 추가메모 목록 조회메모 수정메모 삭제localStorage 저장새로고침 후 데이터 유지이제 다음 단계에서는 기존 메모장 기능을 React로 다시 구현해보려고 한다.바로 React 프로젝트를 만들기 전에, 먼저 React에서 가장 기본이 되는 컴포넌트 개념을 정리해보려고 한다. 컴포넌트란?컴포넌트는 쉽게 말하면 다음과 같다.화면의 한 부분을 담당하는 JavaScript 함수지금 만든 메모장 화면을 보면 여러 영역으로 나눌 수 있다.전체 앱메모 입력 영역메모 목록 영역메모 카드 하나Vanilla JavaScript 단계에서는 HTML 안에 화면 구조가 전부 같이 들어 있었다. ... ..

이전까지 메모장에는 기본 CRUD 기능이 들어갔다.Create → 메모 추가Read → 메모 목록 보기Update → 메모 수정Delete → 메모 삭제그리고 localStorage를 사용해서 새로고침 후에도 메모가 유지되도록 만들었다.이번 단계에서는 새로운 기능을 크게 추가하기보다는, 기존 코드를 더 이해하기 좋은 구조로 정리했다.핵심 목표는 다음과 같다.추가, 수정, 삭제 로직을 함수로 분리하기입력값 앞뒤 공백 처리하기삭제 전 확인창 추가하기 왜 함수로 분리했나처음에는 버튼 이벤트 안에 모든 로직이 들어 있었다.예를 들어 삭제 버튼 이벤트 안에서 바로 배열을 수정하고, 저장하고, 다시 렌더링했다.deleteButton.addEventListener('click', function () { m..

이번 단계에서는 메모장 CRUD 기능 중 Update, 즉 수정 기능을 구현했다.이전까지는 다음 기능이 가능했다.메모 추가메모 목록 출력메모 삭제localStorage 저장 및 불러오기하지만 작성한 메모를 수정할 수는 없었다.이번에는 메모 카드에 수정 버튼을 추가하고, 사용자가 기존 제목과 내용을 바꿀 수 있도록 만들었다. 수정 버튼 추가하기기존에는 메모 카드 안에 삭제 버튼만 있었다.memoCard.innerHTML = ` ${memo.title} ${memo.content} 삭제`;수정 기능을 만들기 위해 버튼을 하나 더 추가했다.memoCard.innerHTML = ` ${memo.title} ${memo.content} 수정 삭제`;버튼이 두 개가 되었기 때문..

이번 단계에서는 새로고침해도 메모가 사라지지 않도록 localStorage를 사용했다.이전까지는 메모를 memos 배열로 관리했다.let memos = [];메모를 추가하면 배열에 저장되고, 삭제하면 배열에서 제거되는 구조였다.하지만 이 배열은 브라우저 메모리 안에만 존재한다.그래서 페이지를 새로고침하면 JavaScript가 처음부터 다시 실행되고, memos 배열도 다시 빈 배열이 된다.let memos = [];즉, 이전 단계에서는 메모 추가와 삭제는 가능했지만 새로고침하면 모든 메모가 사라지는 문제가 있었다.이번 단계에서는 이 문제를 해결하기 위해 localStorage를 사용했다. localStorage란localStorage는 브라우저에 데이터를 저장할 수 있는 공간이다.간단히 말하면 브라우저 ..