그럼에도 불구하고

들어가며 오늘은 회사에서 새로운 프로젝트를 시작하기 위해 리액트 프로젝트를 자동으로 AWS에 배포하는 과정을 진행했고 마주쳤던 이슈에 대해서 정리해보고자 합니다. 이 포스트는 아래와 같이 단계별로 구성되어 있습니다. 1. S3로 배포하기 2. CloudFront로 배포 강화하기 - 예정 3. Github Action으로 배포 자동화하기 - 예정 기존 배포 과정과 문제점 기존에는 AWS 서비스에 대해서 잘 몰라 Nginx를 이용해서 정적 파일을 제공하도록 설계하고 이를 EC2에 올려 배포했습니다. 여기서 문제점은 단순히 정적 파일을 제공하는데 EC2라는 자원은 상당히 비싸다는 것입니다. 웹 페이지의 경우 특정 시간에는 접속이 낮은 경우가 많은데 EC2로 배포를 진행하게 될 경우 시간당 과금이 발생하기 때문..

CSS - Element가 배치되는 방법 1. display : 기본적으로 Element의 배치 형식을 설정 1) display : block; :block 형식은 벽돌을 쌓은 것처럼 위에서 아래로 순서대로 채워짐 (기본적으로 block인 태그: div, p , ...) 예시:http://jsbin.com/xabafaxasi/1/edit?html,css,output 2) display : inline; : 기본적으로 왼쪽에서 오른쪽으로 가지만 크기를 초과할 경우 다음 라인으로 넘어감 (아주 기본적인 스타일) 예시: http://jsbin.com/mefebos/2/edit?html,css,output (기본적으로 inline인 태그: span,a ,...) 2. position 1) static :기본값,..

Servlet - Hellow World 출력하기(intellij) 1. Java Enterprice -> Web Application 열기 : 이 때 다운받은 WAS서버(이 포스팅에는 Tomcat 사용) 종류와 폴더의 위치를 정해주고 난 후 Next 버튼을 누르고 난 후에 프로젝트명을 설정해줍니다. 2. Servlet 파일 만들기 : 사진을 따라서 서블릿 클래스 파일을 만듭니다. 3. 소스코드 입력하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 package examples; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import..

웹 페이지 화면에서 클릭이나 드래그 등의 동작에 반응을 주고 싶을 때 사용하는것이 이벤트 리스너이다. 여기에서는 간단하게 클릭한 정보를 콘솔에 출력하는 실습을 할 것이다. 이벤트: 이벤트는 브라우저가 받는 활동들을 의미한다. Example : 보통 화면이나 요소를 클릭, 드래그, 휠 조정등 다양한 입력들을 이벤트라고한다. 이벤트 리스너(핸들러): 특정한 이벤트가 일어났을때 해당 이벤트에 대한 반응을 의미한다. Example : 검색버튼을 클릭, 로그인버튼을 클릭 등등 다양하다. 학습을 위해서는 아래의 코드를 통해 브라우저로 실행한뒤 직접클릭해보면서 코드를 이해하는게 좋다 JS 파일 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var el = document.querySelector("..

Ajax 통신 정의 Ajax 통신은 비동기적인 웹 어플리케이션의 제작을 위한 웹 개발 기법이다. *여기서 비동기적인이란 서버에 웹페이지를 요청할 때 정식루트로 데이터가 오가든 말든 서버에 요청을 따로 요구할 수 있다는 것이다. 쉽게 얘기하면 한 페이지에서 어느 부분에 대한 변화를 요청한다면( 예시: 네이버 메인에서 웹툰, 푸드 카테고리 변화) 그 부분에 대해서만 통신하여 결과를 변화로 반영하는 형식이다. Ajax 통신의 필요성 단적으로 말해서 Ajax 통신이 없다면 페이지의 한 부분만 변화시키고 싶어도 항상 서버와 클라이언트사이에는 전체 페이지의 데이터를 주고받아야한다. 이는 중복되는 데이터를 계속주고 받음으로써 대역폭낭비를 야기하고 대역폭 낭비는 곧 금전적 손실과 속도 하향 등 많은 문제를 야기한다. ..

JSP란? JSP(자바 서버페이지)는 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어이다. - 위키백과 위의 정의를 쉽게 설명해보겠습니다. 서버에서 요청에 따라 동적으로 처리하는 건 PHP와 매우 유사합니다. 사실상 자바로 동적 웹을 제어하기 위해서 만들어진것이 JSP입니다. 대부분 서블릿과 JSP를 비교하는데 차이점을 알아두시는게 좋을 것같습니다. 서블릿: 자바를 기반으로 하여 웹페이지를 동적으로 제작함 -> 자바문법을 따라야 하며 HTML태그및 코드들을 일일이 다 출력해줘야함 -> 페이지를 디자인하고 작성하는데 불편함 JSP: HTML 표준에 따라서 작성하고 PHP처럼 중간에 삽입이 가능함 -> 디자인에 효율적 JSP의 실행 구조 JSP는 Tomcat과 같은 내..

서문 웹 프로그래밍에서 데이터를 다루는 부분은 아주 다양합니다. 예를 들어 페이지 안에서만 하는 경우, 브라우저가 처리하는 경우, 서버가 다루는 경우 등 여러 범위에 퍼져있기 때문에 웹 프로그래밍 전체에서 데이터의 범위를 표현하기위해서 Scope라는 개념을 사용합니다. Scope란? 변수의 유효범위(접근성)과 생존기간을 뜻합니다. 범위의 종류는? 기본적으로 4가지 scope를 사용하여 표현합니다. page Scope < request Scope < Session Scope < Application Scope 순서대로 점차 넓은 범위를 가지게 됩니다. 4가지 Scope는? Application : 웹 어플리케이션이 시작되고 종료될 때까지 변수가 유지되는 경우 사용 Session : 웹 브라우저 별로 변수가..

Page_scope :한 페이지가 실행되는 동안만 사용되는 변수 범위 특정 서블릿이나 JSP가 실행되는 동안에만 정보를 유지 하고 싶은 경우가 있습니다. 이 경우에 사용되는 것이 page scope입니다. 이번 시간에는 page scope에 대해서 알아보도록 하겠습니다. *사용방법 setAttribute, getAttribute로 사용 지역변수처럼 사용한다. EL이나 JSTL에서 편하게 사용할수 있다. *자세한 내용 PageContext 추상 클래스를 사용한다. JSP 페이지에서 pageContext라는 내장 객체로 사용 가능 하다. forward가 될 경우 해당 Page scope에 지정된 변수는 사용할 수 없다. 사용방법은 Application scope나 Session scope, request s..

Request Scope 사용이유: 웹 브라우저로부터 WAS가 요청을 받은 후, 포워드 되는 동안 유지하고 싶은 정보가 있을 경우 request scope를 사용합니다. 이번 시간에는 request scope에 대해 알아보도록 하겠습니다. 정의: request scope는 서블릿 기준으로 클라이언트가 서버에 요청하는 HttpServletRequest객체를 의미합니다. 쉽게 말해서 클라이언트가 서버에 전달하는 변수라고 생각하시면 좋습니다. Request Scope가 Page_scope보다 넓은 범위인 이유: 우선 Request Scope는 페이지에 관한 모든 정보를 가지고 있습니다. 그리고 request는 단순히 요청에만 쓰이는 변수가 아니라 서버 내에서 포워딩( 하나의 페이지 처리 프로세스가 다른 프로세..

Session Scope 사용이유: 접속한 웹 브라우저별로 정보를 관리 하고 싶을 때 세션 scope를 사용합니다. 이번 시간엔 이러한 세션 스코프에 대해서 좀 더 자세히 알아보도록 하겠습니다. 정의: session scope 웹브라우저 별로 관리하는 변수범위를 의미합니다. 쉽게 예를 든다면 같은 페이지를 보더라도 다른 아이디로 로그인했다면 브라우저 마다 각각 다른정보가 표현될 수 있습니다.(장바구니, 구매목록 등) 이를 관리해주기 위해서 서로다른 브라우저가 각각접속할때 각 브라우저에 따라서 관리를 하기위한 변수범위가 바로 session scope입니다. Session scope가 Request scope보다 범위가 넓은 이유: request scope는 url을 요청(페이지에 접속)할 때 서버에 req..