본문 바로가기

웹 프로그래밍/🌜꿈 일기장11

[React] 꿈 일기 기록 사이트 제작 일지-15. Firebase를 이용한 회원가입 기능 구현 원래는 회원가입 없이 로컬에서만 동작하는 일기를 만들 예정이었는데, 모바일과 휴대폰에서 어플을 사용해보다 보니 기기 간에 일기가 동기화 되었으면 좋겠다는 생각을 하게 되었다. 현재 프로젝트 호스팅 중인 Firebase에서는 백엔드 기능도 제공하고 있기 때문에, 내가 따로 백엔드를 구축하기보다 Firebase 백엔드를 이용해 보기로 했다. 회원가입/로그인 기능부터 시작해서 백엔드를 사용할 수 있도록 프로젝트를 조금씩 수정해 나갈 예정. 🔥 Firebase 설정 https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform Discover Firebase, Google’s mobile and web a.. 2023. 9. 29.
[React] 꿈 일기 기록 사이트 제작 일지-14. 플로팅 버튼 만들기 꿈 일기 기록 사이트의 구상했던 메인 기능 대부분을 구현했다. 이제 소소한 추가 기능을 개발해 볼 예정이라 먼저 메뉴 버튼부터 만들기로 했다. 지금 스타일링을 최대한 보존하기 위해 플로팅 버튼으로 메뉴를 구현하려고 한다. 구현 먼저 플로팅 버튼 관련 코드를 작성할 FloatingMenu 컴포넌트를 생성했다. 플로팅 버튼은 모든 페이지에서 전역적으로 노출되어야 하기 때문에 App.js에 컴포넌트를 추가했다. FloatingMenu.js const FloatingMenu = () => { return ( 메뉴 ); }; App.js function App() { return ( ... ); } 나중에 FloatingMenu에 useNavigation을 이용해 페이지 이동할 수 있는 코드를 작성할 생각이라 컴.. 2023. 9. 28.
[React] 꿈 일기 기록 사이트 제작 일지-13. 검색 기준을 제목, 내용으로 확대, 검색 결과를 화면이 아닌 본문에 추가하기 검색 기준을 제목, 내용으로 확대 기존에는 일기 내용만 검색이 가능하도록 구현했는데 제목도 검색 항목에 추가하고 싶었다. const SearchedData = diaryCtx.diary.filter((it) => { if (inputText !== "") { return it.content.toLowerCase().includes(inputText); } }); 현재 검색어를 포함한 일기를 포함한 로직은 위와 같은데, 여기서 조금만 손을 봐서 일기 제목도 검색 가능하도록 수정해 보려고 한다. const SearchedData = diaryCtx.diary.filter((it) => { if (inputText !== "") { if (it.content.toLowerCase().includes(input.. 2023. 9. 28.
[React] 꿈 일기 기록 사이트 제작 일지-12. 반응형 웹 CSS 스타일링 CSS 스타일링을 모니터 기준으로 했기 때문에 모바일로 보았을 때 스타일이 깨져 보이거나 정상적인 사용을 하기에 불편한 부분이 몇 군데 있었다. 이를 해결하기 위해 크롬 개발자 도구 모바일 Galaxy Fold를 기준으로 화면을 확인해 가며 반응형 스타일링을 진행했다. Galaxy Fold를 기준으로 한 이유는 가장 가로 폭이 작아 예외처리하기 좋기 때문이다. @media screen and (min-width: 280px) and (max-width: 650px) 미디어 쿼리를 이용해 280px(갤럭시 폴드) ~ 650px까지의 화면에 대한 스타일링을 개별적으로 진행하였다. 1. Home 화면 🔨수정해야 할 부분 문제점 새 일기 작성 버튼이 div를 벗어나 있다. (개발자 도구를 이용해 다른 요소들과 .. 2023. 9. 27.
[React] 꿈 일기 기록 사이트 제작 일지-11. 일기 검색 기능 추가 일기 검색 코드는 간단하게 로직을 짠 뒤 필요한 부분을 수정해 가며 진행하기로 했다. 🔍 일기 검색 코드 작성 const diaryCtx = useContext(DiaryContext); const [inputText, setInputText] = useState(""); const inputHandler = (e) => { let lowerCase = e.target.value.toLowerCase(); setInputText(lowerCase); }; const SearchedData = diaryCtx.diary.filter((it) => { if (inputText !== "") { return it.content.toLowerCase().includes(inputText); } }); 전체 일기.. 2023. 9. 27.
[React] 꿈 일기 기록 사이트 제작 일지-10. 사용자가 장르를 수정할 수 있는 `사용자 장르 추가/삭제 기능` 구현 (+ localStorage) 기본적인 CRUD 기능은 완성되었고 이제 추가적인 기능을 구현하려고 한다. 꿈은 꿀 때마다 내용이 달라져서 마치 영화를 보는 것 같다는 생각을 한 적이 있다. 이런 생각을 기반으로 꿈일기에도 내가 꾼 꿈의 장르를 설정해보면 재미있겠다는 생각을 했다. 장르는 기본적으로 몇 가지가 주어지는데 이것만으로 부족하다고 느껴지는 사용자도 있을 것 같아 사용자가 장르를 추가하고 삭제하여 일기에 적용하도록 추가 기능을 구현하기로 했다. 😀 구현 시작 장르추가 버튼은 수정하기 페이지 > 장르|제목 옆에 달면 좋을 것 같아서 아래와 같이 달아보았다. 버튼이 onClick되면 genreEditroHandler라는 함수를 실행한다. '장르|제목' 아래에 장르를 추가할 수 있는 input 필드를 보여주는 함수이다. const .. 2023. 9. 27.
[React] 꿈 일기 기록 사이트 제작 일지-6. 일기아이템 생성 및 조회 페이지 이동 구현과 CSS 스타일링 일기 수정, 등록 페이지는 동일한 ui를 기반으로 하기 때문에 DiaryEditor 컴포넌트를 따로 작성해서 수정, 등록 페이지에 같이 사용하도록 한다. import { useContext, useRef, useState } from "react"; import { useNavigate } from "react-router-dom"; import Button from "../components/Button"; import Header from "../components/Header"; import "./DiaryEditor.css"; import { DiaryContext } from "../context/diary-context"; const getStringDate = (date) => { retur.. 2023. 9. 25.
[React] 꿈 일기 기록 사이트 제작 일지-5. 일기 정렬 기능 및 페이지 이동 버튼 구현 Home.js에서 일기 리스트 렌더링 부분만 빼서 새로운 DiaryList라는 컴포넌트를 만들었다. 이 DiaryList 컴포넌트에서 일기 검색창, 일기 정렬 드롭다운, 일기 작성 버튼, 일기 리스트 렌더링을 수행한다 . 일기 정렬 및 일기 작성 페이지로 이동 import { useState } from "react"; import Button from "../components/Button"; import { useNavigate } from "react-router-dom"; const sortOption = [ { value: "latest", name: "최신순" }, { value: "oldest", name: "오래된 순" }, ]; //최신순, 오래된 순 출력해주고 각 값을 선택하면 그에 맞.. 2023. 9. 25.
[React] 꿈 일기 기록 사이트 제작 일지-4. Home.js 작성한 월에 맞는 일기 리스트 렌더링 데이터가 정상적으로 렌더링되는 것을 확인했으니 이제 상단 헤더의 실제 작동을 시켜본다. 상단 헤더의 월 이동을 도와줄 함수와 중간 텍스트 자리에 들어갈 텍스트를 생성한다. const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; const decreaseMonthHandler = () => { setCurDate( new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate()) ); }; const increaseMonthHandler = () => { setCurDate.. 2023. 9. 24.
[React] 꿈 일기 기록 사이트 제작 일지-2. 리액트 프로젝트 시작 및 페이지 만들기, 라우터 설정, 공용 컴포넌트 설정 리액트 설치 npx create-react-app my-app 라우터 라우터 설치 npm install react-router-dom --save 만들어야 할 페이지는 메인 페이지, 일기 작성 페이지, 일기 수정 페이지, 일기 개별 조회 페이지로 총 4개이다. 페이지를 만들고 라우터에 각 페이지와 url을 매핑한다. function App() { return ( ); } 이제 url과 각 페이지가 매핑되었다. 공용 컴포넌트 생성 웹 사이트에 전체적으로 쓰일 버튼과 상단의 헤더, 카드 컴포넌트를 생성한다. 헤더에는 왼쪽 버튼, 중앙의 텍스트, 오른쪽 버튼의 요소가 들어간다. import "./Header.css"; const Header = ({ leftBtn, headText, rightBtn }) =>.. 2023. 9. 22.
[React] 꿈 일기 기록 사이트 제작 일지-1. 기획 및 디자인 구상, url 설계 🎡 소개 꿈 속에서 겪었던 즐겁거나 흥미로운 일들을 기록할 수 있는 꿈일기 어플리케이션 🎨 화면 구상 url: / 색상 팔레트 월 이동 버튼: #563A3D 필터: #b18c79 일기 작성 버튼: #764845 배경: #FAF8F2 카드: #E7E1D8 이모티콘(이미지): #FFFDF5 url: /new 색상 팔레트 뒤로 가기, 취소하기 버튼: #b18c79 추가 버튼: #975AB7 작성 완료 버튼: #764845 url: /diary/:id url: /edit/:id 🌌 기능 구상 [메인] 일기 조회, 작성, 수정, 삭제 하나의 페이지에 여러 개의 일기 추가 가능 제목에 드롭다운으로 장르 설정 가능 사용자 미지정시 '일상' 사용자가 장르 추가 가능 일기 검색 본문 검색 제목 검색 날짜 최신순/오래된 .. 2023. 9. 22.
반응형

티스토리툴바