1. 타입 별칭 이란 타입 별칭은 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다 // string 타입을 사용할 때 const name: string = 'capt'; // 타입 별칭을 사용할 때 type MyName = string; const name: MyName = 'capt'; //interface 레벨의 복잡한 타입도 가능 type Developer = { name: string; skill: string; } //타입 별칭에 제네릭도 사용할 가능 type User = { name: T } 2. type vs interface type 진영 타입스크립트에서 type과 interface는 객체를 선언할 때 매우 유사한 구조입니다. 논란의 여지가 있지만 대부분의 경우 일관되게 ..
1. 인터페이스란 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터 & 반환 타입 등) 배열과 객체를 접근하는 방식 (인덱싱 & 딕셔너리 패턴) 클래스 객체의 스펙 interface User { name: string; age: number; } const user:User { name: '오일'; age: number; } 함수의 파라미터 function getUser(user: User) { console.log(user); } 함수의 스펙 interface SumFunction { (a: number, b: number): num..
인덱싱 패턴 인덱싱 패턴은 배열(Array)을 기반으로 데이터를 저장하고 인덱스를 사용하여 각 요소에 접근합니다. 배열은 순서가 있는 컬렉션으로, 각 요소는 0부터 시작하는 인덱스를 가지며 순차적으로 저장됩니다. 예를 들어, 다음과 같은 배열을 생성할 수 있습니다: let array = [value1, value2, value3, ...]; console.log(array[0]); // 첫 번째 요소에 접근 console.log(array[1]); // 두 번째 요소에 접근 인덱싱 패턴은 순서가 중요하고 각 요소에 번호를 부여하여 접근하는 방식입니다. 배열은 인덱스를 기반으로 빠른 접근이 가능하며, 요소들을 반복하여 처리할 때 유용합니다. 딕셔너리 패턴은 자바스크립트에서 딕셔너리 패턴은 키-값 쌍으로 데..
1. 타입스크립트 설치 yarn add -D typescript 실행 npx tsc [파일명].ts 실행하면 [파일명].js 파일이 생성됨 2. 타입스크립트 설정 파일 npx tsc 명령어는 반복 실행 되는 것이라 실제 현업에서는 webpack이 자동으로 실행해주고 있음 프로젝트 루트에 tsconfig.json 설정 allowJs: 타입스크립트 컴파일 작업을 진행할 때 자바스크립트 파일도 포함될 수 있는지를 설정해주는 속성입니다. 주로 이미 기존에 존재하는 자바스크립트 프로젝트에 타입스크립트를 점진적으로 적용할 때 사용하면 좋은 속성입니다. checkJs: 활성화 되면 프로젝트에 포함된 모든 JavaScript 파일의 맨 위에 // @ts-check를 포함하는 것과 같음 noImplicitAny: tru..
1. 타입스크립트란? 타입스크립트는 자바스크립트에 타입을 부여한 언어 자바스크립트의 확장된 언어 타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 javascript 파일로 변환하는 과정을 거쳐야 됨. 이러한 변환 과정을 우리는 컴파일(complile) 이라 함 2. 타입스크립트에서 컴파일 이란 ts파일을 js파일로 변환하는 과정 3. 왜 타입스크립트를 쓰면 좋은가요? 에러의 사전 방지 코드 가이드 및 자동 완성(개발 생산성 향상) 4. 자바스크립트에 타입이 있을 때의 첫 번째 장점 타입스크립트가 없을 때는 jsDoc을 이용해 타입을 설정했었는데 코드에 종속성이 생겨 관리하기가 힘들어짐 💡 jsDoc와 Typescript 차이점 - jsdoc은 자바..
해당 글은 2022년 7월에 작성한 글입니다. 원인 현재 사용중인 RBSheet 모듈은 react-native-raw-bottom-sheet인데 2년 동안 업데이트가 없을 정도로 관리가 안되고 있는 모듈입니다. 이 모듈은 react-native-modal을 dependence하고 있는데 KeyboardAvoidingView를 비활성화해도안드로이드에서만 키보드 활성화 시 빈 공간만큼 모달이 올라갑니다. 해결방법 해당 모듈의 내부 코드에있는 Modal 속성에 있는 statusBarTranslucent 의 값을 활성화 합니다 statusBarTranslucent는 모달이 시스템 상태 표시줄 아래에 있어야 하는지 여부를 결정하는데 기본값이 false라서 빈 공간이 있으면 상태바 아래까지 모달이 올라갑니다 급한 ..
이 글은 2021년 2월 19일에 작성되었습니다. Next JS에서는 SSG와 SSR 두 가지의 사전 렌더링 방식이 존재합니다. SSG는 프로젝트가 빌드되는 시점에 필요한 데이터를 미리 호출하며 이를 사용하기 위해 next js에서 getStaticProps와 getStaticPaths함수를 제공합니다. SSR은 각 페이지 요청마다 데이터 통신을 하며 next js에서는 getServerSideProps함수를 제공합니다. 이번 글에서는 getStaticProps와 getStaticPaths 그리고 getServerSideProps함수 사용방법에 대해 알아보겠습니다. getStaticProps /* pages/home/index.js */ export default function Home({homeDat..
