코딩을 보라

👀본론으로 들어가기 전, 근황을 먼저 공유하겠다! 근황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..

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

✅섹션 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│ ├── 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..