망그러진 사고공방 망그러진 사고공방

데이터출력 : JSP를 통해 HTML 문서형식으로 데이터를 출력해서 보여준다. web.xml에 서버 정보가 들어있어 직접 접근할 수 있으면 안된다. PrintWriter 객체를 가져와서 out.print(" html 태그 ") 를 써서 html 태그를 사용해서 출력할 수 있다. 뭔가 일반적인 자바 문자열 출력과는 색다른 출력방식 같아서 좀 신기했다. 쿼리스트링 사용자가 입력한 값을 서버로 가져오기 위한 단순한 방법. get 방식으로 요청햇을 때 URL 주소 뒤에 리소스?이름=값 형식으로 데이터가 제공된다. ex ) ParamServlet?id=nonamed&age=15 ParamServlet이 리소스 이름이고, id와 age가 이름(키) 이고, nonamed와 15가 값이다. request.getPara..

기본지식 웹 애플리케이션 동작 원리 1. 사용자가 주소 입력 2. 브라우저가 웹 서버에 해당 페이지 요청 3. 서버에서 제공할 페이지를 찾는다 4. 서버에서 찾은 페이지를 클라이언트의 브라우저에 보낸다. 동적 페이지에 새로운 정보를 제공하기 위해 많은 정보를 관리한 데이터베이스가 필요한 것이고, 데이터베이스에 정보를 저장하거나 저장하기 위한 언어가 PHP,ASP, 그리고 JSP/Servlet이다. 웹 서버: 클라이언트의 요청을 받아 결과페이지를 전송 웹 애플리케이션 서버 (WAS): 요청받은 페이지의 실질적인 로직이나 데이터베이스 연동 처리를 하는 비즈니스 로직을 사용하는 곳. init() 초기화 메서드. 클래스가 실행되면 무조건 실행되는 메서드. service() doGet(),doPost()를 둘다 ..

배우는 수업에서 화면 디자인을 중점적으로 두지는 않기에, BootStrap3를 이용하고 기본적인 HTML 주의사항들은 많이 배우진 못한 것 같다. 그래서 이번에 화면구현을 하는 도중 막히는 일이 좀 많았는데, HTML과 JS, CSS 를 통해 프로젝트의 화면을 구현하는 도중 해결했던 문제, 헷갈렸던 것들을 정리해보려고 한다. BootStrap3의 btn Class와 inline-block, float 상품 리스트를 보여주는 화면을 만들 때, BootStrap의 btn btn-default 클래스를 적용한 "상품 등록" 버튼이 의도치않은 곳에 위치하게 되었다. 검색을 통해 BootStrap의 버튼은 inline-block 속성을 가지고 있다는 것을 알아냈는데, 버튼을 block 속성으로 지정하는 BootS..

min 은 minified, 최소 용량으로 짜여진 버전을 의미한다. 내부 소스에 공백과 줄바꿈이 최소로 사용되어있다.

브라우저마다 객체의 종류차이와 그에 따른 자바스크립트 처리에 약간씩의 차이가 생길 수 있다. 여러 브라우저에서 모두 호환이 되는 스크립트를 사용하는 표준 라이브러리로써 JQuery를 사용하면 브라우저 호환성 문제를 쉽게 해결할 수 있다. JQuery 형태 => $(선택자).메서드(매개변수,매개변수) $(document).ready(function (){} ); 문서를 웹브라우저에서 완전히 로드한 뒤 한번 실행되는데, 예시에선 매개변수인 익명 함수를 실행하게 된다. (document).ready를 생략해서 사용할 수도 있다. ex ) $(function(){} ); 자바스크립트에서 { } 중괄호 안에 key : value의 쌍으로 이루어진 구조를 사용할 수 있는데, 이렇게 웹에서 데이터 전달을 위한 데이터..

웹페이지를 만들 때 자주 사용할 수 있고 중요한 페이지 이동시키는 방법을 다시한번 되새길겸 절차들을 써보려고 한다. 이클립스 서버설정 servers 탭에서 현재 실행중인 서버 설정 들어가기. HTTP/1.1의 PortNumber 부분을 클릭해 다른 서버와 겹치지 않는 포트로 설정한다. Timeout의 start 부분을 3분으로 넉넉히 설정해준다. Overview, Modules 부분에서 기존 서버 Path를 변경한다. Edit 버튼을 누른뒤 / 로 바꾸면, localhost/ 까지만 입력하면, webapp document 까지 들어가게 된다. webapp 밑의 board 폴더를 예시로 들면, localhost/board/list.jsp로 주소를 입력해 들어가면 된다. 실습 중 유의사항 css파일을 따로 ..

HTML 문서 객체 모델 기본 용어와 사용에 대해서. 정적 생성: 웹페이지를 처음 실행할 때 HTML 태그로 적힌 문서 객체를 생성하는것 동적 생성: 웹페이지 실행중 스크립트로 문서 객체를 생성하는것 문서 객체 모델: 웹 브라우저가 HTML파일을 분석하고 출력하는 방식. DOM(Document Object Model) 이라고 줄여 부르기도 한다. 웹페이지 실행 순서 HTML 스크립트는 일반적으로 위에서 아래로 시작되기 때문에, 위에 선행되지 않은 요소에 대해서 속성값을 변경할 수 없다. DOCTYPE html> DOM fault example //h1 태그 배경 색상 변경 document.querySelector('h1').style.backgroundColor= 'red'; //h2 태그 글자 색상 변..

여태 기초적인 웹페이지 동작을 위해 HTML을 통해 정보를 표시하고, 그 정보의 디자인을 위한 CSS를 사용하는 방법을 학습했다. 오늘은 자바스크립트의 기본적인 사용법을 학습한다. 자바 스크립트는 html 태그 위치와 상관없이 만들 수 있지만, 스크립트가 위에서 아래로 실행되기 때문에 스크립트 실행이 우선되야할 경우 head부분에 작성해서 사용한다. 자료형 자바 스크립트에서는 자바와 달리 변수,메서드 선언시에 자료형을 지정하지 않는다. 숫자형 : 정수와 실수의 자료형 구분이 없다. 문자열 : 문자집합.자바와 동일 날짜 객체 Date는 문자열 형태로 저장된다. 연산자는 자바와 동일하지만, 두드러지게 차이나는 연산자는 아래와 같다. == 연산자를 사용시 자바스크립트는 10 == '10'이 true가 나온다...