JadeCode

기존에 react-native로 만들었던 앱 프로젝트를 next.js로 웹으로 만들려고 했다. 하지만 둘에서 공통으로 작업되는 함수가 있으며 비슷한 코드들이 있어서 하나의 레포로 만들면 어떨까 하는 생각으로 기술을 찾아 보다가 모노레포 라는 것을 발견했다. 모노레포(Monolithic Repository)는 하나의 저장소에 여러 프로젝트나 모듈들을 함께 저장하는 소프트웨어 개발 방법론이다. 기존에 하나의 프로젝트마다 별도의 저장소를 유지하는 멀티레포 방식과는 다르게 모노레포에서는 모든 코드를 하나의 저장소에서 관리함으로써 여러 가지 장점을 제공한다. 코드 공유와 코드 복사 붙여넣기의 양을 줄일 수 있으며, 코드 병합과 코드 배포의 작업을 더 쉽게 관리할 수 있다. 대표적으로는 Turborepo, Yarn..

nonployfill을 사용하면 된다. https://medium.com/bom-i/naver-login-api-babel-polyfill-issue-af6f3cd22387 Naver Login Api Babel polyfill issue 네아로 Api를 많은 사용자들이 사용하고 있고 최근에는 다양한 SPA가 같이 활용되고 있습니다. medium.com

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

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

이제 로그인을 했으니 초기 정보를 저장해야지~~ 나에게 필요한 기본 정보는 간단하다. 유저 별 초기화 날짜와 월 식비! 일단 파이어베이스에 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?=..

보호되어 있는 글입니다.