일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- css
- 파이썬
- react-firebaseui
- 구조분해할당
- 기초
- Python
- 타입스크립트
- react-native
- leetcode189
- iP
- nvmrc
- 리액트
- 프로토타입
- JS
- leetcode977
- Next.js
- 파이어베이스로그인
- Spread
- 커스텀알락
- 커스텀알림
- React
- youtube iframe
- 다리놓기
- Rest
- mac
- nvm
- 백준
- firebaseui
- yarn-berry
- 자바스크립트
- Today
- Total
목록React (3)
JadeCode

create-next-app으로 프로젝트를 새로 만드는데 App router(recommend)라는 cli옵션이 있었다. 아무 생각 없이 Y를 누르고 프로젝트가 생성되기 기다렸다..... 컴포넌트 구조가 기존에는 app/pages, app/styles였다면 이번에는 바로 src/app으로 통일되어있었다. 이제서야 찾아본 나. 반성하는 중이다... next.js가 13버전으로 업데이트 되면서 라우팅 방식이 바뀐 것이다. 그리고 여러가지 바뀐 점이 있는데.. 1. Layout 과거의 프로젝트에서는 따로 Layout.tsx로 파일을 만들고 _app.tsx에 제일 상단에 적용했다. import Layout from "@/components/utils/Layout"; export default function A..
Firebase Storage 사진저장 방법 사진을 저장하기 위해 또 clientApp.ts에서 새롭게 import할 라이브러리가 있다. // firebase/clientApp.ts import firebase from "firebase/compat/app"; import "firebase/compat/auth"; import { getFirestore } from "firebase/firestore"; import { getStorage } from "firebase/storage"; import "firebase/compat/auth"; import firebaseConfig from "firebaseConfig.json"; const app = firebase.initializeApp(firebas..

새로 create-react-app을 해서 router를 하려던 중 오류가 나타났다. 기존에 있는 방법인 Switch를 활용했더니 문제가 난 것이다. import React from "react"; import { BrowserRouter, Switch, Route } from "react-router-dom"; import Home from "Pages/Home"; const Router = () => { return ( ); }; export default Router; Switch를 Routes로 바꾸고 을 로 변경하면 오류가 해결된다. import React from "react"; import { BrowserRouter, Routes, Route } from "react-router-dom";..