꿈일기8 [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. 이전 1 2 다음 반응형
