JadeCode

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

보호되어 있는 글입니다.

최근 스타일도 컴포넌트화 하는 CSS-in-JS가 점점 뜨고있다. 직접 사용해보니 props를 넘겨 사용할 수도 있고 여러 면에서 편리하여 애착이 가는 라이브러리이다. 프로젝트를 처음 세팅할 때 styled-components 에 초기 세팅하는 법을 정리해보자. 설치 일단 프로젝트를 생성한다. 최근 공부하고 있는 next.js와 typescript로 생성하자. npx create-next-app@latest --typescript 그리고 만든 프로젝트 내부에 styled-components를 설치한다. npm i styled-components npm i @types/styled-components //타입지정 타입스크립트도 사용할 예정이기 때문에 npm i @types/~ 도 설치해야된다. 또한, st..

Binary Search Binary Search(이진 탐색) 이진 탐색은 오름차순으로 정렬된 리스트에서 특정한 값의 위치를 찾는 알고리즘이다. 최소값는 리스트의 첫 번째 값이고, 최대값은 리스트의 마지막으로 설정한다. 중간의 값을 중앙값으로 설정하고, 중앙값 target이면 중앙값이 새로운 최대값이 된다. 정렬된 리스트에만 사용할 수 있다는 단점이 있지만, 검색이 반복될 때마다 목표값을 찾을 확률은 두배가 되므로 속도의 측면에서는 장점이다. 704. Binary Search 기본적인 binary search이다. /** * @param {number[]} nums * @param {number} target * @retu..