본문 바로가기

JS

 (44)
🔥 firebase 배포하기 먼저 build 폴더를 만들어 준다. npm run build 더보기 - build? React 앱을 빌드하며 생성되는 폴더로, 코드를 최적화된 형태로 번들링하고 준비하는 역할을 한다. 개발 중에는 src 폴더에 있는 코드를 수정하고 테스트 하며 배포 시에는 build폴더를 사용하여 배포하는 것이 좋다. firebase에 접속하여 새로운 프로젝트를 만든 후, 프로젝트의 빌드-Hosting로 들어간다. 호스팅을 시작하면 아래 명령어를 터미널에 입력한다. 순서대로 명령어를 아래와 같이 입력하면 // firebase 명령어 사용 npm install -g firebase-tools // firebase 로그인 firebase login // 초기화 firebase init 아래와 같은 화면이 나타난다. 그러면..
11. react-responsive 사용하기 반응형 웹을 만들 때 미디어쿼리만을 사용한다면 한계가 발생한다. 예를 들어, 아래와 같이 완전히 레이아웃이 바뀌어야 하는 상황에는 미디어쿼리를 사용할 수 없다. 이런 경우 react-responsive 를 사용한다면 간단히 레이아웃을 변경할 수 있다. 1. react-responsive 설치 npm install react-responsive --save 2. useMediaQuery Hook 사용 import { useMediaQuery } from 'react-responsive' const Responsive = () => { const pc = useMediaQuery({query:"(min-width: 1024px)"}); const tablet = useMediaQuery({query:"(mi..
📆 위클리 플래너 - 홈화면 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..
10. localStorage에 데이터 저장하기 localStorage는 웹 브라우저에서 제공하는 웹 스토리지 기능 중 하나로 다음과 같은 특징을 가지고 있다. 1. 5MB의 문자 데이터를 저장할 수 있다. 2. key : value 형태로 저장이 된다. 3. 저장된 데이터는 브라우저를 닫아도 유지된다.(직접 삭제하지 않는 이상 영속적으로 유지 가능) 4. 숫자를 저장하더라도 문자로만 저장이 되며 array, object는 저장이 불가하다. 그러나, JSON을 사용한다면 저장이 가능하다. localStorage.setItem으로 데이터의 저장이 가능하고, getItem으로 불러오기가 가능하다. 또한 사진과 같이 숫자 20으로 저장한 데이터도 문자 '20'으로 저장되어 불러와 진 것을 확인할 수 있다. .removeItem(key) 혹은 .clear()..
9. Redux를 사용한 상태관리 Redux는 상태(State)를 관리하고 상태 변경을 예측 가능한 방식으로 처리하기 위한 상태 관리 라이브러리이다. 컴포넌트들이 props 없이도 상태의 공유가 가능하기 때문에 복잡한 프로젝트에서 관리하기 간편해진다. 주요 개념 1. Store: 앱의 상태를 저장하는 중앙 저장소로, Redux 상태는 읽기 전용으로 상태 변경은 Action을 통해 이루어진다. 2. Action: 상태 변경을 하는 트리거 객체. { type:'ACTION_TYPE', payload:... } 형태로 정의되며, type은 액션의 종류 payload는 변경할 데이터를 포함할 수 있다. 3. Reducer: 이전 상태와 액션을 받아와 새로운 상태를 반환하는 함수로, 상태 변경을 실제로 처리하는 로직이 이루어진다. 5. Dispa..
8. 라이브러리 사용하여 AJAX 요청하기 AJAX를 사용하기 위해 외부 라이브러리인 axios를 사용해보자. VSCode 터미널에 npm install axios 를 입력하여 설치해주고 import 후 axios.get()으로 요청할 수 있다. import axios from "axios"; { axios.get('url').then((data)=>{ console.log("ajax data: ", data) })}}> AJAX 요청 axios.get('서버 요청 url').then((가져올 데이터 변수명) => { 코드 입력 }); 이렇게 데이터를 가져올 수 있다. ( 변수명.data로 하면 핵심 데이터만 확인할 수 있다. ) 만약, 요청한 url에 문제가 있을 경우 확인하고 싶다면 .catch(()=>{})를 사용하여 확인할 수 있다. { ..

티스토리툴바