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의 일부..

파이어베이스로 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을 제공한다.정적 사이트 생성은 콘텐츠가 자주 변경되지 않는 페이지에 적합하다...

오늘 pages router 강의를 들으면서 예제를 진행하다 MongoDB Atlas Driver를 설치해야되었다. 그러다가 위와 같은 에러가 났는데, 찾아보니 버전 관련 에러인거 같다.예제 파일 자체가 React17에 Next10으로 된 옛날 파일이어서 발생하는 것 같았다. 검색해보면 나오는 해결책은 주로 아래와 같다.- nvm을 깔아서 node를 최신버전으로 업데이트하기 (https://blog.naver.com/dlaxodud2388/222572943250)- npm update를 통해서 라이브러리 버전을 모두 최신버전으로 유지하기 그러나 위의 방법들이 먹히지 않았다.mongoDB Atlas의 최신버전이 돌아가지 않을 정도로 React/Next가 옛날 버전인건 맞긴 한데...npm update를 했..

getStaticPaths가 해결하려는 문제: SSG 빌드 시 동적 페이지의 구성을 파악할 수 없다.SSG에서는 빌드 시 사전에 페이지들을 미리 생성하게 된다.그런데 SSG 방식으로 사이트에서 동적 페이지를 만들 때, Next.js는 [id].js에 속하는 동적 페이지가 뭔지 다 알지 못한다.그래서 SSG + 동적 라우팅을 쓰면서 getStaticPaths를 쓰지 않으면 아래와 같은 에러를 볼 수 있는 것이다. 뭔지 모른다는 말!  그렇기 때문에 발생할 수 있는 모든 패러미터들을 정리해서 Next.js에 제공하는 것이 getStaticPaths의 역할이다.Got it? 사실 이게 다다. 나도 처음 들을 때 여기까지는 이해가 얼추 되긴 했지만, 개인적으로 든 의문점이 하나 있긴 했었다. Next.js 팀은..

지금까지 나는 React을 활용하면서 배포과정이라던가 캐싱 같은 부분을 vercel같은 편리한 배포툴에 의존하는 편이었다.그래서 Next.js 등을 배우면서 SSR, SSG의 개념을 처음 접하게 되었고, getStaticProps, getServerSideProps, getStaticPath들의 사용법도 처음 알게되었다. 이게 이론적인 설명만 들을 땐 '아하 그런거구나' 싶더라도 '결국 코드로 구현했을때는 어떻게 되는건데?', "왜 이렇게 설계되어있는거지?" 등의 의문이 계속 있게 되었다. 그러나 Udemy React/Next 강의를 들으며 조금 더 제대로 정리하게 되었고 이를 적어보려한다.  getStaticProps란?정적 페이지(Static Site Generation)를 빌드할 때 사용한다.이름 ..

URL 마스킹이란?URL 마스킹은 사용자에게 보여지는 URL을 실제 페이지 구조와는 다르게 표시하고자 할 때 사용되는 기술이다.(router.push 또는 router.replace 메소드를 사용할 때 쓸 수 있는 'as 파라미터'가 URL 마스킹에 사용된다.)url 파라미터: 실제로 라우팅되는 페이지의 경로as 파라미터: 브라우저의 주소 표시줄에 표시되는 경로 왜 쓰는데?사용자 경험 향상: 사용자에게 더 읽기 쉽고 이해하기 쉬운 URL을 제공함으로써 사이트의 전반적인 사용자 경험을 개선할 수 있다.보안 강화: 사용자가 URL을 통해 어떤 정보를 추측하는 것을 방지할 수 있다. UseRouter를 쓸 때 URL 마스킹하기 (예시)예를 들어, 사용자가 /products/1 페이지에 있고, 이 상품의 이름이..