본문 바로가기

JS/React Project

 (10)
🔥 firebase 배포하기 먼저 build 폴더를 만들어 준다. npm run build 더보기 - build? React 앱을 빌드하며 생성되는 폴더로, 코드를 최적화된 형태로 번들링하고 준비하는 역할을 한다. 개발 중에는 src 폴더에 있는 코드를 수정하고 테스트 하며 배포 시에는 build폴더를 사용하여 배포하는 것이 좋다. firebase에 접속하여 새로운 프로젝트를 만든 후, 프로젝트의 빌드-Hosting로 들어간다. 호스팅을 시작하면 아래 명령어를 터미널에 입력한다. 순서대로 명령어를 아래와 같이 입력하면 // firebase 명령어 사용 npm install -g firebase-tools // firebase 로그인 firebase login // 초기화 firebase init 아래와 같은 화면이 나타난다. 그러면..
📆 위클리 플래너 - 홈화면 1. 날짜 세팅하기 : 오늘 날짜를 기준으로 해당 주의 월요일 ~ 일요일 (참고: https://askjavascript.com/how-to-get-first-and-last-day-of-the-current-week-in-javascript/) // 오늘 날짜 const currentDate = new Date(); // 오늘 요일 일 0 ~ 토 6 const currentDay = currentDate.getDay() // 월요일 구하기 (오늘 날짜 - 오늘 요일 + 1) const monday = new Date(currentDate); monday.setDate(currentDate.getDate() - currentDay + 1); // 일요일 구하기 (오늘 날짜 - 오늘 요일 + 7) cons..
📆 위클리 플래너 - 주제 subject를 저장할 때 중복된 이름의 subject가 저장되면 return을 시키려고 한다. const subject = createSlice({ name: "subject", initialState: [ { userId: "4qPCMlanKiXhsIDIKeUrIZxi7qm1", subjectId: "sub_4qPC_영어", subject: "영어", color: "#ffd6f5", }, { userId: "4qPCMlanKiXhsIDIKeUrIZxi7qm1", subjectId: "sub_4qPC_운동", subject: "운동", color: "#d6e0ff", }, { userId: "Lfn5WQtmuIPbTIaw8vpQdDIiKs62", subjectId: "sub_Lfn5_생활", subje..
📆 위클리 플래너 - 첫화면, 로그인 1. 첫화면 2. 회원가입 firebase를 활용하여 로그인, 회원가입을 구현하였다. firebase에서 프로젝트를 만들고 해당 프로젝트의 build - Authentication - Sign in method를 통해 사용할 로그인 방법을 설정한다. // firebaseConfigure.js(별도로 생성해야하는 파일) import { initializeApp } from "firebase/app"; import { getAuth, GoogleAuthProvider } from 'firebase/auth'; import { getFirestore } from 'firebase/firestore'; import { getStorage } from 'firebase/storage' const firebaseC..
🏃‍♀️ 목표 다이어리 - 글 작성 / 수정 필요한 기능 1. 날짜, 주제 선택 2. 목표 추가 버튼 누르면 목표가 리스트로 화면에 출력 + 수정 가능 3. 일기 작성 4. 모두 선택 및 작성 완료 후 작성완료 버튼을 누르면 데이터에 추가되며 홈화면으로 돌아감. 4. 작성 취소를 누르면 작성 내용 모두 리셋되고 홈화면으로 돌아감 다이어리에는 글 새로 작성과 수정이 있는데, 모두 똑같은 form을 가지고 있고 수정의 경우 초기 데이터값과 전달되는 함수만 다른 것이다. 그러니 Editor 컴포넌트로 분리하여 두 페이지에서 모두 사용할 수 있다. 1. 날짜 선택 // 날짜 형식 변환 const getStringDate = (date) => { return date.toISOString().slice(0, 10) } const DiaryEditor =()..
🏃‍♀️ 목표 다이어리 만들기 - 홈화면 Header 만들기 헤더에는 3개의 섹션이 있다. 1. 가운데 : 초기화면은 오늘의 날짜가 나온다. 2. 왼쪽 : 월이 -1 된다. 3. 오른쪽 : 월이 +1 된다. Home.js const Home = () => { // context로 데이터 받아오기 const diaryList = useContext(DiaryStateContext); // 헤더 날짜 // 날짜를 저장할 State const [curDate, setCurDate] = useState(new Date()); // 헤더에 나타날 날짜 (javaScript에서는 月월 표현할 때 0부터 시작하기 때문에 +1을 해주어야 이번달이 나옴) const headText = `${curDate.getFullYear()}년 ${curDate.getMo..
🏃‍♀️ 목표 다이어리 만들기 - 기획 및 기초 세팅 기능 1. HOME 화면 - 月별로 작성된 목표를 확인할 수 있다. - 각 목표 아이템은 작성한 날짜, 주제, 목표, 메모(코멘트)가 나타나고 체크된 목표에 따라 달성률을 표시한다. - 새로운 목표 작성 버튼 - ...을 누르면 수정 및 삭제가 가능하다. 2. 상세조회 - 작성한 내용을 볼 수 있다. - 버튼을 누르면 목표 완료/취소가 가능하다. - 달성률에 따라 막대기가 변한다. - ...을 누르면 수정 및 삭제가 가능하다. 3. 작성 및 수정 - 날짜를 선택할 수 있다. - 주제를 선택할 수 있다. - 목표추가 버튼을 누르면 목표를 작성할 수 있다. - 메모, 코멘트, 일기 등을 작성할 수 있는 공간이 있다. - 작성을 취소할 수 있다.(홈화면으로 이동) 4. 메모 아이템 구성 - Id - 주제 : ..
📝 메모앱 업그레이드 현재 App 컴포넌트에는 onCreate, onDelete, onEdit 3가지의 상태변화 함수가 존재한다. 이 함수들은 App 컴포넌트 내에만 존재했어야 하는데, 이유는 기존의 상태를 참조했어야 하기 때문이다. function App() { const [data, setData] = useState([]); const onCreate = () => { // 중략 setData((data)=>[newItem, ...data]); } const onDelete = () => { // 중략 setData((data)=> data.filter((it)=>it.id !== targetId)); } const onEdit = () => { // 중략 setData((data) => data.map((it) => ..

티스토리툴바