부스터 2기 수료를 했다!!!!

부스터를 계기로 블로그 관리를 시작할 수 있었고, 또 좋은 강의도 수강할 수 있었다.

블로그를 관리하는게 쉬운일은 아닌것을 깨달았다ㅜㅜㅜ

그래도 기록만이 남는 것이니 열심히 블로그 관리를 하도록 노력해보겠다!!!!

1. redirect

- 리다이렉트는 http프로토콜로 정해진 규칙

- 서버는 클라이언트로부터 요청을 받은 후, 클라이언트에게 특정 URL로 이동하라고 요청할 수 있다. = redirect

- 서버에서는 클라이언트에게 응답으로 상태코드를 302와 함께 이동할 URL정보를 lacation header에 담아 전송. 클라이언트는 서버로 부터 받은 상태값이 302이면 location헤더 값으로 재요청을 보내게 된다.

- 서블릿이나 jsp는 redirect하기 위해서 HttpServletResponse가 가지고 있는 sendRedirect() 메소드를 사용

2. forward

1. 웹 브라우저에서 Servlet1에게 요청을 보냄
2. Servlet1은 요청을 처리한 후, 그 결과를 HttpServletRequest에 저장
3. Servlet1은 결과가 저장된 HttpServletRequest와 응답을 위한 HttpServletResponse를 같은 웹 어플리케이션 안에 있는 Servlet2에게 전송(forward)
4. Servlet2는 Servlet1으로 부터 받은 HttpServletRequest와 HttpServletResponse를 이용하여 요청을 처리한 후 웹 브라우저에게 결과를 전송

redirect와의 차이점

redirect는 클라이언트가 요청하면 서버에서 처리하고 url바뀌어서 다시 클라이언트에게 전송

forward는 요청을 서버에서 처리하고 또다른 서버로 한번 더 넘겨서 일 처리. url바뀌지 않음

1. JSP란??

실습으로 JSP에 대해  알아보겠습니다.

eclipse를 켜셔 firstweb에 jsp실습을 해보겠습니다.

jsp파일을 만들면 다음과 같은 창이 뜹니다. html과 비슷하게 생겼습니다.

다음과 같이 코딩해 봅시다.

JSP는 약속 된 몇가지의 기호를 가지고 있습니다. 이 기호가 무었인가에 따라서 JSP파일이 servlet으로 바뀔때, 어떻게 바뀔지 결정됩니다.

JSP는 JSP자체가 동작하는게 아니라 모두 servlet으로 바뀌어서 동작합니다.

line10~15까지의 코드는 servelt으로 바뀔때 어떻게 바뀔까요??>>

<% %>만 제외하고 java코드 그대로 들어갑니다.

그럼 line17은 어떻게 바뀔까요??>>

<%=total %>이 부분은 out.print(total)이렇게 바뀝니다.

Run한 결과입니다.

JSP는 Java Server Page의 약자입니다. 위에서 JSP는 모두 serlet으로 바뀌어서 동작한다고 했습니다.

그럼 굳이 왜 JSP를 사용할까요? 

JSP와 servlet의 하는일은 동일하지만, 서블릿은 HTML이 자바 코드 내에 있어서 작성과 읽기가 굉장히 효율성이 떨어집니다. 그러나 JSP는 반대로 HTML안에 자바코드가 들어있어서 코드의 작성 효율과 가시성이 뛰어납니다. 

1. window 객체(setTimeout)

window라는 객체가 있습니다. window에는 많은 메서드들이 존재하며, 

• window.setTimeout()
• setTimeout()

위와같이 사용할 수 있습니다. window는 디폴트의 개념임으로 생략할 수 있습니다.

setTimeout 활용

setTimeout은 낯설게 동작합니다. 

이 코드를 실행해 보면, 2초후에 콘솔창에 msg가 출력됩니다.

이런식으로 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백(callback)함수라고 합니다.

callback함수는 보통 함수 호출즉시 실행되지 않고, 나중에 필요한 시점에 실행되거나, 실행이 안 될 수도 있습니다.

*자바스크립트는 함수를 인자로 받을 수 있고, 함수를 반활할 수도 있는 특징이 있습니다.

그렇다면, 이 코드를 실행시키면 어떤 순서로 출력될까요?????

run end가 출력되고 2초후에 msg가 출력되는 것을 확인할 수 있습니다.

이를 통해 setTimeout함수는 비동기(astnchronous)로 실행되어서, 동기적인 다른 실행이 끝난 후에 실행된다는 것을 알 수 있습니다.

그렇다면 이 두 코드의 실행 결과는 어떻게 될까요???

2. DOM과 querySelector

우리가 받은 이메일의 개수가 증가하는 것을 바로 화면에서 볼 수 있고, 댓글을 입력할 때 댓글이 바로 화면에 추가되는 것을 볼 수 있죠??

새로운 html파일을 불러온 것도 아닌데 어떻게 이게 가능할까요??

자바스크립트는 html내의 구조를 변경시킬 수 있습니다.

먼저 DOM을 이해하면 됩니다!!

DOM

브라우저에서는 HTML코드를 DOM이라는 객체 형태의 모델로 저장합니다. 그렇게 저장된 정보를 DOM Tree라고 합니다. (저번 포스팅 참고!!)

결국, HTML element는 Tree형태로 저장됩니다.

브라우저는 자바스크립트에서 HTML 요소를 쉽게 찾고, 가져올 수 있게하기 위해 다양한 DOM API를 제공하고 있습니다.

예시로 getElementById()를 들수 있습니다. id를 통해서 element를 찾는 메서드입니다.

또한, querySelector()메서드도 있습니다.

querySelector에서 파라미터는 css Selector문법을 사용합니다.

3) Browser Event, Event object, Event handler

우리가 웹사이트의 어떤 영역을 마우스 클릭하거나, 화면 스크롤 등의 작업을 하느냐에 따라 브라우저는 반응합니다.

이런 것들은 모두 브라우저가 Event기반으로 동작되게 만들어졌기 때문입니다.

Event

브라우저엔 많은 이벤트가 있습니다. 브라우저 화면의 크기를 조절하기, 마우스 클릭, 스크롤등을 할때에도 이벤트가 발생합니다. 

이벤트는 브라우저가 발생시켜줍니다. 우리는 이벤트 발생이 되었을때 어떤 일을 하라고 등록하면 됩니다.

이를 자바스크립트로 구현할 수 있습니다.

이벤트 등록

이벤트 등록은 addEventListener함수를 사용하는 방법이 표준입니다.

querySelector로 선택한 element의 값에 클릭 이벤트가 일어났을때!! function을 실행해라 라는 코드입니다.

addEventListener함수의 두번째 인자에 있는 함수. 즉, 이벤트 발생시 실행되는 함수를 Event Handler 또는 Event Listner이라고 합니다.

이벤트 객체

브라우저는 이벤트 리스너를 호출할 때, 사용자로부터 어떤 이벤트가 발생했는지에 대한 정보를 담은 이벤트 객체를 생성해, 리스너 함수에 전달합니다.

이벤트 객체를 활용해서 추가적인 작업을 할 수 있게됩니다.

가장 많이 쓰이는 것을 event.target입니다. 이는 이벤트가 발생한 element를 가리킵니다.

element도 객체이므로 안에 nodeName이나 classname같은 속성을 확인할 수 있습니다.!!!!

4. Ajax통신의 이해

Ajax가 뭘까요???

Ajax는 비동기적으로 서버로부터 데이터를 가져오는 통신을 일컫습니다. 이게 무슨말냐고요??

저도 이해하는데 조금 시간이 걸렸어요ㅠㅠ

예를 하나 들어보겠습니다. 

만약 쇼핑몰 사이트에서 카테고리 정보를 클릭한다고 가정해봅시다.

상의 카테고리를 클릭할 때는 상의 정보에 해당하는 데이터들을 불러와서 페이지를 보여주어야 합니다. 

다음으로 하의 카테고리를 클릭하면 다시 새로운 컨텐츠를 담은 페이지를 보여주어야 합니다.

이때마다 브라우저가 새로운 html파일을 보여준다면 로딩속도나 여러가지 측면에서 비효율적입니다. 카테고리를 바꿀때 마다 새로고침을 하는 셈이니까요!

새로고침 없이 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 훨씬 효율적이지 않을까요? 

이 대표적인 기술이 Ajax입니다.

그렇다면, Ajax를 사용할 때, 클라이언트와 서버간의 데이터는 어떤 형식일까요??

JSON(JavaScript Object Notation)포멧을 사용합니다. 

Json은 데이터를 딕셔너리 형태로 저장하는 포멧입니다.

제가 얼마전 Django 프로젝트를 진행할 때 사용한 Json의 일부입니다. 

key와 value로 이루어진 데이터 표현 형식입니다.

Ajax 실행코드

5. 자바스크립트 디버깅

자바스크립트는 실행(runtime) 과정에서 버그가 발생합니다. 그래서 브라우저에서 디버깅을 합니다.

디버깅 컨트롤

• Pause, Continue : 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 됩니다. 다른 브레이크포인트가 잡힐 때까지 코드를 진행합니다.
• Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행하는데 이때 함수 안의 코드로는 진입하지 않습니다. 즉 라인의 함수를 실행만 하게 됩니다.
• Step into next function call : 스텝 인투는 스텝 오버와 다르게 현재 실행 라인의 코드에 함수가 있다면 함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있습니다.
• Step out of current function : 스텝 인투로 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아갑니다.
• Active/Deactive breakpoint : 브레이크포인트를 끄거나 켤 수 있습니다.
• Pause on exception : 자바스크립트 예외가 발생하면 해당 위치에 브레이크포인트를 잡아줍니다.

1.자바스크립트 변수&연산자&타입

1) 변수

변수는 var, let, const로 선언할 수 있습니다.

어떤 것을 사용하는 가에 따라 scope가 달라집니다.

chrome의 개발자도구의 console창을 사용해서 var의 동작을 확인해 보았습니다.

2)연산자

연산자 우선순위를 표현하기 위해서는 ()을 사용하면 됩니다.

수학연산자는 +,-,*,/,%등이 있습니다. 이외에도 논리 연산자, 삼항 연산자, 관계 연산자도 있습니다.

or연산자를 살펴보겠습니다.

result는 or연산자에 의해 name의 변수 값이 있으면 name을, 없다면, "codesquad"를 저장하는 변수입니다.

삼항 연산자를 살펴보겠습니다.

result는 삼항 연산자에의해 data가 11보다 크면 ok를, 작으면 fail을 저장하는 변수입니다.

비교 연산자를 살펴보겠습니다.

자바스크립트에는 === 라는 비교 연산자가 있는데요 기존에 우리가 많이 쓰던 ==연산자와 비슷하지만, 자바스크립트에서는 === 연산자를 더 선호합니다. 왜냐하면 == 연산자는 오류가 존재하기 때문인데요! 

이런 오류들이 존재합니다. 세번째 예제를 보면, 숫자 0과 문자열 0을 같은것이라고 비교해놓았습니다.

반면, === 연산자는 비교의 타입까지 비교합니다.

3)타입

undefined, null, boolean, number, string, object, function, array, Date, RegExp

등이 있습니다.

Javascript의 타입은 선언할 때가 아니라, 실행타임에 결정됩니다.

function에 a변수를 선언할 때가 아니라, a가 선언된 function이 실행될 때!!!!a의 타입이 결정됩니다.

이것을 Dynamic type이라고 합니다.

2. 자바스크립트 비교&반복&문자열

1)비교문

if, else if, else를 통해 비교문을 작성한다.

짧은 비교문을 작성할 때에는 삼항 연산자가 유용하게 쓰입니다!

2)분기 - switch

로직의 분기를 나누기위해 if문의 나열 대신 switch문을 사용해 나타내기도 합니다!

3)반복문

for문이나 while문을 사용해서 반복문을 구현할 수 있습니다.

for문의 성능 개선을 염두하고 작성하면 위와같이 코딩할 수도 있습니다.

배열의 경우 forEach와 같은 메서드도 있습니다.

3)문자열 처리

자바스크립트에는 문자와 문자열은 같은 타입입니다. 모두 문자열로 통일됩니다.

위와같이 single quotation 이나 double quotation이나 string타입으로 처리됩니다.

문자열에는 다양한 메서드가 있습니다. 자바스크립트가 string을 내부적으로 객체로 보기 때문입니다.

3. 자바스크립트 함수

1) 함수의 선언

함수는 여러개의 인자를 받아서, 그 결과를 출력한다.

파라미터의 개수와 인자의 개수가 일치하지 않더라도 오류가 나지 않습니다.

만약 파라미터 1개가 정의된 함수를 호출할 때, 인자를 0개 넣어서 실행하면, 이미 정의된 파라미터는 undefined라는 값을 갖게 됩니다.

2) 함수 표현식

함수를 함수 안에서 선언 할 수 있습니다.

이렇게 표현하면 함수선언문과 달리 선언과 호출순서에 따라서 함수가 정상적으로 실행되지 않을 수 있습니다.

위의 코드에서 result의 선언을 inner의 선언보다 먼저하면 오류가 발생합니다.

3) 표현식과 호이스팅

위의 코드는 신기하게도 잘 실행됩니다.

inner()은 이름만 있는 함수인데 어떻게 오류가 나지 않을까요?

자바스크립트에서 함수가 한번 실행될때, js parser가 코드를 한번 쫘악 훑으면서 얘는 변수, 얘는함수...이렇게 기억을 해둡니다. 이것을 호이스팅이라고 합니다.

이 코드에서는 inner정보가 함수라는 것을 함수 실행 전에 기억해 두고 실행시켜준 것입니다.

이 과정에서 자바스크립트가 이해한 funcTest의 코드는 다음과 같습니다.

4) arguments객체

함수가 실행되면 그 안에서 arguments라는 특별한 지역변수가 존재합니다.

자스 함수는 선언한 파라미터보다 더 많은 인자를 보낼 수도 있습니다. 이때, 넘어온 인자를 aruments로 배열의 형태로 하나씩 접근할 수 있습니다. (Python에서 args, kwargs같은 느낌...?!)

그러나 arguments는 배열타입이 아니라서 배열의 메서드는 사용할 수가 없습니다.

이 객체는 활용할 수 있는 방법이 여럿있습니다. 그중, 다음과 같은 경우에 활용 가능합니다.

4. 자바스크립트 함수 호출 스택

**자바, C등 언어와 유사**

1. servlet 이란?

앞선 포스팅에서는 이클립스에서 Dynamic Web Project를 생성하고 (자바 웹 어플리케이션)

해당 프로젝트에서 HelloServlet이라는 서블릿 클래스를 작성해 보았습니다.

작성된 서블릿은 이클립스 내부에서 설정한 runtime (즉, 우리는 톰캣이라는 WAS를 설정했죠!) 톰캣에 의해서 동작이 됩니다.

그 이후 웹브라우저를 이용해서 톰캣 서버에 URL 요청을 보내고

HelloServlet이 실행되는 결과를 웹 브라우저로 확인해 보았습니다.

과정을 정리하자면,

Dynamic Web Project(eclipse) > servlet class > 톰캣(WAS)서버에 URL요청 > servlet실행

입니다.

여기에서 우리가 만든 프로젝트가 자바 웹 어플리케이션 입니다.

웹 어플리케이션 이란 인터넷으로 연결된 웹 환경에서 사용자들 간의 연결을 통해 서비스를 제공하고 제공받는 어플리케이션을 의미합니다. 

우리가 사용하는 쇼핑몰, 블로그, 카페등이 이에 해당합니다.

* 클라이언트가 웹브라우저의 주소창이나 하이퍼링크, 서브밋 버튼 등을 사용하여 서비스를 (요청)하면 서버쪽에서 그 요청 정보를 처리하여 결과를 HTML 형태로 사용자의 웹 브라우저에 보내줍니다.(응답)

웹 어플리케이션의 구성요소

모두 앞서서 정리했던 내용 입니다.

WAS에 의해서 동장하는 웹 어플리케이션은 폴더 구조를 잘 지켜주어야합니다.

자바 웹 어플리케이션의 폴더 구조

Servlet은!!

자바 웹 어플리케이션의 구성요소중 동적인 처리를 하는 프로그램의 역할을 수행합니다.

서블릿의 특징을 살펴보자면..

- 서블릿은 WAS에서 동작하는 Java클래스

- 서블릿은 HttpServlet 클래스를 상속받아햐 함

- 서블릿과 JSP로부터 최상의 결과를 얻으려면, 웹 페이지를 개발할 때 JSP와 서블릿을 조화롭게 사용해야함

  (ex : 웹 페이지를 구성하는 html은 jsp로 표현, 복잡한 프로그래밍은 서블릿으로 구현)

2. Servlet 작성 방법

servelt 작성 방법은 버전에 따라 달라집니다.

버전에 따른 Servlet 작성 방법

1. Servlet 3.0 spec 이상에서 사용하는 방법

• web.xml 파일을 사용하지 않습니다.
• 자바 어노테이션(annotation)을 사용합니다.
• 앞에서 실습했던 first web에서 사용합니다.

2. Servlet 3.0 spec미만에서 사용하는 방법

• servlet을 등록할 때 web.xml 파일에 등록합니다.

3.0이상 버전의 servlet작성 방법부터 살펴보겠습니다.

프로젝트 만들고 서브렛 3.1버전을 선택해서 만듭니다.

저번 포스팅에서와 마찬가지로 doGet 메서드 부분을 고쳐서 작성해보겠습니다.

html은 enter입력으로 줄바꿈이 안되기 때문에 br태그를 사용해서 줄바꿈 해줍니다.

16번째 줄에서 서블릿 클래스가 HttpServlet을 상속받아서 작성한것을 확인할 수 있습니다.

만약 상속 받지 않았다면, response와 같은 메소드를 직접 만들어서 사용해야겠죠..??

3.0이상의 버전 서블릿은 annotation을 사용합니다. 

형광펜 친 부분을 바꾸면 어떻게 될까요?

바꾸기전의 url입니다.

바꾼 후의 url입니다.

이렇게 3.0이상의 버전은 자바 annotation을 사용해서 servlet을 생성하는 것을 살펴보았습니다.

3.Servlet life-cycle

전에 만들었던 firstweb 프로젝트의 example 패키지에 LifeCycleServlet을 하나 만들어줍니다.

위와 같은 설정으로 세개의 메소드를 오버라이딩 할 수 있게 설정하고 finish합니다.

이렇게 코드를 오버라이딩 해줍니다.

실행 시키면 다음과 같이 콘솔창에 뜹니다.

처음 실행을 시킨것이기 때문에 메모리에는 해당 서블릿 객체가 없는 상태였습니다.

그래서 servlet을 생성한 후, init과 service를 호출한 것을 확인할 수 있습니다.

브라우저를 새로고침하면 이미 메모리에는 servlet객체가 있기 때문에 다시 생성하지 않고,

service만 다시 호출한 것을 확인할 수 있습니다.

!!참고!!

Servlet 생명주기

• WAS는 서블릿 요청을 받으면 해당 서블릿이 메모리에 있는지 확인합니다.
•  if (메모리에 없음) {
   - 해당 서블릿 클래스를 메모리에 올림
   - init() 메소드를 실행
  }
   - service()메소드를 실행
• was가 종료되거나, 웹 어플리케이션이 새롭게 갱신될 경우 destroy() 메소드가 실행됩니다.

위의 내용에서 우리가 실제로 동작을 구현할 때에는 service메소드에 구현하면 되겠구나..!!라는 것을 알 수 있습니다.

1. 자바 웹 어플리케이션 생성하기

eclipse에서 File > New > Dynamic Web Project를 클릭합니다.

project name을 입력 후, New Runtime을 클릭합니다.

저는 이미 프로젝트를 만들어서 Tomcat을 설정해 놓은 상태라 8.0버전으로 설정되어 있습니다.

8.0버전을 선택 후, Next를 클릭합니다.

Browse를 클릭 후, Tomcat을 설치한 경로를 입력해 줍니다.

여기서 문제가 발생합니다!!

설치한 Tomcat은 8.0버전인데 eclipse는 8.0버전까지밖에 지원을 하지 않는다고 합니다.ㅜ

그래서 저는 이걸 https://sarc.io/index.php/tomcat/582-eclipse-tomcat-8-5-x

이 블로그를 참고해서 고쳤습니다. 저는 야매같지만 첫번째 방법으로 수정했습니다.

잘돌아갑니다.ㅎㅎ

2. 자바 웹 어플리케이션 작성

방금 만든 웹 어플리케이션을 클릭 후, New > Servlet을 클릭합니다.

다음과 같이 패키지와 클래스 이름을 입력하고 next를 클릭합니다.

다음과 같은 창이 뜹니다.

여기에서 제일 중요한 부분은 URL mappings입니다.

이 HelloServlet클래스가 WAS에 배포될 때 사용할 이름을 지정한 부분입니다.

지금은 eclipse가 자동으로 생성한 이름으로 설정되어 있는 상태입니다.

기본적으로 URL은 다음과 같은 규칙으로 생성됩니다.

http://localhost:8080/{프로젝트이름}/{URL Mapping값}

따라서 위와같이 어플리케이션을 만든다면 URL은 

http://localhost:8080/firstweb/HelloServlet 이렇게 되겠죠?

그다음 next를 누르고

doGet만 체크되게하고 finish해줍니다.

기본 코드에서 doGet 메소드를 변경해 줍니다.

이제 이 코드를 실행해봅시다.

src > servlet파일 > 우클릭 > run as 를 클릭해 줍니다.

항상 Tomcat을 사용할 것이기 때문에 밑에 always....체크박스를 체크해줍니다.

그후 실행하면

이렇게 잘 돌아갑니다!!!! :)

1. eclipse 설치

eclipse는 이미 설치되어 있어서 따로 설치할 필요 없었습니다.

perspective는 Java EE로 설정했습니다.

Java는 Java프로그래밍을 할때, JavaEE는 Java로 웹 어플리케이션을 만들때 더 유용한 perspective입니다.

2. Tomcat 설치

Apache Tomecat이란??

아파치 톰캣은 아파치 소프트웨어 재단에서 개발한 세계에서 가장 많이 사용되는 WAS(Web Application Server)입니다.

자바를 이용하여 작성되는 웹 어플리케이션은 WAS가 있어야만 실행할 수 있습니다.

톰캣은 처음 사용해보는거라 다운 및 설치 과정을 적어보겠습니다.

http://tomcat.apache.org로 이동한 후 "Tomcat 8"을 선택합니다.

Tomcat 8버전은 JDK 7이상에서 동작하며 Servlet Spec 3.1을 지원합니다.

Tomcat 9버전은 JDK 8이상에서 동작하며 Servlet Spec 4.0을 지원합니다.

zip 파일을 다운 후, 압축을 해제하여 파일을 엽니다.

다운받은 파일이 이렇게 생성되어 있습니다. 이중, bin파일을 클릭합니다.

저는 window라 window버전으로 진행해 보겠습니다.

startup.bat파일을 실행시켜 줍니다.

그럼 cmd창이 띄워지고 뭔가 촤라라라락 실행됩니다.

우리가 할 것은 잠시 기다린 후, 새로운 브라우저를 켜고

주소창에 http://localhost:8080 나 http://127.0.0.1:8080를 입력해 들어가보는 것입니다.

만약 잘 동작한다면,

다음과 같은 창이 띄워집니다.

Tomcat을 종료하려면, 다시 bin폴더로 들어가서 shutdown.bat을 더블클릭합니다.

종료후 다시 위의 주소로 들어가면 "사이트에 연결할 수 없음"오류가 뜹니다.

저는 8080포트 서버에 접속할 때,

다음과 같은 오류가 발생 했습니다.

https://monny.tistory.com/42

위의 티스토리에 오류 해결과정이 자세이 나와있어서 참고해서 오류를 수정했습니다.