프론트엔드/etc8 MSA(마이크로서비스 아키텍처) [ MSA(마이크로서비스 아키텍처) ]MSA는 여러 개의 작은 서비스로 구성되어 각 서비스가 독립적으로 개발되고 배포되는 구조즉 하나의 큰 어플리케이션을 여러개의 작은 어플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍쳐 ▶ MSA의 등장배경Monolithic Architecture는 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어있는 형태 아직까지는 많은 소프트웨어가 Monolithic 형태로 구현되어 있음소규모 프로젝트에는 Monolithic Architecture가 훨씬 합리적임 간단한 Architecture이고, 유지보수가 용이하기 때문하지만 규모가 커지게 되면Monolithic Architecture 단점이 명확함서비스/프로젝트가 커지면 커질수록, 영향도 파악 및 전체 시스템 구조의.. 2024. 3. 23. CSS vs CSS-in-CSS vs CSS-in-JS [ CSS ] CSS는 지금까지 사용하면서 명확한 단점이 존재했음 모듈화가 어려움 클래스 이름의 최소화 문제(방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯함) CSS의 우선순위를 파악하기 어려움 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해졌지만 아직 불편한 점이 많이 있음 [ CSS-in-CSS ] Pre-/Post-processors (CSS 전처리기) CSS Frameworks CSS Modules ▶ Pre-/Post-processors 흔히들 알고 있는 CSS 전처리기를 의미 자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램 CSS가 변수와 중첩을 제공하기 이전부터, 전처리기를 통해 변.. 2024. 1. 12. CSS in JS [ CSS in JS ] CSS스타일을 추상화한 JS객체 대신, CSS스타일 문법을 그대로 사용하여 스타일 컴포넌트로 사용할 수 있는 것 현재 사용 중인 스타일만 DOM에 포함 JS와 CSS 사이의 상수 및 함수를 교환할 수 있음 Global namespace로 클래스명을 다르게 짓기 위한 고충을 피할 수 있음 미사용 코드를 검출 가능 CSS 로드 우선 순위 이슈를 해결할 수 있음 [ styled-components ] 손쉬운 유지보수(컴포넌트에 영향을 미치는 스타일을 찾기 위해 여러 파일을 검색할 필요 x) 고유한 CSS 클래스 생성 - 스타일 컴포넌트를 추척해서 css 로 작성된 `` 스타일을 고유한 css 클래스 이름으로 변경 스타일 컴포넌트에 의해 자동 생성된 고유 CSS 클래스 이름은 sc-접두.. 2024. 1. 12. 프론트 배포 실습2 대체 도메인 설정 및 서브 도메인 등록 실습하기 전 이론 및 실습 프론트 배포 이론 프론트 배포 이론 [ AWS 배포 방법들 ] AWS EC2를 활용한 배포 AWS S3와 CloudFront를 활용한 배포 AWS amplify를 활용한 배포 Nginx를 활용한 배포 각 방법에 따라 배포할 수 있는 서버가 다르며 배포할수 있는 서버란 웹서버와 hyeon-e.tistory.com 프론트 배포 실습 프론트 배포 실습 S3 + cloudfront를 활용하여 배포후 GitHub Action으로 CI/CD 적용 실습 실습하기 전 배포 이론 https://hyeon-e.tistory.com/219?category=1107791 프론트 배포 이론 [ AWS 배포 방법들 ] AWS EC2를 활용한 배포 AWS S3와 C.. 2023. 12. 28. 프론트 배포 실습 S3 + cloudfront를 활용하여 배포후 GitHub Action으로 CI/CD 적용 실습 실습하기 전 배포 이론 https://hyeon-e.tistory.com/219?category=1107791 프론트 배포 이론 [ AWS 배포 방법들 ] AWS EC2를 활용한 배포 AWS S3와 CloudFront를 활용한 배포 AWS amplify를 활용한 배포 Nginx를 활용한 배포 각 방법에 따라 배포할 수 있는 서버가 다르며 배포할수 있는 서버란 웹서버와 hyeon-e.tistory.com 배포순서 AWS IAM 사용자 생성 S3 버킷 설정 cloundfront 배포 GitHub Action CI/CD 적용 완료 후 캐쉬 무효화 추가!! [ AWS IAM ] 사용자 생성 자신이 원하는 이름을 지으.. 2023. 10. 30. 프론트 배포 이론 [ AWS 배포 방법들 ] AWS EC2를 활용한 배포 AWS S3와 CloudFront를 활용한 배포 AWS amplify를 활용한 배포 Nginx를 활용한 배포 각 방법에 따라 배포할 수 있는 서버가 다르며 배포할수 있는 서버란 웹서버와 WAS를 말함 웹서버 vs WAS 웹서버 클라이언트(사용자)가 웹 브라우저에게 어떠한 페이지 요청을 하면 웹 서버에서 그 요청을 받아 정적 컨텐츠( 단순 HTML, CSS, JS, 이미지, 파일 등 즉시 응답한 컨텐츠 )를 제공하는 서버 웹 서버가 동적 컨텐츠를 요청 받으면 WAS에게 해당 요청을 넘겨주 WAS에서 처리할 결과를 클라이언트(사용자)에게 전달해주는 역할 WAS 웹서버와 웹 컨테이너가 합쳐진 형태로써 웹 서버 단독으로 처리할수 없는 DB의 조회나 다양한 .. 2023. 10. 28. SWR2 자동갱신 포커스 시에 갱신 페이지내에 다시 포커스하거나 탭을 전환할때 SWR은 자동으로 데이터를 갱신함 최신 상태로 즉시 동기화하라 수 있어 유용함 이 기능은 기본적으로 활성되어 있으나 revalidateOnFocus 옵션을 통해 이를 비활성화 할 수 있음 인터벌 시에 갱신 SWR은 자동 데이터 다시 가져오기 옵션을 제공하여 hook과 관련된 컴포넌트가 화면상에 있을 때만 다시 가져옴 refreshInterval 값을 설정하여 활성화할 수 있습니다. useSWR('/api/todos', fetcher, { refreshInterval: 1000 }) refreshWhenHidden, refreshWhenOffline과 같은 옵션도 있음 위에 두 옵션은 기본적으로 비활성이므로 SWR은 웹 페이지가 화면상에.. 2023. 10. 25. SWR SWR swr이란 HTTP 캐시 무효화 전략인 stale-while-revalidate에서 유래된 데이터 패칭을 위한 리액트 라이브러리 SWR의 기본적인 동작은 우선 캐시(stale)에서 데이터를 불러오고 검증을 위한 요청(revalidate)을 보내고 최신 데이터로 업데이트 하는 과정을 거침 SWR을 사용하는 컴포넌트는 지속적이고 자동적으로 데이터 업데이트가 이루어짐으로 항상 최신 상태를 유지할 수 있음 SWR 장점 자동화가 간단 가볍고 빠르기 때문에 데이터의 업데이트 또한 빠르게 이루어져 reactive한 환경을 갖출 수 있음 SSR, SSG 환경에서 모두 사용할 수 있음 최신인 React18의 Suspense 등의 기능들과 호환됨 SSR, SSG SSR 서버에서 사용자에게 보여줄 페이지를 모두 구성.. 2023. 10. 25. 이전 1 다음
