코딩 일지

RN 프로젝트에 Fonts 폴더를 넣고, 원하는 폰트 파일을 넣고npx react-native-asset 를 했으나,ios환경에서만 글꼴이 적용되지 않는 문제에 봉착했다. 1. info.plist 확인2. react-native.config.js 파일 확인3.link-assets-manifest.json 확인4. xcode Resources 폴더 안에 글꼴 파일 있는지 확인5. 캐시 삭제 후 재빌드6. 글꼴 파일 명 오타 없는 지 확인 전부 해봤음에도 해결되지 않았다.문제는 android 환경에서는 멀쩡히 된다는 것... 위의 모든 경우의 수를 다 따져봤는데도 IOS만 폰트가 적용되지 않을 경우 Mac 환경에서 폰트의 PostScript 를 확인해봐야한다. Android 같은 경우, 단순 폰트 파일명과 ..

ts + react 글로 돌아왔습니다 (아무도 안 기다림) 백날 타입스크립트만 공부해봤자 프론트엔드 개발자인데 리액트에서 사용할 줄 모른다면배운 의미가 없기에 사실상 이 글의 내용이 전 글보다 더 중요하다고 볼 수 있다..react, react-native에서 ts사용하는 방법은 사실상 거의 똑같아서구별이 무의미하긴 하지만 필자는 RN에 내장되어 있는 컴포넌트를 사용할 것이기 때문에(View, Text 등)제목을 저렇게 지정했다.   그럼 빠르게 ㄱㄱ   일단, 처음에 jsx 형식으로 초기 컴포넌트를 만들어 전체적인 틀을 만들어놓고 시작하겠다.   App.tsximport React, {useState} from 'react';import {SafeAreaView, Text, View} from 'rea..

전에 근무하던 회사에서는 자바스크립트를 사용했다보니타입스크립트는 안 쓴지 시간이 조금 지났다그래서 이번 기회에예전에 했던 타스 + 리액트 프로젝트를 되짚어보며 찬찬히 정리해보려고 함!  문자열let name: string = "청포도에이드"; 숫자let today: number = 28; 배열let arr1: number[] = [1, 2, 3];let arr2: Array = [1 , 2, 3];let arr3: Array = ["청포도", "에이드"];let arr4: [string, number] = ["writer", 27]; 객체let grape: object = { name: "청포도에이드", age: 27 };  object로 타입 지정 후 안에 요소는 마음 대로 추가할 수 있음그러나 위의 ..

필자의 리액트 네이티브 버전은 0.76.0 이다. 비교적 최신 버전이라 그런지 뭐가 문제인지MainActivity 파일과 MainApplication 파일이 전부 코틀린이다;;; 코틀린 파일 같은 경우엔 레퍼런스가 많이 없어 java 로 마이그레이션을 시도하였으나뭐가 문제인지 코드를 바꿔도 번번히 빌드 실패... 그래서 고민 끝에 그냥 코틀린으로 가기로 했다... 어차피 자바나 코틀린이나 비슷하긴 하기 때문에.. 암튼 RN에서 splash screen 쓰려는데 하필이면 java로 된 레퍼런스가 대부분이었고 코틀린은 레퍼런스도 적고해외 사이트까지 뒤져가며 따라해봐도 뭐 하나씩 문제가 일어났다... 결국 3일 넘게 삽질을 했다;; 이 글을 보는 누군가는 필자와 같은 답답함을 겪지 않길 바라며 글을 써본다. ..

목차- 문제 발생 배경- 여러 가지 해결 방법- 가장 간편한 해결 방법 문제 발생 배경 구글 플레이에서 안드로이드 SDK 버전 업그레이드가 강제되면서Android 13(티라미슈) 으로 어플 버전을 올려 업데이트 하게 되었다. 초반에는 문제 없는 듯 보였으나, 서서히 밀려오는 CS 문의... " 사진 권한을 동의하라는데 어플 설정에 사진 권한이 없어요. " 뒤늦게 확인해보니 Android 13에서 파일 및 미디어 접근 권한이었던 항목이 이미지, 동영상, 오디오 권한 3가지로 분할 되었던 것이었다. 즉, Android13에선 이전 버전의 코드가 구동이 안된다....(그런 권한은 이제 존재하지 않으니까.....) 그리고 더불어, 기존엔 어플 다운로드 시 알림 on이 디폴트였는데 Android13이 되면서 of..

목차 - axios interceptors 사용 시 장점 - JWT 토큰 요청 헤더에 넣어주는 법 - access, refresh token 만료 시 재발급 받기 - RN Hook에서 사용하는 법 Axios Interceptors를 사용하게 된 배경 및 장점 기존에는 api 요청을 보낼 때마다, 모든 요청에 JWT 토큰을 담은 header를 매번 넣어줬다. 개발 초기 단계일 땐 큰 문제가 없었지만, 유지보수와 업데이트를 하며 기능이 늘어 api 요청이 늘 때마다 중복된 코드가 계속해서 추가되었다. 100개가 넘어가는 api 요청 코드를 당장 뜯어고칠 수는 없었기에 현황을 유지했지만, 기존 코드는 JWT 토큰의 유효기간이 없다는 치명적인 단점이 존재했다...(100년이었으니 사실상 없는 거나 마찬가지) 이..

목차 - recoil을 쓰게 된 이유, 장점 및 단점 -리액트 네이티브 RefreshControl + recoil selector 로 api 재호출하기 recoil을 쓰게 된 이유, 장점 및 단점 기존 프로젝트에서는 놀랍게도 state를 전역으로 관리하지 않았다(놀라움..) 따라서 개발 과정이 매우 번거로웠고, 매 페이지마다 회원 정보를 불러오는 api를 호출해야하는 치명적인 단점이 존재했다. 보다 효율 높은 유지보수를 위해 recoil을 사용하여 전역관리를 하기로 어렵게 결정하였다...! (사용법이 쉽고 요새 많이 쓰는 추세라서..) 무려 70개가 넘는 screen을 다 바꿔야했지만... 미래를 생각해서 진행하기로 했다. recoil selector를 사용했더니 loading 상태를 별도로 관리하지 않..

목차 - 인터페이스(interface란?) - 예제 코드 인터페이스란? 인터페이스는 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 정의하는 것과 유사하다. 인터페이스에 선언된 프로퍼티 또는 메소드의 구현을 강제하여 일관성을 유지할 수 있도록 하는 것이다. ES6는 인터페이스를 지원하지 않지만 TypeScript는 인터페이스를 지원한다. 인터페이스는 프로퍼티와 메소드를 가질 수 있다는 점에서 클래스와 유사하나 직접 인스턴스를 생성할 수 없고 모든 메소드는 추상 메소드이다. 단, 추상 클래스의 추상 메소드와 달리 abstract 키워드를 사용하지 않는다. 예제 코드 example/interface.ts int..

'작성중' type script 는 런타임이 없다! --> 번들링을 무조건 해야함 즉, 자바스크립트로 바꿔주어야한다. tsc index.ts /dist/app.js #json { "compilerOptions": { "outDir": "./dist/" } } npx tsc --build #json 별칭 경로 설정(paths) { "compilerOptions": { "outDir": "./dist/", "baseUrl": ".", "paths": { "@core/*": ["src/core/*"] } } } npm install -D @types/node ┌ [프로젝트] ├ /src ├─ /core ├── index.ts ├─ utils.ts **index.ts** #typescript -특정 경로를 아래..

MPA Multi Page Application의 약자(여러 페이지로 구성된 웹 어플리케이션) 사용자의 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식이다. SPA Single Page Application의 약자(하나의 페이지로 구성된 웹 어플리케이션) 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이다. 장단점 1) SPA의 장점 UX 전체 페이지를 업데이트를 할 필요가 없기 때문에 빠르다! (웹사이트의 성능과 직결된다.) 전체 페이지를 업로드하면서 발생하는 '깜박' 거림이 없다. 페이지의 일부만 바뀌는 것이기 때문에 applic..