My Boundary As Much As I Experienced

타입스크립트에서 인덱스의 타입을 지정할 때 사용하는 두 개념이다.두 개념이 밀접한 관련이 있는 개념이지만 엄밀히 말하면 다르긴 하다.하지만 자주 인덱스 시그니처를 인덱스 타입이라고 부르는 사람도 발생하는 등 조금은 용어 사용이 엄격하지 못한 채로 사용된다. 일단 인덱스 시그니처 먼저 이번 시간에 다뤄보겠다.인덱스 시그니처는 인덱스 타입 정의의 일부로서, 객체가 어떤 형태의 키와 값을 가질 수 있는지를 정의한다.쉽게 말하자면, 인덱스 시그니처는 '객체 형태의 타입'에서 '속성의 키'를 정의할 때 사용되는 문법이다. 인덱스 시그니처 (Index Signature)인덱스 시그니처는 특정 객체가 다양한 키를 가질 수 있고, 각 키의 값이 어떤 타입을 가져야 하는지 명시한다.기본적으로 인덱스 시그니처는 타입을 좀..

1. 제네릭 타입함수에 적용하는 경우:함수, 인터페이스, 클래스, 타입 별칭 등에 제네릭 타입 매개변수를 지정할 때 사용된다. 안에 제네릭 타입 매개변수 (ex: K, V)를 쓰면 된다.타입 매개변수 정리:제네릭 타입 매개변수 (Generic Type Parameters)T, U, V와 같은 대문자 알파벳을 사용하여 타입 매개변수를 나타낸다. 이들은 타입스크립트의 제네릭을 사용하여, 타입을 추상화하고 재사용할 수 있게 한다.구체적 타입 (Concrete Types)string, number, boolean 등의 원시 타입이나 더 복잡한 객체 타입 등을 직접 사용하는 경우다. 이런 경우에는 제네릭 타입 매개변수에 구체적인 타입을 대입하여 특정 타입의 값을 처리하게 된다. 예를 들어, Array은 문자열만을..

타입스크립트에서 & 연산자를 쓰는 경우는 두 가지 있다.그런데 수많은 블로그나 포스트에서 인터섹션 타입이나 인터페이스 결합에 대해 잘못 설명하고 있는 경우가 많다.타입스크립트에서 관련 로직이 한 번 바뀌기라도 했나 의심될 정도다..하여튼 chatGPT도 이를 참조해 틀린 얘기를 많이 한다.계속 불분명한 지식이 돌아다니면서 나를 헷갈리게 해서 이참에 정리해봤다. 1. 인터섹션 타입으로 '객체형이 아닌' 타입들을 조합할 때 (교집합)여타 블로그에서 인터섹션 타입이 합집합이라고만 해서 '그냥 언제나 합집합이구나.' 하면 안 된다.chatGPT도 그걸 참조하는지 합집합이 아닌 경우에도 합집합이라 하는 경우가 있더라..엄밀히 말하자면 intersection이라는 단어 자체가 '교집합'을 의미한다. 예를 들어 아래..

XCode 15.0 까지는 괜찮았는데 15.3 버전부터 나는 에러다.RN 안드로이드 빌드 시 podfile에 FlifferKit을 찾을 수 없대나 뭐래나..그저 조금 옛날에 만들어진 프로젝트 구동하는거 뿐인데도 에러를 3개나 맞았다.RN개발길이 험난해보이는건 왜일까..  해결 방법은 위와 같다.  솔직히 정확히 뭐하는지는 이해못했다. stackOverFlow에서 발견했을 뿐.target.name이 (문제가 되는) Flipper인 경우 예외처리를 해주는 코드라고만 알겠다.pod 파일 자체에 대한 이해도가 부족해서 이런게 있구나만 생각난다. https://medium.com/@darwinchan02/flipper-bug-with-xcode-15-3-94da2b54ac1fhttps://github.com/fa..

타입스크립트에서 extends 키워드는 주로 두 가지 주요 용도로 사용된다.인터페이스 확장과 조건부 타입에서의 활용이다. 또한, 클래스를 상속할 때도 사용되지만, 여기서는 타입스크립트 관련 활용법만 다루겠다.1. 인터페이스 확장타입스크립트에서 extends를 사용하여 한 인터페이스가 다른 인터페이스를 확장할 수 있다. 이를 통해 인터페이스 간에 코드를 재사용하고, 계층적인 타입 정의를 구성할 수 있다.  코드 재사용과 계층적인 타입 정의가 뭔지는 나중에 알아보고 일단 예시를 보겠다. 아래 Shape라는 interface는 sideLength라는 속성이 있다.그리고 Square는 이를 상속받으면서 numberOfAngle라는 속성도 가지도록 'extends Shape'를 했다.interface Shape ..

오늘 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)를 빌드할 때 사용한다.이름 ..

나는 새로운 기술을 읽을 때 공식문서를 읽는 것도 좋지만 처음엔 관련 강의를 들어 이 기술이 어떻게 돌아가는지 기본 개념을 챙기는걸 좋아한다. 한 번 수강 이후 궁금한 것이 생길 때 비로소 공식문서를 보는 편이다. 그래서 이번에 Next.js를 새로 배우며 새로운 강의를 여럿 시도했는데, 괜찮은 강의들은 모두 pages router에서 app router 내용으로 리뉴얼이 됐거나, 처음부터 app router를 다루는 강의들이 많더라. 그러나 현재 회사에선 pages router를 사용하기 때문에 최대한 pages router를 다루는 Next.js강의를 찾아보려고 노력했다.  국내 강의 page router 강의는 진짜 많이 없다.사실 부트캠프 수료 리워드로 받은 모 플랫폼의 꽁짜강의에 page rou..

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