코딩을 보라

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

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

파일구조에 대한 블로그 글을 쓰려는데... 파일트리를 도출하는 방법이 궁금해졌다. 무슨 명령어 하나만 치면 나오는거겠지? 그러했다. $ 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..