개발기록창고

Firebase로 쉽게 구글 로그인을 이용할 수 있는 기능이 있어서 구현해보았다. Firebase 접속 > Authentication > Sign-in method > 새 제공업체 추가 firebase.ts import { getAuth } from "firebase/auth"; const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { ..., auth }; Firebase 인증 기능을 연동하기 위해 getAuth를 import한다 import { GoogleAuthProvider, signInWithPopup } from "firebase/auth"; import { auth } from "@/firebase"; con..

import { ReactComponent as Google } from "../../../assets/icons/google.svg"; 위와 같이 svg 컴포넌트화를 해서 사용하려고 했다. 그러나 오류가 계속 발생해서 해결하려고 삽질을 2시간이나 했으나... 해결하지 못해서 다른 방법으로 svg 적용했다... 내가 시도한 svg 컴포넌트화 npm install vite-plugin-svgr ts.config.ts "include": ["src", "client.d.ts"] client.d.ts declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FC; const src: string; ex..

프로젝트에서 혼자 프론트엔드로 만들고 있기에 DB가 따로 필요했다. 백엔드 없이 사용할 수 있는 Firebase를 이용하여 만들기로 함 npm install firebase 우선 프로젝트에 firebase 패키지 설치. src폴더에 firebase.js과 .env파일을 만들어준다. firebase.ts에는 APiKey를 넣어줘야하는데 github에 올리면 그대로 노출이 되므로 .env파일에 넣어서 환경 변수로 설정해서 관리해줘야한다. .gitigore에 #firebase .env 추가해준다. firebase.ts파일에는 import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const f..

잘 작동하나 styled-components에서 경고를 주고 있다. 왜 발생하는 것일까? 원인 발생하는 곳은 이 부분으로 StyledButton은 버튼으로 만들어져 있는데, 해당 HTML 태그에 정의되지 않은 colorType을 props로 주고 있어서 생긴 경고이다. styled-components 사용시에 정의되지 않은 props가 DOM에 전달될 때 이러한 오류가 발생한다. 해결 트랜스파일된 프롭스를 생성하여 속성을 필터링하여 DOM에 전송되지 않도록 한다. styled-components의 내장 기능 중 하나로 $로 시작하는 속성은 자동 필터링된다.

React & TypeScript & styled-components로 Modal 공통컴포넌트 만들기 우선 모달창의 옵션에는 1. x버튼을 누르면 창이 닫혀야한다. 2. EscKey를 누르면 창이 닫혀야한다. 3. 모달창 외의 외부를 누르면 창이 닫혀야한다. 3가지 조건을 충족하도록 만들었다. 우선 모달창 상태와 이를 관리할 수 있는 훅을 제작한다. useModal.ts import { useState } from "react"; export const useModal = () => { const [isOpen, setIsOpen] = useState(false); const openModal = () => { setIsOpen(true); }; const closeModal = () => { setIs..

PR에 잘못 올라간 commit을 삭제해야했는데 최근 commit이라면 git reset --hard HEAD~1 해주면 될텐데 중간에 껴있는 commit이라서 애매했다. 1. git log로 삭제하려는 커밋의 부모 커밋 해시 찾기 2. git rebase -i 3. 텍스트 에디터가 열리는데 삭제하고 싶은 커밋 앞에 pick 단어를 drop으로 변경하거나 줄 자체를 삭제하기 -> 나는 drop으로 변경이 안돼서 그냥 줄 자체를 삭제했다. 4. :wq 로 에디터를 닫는다 적용해보니 깃 그래프가 이렇게 만들어진다! 삭제한 커밋을 제외한 나머지가 다시 그래프로 그려진다.

1. 옮기고 싶은 브랜치 git checkout {branch} 2. git cherry-pick {commit 해시 번호} 3. 잘못 올린 브랜치에서 git reset HEAD로 커밋 삭제

협업을 하게 되면서 그저 혼자 하면서 커밋만 하던 때와 달리 브랜치를 생성하게 되면서 PR을 알게 되었다. 코드를 병합하는 과정에서 어떤 부분이 변경됐는지 서로 확인이 가능하고 코드 리뷰도 할 수 있다. 그렇다면 브랜치는 어떻게 만들까? git checkout -b {브랜치명} git branch git checkout 으로 브랜치 생성과 체크아웃을 동시에 한다. 그러고 git branch하면 새로 만들어진 브랜치가 생성되었다는 것을 확인할 수 있다. 코드를 작성하고 새로 만든 브랜치에 Push하는 방법은 git add . git commit -m "{커밋메시지}" git push origin {브랜치명} 를 한다. PR을 생성하고 날려서 팀원들에게 코드 리뷰와 확인을 받고 문제가 없으면 main으로 m..

팀 프로젝트를 하게 되면서 처음으로 브랜치를 만들어보았다. 그동안 메인에서 push를 했는데 다른 분들이 브랜치로 PR을 만드는 걸보고 나도 브랜치를 만들어서 하려다가 꼬여서 잘못된 PR을 여러개 올렸었는데 close기능만 있고 삭제기능은 없었다. https://support.github.com/request Sign in for Software Support and Product Help - GitHub 지원 support.github.com 깃허브에 문의 넣으면 처리해준다. 나는 3개를 삭제요청을 했는데 모두 24시간내로 삭제해주었다! (close여부와 상관없이 삭제해줬음) 위에 링크를 들어가서 내가 가지고 있거나 제어하는 리포지토리에서 데이터 제거하기 클릭하고 끌어오기 요청 제거하기 클릭을 해주면 ..

프로젝트를 하면서 데이터 캐싱이 필요하여 상태관리의 필요성을 느끼게 되었고 그중 react query에 대해 알아보고자 유튜브에서 kakao tech와 우아한 테크세미나에서 좋은 내용을 보게 되어 이를 정리하고자 게시글을 작성하게 되었다. 눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유 / if(kakao)2022 1. React-Query 조금 알아보기 React-Query는 주로 데이터 패칭, 캐싱, 동기화 작업을 한다. React에서도 위의 작업은 가능하나 많은 테스트와 시간을 필요로 함 > 자체적으로 hook 만들어야함 ContextAPI, useState, useEffect, useCallback, 캐싱, 에러핸들링 등 많은 고려사항을 가져가야함 하지만 R..