본문 바로가기

Tech/BoostCourse - WEB

[부스트코스] JSP 내장객체(Implicit Objects) JSP 내장객체란? - JSP를 실행하면 서블릿 소스가 생성되고 실행된다. - JSP에 입력한 대부분의 코드는 생성되는 서블릿 소스의 _jspService() 메소드 안에 삽입되는 코드로 생성된다. - _jspService()에 삽입된 코드의 윗 부분에 미리 선언된 객체들이 있는데, 해당 객체들은 jsp에서도 사용가능하다. - response, request, application, session, out과 같은 변수를 내장객체라고 한다. 내장 객체의 종류 ImplicitObjects.jsp 자바에서는 변수를 선언을 해야만 사용이 가능하다. 놀랍게도 내장 객체(위 코드에서는 request)는 따로 선언을 하지 않고도 사용이 가능하다. jsp가 서블릿으로 바뀔 때 변환된 코드를 찾아보면 이러한 내장객체들은..
[부스트코스] JSP 문법 스크립트 요소의 이해 - JSP 페이지에서는 선언문(Declaration), 스크립트릿(Scriptlet), 표현식(Expression) 이라는 3가지의 스크립트 요소를 제공한다. 선언문(Declaration) - 선언문: - 선언문은 JSP 페이지 내에서 필요한 멤버변수나 메소드가 필요할 때 선언해 사용하는 요소 - 선언문의 문법 스크립트릿이나 그냥 html 코드를 사용한 경우 jsp가 서블릿으로 바뀌면서 _jspService()라는 메소드 내에서 작성된다. 하지만 이 선언문을 사용하면 service() 메소드가 아니라 클래스 body 쪽에 해당 코드가 작성된다. exam1.jsp id : 실행 결과 스크립트릿(Scriptlet) - 스크립트릿: - 가장 일반적으로 많이 쓰이는 스크립트 요소 - 주로 ..
[부스트코스] JSP 라이프싸이클 jsp는 jsp가 실행되는 것이 아니라 서블릿으로 변경이 되는 것이다. 톰캣이 실행될 때 jsp를 서블릿으로 바꾸는 것이다. example.jsp가 실행될 때 벌어지는 일 - 이클립스 워크스페이스 아래의 .metadata 폴더에 example_jsp.java 파일이 생성된다. - 해당 파일의 _jspService() 메소드 안을 살펴보면 jsp파일의 내용이 변환되서 들어가 있는 것을 확인할 수 있다. - example_jsp.java는 서블릿 소스로 자동으로 컴파일 되면서 실행되서 그 결과가 브라우저에 보여진다. JSP의 실행순서 1. 브라우저가 웹서버에 JSP에 대한 요청 정보를 전달한다. 2. 브라우저가 요청한 JSP가 최초로 요청했을 경우만 1) JSP로 작성된 코드가 서블릿으로 코드를 변환한다. ..
[부스트코스] JSP란? JSP(JavaServer Pages)? 자바 서버 페이지는 HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어이다. Java EE 스펙 중 일부로 웹 애플리케이션 서버에서 동작한다. (위키백과) JSP 등장 배경 - 마이크로소프트에서 ASP(Active Server Page)라는 쉽게 웹을 개발할 수 있는 스크립트(script)엔진을 발표함.(1998년) - 1997년에 발표된 서블릿은 ASP에 비하여 상대적으로 개발방식이 불편함. - ASP에 대항하기 위해 1999년 썬마이크로시스템즈에서 JSP 발표 - JSP는 실제로 서블릿 기술을 사용. WebContents 밑에 jsp 파일을 생성해보자 다음과 같이 html파일과 유사한 내용을 담고 있다. h..
[부스트코스] JavaScript Debugging 프로그래밍에서 디버깅은 버그를 잡는 것을 의미한다. 프로그래밍을 하다보면 내 코드가 버그가 없으면 좋겠지만 생기기 마련이다. 이를 빠르게 해결하는 것이 프로그래밍 생활을 좀 더 건강하고 즐겁게 할 수 있는 방법이다. 자바스크립트는 런타임(실행) 단계에서 실행되는 언어이기 때문에 보통 브라우저에서 디버깅을 많이 한다. * valnila js : 프레임워크 없이 실행되는 자바스크립트 디버깅 컨트롤 Pause, Continue : 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 됩니다. 다른 브레이크포인트가 잡힐 때까지 코드를 진행 Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행..
[부스트 코스] Ajax 통신의 이해 Ajax (XMLHTTPRequest 통신) 이 기술은 웹에 데이터를 갱신할 때, 브라우저 새로고침 없이 서버로부터 데이터를 받는 것이 좋겠다는 생각에서 출발했다. 더 좋은 UX를 제공할 수 있는 기술이다. 아래 탭 UI를 살펴보자. 상단에 탭을 누를 때마다 컨텐츠가 달라진다. 누르지도 않은 탭의 컨텐츠까지 초기로딩시점에 모두 불러온다면 초기로딩속도에 영향을 줄 것이다. 따라서 동적으로 필요한 시점에 컨텐츠를 받아와서 표현하면 더 좋다. 이 경우가 Ajax 기술을 활용할 수 있는 대표적인 경우다. Ajax 통신으로는 XML, Plain Text, JSON 등 다양한 포맷의 데이터를 주고받을 수 있지만, 일반적으로 사용이 편리한 JSON 포맷으로 데이터를 주고 받는다. JSON(JavaScript Obje..
[부스트코스] 웹 프로그래밍 프로젝트 코드 리뷰 후기 부스트코스 웹 프로그래밍 과정은 총 6단계의 학습 콘텐츠가 있고, 각각의 콘텐츠 끝에는 학습한 내용을 토대로 진행하는 프로젝트가 있다. 개발자라면 당연히 프로그래밍을 단순히 지식적으로 아는 것에서 끝나는 것이 아니라 결과물을 만들 줄 알아야하기 때문에 이러한 프로젝트를 시도해보는 것은 분명 좋은 경험이다. 부스트코스는 유로로 각 프로젝트에 대한 전문가의 코드 리뷰를 지원해준다. 부스트코스 학습 콘텐츠 1. 웹 프로그래밍 기초 학습을 마치고 해당 콘텐츠의 프로젝트인 [나를 소개하는 홈페이지 구현] 제출 후기와 코드 리뷰 후기를 기록한다. 프로젝트 후기 부스트코스 웹 프로그래밍 과정의 프로젝트는 백엔드와 프론트엔드 각각의 요구사항이 있었다. 첫 번째 콘텐츠의 프로젝트로는 [나를 소개하는 홈페이지 구현]으로 ..
[부스트코스] Browser Event, Event object, Event handler Event 브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할때도 이벤트가 발생한다. 이벤트를 브라우저가 발생시켜주니, 우리는 그 때 어떤 일을 하라고 할 일을 등록할 수 있다. 다시 말해, HTML 엘리먼트별로 어떤 이벤트가 발생했을 때 특정 행위를 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다. 이를 자바스크립트로 구현할 수 있다. 이벤트 등록 이벤트 등록 표준방법 - addEventListener() var el = document.getElementById("ouside"); el.addEventListener("click", function() { //do something }, false); ..