Dahee's Solution Hub

👀본론으로 들어가기 전, 근황을 먼저 공유하겠다! 근황2024년 11월부터 한국어능력시험 모의테스트 플랫폼 프로젝트 [TopikOn]에서 프론트엔드를 맡고있고, 2025년 1월 출시를 목표로 하고있다. [나를 포함한 프론트 2명 + 백엔드 1명 + 디자이너 1명 + 기획자 1명 + 풀스택/기획/매니저 1명] = 총 6명과 함께한다.모두가 리모트로 일하지만 가끔은 게더를 켜놓고 하루종일 같이 있는 기분을 느끼며 코딩할 때도 있다. 덕분에 밴쿠버에서 외롭지 않게 작업하고 있다ㅎㅎ 기술스택은 다음과 같다.- 프론트엔드: React Native + Next.js- 백엔드: NestJS React Native로는 이미 [루빗]에서 서비스 운영을 경험하고 [패스트캠퍼스 강의](접속 안되면 이 링크)까지 촬영해보았..

순수 Valnilla JS를 사용해 가계부 웹페이지를 만드는 프로젝트를 진행하고 있습니다.JS만을 사용하다보니, Next.js같은 프레임워크에서 제공하는 기능들을 직접 구현해보는 기회가 되었어요.아무래도 실무에서는 프레임워크를 사용할 확률이 훨씬 높겠지만, 프레임워크에서 어떤 부분들이 개발자의 수고를 덜어주는지 안다면 작동원리를 한층 깊게 이해하며 사용할 수 있게됩니다. ✅그래서 오늘은! JavaScript만으로 SPA를 직접 만들어보고 작동원리를 이해해보는 시간을 가져볼게요. SPA 화면 전환 오늘 만들어 볼 가계부 UI입니다.(Figma에서 expense tracker를 검색하면 나오는 템플릿을 사용했어요.) 페이지는 3개입니다.1. Home: 지출 내역을 날짜별로 보는 페이지2. Add/Edit..

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..

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..

https://www.npmjs.com/package/next-i18next next-i18nextThe 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를 추가하면, 해당 파일에서는 useTranslation을 ..

기존 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│ ├── tem..

파일구조에 대한 블로그 글을 쓰려는데... 파일트리를 도출하는 방법이 궁금해졌다. 무슨 명령어 하나만 치면 나오는거겠지? 그러했다. $ brew install tree tree를 깔고, $ tree tree 명령어를 실행하면 된다. 원하는 폴더만 트리를 보고싶다면, $ tree {폴더경로} 이렇게 사용하면 된다. 참 쉽다!! 참고 https://macinjune.com/all-posts/mac/tip/%EB%A7%A5unix-%ED%84%B0%EB%AF%B8%EB%84%90%EC%97%90%EC%84%9C-tree-command%EB%A1%9C-%ED%8A%B8%EB%A6%AC-%ED%98%95%EC%8B%9D%EC%9D%98-%ED%8C%8C%EC%9D%BC-%EA%B5%AC%EC%A1%B0-%EB%B..

React Native에서 폰트 사이즈는 어떻게 관리할까? 그냥 피그마에서 본 폰트크기가 10이라면, fontSize: 10 으로 하면 될까? 기기에 맞게 대응해주는 방법이 있다. 물론 더 세세하게 나누자면, 디바이스의 가로가 (a~b)px: 8, (b~c)px: 10, (c~d)px: 12 이런식으로 나눌 수도 있겠다. 그러나 그렇게까지는 세세하게 나눈 상황은 아니라서, 우리는 폰트사이즈르 계산할 때 하나의 함수를 통하고, 그 안에서 PixelRatio를 이용하기로 한다. PixelRatio란? 글꼴 크기에 대한 축척 비율을 반환합니다. 이 비율은 절대적인 글꼴 크기를 계산하는 데 사용되므로 이에 크게 의존하는 모든 요소는 이 비율을 사용해서 계산해야 합니다. 안드로이드: Settings > Displ..

너무나도 완벽한 블로그가 있어 그대로 첨부하였다.  https://yong-nyong.tistory.com/46#--%--env-d-ts