코딩을 보라

React Native는 webp를 지원하지만 , 애니메이션이 있는 webp는 지원하지 않는다. 라이브러리의 힘을 빌리자. 1. react-native-webp-format 설치 2. Android 추가 설정 Add the following dependencies to android/app/build.gradle: dependencies { ... implementation 'com.facebook.fresco:webpsupport:2.5.0' // Optionally, to display animated WebP images, you have to add: implementation 'com.facebook.fresco:animated-webp:2.5.0' ... } 3. iOS 추가 설정 - 라이브러..

해결책 Android SDK location path를 알맞게 변경해주면 된다. 검색 키워드 react native flipper not recognize android emulator 출처 https://stackoverflow.com/questions/71744103/android-emulator-unable-to-connect-to-flipper Android Emulator unable to connect to Flipper I followed the instructions here https://fbflipper.com/docs/getting-started/android-native/#diagnostics. I added the 3 dependencies in build.gradle, and a..

- https://www.youtube.com/watch?v=_iU9i9ivTrU

npm workspace - 특정 폴더의 링크를 node_modules 하위에 만들고 이를 모듈로 불러와 사용할 수 있다. - 패키지에서 사용하는 의존성을 중복없이 하나로 관리할 수 있다. NPM 워크스페이스와 모노레포 모노레포 솔루션은 lerna, yarn 등 여러가지가 있다. 이유는 모르지만 최근 lerna… jeonghwan-kim.github.io // 워크스페이스 생성 npm init --workspace workspace-a // 전체 패키지 설치 npm install // 특정 워크스페이스에 패키지 추가 npm install react -w workspace-a 워크스페이스 간 불러오기 // workspace-b/index.js module.exports = { name: "workspace..

React Native에서 Next.js로 웹뷰 이동을 할 때, React Native에 미리 세팅된 언어를 Next.js에도 똑같이 적용을 하고 싶다. 1) localStorage에 저장해서 클라이언트 렌더링 때 context 등의 전역변수로 관리한다. - 클라이언트 렌더링 할 때서야 언어를 감지하므로 UX 상 좋지 않다. 2) Next.js는 서버사이드 렌더링이기 때문에 서버에서 미리 유저의 언어를 알아낸다. - 이거다! HTTP Aceept-Language 헤더에 기반해 사용자의 local을 감지하면 된다. // RN 코드 import WebView from "react-native-webview"; // next.js 코드 // next-18next.config.js /** @type {impor..

AWS(Amazon Web Service) 입문자를 위한 강의 - 인프런 | 강의 요즈음 회사 및 다양한 프로젝트에서 종종 사용되는 AWS 서비스들의 핵심 이론을 배우며 뿐만 아니라 함께 따라하는 실습을 통하여 AWS를 온전히 내것으로 만들자!, [사진] AWS 핵심 기술, 기본기부 www.inflearn.com ✅섹션 0: AWS Introduction - ✅섹션 1: AWS IAM - ✅섹션 2: EC2 EBS: Elastic Block Storage - 저장 공간이 생성되며, EC2 인스턴스에 부착된다. - 디스크 볼륨 위에 File System이 생성된다. - EBS는 특정 Availability Zone에 생성된다. EBS 볼륨 타입 1) General Purpose SSD (GP2) 2) Pr..

https://www.npmjs.com/package/next-i18next next-i18next The easiest way to translate your NextJs apps.. Latest version: 14.0.0, last published: a month ago. Start using next-i18next in your project by running `npm i next-i18next`. There are 125 other projects in the npm registry using next-i18next. www.npmjs.com 1. 그대로 따라하면 된다!! 2. 주의할 점은, 페이지 level에서 getStaticProps를 추가하면, 해당 파일에서는 useTranslatio..

Webpack은 - 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러다. - 모듈 번들러란 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. - 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러다. - 모듈(module): 프로그램을 구성하는 구성 요소로, 관련된 데이터와 함수를 하나로 묶은 단위 그럼 Webpack을 왜 사용해야 할까 ? 옛날에는 페이지마다 새로운 html을 요청해서뿌려 주는 방식이였다면, 요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함한다. 연관 되어 있는 자바스크립트 종송석 있는 파일들을 하나의 파일로 묶어..

✅섹션 0: 클라우드를 사용해야 하는 이유 Security Group - 서버를 만들 땐 방화벽이 있어야 한다. - SSH - HTTP - HTTPS 웹이니까. 인스턴스 내부로 접근하려면? - connect - 그러나 쉘로도 접근해보기. ✅섹션 1: 로드밸런서 사용해보기 - 가용영역(Availabilty Zone): 데이터센터. - 리전(Region): 3개 이상의 가용역역을 논리적으로 묶음. - 인스턴스를 여러개 사용하게 될텐데, 주소가 여러개인데 사용자의 트래픽을 받아 분산시켜줄거야. - 로드밸런서는 가용영역을 최소 2개 이상 선택해야하는 이유: 한 가용영역이 문제가 생겨도, 다른 한쪽으로 버틸 수 있기 때문. 1. 우선 HTTP, HTTPS rule 포함한 SecurityGroup 만들기 2. 로드..

기존 react native 프로젝트 구조는, ├── apollo ├── assets │ ├── gf-asset │ │ ├── collection │ │ ├── roubisy │ │ └── themes │ ├── icons │ ├── image ├── c_components │ ├── analysis_stack │ ├── atom │ │ ├── icon │ │ └── text │ ├── home_stack │ ├── molecules │ ├── my_roubit_stack │ ├── on_alarm_stack │ ├── onboarding_stack │ ├── organisms │ ├── presenter │ ├── setting_stack │ ├── template │ └── universal ├── ..