DevOps 썸네일형 리스트형 [Bundler] The meaning of migration to Vite 목차 1️⃣ Module Bundler의 이야기 2️⃣ Vite의 등장 3️⃣ Vite으로의 마이그레이션 과정 4️⃣ 글을 줄이며 CRA(Create React App)는 Webpack 기반의 React가 제공하는 명령어이다. (사실 이제는 공식문서에 모습을 보이지 않는다.) 이를 이용해 구축한 🔗 프로젝트에서 팀원과의 개발 속도가 늦어짐을 느꼈고, 고민 끝에 그 이유를 번들러의 긴 빌드시간이라고 생각하였다. 결국 Vite으로의 마이그레이션을 결정하였고, 그 과정을 기록해보고자 한다. 1️⃣ Module Bundler의 이야기 번들러를 알기 위해 옛날 JavaScript 이야기를 정리하고자 한다. 태초에 JavaScript는 module 개념이 없었다. 웹에서 간단한 동작만 하기 위해 만들어졌기에, 파일.. 더보기 [Network] What is CORS [ 2023/03 ] 2022/06에 작성한 내용을 보충하여 재발행합니다. ✈ CORS 아마추어 개발자들끼리 프로젝트를 진행하면 늘 한 번씩 CORS Error 를 보곤한다 원활한 문제 해결을 위해 이에 대한 개념을 더 살펴보기로 하자. SOP (Same-Origin Policy) 웹에서 돌아가는 어플리케이션은 사용자의 공격에 너어어어무 취약하다. 당장 DOM이 어떻게 되어있는지, 어떤 서버와 통신하는지, 리소스의 origin까지 다 알 수가 있다. 이에 대한 제한이 필요하였다. SOP는 "같은 출처에서만 리소스를 공유할 수 있다"라는 규칙을 가진 정책이다. 즉, 다른 출처의 리소스를 사용하는 것에 제한하는 보안 방식이다. (http ~ https 가 다르다거나 등등..) 그러나 웹상에서 다른 출처에 있.. 더보기 [E2E Test][Cypress] Cypress로 E2E 테스트해보기 1. E2E(End to End; 종단 간) 테스트 단위 테스트나 통합 테스트는 개발자의 관점에서 제품 일부분만을 선별하여 테스트한다 종단 간 테스트는 이와 달리 실제 사용자의 관점에서 테스트를 진행하며, 그런 의미에서 기능(Functional) 테스트 혹은 UI 테스트라고 불리기도 한다 예를 들면 “광고 생성을 테스트하기 위해서 광고 상품 정보 페이지에 입력하고 광고 자산(매체)을 연동 페이지로 이동해 페이지와 페이스북, 구글 정보를 입력했을 때 정상 동작한다”가 있습니다. 종단 간 테스트는 사용자의 실행 환경과 거의 동일한 환경에서 테스트를 진행하므로 실제 발생할 수 있는 에러를 사전에 발견할 수 있다 또한, 브라우저를 외부에서 직접 제어하여 API만으로 제어할 수 없는 브라우저 크기 변경, 키보드 .. 더보기 [AWS] 3-Tier Web Application Architecture 구성 프로젝트 1. Cloud Architecture 구현 1.1 실제 구현한 Architecture 구조 1.2 (2.1)에 대한 각 구성요소 및 구조에 대한 근거 1) 서울 region과 VPC : 한국 고객 위주로 운영이 되는 온라인 쇼핑몰이므로 서울 region 내 VPC를 구성하도록 구현하였다. 이는 비용 문제와 관리 측면에서의 장점으로 단일 region을 구축하였다. VPC는 가상 사설망을 말한다. VPC를 적용하면 네트워크를 구성할 수 있고, 각각의 VPC에 따라 다르게 네트워크 설정을 주어 독립된 네트워크처럼 작동하게 된다. 우선, CIDR(사이더)표기법으로 해당 네트워크 영역(ip대역)을 지정한다. 정부 네트워크 규모가 아니므로 C 클래스의 192.168.0.0/16 ip 주소를 할당한다. AWS 상의.. 더보기 이전 1 다음
