My Boundary As Much As I Experienced

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

지난 금요일, firebase 멀티 호스팅을 이용해서 신규 환전 페이지를 배포하려고 했는데..터미널에 firebase deploy하는 순간, 내가 새로 붙이려고 한 function만 배포되는게 아니라기존 서비스의 function을 모두 내려버리고 내껏만 남긴 형태로 overwrite해버렸다. firebase hosting에 대한 지식도 얼마 없으면서 상용 서버에서 처음 해보는 짓을 하면 안 됐다..적어도 팀장님이나 사수가 있는 상황에 진행했어야 하는데ㅠ.ㅠ.. 그리고 아직도 의문인게, config값을 다시 설정한게 아닌데내 배포 후 project-id 값이 제대로 들어가지 않아 이를 고치는데에도 시간이 꽤 소요되었다.다들 금요일 밤에 컴퓨터 키고 대응하게 해서 얼마나 죄송한지..'나 이제 출근 가능한건가..

앱라우터에서는 아래처럼 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..

지금 만드는 토큰 환전 페이지에서 공통 컴포넌트인 Input을 사용해야되는 상황이 있었다.input은 사용자 입력이 올바르지 않을 경우 에러 메시지를 표출한다.이때 인풋의 타입이 NUMBER인지 STRING인지에 따라 에러메시지가 달랐다. 처음에는 이를 아래처럼 유니언 타입으로 설계하였다.message: NUMBER_VALUE | STRING_VALUE;setMessage: (value: NUMBER_VALUE | STRING_VALUE) => void;  유니온 타입의 한계 그런데 위처럼 유니언 타입으로 설계하면 타입스크립트가 항상 다른 타입의 가능성을 경고하게된다.예를 들어 NUMBER_VALUE를 쓸 때 타스가 STRING_VALUE의 가능성을 계~속 경고한다... if (message typeof..

constant객체를 효과적으로 관리하는 방법타입스크립트로 상수 객체를 관리하다보면, 이에 대응하는 타입들이 필요할 때가 있다. 특히 대괄호 접근자 'obj[key]' 형식으로 접근할 때 key가 그냥 string타입이면'string은 KEY1 | KEY2 | KEY3 | ...에 할당할 수 없다'라는 식의융통성 없는 에러 때문에 애먹은 적이 다들 있을 것이다. 옛날에 타입스크립트를 처음 쓸 때는 위 에러를 어떻게 고칠지 몰라 아래처럼 key들을 따로 타입화하여 해결하려했다.그러나 아래 코드는 최선이 아니다. 왜냐하면 CONSTOBJ에 다른 속성이 추가되면ConstObjType과 CONSTOBJ_KEY에도 일일이 한 번 씩 더 써줘야한다는 번거로움이 있기 때문이다.// 초보의 타입스크립트 사용법inter..

백그라운드  고정하는 방법 body { height: 100vh; background-image: url('path/to/your/image.jpg'); background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; } background-image: 배경 이미지의 URL을 지정한다.background-attachment: fixed: 배경 이미지를 고정하여 스크롤 시에도 고정하게 만든다.background-size: cover: 배경 이미지가 요소의 전체 크기를 덮도록 조정한다. 이 설정은 이미지가 요소의..