콘요맘떼 개발일지

React Native에서 USB 연결을 통해 안드로이드 실제 기기에 어플리케이션을 실행하는 과정에서 기기가 분명 연결되었고 포트 등도 제대로 지정되었음에도 불구하고 (ex. "adb reverse tcp:8081 tcp:8081") 노드와 제대로 연결되지 못하는 경우가 있다. 문제가 반복되자 컴퓨터에서 열려있는 포트들을 확인해봤는데 Samsung의 Dex가 8081번 포트를 공유하고 있어서 충돌이 일으키는 것이었다. (어차피 자주 쓰지도 않던 Dex를 이번 기회에 제거하자마자 연결 문제가 거짓말같이 사라졌다.) 만약 포트 설정을 모두 확인한 후에도 문제가 지속된다면 8081번 포트를 여러 프로그램이 공유하고 있지 않는지 확인해보는 것도 좋은 방법일 것 같다. (혹은 포트 번호를 바꿔서 developme..

예상한 것과는 다르게 안드로이드에서는 z-index만 지정하면 원하는대로 결과물이 획득되지 않는다. 안드로이드에도 원하는 방향으로 z-index를 수정하고 싶으면 elevation을 함께 바꿔주면 된다. elevation의 값은 z-index와 동일하게 적용해주면 된다.

React Native에서 Image의 aspect ratio를 활용하고 싶다면 위와 같이 height를 undefined로 지정해주면 된다. 그렇지 않는다면 지정한 aspect ratio가 적용되지 않는다.

String Union Type을 활용할 때 이따금씩 가능한 타입의 값들을 코드 안에서 value로 활용하고 싶은 경우가 있다. 한 예시로 MBTI에 대한 String Union Type을 형성한 후 각각의 MBTI를 표현하는 MBTI를 생성하고 싶을 때는 map 함수를 활용하여 컴포넌트들을 사용하는 것이 매우 효율적이다. 가능한 방법은 두 가지가 있다. 두 가지 모두 type을 먼저 생성하는 것이 아니라 가능한 값들을 생성한 후 그로부터 타입을 추출하는 방법들이다. 1. 배열 활용 위 예시와 같이 가능한 값들의 배열을 생성한 후 'typeof 배열이름[number]'을 통해 그 값들을 가지는 타입을 생성할 수 있다. 배열에 변화가 없다는 as const를 덧붙여야지만 해당 값들로 타입을 생성할 수 있으..

React Navigation v6 기준 Drawer Navigation의 헤더가 있는 것이 디자인적으로 너무 마음에 안 들어서 헤더 자체를 삭제 후 Drawer Icon만 따로 만들어주기로 했다. 우선 Drawer Icon을 만들어준다. 본 예시에서는 react-native-vector-icons의 bars 아이콘(햄버거 icon 모양)을 활용했다. useNavigation 훅을 사용하면 props로 전달받지 않아도 navigation을 사용할 수 있다. Drawer Icon은 항상 화면의 우측 상단에 고정된 위치에 존재해야 하므로 position : absolute를 활용하였다. 이어서 각 스크린의 내용을 감싸줄 DrawerScreenContainer을 만들어준다. DrawerIcon을 가장 하단에 ..

Drawer Navigation을 사용할 때 Reanimated 관련 설정을 하지 않았을 때 발생하는 에러이다. 해결 방법은 다음과 같다. 1. 패키지 설치 yarn add react-native-reanimated 혹은 npm install eact-native-reanimated 2. Babel 플러그인 설정 이미지와 같이 babel.config.js 파일의 plugins 부분에 react-native-reanimated 플러그인을 추가해준다. 3. 안드로이드 (1) android/app/build.gradle 수정 사진과 같이 enableHermes 값을 true로 변경해준다. (2) android/app/src/main/java/.../MainApplication.java 수정 다음과 같이 수정해..

1. Mapped Types 자바스크립트의 map을 생각하면 쉽다. 가장 대표적인 사용 예시로 두 가지가 있다. (1) 키 - value 타입 지정 (2) in 자바스크립트의 for in을 생각하면 쉽다. 위 예시의 경우 OnlyBools는 T 타입의 모든 키에 대해 boolean 값을 가지는 타입을 반환한다. 2. Utility Types 이미 타입스크립트에서는 사람들이 자주 사용할 만한 타입들을 많이 만들어 두었다. 대표적인 예시는 다음과 같다. (1) Required Required는 주어진 타입의 모든 프로퍼티를 required로 변경해준다. 위의 예시에서 person은 age가 더 이상 optional이 아니기 때문에 에러가 발생한다. (2) Partial Partial은 Required와 반대..

1. 공통점 object의 타입을 정의하는 데 사용될 수 있다. class를 통해 구현(implementation)이 가능하다. 확장(extension)이 가능하다. 2. 차이점 중복 선언 - Type alias는 중복 선언이 불가능하지만 Interface는 중복 선언이 가능하다. 그러나 Interface의 중복 선언은 새롭게 정의되는 것이 아니라 기존의 정의에 새로운 내용이 추가되는 것이다. (Intersection으로 생각하면 된다, 그러나 여태까지 프로젝트 경험으로 봤을 때는 실용성 있는 차이인지에 대해서 아직 잘 모르겠다.) Union type - Type alias는 Union type이 가능하다. 그러나 Intersection은 Union type이 불가능하다. 3. 결론 - Union typ..

1. 상속 (Inheritance) - 자식 클래스가 부모 클래스의 변수·메소드 등을 사용할 수 있다. - 자식 클래스는 부모 클래스에 속하기 때문에 is a 관계에 속한다. - 하위 클래스로 갈수록 객체는 구체화된다. 장점 (1) 재사용성 향상 : 필요한 속성 및 메소드를 모두 다시 정의하는 것이 아니라 일부 상속받아서 사용 가능 (2) 확장성 및 유지보수성 향상 : 객체에서 어느 정도 일관성 확보 가능 2. 다형성(Polymorphism) - 같은 메소드가 객체에 따라 다른 기능을 수행할 수 있음 - 오버라이딩 : 부모클래스의 메소드와 같은 이름에 같은 매개변수 사용하면서 내부 소스 재정의 - 오버로딩 : 같은 이름 함수를 여러 개 정의 후 매개변수를 다르게 설정한 뒤 경우에 따라서 원하는 메소드를 ..

인터섹션 타입은 두 가지 이상의 타입의 합집합인 타입을 의미한다. 모든 타입을 합쳤다는 점에서 여러 타입 중 하나에만 해당하면 되는 Union Type과는 차이가 있다. Intersection Type은 & 연산자를 통해 생성할 수 있으며 재료가 되는 타입들 간에 동일한 프로퍼티가 있는 것은 문제가 되지 않는다. (다만 해당 프로퍼티가 동일한 타입을 가져야 한다. 아래 예시의 경우 Student의 name은 number 타입인데 Developer의 name은 string 타입을 가지면 오류가 발생한다.)