Arrow Function
function (e) {
return "return "
//es5 function (e) { return "return " } //es6 (e)=> "return"
JavaScript
예제코드
const years = [ { year : 2000, date : '크리스마스' }, { year : 2001, date : '롤리팝' }, , { year : 2010, date : '안드로이드' }, { year : 2015, date : '리액트네이티브' }, { year : 2018, date : '곧 2019' } ]; const result = years.filter((data) => data.year > 2000);//예제코드 console.log(result);
JavaScript
문법비교
ES5 문법비교
const result = years.filter(function(data) { return data.year > 2000; }) console.log(result);
JavaScript
Default Params
파라미터의 기본 값을 지정하는 것
const defaultValue = "2019"; function printYears(years = defaultValue){ console.log(years); } printYears();
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : Spread, Rest Operator  (0) 2019.06.08
ES6 : 비구조화  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08
import & export
module.export → 명시적으로 간편하게 import & export 할 수 있도록 제공
//includes.js 내용 export const fruits = ['apple','banana','potat']; export const test = "asdf" export default test;
JavaScript
import {fruits} from './includes'; import {test} from './includes'; import abc from './includes'; console.log(fruits); console.log(test); console.log(abc); //결과 ['apple','banana','potat'] "asdf" "asdf"
JavaScript
Class
코드비교 (ES5)
클래스라는 개념이 없어서 함수로 정의
// Classes // es5 function Animal() { this.type = 'chosic'; this.tail = false; } //프로토타입에 메소드를 저장시키는 방식으로 메소드 선언 Animal.prototype.setType = function(type) { this.type = type; } Animal.prototype.getType = function(){ return this.type; }
JavaScript
주요기능
class 지원
class 로 선언할 수 있으며 constructor로 초기화
static 으로 선언가능
// es6 class Animal{ //constructor를 사용한 초기화 constructor(type,tail){ this.type = type; this.tail = tail; } cry(value = 'Woof Woof') { console.log(value); } //static 메서드 선언가능 static instance(){ console.log('instance!!'); } } dog.cry('woof'); Animal.instance();
JavaScript
상속 & Overriding
Java와 동일하게 extends 를 사용하여 상속
// inheritance class Cat extends Animal { constructor(type, tail, color){ super(type,tail); this.color = color; } cry (value = "Meow Meow"){ console.log(value); } } let cat = new Cat('Cat',true,'yellow'); cat.cry(); console.log(cat);
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08
ES6 : includes, let & const  (0) 2019.06.08
Map
다른 언어에서의 Map 사용법과 유사
**파라미터로 2차원 배열을 받음
// Map let map = new Map([['id','dooboolap'],['test','1']]); map.set('testId', 'test'); map.get('testId'); console.log(map); // Map { 'id' => 'dooboolap', 'test' => '1', 'testId' => 'test' } console.log(map.size); // 3 // 포함여부 console.log(map.has('testId')); // true // 전체값을 보는것 console.log(map.entries()); // [Map Iterator] { [ 'id', 'dooboolap' ], [ 'test', '1' ], [ 'testId', 'test' ] } console.log(map.keys()) // [Map Iterator] { 'id', 'test', 'testId' } console.log(map.values()); // [Map Iterator] { 'dooboolap', '1', 'test' } map.delete('testId'); map.clear();
JavaScript
Set
중복을 허용하지 않는 자료구조
const set = new Set([1,1,1,1,1,1,2,2,2,2,2,2,3,3,3,4,4,4,4]); set.add(5); set.add(4).add(5); console.log(set); console.log(set.size); set.delete(5); set.clear();
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08
ES6 : includes, let & const  (0) 2019.06.08
for...of
Java에서 for...in 문법과 동일한 기능
예제코드
예제코드 1
//예제코드 let years = [2001,2010,2015,2018]; for( let year of years) { console.log(year); }
JavaScript
//결과 2001 2010 2015 2018
JavaScript
예제코드 2
iterable이기 때문에 문자열에서도 다음과 같이 적용됨
//예제코드 const str = "I love you"; for( let char of str) { console.log(char); }
JavaScript
//결과 I l o v e y o u
JavaScript
문법비교
ES5 문법비교
forEach문 중간에 break 문 사용 불가 ( 반복 중간에 종료 불가)
//es5 years.forEach(year) => { console.log(year) }
JavaScript
//결과 2001 2010 2015 2018
JavaScript
javascript의 for...in 구문과 비교
for...of 문이 출시 이후로 사용잘 안함
//예제코드 let years = [2001,2010,2015,2018]; for( let year in years) { console.log(year); }
JavaScript
//결과 0 1 2 3
JavaScript
결과 타입 : string

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
ES6 : includes, let & const  (0) 2019.06.08
includes
문법 비교
indexOf 를 통해 포함 여부를 확인하는 방식 → includes함수를 사용하여 확인하는 방식으로 추가
// includes let years = [2001, 2010,2015,2018]; const fruits = ['apple','banana','potat']; //post console.log(years.indexOf(2001) !== -1); console.log(fruits.indexOf('apple') !== -1); //es6 console.log(fruits.includes('apple'))
JavaScript
let & const
var 로 변수 선언 → let, const로 변경
//ECMA Script 2015 = es6 //hoisting if(true) { var myId = 'dooboolab'; } console.log(myId);
JavaScript
if(true) { console.log(myId); var myId = 'dooboolab'; }
JavaScript
호이스팅 → 스코프 밖에서 변수를 사용할 수 있고 선어되지 않은 변수에 대해서도 undefined로 처리
let, const는 호이스팅을 하지 못하게 함
if(true) { console.log(myId); let myId = 'dooboolab'; } //에러
JavaScript
const
assign된 변수들에 대해서 변경되지 않도록 함 (배열, 객체의 경우 변경 가능)
//object const fruit = {}; fruit.first = 'apple'; console.log(fruit); //array const apples = [0,1,2]; apples[0] = 5; console.log(apples);
JavaScript

'Web 개발 > JS ' 카테고리의 다른 글

ES6 : 비구조화  (0) 2019.06.08
ES6 : Arrow Function, Default Params  (0) 2019.06.08
ES6 : import & export, Classes  (0) 2019.06.08
ES6 : Map & Set  (0) 2019.06.08
ES6 : for...of  (0) 2019.06.08
개요
서블릿 프로그램의 핵심은 Servlet 인터페이스를 이해하는 것
Servlet을 먼저 배운 다음 HttpServlet을 사용하는 방법을 배워야 함
CGI 프로그램과 서블릿
1.CGI의 이해
CGI : 웹서버와 프로그램이 주고받는 규칙
CGI프로그램: CGI 규칙에 따라 웹서버와 데이터를 주고 받도록 작성된 프로그램
[웹브라우저] ——요청→ [웹서버] —————실행→ [프로그램] [웹브라우저] ←응답—— [웹서버] ←결과(CGI 규칙)- [프로그램]
2. 서블릿
: 자바로 만든 CGI 프로그램
다른 CGI와 다른점 : 웹서버와 직접 데이터를 주고받지 않음, 전문 프로그램에 의해 관리됨
서블릿 컨테이너
: 서블릿의 생명주기를 관리하는 프로그램
서블릿 컨테이너가 서블릿을 대신하여 CGI 규칙에 따라 웹 서버와 데이터를 주고 받음
⇒ 더 이상 개발자가 CGI 규칙을 신경 쓸 필요가 없어짐
대신, 서블릿 컨테이너와 서블릿 사이의 규칙을 알아야 함
[웹서버] ————요청위임→ [서블릿 컨테이너] ——실행→ [서블릿(.class)] [웹서버] ←결과(CGI 규칙) — [서블릿 컨테이너] ←결과(Servlet 규칙)- [서블릿(.class)]
** 서블릿 컨테이너에 형식을 맞추어서 올리는 이유는 서블릿 컨테이너가 웹서버에 CGI규칙에 맞추어서 결과를 보내기 때문
웹프로젝트 준비
1. 웹 프로젝트 생성
View Original
http ://127.0.0.1:9999/web01 (웹어플리케이션 이름)/Hello(서블릿이름)
WebConent : 웹 컨텐트 파일을 저장할 작업 폴더, 서버에 자동 배치할 때 이 폴더의 내용물을 서버의 배치 폴더로 복사
2. 웹프로젝트 폴더 구조
View Original
src : 자바 소스 파일 두는 곳, 서블릿 클래스나 필터,프로퍼티 파일, 리스너 등 필요한 모든 자바 클래스 파일을 두는 곳
build/classes : .class 파일이 놓이는 곳
WebContent/WEB-INF : 웹 애플리케이션의 설정과 관련된 파일을 두는 곳 이 폴더는 클라이언트에서 요청할 수 없음 ⇒ HTML,JS,CSS 등 파일 두면 안됨
WebContent/WEB-INF/web.xml : 웹 애플리케이션의 배치 설명서 (DD 파일)
서블릿이나 필터, 리스너, 매개변수, 기본 웹페이지 등 웹어플리케이션 컴포넌트의 배치 정보 작성
서블릿 컨테이너는 클라이언트 요청을 처리할 때 이 파일의 정보를 참고
(서블릿을 실행하기전 참고) 서블릿 클래스 찾거나 필터 실행하여 수행
WebConent/WEB-INF/lib
: jar를 두는 폴더 ( jar : 클래스 파일 + 프로퍼티 파일을 모아놓은 보관소)
서블릿 만들기
1. 서블릿 작성
public class HelloWorld implements Servlet{ ServletConfig config; @Override public void init(ServletConfig config) throws ServletException { System.out.println("init() 호출"); this.config = config; } @Override public void destroy() { System.out.println("destroy() 호출함"); } @Override public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException { System.out.println("service() 호출됨"); } @Override public ServletConfig getServletConfig() { System.out.println("getServletConfig() 호출됨"); return this.config; } @Override public String getServletInfo() { System.out.println("getServletInfo() 호출됨"); return "version=1.0; author=jh; copyright=jh"; } }
Java
2. javax.servlet.Servlet 인터페이스
Servlet 인터페이스를 구현해서 컨테이너가 그에 해당하는 서블릿( CGI 프로그램 .class)을 호출
1) 생명주기에 관련 메서드 : init() , service, destroy()
init() : 서블릿 컨테이너가 서블릿을 생성한 후 초기화 작업 수행하는 메서드 클라이언트의 요청을 처리하기 전 준비 작업 ex) DB 연결, 외부스토리지 서버 연결, 프로퍼티 로딩 등
service() : 클라이언트가 요청할 때 마다 호출하는 메서드 실질적으로 서비스 수행(할일 작성)
destroy() : 서블릿 컨테이너가 종료되거나 웹 애플리케이션이 멈출 때 수행 ex) 확보한 자원을 해제, 데이터 저장 등 마무리 작업 수행
2) Servlet 인터페이스 기타 메서드 : getServletConfig(), getServletInfo()
getServletConfig() : 서블릿 설정 정보를 다루는 ServletConfig 객체를 반환 서블릿 이름, 서블릿 초기 매개변수, 서블릿 환경정보 등 얻을 수 있음
getServletInfo() : 서블릿 작성자에 대한 정보, 권리 등을 담은 문자열을 반환
3. 서블릿 배치 정보 작성
배치 설명서 파일(DD 파일) (WEB-INF/web.xml)에 서블릿을 등록
서블릿 컨테이너가 찾을 수 있도록 등록하는 과정
<!-- 서블릿 선언 --> <servlet> <servlet-name>Hello</servlet-name> <servlet-class>lesson03.servlets.HelloWorld</servlet-class> </servlet> <!-- 서블릿을 URL과 연결 --> <servlet-mapping> <servlet-name>Hello</servlet-name> <url-pattern>/Hello</url-pattern> </servlet-mapping>
XML
등록되어 있지 않다면 ?
[웹서버] ————요청위임 (이 과정에서 찾지 못함)→ [서블릿 컨테이너] ——실행→ [서블릿(.class)]
1) 서블릿 선언 <servlet>
servlet-name : 서블릿의 별명 (서블릿과 이름이 같을 필요 없음)
servlet-class : 패키지이름을 포함한 서블릿 클래스명
2) 서블릿 URL 부여 <servlet-mapping>
serlet-name : 별명으로 서블릿을 가져옴
url-pattern : 서블릿을 요청할 때 클라이언트가 사용할 URL (/ = 컨텍스트 루트 의미)
4. 서블릿 구동 절차
서블릿 컨테이너 HelloWorld
1) 요청 ——> 2) 서블릿인스턴스 없으면 클래스 로딩 ————————> 인스턴스 생성 ———————> 생성자 호출 ————————> init() 호출 ————————> 3) service() 호출 ——————> <—— 4)응답 5)컨테이너 종료 → 6) destory() 호출 ——————>
컨테이너는 서블릿 인스턴스를 가지고 있음
요청이 오면 인스턴스를 먼저 확인하고 없으면 클래스를 로딩
서블릿 인스턴스는 하나만 생성되어 사용되기 때문에 인스턴스변수에 특정 사용자를 위한 데이터를 보관해서는 안됨
클라이언트가 보낸 데이터를 일시적으로 보관하기 위해서 서블릿 인스턴스 변수를 사용하면 안됨
5. 웰컴 파일들
디렉토리 기본 웹 페이지
컨텍스트 루트 디렉토리( ex. http:// 127.0.0.1:9000/web03)에 요청 시 응답
WEB-INF/web.xml 일부분
<welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list>
XML
위와 같은 파일명 하나를 선택해서 WebContent 하위에 생성하면 자동으로 불러옴
이클립스로 톰캣서버를 실행하면 웹어플리케이션은 WTP (Web Tool Platform) 플러그인이 관리하는 임시 폴더에 배포됨
Path : .metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/web03
View Original
GenericServlet 사용
GenericServlet 추상 클래스를 사용하여 서블릿 생성
웹브라우저에서 서블릿으로 데이터를 보내는 방법
서블릿에서 데이터를 꺼내는 방법
서블릿에서 작업한 결과를 웹브라우저로 보내는 방법
1. GenericServlet이 없던 시절 (문제상황)
서블릿 만들 때 마다 servlet 인터페이스에 맞게 구현 (5개의 메서드)
⇒ 그렇지만, 클라이언트 요청 마다 호출 되는 service() 외에는 반드시 구현해야 할 필요가 없음
⇒ 빈 메서드를 구현하는 식으로 인터페이스를 맞춤 (ex. public void destroy(){ })
2. GenericServlet 의 용도
GenericServlet = 추상 클래스 (하위 클래스에게 공통의 필드와 메서드를 상속해 주고자함)
service() 를 제외한 init(), destroy(), getServletConfig(), getServletInfo() 미리 구현
// GenericServlet 구현 public class HelloWorld extends GenericServlet{ @Override public void service(ServletRequest request, ServletResponse response) throws ServletException, IOException { System.out.println("servlet 호출됨"); } }
Java
3. ServletRequest
service() 매개변수 중 하나, 클라이언트 요청 정보를 다루는 객체
getParameter() : GET, POST 요청에 들어온 매개변수 가져옴
getRemoteAddr() : 서비스를 요청한 클라이언트의 IP 주소를 반환
getScheme() : URI 형식의 스킴을 반환 ** scheme : 자원을 식별하는 최상위 분류 기호 (ex. http, ftp,file, news 등)
getProtocol() : 요청 프로토콜의 이름과 버전 (ex. HTTP/1.1)
getParameterNames() : 요청 정보에서 매개변수 이름만 추출하여 반환
getParameterValues() : 요청 정보에서 값만 추출하여 반환
getParameterMap() : 요청 정보에서 매개변수들을 Map에 담아 반환
getCharacterEncoding() : POST 요청의 매개변수에 대해 문자 집합을 설정 ** 주의 : 처음 getParameter() 호출하기 전 이 메서드를 호출해야만 적용됨
GET 요청 매개변수에 대해서 문자 집합 설정 방법 매개변수가 URI에 포함되어서 옴 ⇒ 서블릿컨테이너에서 URI의 인코딩 형식 설정 (URIEncoding=" ")
<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" URIEncoding="UTF-8"/>
XML
4. ServletResponse
응답과 관련된 기능 제공
인코딩 타입 설정, 문자집합 지정, 출력 데이터 임시 보관하는 버퍼 크기 조정, 데이터 출력하기 위한 출력 스트림 준비
setContentType() : 출력할 데이터의 인코딩 형식과 문자 집합 지정 클라이언트가 올바르게 화면 출력을 할 수 있도록 지정
response.setContentType("text/plain");
Java
setCharacterEncoding() : 출력할 데이터의 문자 집합 지정
response.setCharacterEncoding("UTF-8");
Java
getWriter() : 클라이언트로 출력할 수 있도록 출력 스트림 객체 반환 ** 참고 : 이미지, 동영상 같은 바이너리 데이터 출력은 getOutputStream()
PrintWriter writer = response.getWriter();
Java
5. @WebServlet 애노테이션을 이용한 서블릿 배치 정보 설정
web.xml 대신 애노테이션을 이용해 배치 정보 작성
() 안에 Servlet의 URL 정보 작성
@WebServlet("/calc") public class CalculatorServlet extends GernericServlet { ... }
Java
<!-- web.xml에 등록되어있는 정보를 주석처리해도 정상 작동--> <!-- <servlet> <servlet-name>CalculatorServlet</servlet-name> <servlet-class>lesson03.servlets.CalculatorServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CalculatorServlet</servlet-name> <url-pattern>/calc</url-pattern> </servlet-mapping> -->
XML
6. @WebServlet 애너테이션의 주요 속성
name : 서블릿의 이름을 설정, 기본값은 "" @WebServlet(name="서블릿이름")
urlPatterns : 서블릿의 URL 목록 설정, 속성값으로 String , {} @WebServlet(urlPatterns="/calc") @WebServlet(urlPatterns={"/calc","calc.do", "calculator.action"})
value : urlPatterns 와 같은 용도 (생략가능) @WebServlet(value="/calc") @WebServlet("/calc")

AWS e2 Ubuntu로 서버를 구축하는데 로그 파일을 보니 시간이 안 맞는다는 것을 알게 되었다.


시간 확인 명령어를 쳐보니 다음과 같다 (현재시간은 10시 32분..)



$ date

2018. 07. 31. (화) 01:32:33 UTC



ntp도 찾아서 설치해보고 rdate도 찾아서 설치해봤지만 바뀌지 않는다. ㅠㅠ


알고보니 Timezone을 변경해줘야 된다고한다!

그래서 적용해보았다.


먼저 설정되어있는 Timezone을 확인.



$ cd /etc 

$ vi more timezone

Etc/UTC



해당 명령어를 입력하면 GUI가 나온다.




$ dpkg-reconfigure tzdata



Asia -> Seoul로 설정하면 끝!


잘 바뀌었다.


$ date

2018. 07. 31. (화) 10:34:31 KST




Spring Boot로 웹개발을 완료해서 AWS ec2 우분투에 배포를 할려고하는데 

방법을 모르겠어서 한참을 헤맸다.


GUI로 무언가 구성되어있거나 이클립스로 연동해서 손쉽고 간편하게 배포를 할 수 있을 줄 알았는데 

생각보다 어렵다 ㅠ AWS 에서 제공해주는 툴이 있는거 같긴한데... 잘 모르겠다 


(알게되면 추가로 올릴 생각입니다..)



찾아보니 jar파일을 생성해서 서버에 올리고 java 명령으로 실행을 시켜주면 배포가 완료되는 것으로 보인다. 

jar 파일은 메이븐으로 생성하고 ec2에 전송하면 배포가 끝이다!


장황하게 설명했지만 

사실 이 포스트에서는 로컬에서 ec2로 전송하는 방법중에 하나인 scp를 기록하기위해서 썼다..



scp -i (key 위치) (전송할 파일) (호스트명:저장할 위치)


scp -i
   /kyome/aws_keys/mykey.pem
   /target/OhJooYeo-0.0.1-SNAPSHOT.jar
    ubuntu@~~.compute.amazonaws.com:/home/ubuntu/deploy



- jsp 경로 받기


${pageContext.request.requestURI}



- forward 되는 주소값 그대로 받기


${requestScope['javax.servlet.forward.request_uri']}






+ Recent posts

"여기"를 클릭하면 광고 제거.