이번에는 메모 내용을 입력하면서 생긴 작은 문제를 수정했다.문제는 textarea에서는 줄바꿈이 잘 입력되는데, 메모 목록에 출력하면 줄바꿈이 사라지는 것이었다.예를 들어 메모 내용을 이렇게 입력했다.첫 번째 줄두 번째 줄세 번째 줄하지만 메모 카드에서는 다음처럼 한 줄로 보였다.첫 번째 줄 두 번째 줄 세 번째 줄처음에는 JavaScript에서 입력값을 잘못 가져오는 문제라고 생각했다.하지만 확인해보니 입력값 자체가 사라진 것은 아니었다.문제는 메모 내용을 출력하는 HTML 태그의 기본 동작에 있었다. 문제 원인현재 메모 내용은 태그 안에 출력하고 있었다.memoCard.innerHTML = ` ${memo.title} ${memo.content} 삭제`;textarea에서는 엔터를 ..

메모 데이터를 배열로 관리하기이전까지는 메모를 추가하면 바로 HTML 요소를 만들고 화면에 붙였다.흐름은 단순했다.입력값 → HTML 요소 생성 → 화면에 바로 추가하지만 이 방식은 메모 데이터가 따로 관리되지 않는다는 문제가 있었다.화면에 메모가 보이기는 하지만, JavaScript 입장에서는 “현재 어떤 메모들이 있는지”를 명확하게 관리하기 어렵다.그래서 이번 단계에서는 메모 데이터를 배열로 관리하도록 구조를 바꿨다. 입력값 → 메모 객체 생성 → memos 배열에 저장 → 배열을 기준으로 화면 다시 그리기즉, 이제 메모의 원본은 화면이 아니라 memos 배열이다. 왜 배열로 관리해야 하나처음에는 메모를 추가할 때 바로 화면에 붙이는 방식이 더 단순해 보였다.하지만 삭제, 수정, 저장 기능으로 넘어가..

이전 단계에서는 JavaScript 파일을 연결하고, 메모 추가 버튼을 눌렀을 때 입력값이 콘솔에 출력되는지 확인했다.이번 단계에서는 콘솔 출력에서 끝내지 않고, 사용자가 입력한 제목과 내용을 실제 화면의 메모 목록에 추가하도록 구현했다.아직 localStorage 저장은 하지 않았다.따라서 새로고침하면 추가한 메모는 사라진다.이번 단계의 목표는 브라우저 화면 안에서 메모를 동적으로 추가하는 흐름을 이해하는 것이다. 처음 작성했던 코드의 문제처음에는 입력값을 변수에 미리 담아두고, 그 값을 이용해서 메모를 추가하려고 했다.const titleInput = document.getElementById("memo-title");const contentInput = document.getElementById("..

HTML과 CSS로 정적인 메모장 화면을 만든 뒤, 이제 JavaScript를 연결하기 시작했다.이번 단계에서는 아직 메모를 실제로 추가하지는 않았다.먼저 브라우저에서 사용자가 입력한 값을 JavaScript로 가져올 수 있는지, 그리고 버튼 클릭을 감지할 수 있는지를 확인했다. 바로 메모 추가 기능을 만들기보다, 먼저 JavaScript가 HTML 요소를 제대로 다룰 수 있는지 확인하는 것을 목표로 했다.현재 파일 구조현재 프로젝트 구조는 다음과 같다.Memo Evolution/ index.html style.css script.js .gitignore이번 단계에서 script.js 파일을 새로 추가했다. JavaScript에서 사용할 요소 정하기JavaScript로 기능을 만들려면 먼저 어떤 ..

이전 단계에서는 HTML로 메모장 화면의 기본 구조를 만들었다.이번에는 style.css를 작성해서 화면이 조금 더 메모장처럼 보이도록 스타일을 적용했다.아직 JavaScript 기능은 없기 때문에 메모 추가 버튼을 눌러도 실제로 메모가 추가되지는 않는다.이번 단계의 목표는 기능 구현이 아니라, HTML로 만든 요소들을 보기 좋게 배치하는 것이다. 현재 파일 구조현재 프로젝트 구조는 다음과 같다.Memo Evolution/ index.html style.css .gitignore CSS 코드이번 단계에서 작성한 CSS는 다음과 같다.body { margin: 0; font-family: sans-serif; background-color: #f4f4f4;}.app { width..

현재 파일 구조현재 프로젝트 구조는 단순하게 구성했다.Memo Evolution/ index.html style.css .gitignore처음에는 IntelliJ에서 Java 프로젝트를 만들면서 src, .idea, .iml 같은 파일들이 생성됐다.하지만 현재 단계는 HTML/CSS 학습이 목적이므로, 불필요한 Java/IDE 설정 파일은 정리했다. HTML 코드현재 작성한 `index.html`은 다음과 같다. 새 메모 작성 제목 내용 메모 추가 메모 목록 아직 작성된 메모가 없습니다. 코드 구조 살펴보기먼저 문서의 기본 구조는 다음과 같다.은 이 문서가 HTML5 문..