My Boundary As Much As I Experienced

왜 굳이 환경변수를 Github Action으로 주입해야되는가?Vercel을 사용하면 환경변수를 콘솔에서 쉽게 추가할 수 있지만Firebase Hosting은 그런거 없다. 애초에 정적 배포를 위한 사이트여서서버 통신을 고려한 서비스 배포에 무리가 있다.API baseUrl 같이 예민한 정보를 노출하라고 만든게 아닌 것이다.(최근 이런 고충을 해결하는 Firebase App Hosting이라는 신기능이 나온거 같긴 하다.) 하여튼 그래도 우리 회사처럼 FireStore를 쓰는터라굳이굳이 어거지로 Firebase Hosting으로 웹앱을 호스팅해야겠다면API baseUrl을 환경변수화 해놓고, 이를 깃허브 원격저장소의 특정 브랜치(보통 main)에 머지할 때github Secret에 있는 환경변수를 가져다..

삼항연산자를 이용한 동적 스타일링테일윈드에서 동적으로 스타일링 할 때 아래와 같은 방법을 사용한다.isRed의 값에 따라 bg-red-500이냐 bg-blue-500이냐를 가른다.interface DynamicProps { isRed: boolean;}export default function DynamicStyledButton({isRed}: DynamicProps) { return ( setIsRed(!isRed)} className={`px-4 py-2 text-white font-bold rounded ${isRed ? 'bg-red-500' : 'bg-blue-500'}`} > Click me! );}  class의 일부..

"window is not defined" 오류는 서버 사이드 렌더링(SSR) 환경에서클라이언트 측 객체인 window가 정의되지 않아서 발생한다.Next.js는 기본적으로 SSR을 사용하기 때문에,클라이언트 측에서만 접근 가능한 객체(window, document, 등)를 직접 사용하면 이 오류가 발생한다.이 문제를 해결하려면 클라이언트 측 코드가 서버 측 코드와 분리되어 실행되도록 만들어야 한다. 1. if (typeof window === undefined) { ... }typeof 연산자를 사용하여 window 객체가 정의되었는지 확인하고, 클라이언트 측에서만 실행되도록 할 수 있다.import { useEffect, useState } from 'react';export default funct..

파이어베이스로 OAuth로 애플로그인을 구현하였다.구글 로그인과 비슷할 줄 알았는데 훨씬 더 복잡한 인증서 발급 절차를 거쳐야 한다. 1. 파이어베이스 콘솔 - Authentication - 로그인 방법에서 제공업체 Apple을 추가한다. 2. 애플 디벨로퍼 페이지에 가서 인증서 ID 및 프로파일 - 인증서 (영문)을 클릭한다. identifiers에서 app id, service id를 설정해준다.이게 나름 쉽지 않다...  3. 파이어베이스로 돌아와 애플 상세보기에 인증서 정보들을 기입한다.apple 팀 아이디, 키id, 비공개 키 들을 입력한다.이것들 또한 애플 디벨로퍼 페이지에서 찾을 수 있다. 이것도 찾느라 고생 좀 했다.  4. Certificates, Identifiers & Profiles..

getServerSideProps의 인자인 context 객체의 구조getServerSideProps 함수에서 사용되는 context 객체는 다음과 같은 구조를 가진다.params: 동적 라우트 매개변수query: URL의 쿼리 파라미터req: HTTP 요청 객체res: HTTP 응답 객체preview: 프리뷰 모드 여부previewData: 프리뷰 모드 데이터resolvedUrl: 현재 요청의 URLlocale, locales, defaultLocale: i18n 관련 정보 Next12에서 params와 searchParams를 받는 방법Next12에선 이 getServerSideProps에서 반환한 context를 아래처럼 받을 수 있다.export async function getServerSide..

앱라우터에서는 아래처럼 getServerSideProps 등을 거치지 않고도 params객체를 꺼내 쓸 수 있다.// app/[id]/page.tsxinterface PageProps { params: { id: string; };}const Page = ({ params }: PageProps) => { return ( Post ID: {params.id} );};export default Page;  페이지 라우터에서는 getServerSideProps에서 context객체에서 추출한 값을{ props: { ... }} 내에 리턴해주는 것을페이지 컴포넌트에서 또 받아야 한다.어휴 번거로워..// pages/[id].tsximport { GetServerSidePro..

Next.js에서 프리 렌더링(Pre-rendering)은 각 페이지를 사전 렌더링하여 HTML을 미리 생성하는 방법이다.Next.js는 프리 렌더링을 통해 빠른 페이지 로드를 제공하며, SEO(검색 엔진 최적화)에도 도움을 준다.Next.js에는 두 가지 주요 프리 렌더링 방식이 있다.정적 사이트 생성(Static SiteGeneration)과 서버 사이드 렌더링(Server-side Rendering)이다.1. 정적 사이트 생성 (Static Site Generation)정적 생성은 빌드 시 각 페이지에 대한 HTML을 생성하고, 그 HTML을 재사용하는 방식이다.이 방식은 성능이 뛰어나며 모든 요청에 대해 동일한 HTML을 제공한다.정적 사이트 생성은 콘텐츠가 자주 변경되지 않는 페이지에 적합하다...

iOS 시뮬레이터 기기 바꾸기file - open simulator - 기기선택으로 바꾸면 된다. 애물단지가 된 FlipperKit 제거하기최근 새로운 디버거가 나오면서 Flipper가 deprecated되었다.그래서 기존 RN프로젝트에 있는 flipper를 제거하지 않으면최신 xcode에서 실행할 때 에러가 나게 되는데... 이를 해결하기 위해서 podfile에서 flipper관련 로직을 없애면 된다.나는 yaml파일에서 어디가 flipper 관련 코드인지 알아보기가 귀찮아서지피티에게 podfile 통째로 주고 알아서 flipper 로직 없애달라고 해봤다.그 결과 에러없이 잘 작동되긴 한다. 아래는 지피티가 고친 podfile 전문이다.# Resolve react_native_pods.rb with n..

무책임한 React Native 팀 녀석들이 flipper를 deprecated시켜버린 다음에 몇 가지 고질적인 문제가 발생한다.xcode는 최신인 상황에서 RN 0.74 출시 이전에 만들어놓은 프로젝트를 실행하면 flipper 관련 에러가 꼭 발생한다는 것이다. 그 결과 flipper가 초기세팅에 기본적으로 들어있던 시절의 프로젝트를 다룰 때podfile에서 flipper 관련 로직을 제거해야되는 지겹고도 시간 아까운 일을 할 수 밖에 없게 만들었다. 그냥 있는거 잘 쓰지 왠 새로운 디버거를 만든답시고 flipper를 deprecated 시킨진 몰겠다.하여튼 flipper를 안 쓰려면 아래처럼 해주면 된다. gpt가 짜준 코드이다. ios/podfile 수정# Resolve react_native_po..

숫자에 세 자리 마다 쉼표를 찍어야 할때가 있다.이럴 때 원래 string으로 만들고, .reverse()하여 세 자리마다 슬라이스해서 ','으로 join()으로 붙이는 함수를 만들어서 썼었는데그냥 toLocaleString()을 하거나 정규표현식을 쓰는게 더 간편하다는 것을 깨달았다. toLocaleString 사용const number = 1234567.89;const formattedNumber = number.toLocaleString();console.log(formattedNumber); // "1,234,567.89"// 옵션 없이 사용 (기본 설정)console.log(number.toLocaleString()); // "1,234,567.89"// 소수점 이하 자릿수 지정console.l..