본문 바로가기

FrontEnd94

[DevOps] CI/CD란? 데브옵스(DevOps) 데브옵스는 소프트웨어 개발, 운영의 합성어로, 소프트웨어 개발자와 정보 기술 전문가 간의 소통, 협업, 통합을 강조하는 개발환경이나 문화를 말한다. 데브옵스란 개념은 클라우드와 함께 부상했다. 전통적인 인프라는 서비스 변화를 따라가기 어려웠으나, 클라우드로 인프라 구축과 관리가 쉬워지고 코드로도 관리가 가능해지면서 데브 옵스가 대두되기 시작했다. '타임 투 마켓(Time to Market)'이 비지니스의 성패를 좌우하는 비지니스의 핵심 가치가 되면서 린스타트업이 떠오른다. 린스타트업은 프로토타입을 시장에 내놓고 고객 피드백을 받아 지속 개선하며 비지니스 방향을 수정해나가는 방법론이다. 린스타트업을 실천하기 위해서는 지속적 통합(CI), 지속적 배포(CD)가 가능해야 했고, 이는 개.. 2022. 1. 15.
Virtual DOM, 가상 돔 이란? DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI 요소에 대한 노드가 포함된다. 웹 개발자가 JavaScript를 통해 콘텐츠를 수정할 수 있기 때문에 매우 유용하다. 또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고, 모든 코드 작업이 훨씬 쉬워지기 때문에 많은 도움이 된다. DOM의 문제점 DOM은 트리 구조로 되어 있어서 이해하기 쉽지만, 노드의 수가 많아질 수록 속도가 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다. 또한, 최근 모던 웹은 SPA(Single Page Applicat.. 2022. 1. 14.
[React.js]Recoil selector 비동기 처리 에러 Error: App suspended while rendering, but no fallback UI was specified. Add a component higher in the tree to provide a loading indicator or placeholder to display. const [data, setData] = useRecoilState(exRecoilSelecter); 위와 같이 미리 선언된 selector를 사용하기 위해서 useRecoilValue를 통해 접근할 시, 해당 에러가 발생한다. 비동기 처리 시(loading, 랜더링할 데이터가 도착하기 이전) 보여줄 fallback UI가 없다는 에러메시지이다. 해결 방법은 아래와 같다. 1. i18n.js 구성 변경(react.. 2022. 1. 13.
브라우저에서 서버까지 응답 흐름 인터넷 브라우저(IE, Chrome, Safari 등)에서 URL 입력이 들어왔을 때 서버까지의 흐름에 대해서 알아본다. 1. 사용자의 URL 요청 사용자가 브라우저 검색창에 www.google.com과 같은 주소를 요청하는 단계이다. 2. 브라우저의 URL 분석 URL은 인터넷에서 자원의 위치(Uniform Resource Locator)를 나타낸다. URL은 웹에서 정해진 유일한 자원의 주소일 뿐이다. URL의 기본적인 구조는 아래와 같다. Protocol(프로토콜) : 브라우저가 어떤 프로토콜(네트워크에서 데이터를 교환하거나 전송하기 위한 방법들의 세트)을 사용해야 하는 지, 예를들어 http, https, ftp가 있다. Domain Name(도메인 이름) : 어떤 웹 서버가 요구되는 지, 도메인.. 2022. 1. 11.
CORS(Cross-Origin Resource Sharing) 문제 해결하기 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 추가 HTTP 헤더를 사용하여, 실행 중인 웹 애플리케이션이 다른 출처(Origin)에 존재하는 리소스에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 Origin(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행한다. 예시: 프론트 엔드(https://domain-a.com)의 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우, 보안 상의 이유로 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한한다. 예를 들어, XMLHttpRequest와 Fet.. 2022. 1. 6.
[React.js] 빌드 시스템 정리 Babel, 바벨 크롬, 사파리, 파이어 폭스와 같은 에버그림 브라우저(Evergreen browser, 사용자의 업데이트 없이도 최신 버전으로 자동 업데이트를 수행하는 모던 브라우저)는 거의 대부분이 ES6 사양을 구현하고 있다. 하지만 인터넷 익스플로어(IE) 11의 ES6 지원 비율은 약 11%로 현저히 낮다. 또한, 매년 새롭게 도입되는 ES6 이상의 버전은 브라우저에 따라 지원이 제각각이다. 따라서 ES6+ 사양을 이용해 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 경우에 따라 구형 브라우저에서 문제 없이 동작시키기 위한 개발환경을 구축하는 것이 필요하다. 특히, 모듈의 경우 모듈 로더가 필요하다. Babel은 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하.. 2022. 1. 5.
반응형

티스토리툴바