2023년부터 로그 기록 2023년부터 로그 기록

Expo Go 환경에서 개발하는 React Native의 마지막 강의 노트이다.지금까지 개발한 앱을 배포하고 플랫폼의 심사 없이 업데이트 하는 방법을 배운다. 1. EAS에 대해서본격적인 시작에 앞서서 EAS(Expo Application Services)의 좋은 점들이 많이 있어서 쭉 정리를 하고 넘어가도록 한다. EAS Build Expo Go 환경의 핵심이라고 볼 수 있다. 클라우드를 이용해서 프로젝트의 파일들을 전부 빌드를 수행한다. 클라우드 빌드의 장점은 클라우드 환경이기 때문에 Winodws OS를 사용하는 개발자가 iOS 빌드를 하는 등의 작업이 가능해진다. 하지만 EAS build의 단점은 팀 단위로 가면 사실 정기 결제를 해야 한다. 무료 유저는 한 달에 30번밖에 빌드를 못하기 때문이다..

지금까지 eas build에도 시간은 걸렸으나 에러는 발생하지 않았다. 그런데 이번에 google-services.json이나 FCM 서비스 계정 정보를 등록하면서 eas build에서 에러가 발생했다. EAS 무료 사용자이다 보니 작업 큐에서 시간을 너무 많이 사용하여 아래 명령어로 수행을 했다. eas build와 다르게 아래 명령어는 android 폴더를 생성하는 prebuild를 수행했다. 그러면서 gradle 에러가 발생하기 시작했다.npx expo run:android에러의 원인을 파악하고 해결해본다. eas-cli 업데이트최신버전의 eas-cli로 업데이트 한다.npm install -g eas-cli@latest 로컬에서 prebuild 테스트빌드 전에 로컬에서 prebuild가 제대로 작..

1. 로컬 Push 알림 보내기 앱을 쓰는 가장 큰 이유 중 하나인 Push 알림 기능을 추가해본다. Push 알림을 통해서 앱을 열 수 있기 때문에, 사용자의 방문 횟수를 늘릴 수 있고, 다양한 마케팅 프로모션을 진행할 수 있다. 웹서비스로도 충분한 경우가 많지만, 고객에게 소식을 전달할 수 있는 방법이 Email, 문자 전송 밖에 없다. 이러한 Push 알림의 이점으로 인해 서비스에 모바일 앱을 적용할 정도로 Push 알림이 중요하다. 하지만 이렇게 중요한 Push 알림 기능을 직접 구현하는 것은 매우 복잡하고 어려운 일이다. 그래서 대부분 라이브러리를 사용한다. Expo에서는 자체 서버가 있더서 더 간단하게 만들어 뒀다. 이전에는 구글의 경우 FCM(Firebase Cloud Messaging), ..

1. 더미데이터 세팅: miragejs 홈 화면에 게시글 목록을 더 추가하고, 무한 스크롤링을 구현해 본다. 현재 상황은 miragejs에 더미데이터들이 들어가 있기 때문에 앱이 재부팅 될 때마다 데이터들이 자꾸 바뀐다. 이렇게 데이터가 계속 바뀌면 테스트하기가 어렵다. 그래서 miragejs의 데미 데이터 관련된 설정을 추가적으로 더 알아보고 이용해 본다. miragejs 더미 데이터 구조models: 데이터 정의와 함께 데이터의 관계를 설정serializsers: 데이터 형식을 정의seeds: 데이터 초기화 설정.factories: 데이터 생성.routes: 데이터 접근 정의.주요 메서드schema.find: 특정 데이터를 찾음. schema.find("post", request.params.id);..

Expo 기반으로 React Native 개발을 하다가 아래와 같이 에러와 경고가 발생했다.$ npm run android> threads-clone@1.0.0 android> expo start --androidStarting project at C:\Users\jasin\Documents\code\lectures\threads-cloneStarting Metro BundlerCommandError: No development build (com.morgankim.threadsclone) for this project is installed. Install a development build on the target device and try again.Learn more: https://docs.ex..

1. expo-location이제 게시글 작성 시에 위치정보를 사용하는 기능을 추가한다. 이를 위해 위치정보를 다루기 위한 Expo에서 제공하는 라이브러리를 설치한다.npx expo install expo-location 위치정보는 사용자의 권한 허용이 필요하다. 우선 관련된 app.json에 추가해야 하는 설정을 공식 문서에 있는 대로 추가한다. app.json이 수정되면 프로젝트를 다시 빌드를 해줘야 한다. 기존 실행 중인 React Native 서버는 중지하고 다시 npm run android 명령어로 다시 빌드 후 실행준다.추가된 설정은 위치정보를 항상 사용 중일 때 허용하는 권한이며, 사용자에게 보여지는 문구는 커스터마이징이 가능하다. 앱이 사용 중일 때는 권한을 받기도 쉽고 설정도 어렵지 않..

제로초님의 React Native Threads Clone 강의 2주차 Section2의 Mission이다. 1. 기능 구현 결과 2. 주제(해시태그) 추가 기능 분석React Native 로 구현된 게시글 작성 모달에 주제(해시태그)를 추가하는 기능을 추가하여 내용 정리를 한다. Threads 앱의 클론 코딩을 수행했다. 🛠️ 사용된 주요 기술과 라이브러리1. React Native Core사용된 대부분의 컴포넌트들은 React Native에서 제공하는 것을 사용했다. 특히 FlatList는 스레드 목록과 토픽 옵션을 효율적으로 렌더링 하는데 사용하였다. Viewport 상에서 안보이는 건 렌더링을 미뤄두는 최적화가 알아서 된다.import { FlatList, Image, Pressable, Tex..

1. 프로젝트 초기화React Native 프로젝트에서 불필요한 파일과 폴더 정리한다. 아래 명령어를 실행하면 자동으로 프로젝트를 초기화 하여 App 폴더에 _layout.tsx 와 index.tsx 만 남게 된다.npm run reset-project 2. App 라우팅Expo router는 Next router의 영향을 강하게 받아서 매우 유사하다. Next Router와 같이 page하나가 각각의 주소를 가진다. 주의해야할 점은 app 주소의 경우에 프로토콜 자리에 https 대신 app 이름을 붙여 아래와 같은 형태가 된다. 이때 일반적인 페이지는 문제가 없지만, 수백만명이 될 수 있는 사용자 전용 페이지의 경우에는 동적 주소를 사용한다. app 라우팅 주소 예시threads-clone://hom..

React Native를 Expo 환경에서 개발하던 중 잘 동작하던 에뮬레이터가 먹통이 됐다. 수정된 결과를 보기 위해 reload를 했으나 안드로이드 에뮬레이터가 완전 멈춰서 동작하지 않는다. 실행 중인 앱을 내리고 홈으로 이동하는 버튼도 동작하지 않는다. 다시 npm run android를 통해 재시작을 해도 상황이 해결되지 않아 아래 접근방법으로 문제를 해결본다. (결론적으로 접근방법 2가 해답이었다.) 에러 메시지Error: It took too long to start the Android emulator: Pixel_7. You can try starting the emulator manually from the terminal with: C:\Users\jasin\AppData\Local\A..

React Native를 업무에서 만나 시작을 하게 되었다. RN 강의 시리즈는 제로초(조현영)님의 React Native 강의을 정리하는 글이며, 해당 강의는 RN 0.79 버전을 기반으로 스레드를 클론 코딩을 진행한다. 공식문서를 따라하거나 AI에게 물어보면서 공부를 할 수도 있지만, 강의를 통해 제로초님의 경험을 전수 받아보자. 강의 실습 환경Window 11Cursor IDEExpo SDK 53React Native 0.79 (TypeScript)Node 22학습 자료강의 노트소스 코드 버전 선택버전을 선택할 때 최신 버전에서 한 버전 낮춰서 개발을 하면 왠만하면 큰 문제는 없다.이 강의 정리글은 React Native 0.79 버전으로 시작한다. (현재 2025.06.23 최신 버전은 0.80 ..

여러 객체가 세트로 구성되어 있을 때 사용하는 팩토리 패턴이다. 아래와 같이 그림판이 브라우저 타입에 따라 달라질 수 있는 메뉴(initializeMenu 메서드) 초기화 기능까지 정의하게 되면 단일책임원칙을 위반하게 된다. 그렇기 때문에 브라우저별 세트로 구성되도록 추상 팩토리 패턴을 적용해본다.// AbstractGrimpan.tsexport default abstract class Grimpan { protected constructor(canvas: HTMLElement | null) { if (!canvas || !(canvas instanceof HTMLCanvasElement)) { throw new Error('canvas 엘리먼트를 입력하세요.'); } } abs..

코딩테스트를 볼 때 문제 해결법 5단계를 소개한다. 라이브 코딩테스트일 수도 있고, 면접에 참여한 상황에서 화이트 보드를 앞에 두고 많은 사람들이 지켜보는 가운데 새로운 과제를 해결해야 하는 상황일 수도 있다. 애플리케이션을 구축해야 한다든지, 검색 결과를 정렬해야 한다던지, 뭐가 됐건 5단계를 거치면 문제 없다. 1단계: 문제의 이해Understand the Problem우선 문제를 확실히 이해하는 단계이다. 모든 설명과 앞으로 살펴볼 다양한 방법들은 면접에 초점을 두고 있다. 즉, 대체로 문제를 이해하는 쪽으로 맞춰져 있다. 면접관에게 질문을 던져서 문제를 명확히 함으로써 확실히 이해하기 위해서다. 또한 뭔가 작업을 수행하면서 어떤 해결책을 마련할지, 애플리케이션이 어떻게 구동되도록 할지, 각 상황에..

유저는 모르더라도 개발자는 Mac OS, Windows에서 동작하는 서로 다른 그림판이 있으며, 서로 달라야 함을 알고 있다. 지금 강의에서 사용하고 있는 예제는 웹 서비스이기 때문에 IE과 Chrome 그림판을 생각해볼 수 있다. IE에서는 최신 기능은 고사하고 canvas 기능도 사용하지 못할 수도 있기 때문에 이 두 그림판의 구현이 달라야 한다. 1. 심플 팩토리 패턴 (Simple Factory)여러가지가 팩토리 패턴 중에서 가장 간단한 형태의 패턴이다. 보통 팩토리 패턴은 타입을 받아서 그 타입에 따른 객체를 반환한다. 이 패턴은 강의에서 배우는 23가지 패턴에 포함되지 않는다. 이 심플 팩토리 패턴을 기반으로 더 복잡한 팩토리 패턴을 배울 것이다.심플 팩토리 패턴은 단일책임원칙 위반이다. 이..

1. SOLID 원칙 개요두문자약어개념SSRP단일 책임 원칙 (Single Responsibility Principle): 한 클래스는 하나의 책임만 가져야 한다. OOCP개방 폐쇄 원칙 (Open/Closed Principle): 소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다.LLSP리스코프 치환 원칙 (Liskov Substitution Principle): 프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.IISP인스턴스 분리 원칙 (Interface Segregation Principle): 특정 클라이언트를 위한 인터페이스 여러 개가 범용 인터페이스 하나보다 낫다.DDIP의존관계 역전 원칙 (Dependency Inversio..

1. 자바스크립트 모듈도 싱글턴싱글턴은 몰랐더라도, ESModule을 사용하는 웹 개발자였다면 이미 사용하고 있는 패턴이다. 다른 파일을 import를 통해 가져오는 구문에서 사용되고 되고 있는데, JS 모듈은 기본적으로 싱글턴(singleton)이다. 그렇기 때문에 아래 코드에서와 같이 다른 이름으로 import를 해왔더라도 g1과 g2는 같다. 또한 grimpan.js 파일이 서로 다른 위치에 있더라도 g1과 g2는 싱글턴으로 같다.// index.tsimport g1 from './grimpan.js';import g2 from './grimpan.js';console.log(g1 === g2); // true// grimpan.tsclass Grimpan { constructor(canvas: ..