Java 콘솔 메모장을 시작하면서 IntelliJ에서 이상한 문제가 생겼다.sout을 입력했을 때 System.out.println() 자동완성은 되는데, Scanner에는 빨간줄이 뜨지 않고 import java.util.Scanner; 추천도 나오지 않았다.처음에는 JDK 문제라고 생각했지만, 확인해보니 단순히 JDK만의 문제는 아니었다. 문제 상황작성한 코드는 다음과 같았다.public class Main { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); }}정상이라면 Scanner에 빨간줄이 뜨고, IntelliJ가 다음 import를 추천해야 한다.import java.u..

React로 메모장 기능을 다시 구현한 뒤, 다음 단계로 Java 콘솔 메모장을 시작했다.지금까지는 브라우저 안에서 메모장을 만들었다.JavaScript→ 브라우저 안에서 배열로 메모 관리React→ state로 메모 배열 관리이번에는 같은 메모장 기능을 Java 코드로 다시 구현해보려고 한다.목표는 웹 화면을 만드는 것이 아니라, Java에서 메모 데이터를 어떻게 다룰 수 있는지 연습하는 것이다. 왜 Java 콘솔부터 시작했나바로 Servlet/JSP나 Spring으로 넘어가면 한 번에 봐야 할 개념이 너무 많아진다.HTTP 요청ServletJSPTomcatDBControllerServiceDAO그래서 먼저 콘솔 환경에서 Java 문법과 CRUD 흐름을 잡아보기로 했다.콘솔 메모장은 화면은 단순하지만,..

기존 HTML/CSS/JS 방식처음에는 파일 역할이 명확하게 나뉘어 있었다.index.html→ 화면 구조style.css→ 디자인script.js→ 동작JavaScript에서는 DOM을 직접 찾고 조작했다.document.getElementById(...)document.createElement(...)appendChild(...)innerHTML = ''메모를 추가하거나 삭제한 뒤에는 직접 renderMemos()를 호출해서 화면을 다시 그렸다.memos.push(newMemo)renderMemos()즉, 기존 방식은 다음 흐름이었다.데이터 변경→ DOM 직접 조작→ 화면 직접 갱신이 방식은 화면이 어떻게 만들어지고 바뀌는지 직접 확인하기 좋았다.하지만 기능이 늘어날수록 DOM을 직접 다루는 코드가 ..

이번 단계에서는 React 메모장의 기능을 새로 추가한 것이 아니라, 기존 코드를 컴포넌트 단위로 분리했다.기존에는 App.jsx 안에 모든 코드가 들어 있었다.입력 폼메모 목록메모 카드추가 함수수정 함수삭제 함수localStorage 처리처음에는 이렇게 한 파일에 작성하는 것이 이해하기 쉽다.하지만 코드가 길어질수록 어떤 부분이 입력 폼인지, 어떤 부분이 목록인지, 어떤 부분이 메모 하나인지 구분하기 어려워진다.그래서 이번 단계에서는 화면 역할별로 컴포넌트를 나누었다. 컴포넌트를 분리한 이유컴포넌트 분리는 기능을 바꾸는 작업이 아니다.기존에 잘 동작하던 코드를 역할별로 나누는 작업이다.이번에는 다음처럼 역할을 나누었다.App.jsx→ 전체 데이터와 기능 관리MemoForm.jsx→ 메모 입력 폼 담당M..

이번 단계에서는 React 버전 메모장에 localStorage 저장 기능을 추가했다.이전까지는 메모를 추가, 수정, 삭제할 수 있었지만 새로고침하면 데이터가 사라졌다.그 이유는 메모가 React state인 memos 안에만 있었기 때문이다.const [memos, setMemos] = useState([])브라우저를 새로고침하면 React 앱이 다시 시작되고, state는 다시 초기값으로 돌아간다.즉, 새로고침하면 memos는 다시 빈 배열이 된다.그래서 메모를 브라우저에 남겨두기 위해 localStorage를 사용했다. useEffect 추가하기localStorage 작업을 처리하기 위해 useEffect를 사용했다.기존에는 useState만 import하고 있었다.import { useState ..

이번 단계에서는 React 버전 메모장에 삭제 기능을 추가했다.이전 JavaScript에서는 삭제 버튼을 누르면 배열에서 해당 메모를 제거하고, 직접 renderMemos()를 호출해서 화면을 다시 그렸다.React에서는 방식이 조금 다르다.React에서는 화면을 직접 다시 그리는 함수를 호출하지 않는다.대신 state를 변경하면 React가 자동으로 화면을 다시 렌더링한다. 삭제 기능의 기본 흐름이번 삭제 기능의 흐름은 다음과 같다.삭제 버튼 클릭→ 삭제할 메모 id 전달→ confirm으로 삭제 여부 확인→ memos 배열에서 해당 id를 가진 메모 제거→ setMemos로 새 배열 저장→ React가 자동으로 화면 다시 렌더링JavaScript에서는 이런 흐름이었다.삭제 버튼 클릭→ memos 배열..