콘요맘떼 개발일지

타입스크립트의 never 타입은 일반적으로 함수의 반환형으로 사용되며 '절대 아무것도 리턴해서는 안된다'는 의미로 사용된다. 함수에서 반환형으로 never 타입이 사용될 때는 오류를 출력하거나 리턴값을 절대 내보내지 않을 때에 해당합니다. 여기서 리턴값을 절대 내보내지 않는 때는 무한루프로 이해하면 된다. never과 void는 다른 타입이다. 따라서 return문을 작성하지 않았더라도 never을 반환형으로 사용하는 함수가 위 두 경우에 해당하지 않는다면 에러가 발생한다.

자바스크립트의 원시타입에는 boolean, string, number, null, undefined, Symbol 이렇게 총 6가지가 존재한다. 그 중 Symbol은 ES6에서 새롭게 추가된 원시타입으로 변경 불가능하며 다른 값과 중복되지 않은 고유한 값을 가진다. Symbol은 Symbol 생성 함수를 통해 만들어줄 수 있으며 선택적 인자로 문자열을 넣어줄 수 있다. 이 문자는 해당 Symbol을 표현하는 description으로 활용된다. Symbol의 description은 .description을 통해 다시 확인할 수 있다. ex) const a = Symbol( ); const b = Symbol("this is symbol for b") b.description => "this is symbo..

1. 타입스크립트는 자바스크립트의 슈퍼셋이다. (따라서 자바스크립트에서 이용하는 기능들을 모두 이용할 수 있다.) 2. 타입스크립트는 정적 타입 언어이다. 그렇기 때문에 컴파일 단계에서 타입이 결정되며 보다 안전한 프로그래밍을 구현할 수 있다. (반면 자바스크립트는 동적 타입 언어이다. 자바스크립트에서 타입은 런타임에서 결정된다. 그렇기 때문에 코드를 이해하는 데 어려움이 있으며 프로그램을 작성하는 과정에서 오류를 발견하기 어렵다.) 3. 타입스크립트는 자바스크립트보다 객체지향프로그래밍(OOP)에서 강력한 모습을 보여준다. ES6부터 자바스크립트 역시 클래스의 기능이 제공되기는 했지만 자바스크립트는 본질적으로 프로토타입 기반 언어이기 때문에 완벽한 객체지향을 구현하지는 못한다. 프로토타입 기반 언어는 클..

지금 진행하고 있는 Todo 어플리케이션의 상태관리 코드를 짜다가 non-serializable type에 대한 경고를 받았다. 해당 부분을 조사하다가 관련된 리덕스의 세 가지 원칙에 대해서 간략하게 기록을 남기려고 한다. 1. 시스템의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다. 리덕스는 store의 일관성 유지, 복원, 시간여행 디버깅 등이 방해되는 것을 방지하기 위해서 Non-serializable 타입을 저장하는 것을 추천하지 않는다. 우선 serialize(직렬화)는 객체에 저장된 값을 연속적인(serial) 데이터로 변환하는 것을 말한다. 그 반대 개념이 역직렬화(deserialize)이다. 직렬화는 다양한 환경에서 데이터의 사용이 보존되기 위한 목적에서 필요하다. 예를..

React Native에서는 스타일링을 위해 Dimensions(from react-native)를 자주 활용한다. Dimensions.get( )함수의 파라미터는 두 종류가 있다. 1) window 2) screen → 아이폰에서는 차이가 존재하지 않는다. 그러나 안드로이드에서는 상태바 포함여부에 따라 둘의 차이가 드러난다. Dimensions.get('window')는 상태바를 제외한 영역을 추출하고 Dimensions.get('screen')은 상태바를 포함한 모든 화면의 영역을 추출한다.

Typescript를 사용하는 경우 ThemeProvider을 사용할 때 Theme 타입에 대한 설정이 추가적으로 요구된다. 위와 같이 emotion.d.ts 파일을 생성해준다. 그 후 Theme 안에 본인이 ThemeProvider을 통해 전달해줄 Theme 타입을 작성해주면 된다. Theme.font와 같이 세부 내용을 곧바로 적어주는 방법과 Theme.layout과 같이 해당 테마속성의 Theme을 별도로 작성 후 import 하는 방법이 존재할텐데 개인적으로 theme/layout.ts와 같은 각각의 테마 파일에서 그에 해당하는 타입을 선언하고 그를 import해오는 방식이 관리 측면에서 보다 바람직하지 않을까 생각된다.

webpack rules 순서를 잘못 설정해서 발생하는 문제 : webpack rules는 아래->위 순서대로 작성해야 한다. (ts-loader 다음에 babel-loader) { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"], }, { test: /\.(ts|tsx)$/, exclude: /node_modules/, use: ["ts-loader"], }, #react #reactjs #reactnative #typescript #babel #webpack

Type '{ path: string; exact: boolean; component: () => Element; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. Property 'exact' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. → react-router v6부터 exact를 더 이상 지원하지 않기 때문에 발생하는 문제이다. (exact가 없어진 이뉴는 대부분의 페이지들에서 exact=true가 적용되기 때문) 따라서..

1. Android (1) android/app/src/main/res/raw 폴더로 이동한다. (없으면 만들어준다.) (2) 해당 폴더에 설정하려는 음원 파일을 넣는다. (3) android/app/src/main/java/..../MainActivity.java를 다음과 같이 수정한다. - "{}"에 자신이 해당하는 내용을 적으면 된다. - 참고로 importance의 종류는 네 개가 존재한다. (1) NotificationManager.IMPORTANCE_HIGH : 알림음 발생하며 헤드업 알림 제공 (2) NotificationManager.IMPORTANCE_DEFAULT : 알림음 발생 (3) NotificationManager.IMPORTANCE_LOW : 알림음 발생하지 않음 (4) Not..

1. 안드로이드 (1) 앱 등록에서 안드로이드를 선택한다. (2) 요청사항에 따라 패키지 네임 등의 정보를 입력한다. ※ 안드로이드 SHA-1 인증서 획득 방법 : (리액트 네이티브 기준) 루트 폴더에서 안드로이드 폴더로 이동 후 (cd android) ./gradlew signingReport 명령어를 실행한다. (해당 명령어를 통해 Variant, Config, Store, Alias, MD5, SHA-1, SHA-256, Valid Until 등의 데이터를 획득할 수 있다.) (3) google-services.json 파일을 다운로드한 후 android/app 폴더에 넣어준다. (4) Firebase의 요청사항에 맞춰서 빌드 수준과 앱 수준의 build.gradle 파일을 수정해준다. 2. iOS..