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..

일반 alert창을 조금 특별하게 만들고 싶었다. 너무 너무 만들고 싶었다. customAlert("확인")}/> 위의 div에서 onClick 을 눌렀을 때 진짜로 커스텀 알람이 실행되길 원했다. 우선 검색을 해 보니 ReactDOM.render를 사용해서 만들어 보길 추천하였다. 그래서 코드를 작성했다. import { useEffect, useState } from "react"; import ReactDOM from "react-dom"; import styled, { css } from "styled-components"; interface CustomAlertProps { message: string; onConfirm: () => void; } const CustomAlert = ({ mes..

이제 로그인을 했으니 초기 정보를 저장해야지~~ 나에게 필요한 기본 정보는 간단하다. 유저 별 초기화 날짜와 월 식비! 일단 파이어베이스에 Firestore Database를 추가한다. 그 후에 작업 시작 일단 컬렉션은 users로 두고 문서의 ID는 유저의 uid를 사용해서 정보를 저장한다. import React, { useState } from "react"; import { doc, getDoc, setDoc } from "firebase/firestore"; import { firestore,fireAuth } from "firebase/clientApp"; interface InputForm {//input initialDate: number; budget: number; } const Reg..

MEALTI - mealtime(식사시간) - 식비기록가계부 커뮤니티 작년 2학기, 캡스톤 디자인이라는 수업에서 팀 프로젝트를 했다. 하지만 리액트 네이티브를 처음 도입해봤고, 새로운 시도였기 때문에 별로 마음에 들지 않았다. 피그마에 디자인이 남아있기도 해서 혼자 firebase로 적용해보겠다고 생각했다. firebase로그인 with firebaseui next-firebase-auth를 사용할까 하다가 firebaseui로 하면 더 쉬울 것 같아서 react-firebaseui를 하려고 했다가. https://github.com/gladly-team/next-firebase-auth#readme GitHub - gladly-team/next-firebase-auth: Simple Firebase a..

프로젝트를 하던 중 유튜브 링크를 입력하고 불러와야하는 작업이 있었다. 처음에는 iframe을 사용하여 유튜브 링크를 넣었다. src 에 유튜브 링크 주소를 그대로 넣었더니 이런 메세지가 떴다. 검색을 해 보니 "https://www.youtube.com/watch?v=????" 형태로 된 주소는 허용하지 않는 것이다. 해결 방법은 단순하다. ????부분은 영상의 ID로 그 ID를 토대로 불러오면 된다. "http://www.youtube.com/embed/????" 형태로 src에 집어 넣으면 된다. function extractVideoID(url: string) { var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=..