프론트엔드 개발하면서 npm run dev를 실행하면 브라우저에서 개발 서버가 뜨는 걸 볼 수 있다.그런데 이게 Node.js를 실행한 거랑 같은 걸까? 🤔많은 초보 개발자들이 헷갈려하는 부분이라 제대로 정리해보겠다. 🎯 1. npm run dev가 Node.js 실행이 아닐 수도 있다?우리는 보통 npm run dev 하면 Node.js가 실행될 거라고 착각하지만, 사실 그건 어떤 스크립트가 설정되어 있느냐에 따라 달라진다.예를 들어, package.json 파일이 이렇게 되어 있다고 해보자."scripts": { "dev": "parcel index.html", "build": "parcel build index.html"} 이 상태에서 npm run dev를 실행하면?➡ Node.js가 아니..
전체 글
📊 감정별 통계 기능 구현하기 (EmotionStats) 🚀이번에 감정 일기장에 감정별 통계 기능을 추가했다!이제 월별로 각 감정이 몇 개씩 있는지 한눈에 볼 수 있다. 1️⃣ 📌 구현 목표✅ 감정별 PNG 이미지 표시✅ 감정별 개수를 막대그래프(Progress Bar)로 표현✅ Home.js에서 월별 데이터를 받아서 통계 반영✅ 감정별 상태바 색상 추가로 시각적으로 개선2️⃣ 🛠 EmotionStats.js (통계 컴포넌트)먼저, EmotionStats.js에서 감정별 개수를 계산하고 막대그래프 + 감정별 PNG 이미지를 추가했다.import "./EmotionStats.css";import { getEmotionImage } from "../util/get-emotion-image";const..
📌 개요이번에 React로 만든 감정 일기장에서 버튼 클릭 시 특정 감정의 일기만 필터링하는 기능을 추가했다.처음에는 안 되어서 삽질 좀 했지만, 결국 원인을 찾아 해결 완료! 😎 1️⃣ selectedEmotionID 상태 추가선택된 감정을 저장하고, 값이 바뀔 때마다 자동으로 화면을 업데이트하기 위해 useState를 사용하기 const [selectedEmotionID, setSelectedEmotionID] = useState("all"); all 은 기본적으로 모든 감정을 보여주기 위한 기본값으로 설정함. 2️⃣ 감정 선택 핸들러 수정이제 감정을 선택했을 때 emotionId 값을 상태에 저장하도록 수정.const onChangeEmotion = (e) => { setSelectedE..
🌟 웹 스토리지를 활용한 감정 일기장 프로젝트 🚀웹 애플리케이션을 만들다 보면 데이터를 어디에 저장할지 고민하게 된다. 🧐백엔드 서버를 구축하고 데이터베이스를 연동하면 좋겠지만, 가벼운 프로젝트라면 웹 스토리지(Web Storage) 만으로도 충분히 해결할 수 있다! 😆이번에는 로컬 스토리지(localStorage) 를 이용해 감정 일기장 프로젝트 데이터를 저장하는 방법을 정리해보려고 한다. 📖✨📌 웹 스토리지란?웹 스토리지는 브라우저에서 데이터를 저장하는 방법 중 하나로, 데이터베이스처럼 사용할 수 있는 저장소라고 생각하면 된다! 🤓별도의 프로그램이나 라이브러리 설치 없이 자바스크립트 내장 함수만으로 접근 가능하다. 🙌웹 스토리지의 종류📍 로컬 스토리지(localStorage) : 브라..
Diary 페이지 구현하기 📝💖이번 시간에는 Diary 페이지를 구현했다.이 페이지는 사용자가 작성한 일기를 편집할 수 있는 Edit 페이지와 함께 연결되어 있어, 사용자가 일기를 작성하거나 수정하는 흐름을 자연스럽게 이어준다. 🧑💻✨ 1. Header 구성하기 먼저 Diary 페이지의 헤더를 구현했다.헤더에는 뒤로가기 버튼, 현재 날짜 표시, 그리고 수정하기 버튼을 추가했다.이를 통해 사용자는 쉽게 이전 페이지로 돌아가거나 일기를 수정할 수 있게 되었다. 🔙📅✍️ nav(-1)} text={"} rightChild={ nav(`/edit/${params.id}`)} text={"수정하기"} />} /> 2. Viewer 컴포넌트 Diary 페이지의 핵심은 바로 Viewer 컴포넌트다.이 ..
🌟 New 페이지 구현하기 2. 기능 🌟New 페이지에서 핵심 기능들을 구현했다.특히 뒤로 가기 방지, 상태 관리, 작성 완료 후 페이지 이동 등을 처리하는 방법에 대해 기록한다. ✍️🔙 1. 뒤로 가기 기능 구현사용자가 이전 페이지로 이동할 수 있도록 뒤로 가기 버튼을 추가했다.이때 useNavigate를 활용해서 간단하게 구현했다.leftChild={ nav(-1)} text={"}이렇게 하면 뒤로 가기 버튼을 클릭했을 때 이전 페이지로 이동할 수 있다.하지만 단순히 뒤로 가기만 구현하면 홈페이지에서 다시 뒤로 가기를 눌렀을 때 New 페이지로 돌아오는 문제가 발생한다. 🤦♂️이를 해결하기 위해 replace 옵션을 활용했다.📝 2. 날짜 상태 관리New 페이지에서 사용자가 선택한 날짜 값..
New 페이지 구현하기 1. UI 📝💡 오늘은 New 페이지의 UI를 구현했다.사용자가 새로운 일기를 작성할 수 있는 화면으로, 기본적인 구성 요소들을 만들었다. 🏗️ New 페이지의 UI 구성New 페이지는 일기 작성을 위한 핵심적인 요소들로 구성된다.아래와 같은 구조로 화면을 구성했다.Header: "새 일기 쓰기" 제목, 뒤로 가기 버튼Editor:오늘의 날짜 선택감정 선택 (5가지 감정)일기 내용 입력취소하기 버튼, 작성 완료 버튼📌 New.jsx (New 페이지 구성)New 페이지는 Header, Editor, Button 컴포넌트들을 조합하여 만들었다.import Header from "../components/Header";import Button from "../components..
Home 페이지 구현하기 2. 기능 🚀지난번에 Home 페이지의 기본적인 틀을 잡았다면, 이번에는 날짜 필터링, 정렬 기능, 그리고 상세 페이지 및 수정 페이지 이동 기능을 추가했다. 이 과정에서 기존 코드에 몇 가지 중요한 수정을 적용했다. 🛠️📌 1. 실시간 날짜 반영 기능 Home 페이지의 Header에서 현재 연도를 가져와 월을 표시하도록 했다. useState를 사용하여 pivotDate 상태를 관리하고, 좌우 버튼을 클릭할 때마다 한 달씩 이동할 수 있도록 구현했다.} rightChild={"}/>}/> 이제 버튼을 누르면 이전 달 또는 다음 달의 일기만 볼 수 있다. 📅📌 2. 날짜 필터링 기능 ✨ 해당 월의 일기만 보이도록 데이터를 필터링했다. getMonthlyData 함수를 ..
🏡 Home 페이지 구현하기 1: UI React를 활용해 Home 페이지의 UI를 구성했다.Home 페이지는 Header, DiaryList, DiaryItem 세 가지 주요 컴포넌트로 이루어진다.각 컴포넌트가 어떤 역할을 하는지 살펴보자! 😊🏗️ 1. Home 페이지 구조📌 Home 페이지는 다음과 같은 구조를 가진다.Header 👉 현재 날짜와 좌우 이동 버튼을 포함DiaryList 👉 일기 목록을 표시하고 정렬, 새 일기 작성 버튼을 제공DiaryItem 👉 개별 일기 항목을 보여주며, 수정 버튼을 포함📌 Home.jsx (Home 페이지 구성)import Header from "../components/Header";import Button from "../components/Bu..
📖 일기 관리 기능 구현하기 2이번에는 React에서 일기 관리 기능을 구현해보았다.일기를 추가, 수정, 삭제할 수 있도록 상태를 관리하고,Context API를 활용해 전역에서 데이터를 쉽게 접근할 수 있도록 구성했다.🛠️ 주요 기능일기 추가 ✏️새로운 일기를 작성하고 저장할 수 있다.일기 수정 🔄기존에 작성한 일기의 내용을 수정할 수 있다.일기 삭제 🗑️특정 일기를 삭제할 수 있다.전역 상태 관리 (Context API 활용) 🌎모든 페이지에서 일기 데이터를 쉽게 사용할 수 있도록 설정했다.🏗️ 구현 과정1️⃣ 상태 관리와 useReducer 활용일기 데이터를 효율적으로 관리하기 위해 useReducer를 사용했다.CREATE, UPDATE, DELETE 세 가지 액션을 정의하고, 이에 따..