본문 바로가기

분류 전체보기68

(웹 사이트 방법론)JAM Stack 옛날 1세대 웹사이트의 경우 프론트와 백엔드가 합쳐진 모놀리식 구조였다. 그러다 보니 사용자가 많아짐에 따라 서버에 부담이 커지고 로딩되는 컨텐츠 속도가 느려질 수 밖에 없었다. JAM스택은 이러한 구조를 벗고 더 빠르고 안전하게 페이지를 전달하기 위해 고안된 웹사이트 개발 방법론이다. 아래는 JAM스택 공식 페이지에서 발췌한 JAM스택 개념 설명이다. Fast and secure sites and apps delivered by pre-rendering files and serving them directly from a CDN, removing the requirement to manage or run web servers. - 웹 애플리케이션에서 렌더링 할 화면을 Pre-render 하고 이를 CD.. 2022. 8. 8.
OpenApi-Generator OpenApi-Generator란? yaml, json로된 api명세파일을 자동으로 코드로 자동 변환시켜주는 라이브러리 사용 이유 현재 프론트엔드 작업 시 api를 사용하기 위해 만들어진 Swagger UI를 보고 타입과 api를 직접 타이핑 해서 적용. 직접 입력하기 때문에 실수 가능성과 번거로움이 생기고, 만약 api 수정 시 변경 내용을 따라가서 수정해야함. 만약 OpenApi-Generator 사용시 이러한 번거로움과 실수를 방지하고 개발시간을 단축시켜 줄 수 있음. 사용 방법 1. install - 해당 프로젝트 root에서 yarn add @openapitools/openapi-generator-cli --dev 2. OpenApi 명세가 정의된 Json / Yaml 파일 준비 - Swagge.. 2022. 8. 7.
SSR(Server Side Rendering) MPA vs SPA MPA는 Multiple Page Application의 약자로써 이미 만들어진 정적 페이지를 요청에 따라 반환하는 방식이고, SPA는 Single Page Application의 약자로써 하나의 페이지에서 시작하여 동적으로 페이지를 만드는 방식이다. SSR vs CSR SSR은 Server Side Rendering의 약자로써 서버에서 코드를 실행해 렌더링 하는 것을 말한다. CSR은 Client Side Rendering의 약자로써 클라이언트단(브라우저)에서 코드를 실행해 렌더링 하는것을 말한다. 보통 MPA에선 SSR을 사용해 서버에서 렌더링 시켜서 브라우저로 페이지들을 넘겨주고, SPA에선 CSR을 사용해 서버에선 첫 빈 페이지와 모든 페이지와 로직이 들어있는 자바스크립트 번들.. 2021. 9. 26.
(설계)Micro Frontend 마이크로 프론트엔드란? 특정 기준으로 프론트엔드를 나누는 개발방식으로 프론트앱에 여러 기능과 섹션이 존재하여 통합해서 관리하기 힘들때 사용 위 그림은 여러 앱으로 나누어서 백엔드 또는 서로간에 소통하는 방식을 나타낸다. 마이크로 서비스 vs 마이크로 프론트엔드 개발방식 배포방식 마이크로 프론트엔드 장점 앱을 이해하기 쉬워진다. 각 앱의 규모가 작아지기에 이해하기 쉬워진다. 각 앱이 독립적이 된다. 분리되서 개발하기에 서로 독립적이다. 더 쉽게 개발하고 배포할 수 있다. 각 앱마다 단일팀에서 개발 가능하기 때문에 개발과 배포가 쉽다. 개발 속도가 빨라진다. 각 앱이 별도의 팀으로 구성될 수있기에 개발 속도가 빨라진다. CI/CD가 쉬워진다. 각 앱을 개별적으로 통합하고 배포할 수 있으므로 CI/CD 프로세.. 2021. 9. 13.