본문 바로가기

전체 글102

서버 인프라 무중단 배포 아키텍쳐 서버 인프라 무중단 배포 아키텍쳐 최근 직장에서 프로젝트를 진행하면서, 사용자에게 배포를 할때, 지금 우리 회사의 방식과 인프라에서는 어떤 배포방식이 더 나은지 생각해 볼 시간이 있었다. 사용자는 어떻게 배포가 된지 모르게 하지만 서비스는 끊기지 않는 무중단 배포 방식을 알아보자. 무중단 배포 무중단 배포는 운영중인 서비스를 중단하지 않고, 새로운 소프트웨어 버전을 배포하는 기술이다. 무중단 배포의 핵심은 서로 다른 IP나 포트를 이용해 인스턴스의 트래픽을 제어하는 것이다. 무중단 배포가 가능하려면 고 가용성의 시스템 인프라가 설정되어야 한다. 무중단 배포의 방식도 여러가지인데 롤링 배포(Rolling Deployment), 블루-그린 배포(Blue-Green Deployment), 카나리 배포(Cana.. 2022. 10. 3. 13:51
서버사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 서버사이드 렌더링(SSR) 서버사이드렌더링(Server Side Rendering)은 서버가 사용자에게 보여줄 페이지를 모두 구성 한다음, 사용자에게 페이지를 보여주는 방식. 서버가 완전히 만들어진 HTML 파일을 구성하기 때문에 클라이언트 사이드 렌더링(CSR)보다 페이지 구성시 초기 로딩 속도가 빠르다는 장점이 있다. 하지만 서버를 이용해서 페이지를 구상하는 한계점이 있기때문에 페이지를 이동할 때마다 새로고침이되고, CSR보다 페이지 전환 속도가 느리다는 단점이 있다. 서버사이드 렌더링(SSR) 동작원리 1. 사용자의 페이지 요청시 서버는 리소스를 확인해 페이지내에 있는 스크립트와 HTML컨텐츠를 컴파일 및 준비 2. 컴파일된 HTML을 클라이언트 브라우저로 응답해줌 3. 브라우저는 HTML을 다운로.. 2022. 10. 2. 22:55
[오류 기록] tomcat startup.sh 바로 꺼짐 문제 tomcat startup.sh 바로꺼짐 Address already in use : JVM_Bind 오류 오류내용 톰캣 설치 후 startup.sh 를 실행하고 localhost:8080 으로 접속해도 톰캣 시작페이지가 뜨지 않았다. startup.bat으로 시작해도 구동되다가 순간적으로 오류가 나온다음 바로 꺼져가지고 오류내용도 보기가 힘들었다. 순간적으로 캡쳐를 해보니 Address already in use : JVM_bind 라는 오류가 있었다. 일단 내가 해본 해결방안은 1. JAVA_HOME 환경변수 확인해보기 2. 톰캣 포트 변경해보기 찾아보니 톰캣 설치 폴더 안에 /conf 폴더 안에 server.xml 의 포트를 변경해보았다. 해결 방안 server.xml 안의 톰캣 기본 포트를 우선적.. 2022. 10. 2. 15:08
WEB 개발 시간을 단축하는 방법 WEB 개발 시간을 단축하는 방법 웹 개발을 진행하면서 나도 모르고 있던 웹 개발 팁들을 정리해보고자 한다. 앞으로는 개발하면서 사용해야지..! 1. 디자인 모드(Design Mode) 디자인 모드는 웹 브라우저에서 임시로 화면을 수정할 수 있다. 크롬, 파이어폭스, 사파리 등의 웹 브라우저에서 F12 키를 눌러 개발자 도구를 켜고 아래와 같이 document.designMode = 'on'을 입력하면 브라우저에 텍스트나 이미지를 옮겨볼 수 있다. //디자인 모드 켜기 document.designMode = 'on' //디자인 모드 끄기 document.designMode = 'off' 2. 시간 절약을 위한 자바스크립트 코드 1) 변수 교체 다음은 간단히 변수를 교체하는 방법이다. 두 변수의 값을 교체.. 2022. 10. 2. 11:10
HTTP 상태 코드 (status code) HTTP 상태 코드 (status code) 대게 개발을 진행하거나 특정 사이트에 접속하면 "404 NOT FOUND" 라는 에러 코드를 본적이 있을 것이다. 상태 코드 에러가 날때마다 매번 구글링하여 찾아보았는데, 이제는 내가 정리해서 내 블로그에서 찾아봐야겠다! HTTP 상태코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려준다. 모든 응답 코드는 5개의 그룹으로 나누어지며 첫번째 숫자는 응답의 클래스를 정의하고, 마지막 두자리는 클래스나 분류 역할을 하지 않는다. 상태코드는 RFC2616 section-10에 정리되어있다. https://tools.ietf.org/html/rfc2616#section-10 첫자리의 5가지 그룹은 다음과 같다. - 1xx (정보) : 요청을 받았으며 프로세스를 .. 2022. 9. 30. 23:18
WebStorage API WebStorage API Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공함. WebStorage 개념 Web Storage의 두가지 방식은 다음과 같다. sessionStorage 페이지 세션이 유지되는 동안, 브라우저가 열려있는 동안 제공됨. - 세션에 한정해, 브라우저 또는 탭이 닫힐 때까지만 데이터 저장 - 데이터를 서버로 전송하지 않음 - 저장 공간이 쿠키 보다 크다 (최대 5MB) LocalStorage 로컬스토리지는 브라우저를 닫았다 열어도 데이터가 남아있다. - 유효기간 없이 데이터를 저장하고, JavaScript를 사용하거나 브라우저 캐시 또는 로컬저장 데이터를 지워야만 사라짐 - 저장 공간이 셋 중 제일 크다. - 동일한 컴퓨.. 2022. 9. 30. 10:28
웹 브라우저에 URL을 입력하면 일어나는 일 웹 브라우저에 URL을 입력하면 일어나는 일. 우리 일상생활에서 항상 사용하는게 웹 사이트이며, www.naver.com과 같은 도메인을 사용하여 사이트에 접속한다. 과연 우리가 일반적으로 사용하는 주소창에서 주소를 입력하고 엔터키를 치면 무슨일이 일어날까? AWS 한국 블로그를 읽어보면서 알아보자. 기초 지식 웹 브라우저에 URL(https://channy.creation.net/blog)을 입력하고 Enter 키를 누르게 되면, 브라우저는 인터넷에서 사이트를 호스팅하는 서버를 파악해야한다. 이는 channy.creation.net 도메인을 검색하여 주소를 찾는다. 서버나 휴대폰, 스마트 냉장고 등 인터넷의 각 디바이스에는 IP주소라는 고유한 주소가 있다. IP주소에는 3.34.220.186와 같은 4.. 2022. 9. 29. 23:15
Babel과 polyfill Babel 바벨은 자바스크립트 컴파일러이다 . ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는데 주로 사용되는 도구 체인이다. 아래는 바벨이 할 수 있는 주요 기능이다. - 변환 구문 - 대상 환경에서 누락된 폴리필 기능(core-js와 같은 폴리필을 통해) - 소스 코드 변환(codemods) // Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) { return n + 1; }); JSX 에서의 Babel 다음과 같은 커맨드 명령어로 설치 할 수 있다. npm install --save-dev @babel/.. 2022. 9. 29. 16:05
리액트 가상 DOM(React Virtual Dom) React Virtual DOM React 가상 DOM을 알기 위해선 우선 DOM의 개념부터 알아야한다. DOM(Document Object Model): 문서 객체 모델 문서 객체 모델(DOM)은 XML 이나 HTML 문서에 접근하기 위한 일종의 인터페이스이다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각 요소에 접근하는 방법을 제공한다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같은 계층 구조로 표현된다. DOM(Document Object Model)의 종류 1. Core DOM : 모든 문서 타입을 위한 DOM 모델 2. HTML DOM : HTML 문서를 위한 DOM 모델 3. XML DOM : XML 문서를 위한 DOM 모델 DOM(Document Object Model.. 2022. 9. 28. 00:29
728x90

티스토리툴바