우디킴의 개발 기록

• 거대한 웹 애플리케이션을 개발하려면 

• 스프링(Spring)은 많은 사람들이 참여하는 거대한(엔터프라이즈) (웹)애플리케이션 개발에 사용되는 프레임워크(Framework)다.
• 프레임워크란(Framework)란 프로그래밍의 흐름과 객체의 생명주기를 관리한다. 프레임워크를 이용하여 개발하면 우리가 설정을 해주고 재료를 넣어주는 것이다.
• 스프링(Spring)은 한마디로 얘기하면 빈팩토리(BeanFactory)다. 즉 빈(Bean)은 객체의 생명주기를 관리하는 컨테이너다. *스프링 빈이란 자바 객체이다. 스프링 컨테이너에 의해서 자바객체가 만들어 지게 되면 이 객체를 스프링 빈이라고 한다.
• Ioc(Inversion of Control)에 대해서 알아보자.
• 스프링의 가장 큰 기능은 DI(Dependency Injection)와 AOP(Aspect Oriented Programing)다.
• DI(Dependendy Injection)란 의존성 주입이라는 뜻이다.
• 의존성이란 특정 객체가 작동(비지니스로직을 수행)하려면 다른 객체가 필요하다는 것이다.

• AOP(Aspect Oriented Programing)은 관점지향 프로그래밍이다.
• 스프링 프레임워크의 가장 기본적인 설정은 ApplicationContext.xml 에 설정한다. *이름을 달라도 되나 일반적으로 이 이름으로 사용
• 의존성을 주입 하는 것을 빈 와이어링(Bean wiring), 한글로 빈묶기라고 한다.

1. jar파일(라이브러리)를 configuration build path 에서 add 한다. *jar 파일은 한마디로 archive 파일이다.
2. VO / DAO / mapper / Service / config 패키지를 생성한다.
3. applicationContext.xml 을 config 패키지에 생성(복사) 한다.
4. mybatis-config.xml 도 config 패키지에 생성(복사) 한다.
5. VO / DAO / Service / mapper 파일을 각각 생성한다. *DAO와 Service 는 인터페이스와 구현클래스(ImpI) 로 각각 생성한다.
6. 우리가 만든 DAO 에 sqlSession을 주입한다. 또 Service 에 DAO 를 주입한다.

• 프론트엔드는 클라이언트 컴퓨터의 브라우저(Browser) 에서 작동하는 애플리케이션을 개발하는 것을 말한다.
• 언어로는 HTML / CSS / Javascript 가 있다.
• 기술로는 페이지의 새로고침없이 서버에서 데이터를 받는 ajax 가 있다. 
• 그래픽적인 요소 및 기술로 벡터그래픽인 SVG / 비트맵방식인 canvas 가 있고 멀티미디어로 audio, video가 있다.
• * 컴퓨터 그래픽에서 이미지 표현 방식은 크게 두 가지고 구분된다. 

*HTTP 프로토콜은 요청 / 응답 프토로콜이다.

• 웹표준이란 구조 / 표현 및 동작 / 동작 및 제어의 분리다.
• 웹표준은 표준에 맞는 요소와 속성을 사용하고 의미에 맞게 마크업해야 한다.
• <div>, <strong> 이런 것들을 요소라고 한다. 영어로는 element
• <div data-id="xx">에서 data-id는 속성이라고 한다. 영어로는 attribute 
• // HTML5가 되면서 data-* 속성이 표준화가 되었다.
• 제목을 의미하는 요소는 <h1>~<h6>이다.
• 순서가 있는 리스트(목록)을 의미하는 요소는 <ol> 이고 순서가 없는 리스트는 <ul> 자식요소는 반드시 <li> 요소.
• 제목과 내용으로 구성된 정의리스트는 <dl> 이고 자식요소로는 제목을 의미하는 <dt> 와 내용을 의미하는 <dd>
• 이미지를 의미하는 요소는 <img> 이다.
• 클릭시 페이지를 이동할 경우 하이퍼링크는 <a> 요소다.
• <a href="detail.jsp?no=3&page=1" 일때 ?no=3&page=1 는 쿼리스트링(QueryString) 이라고 한다. 클릭하면 detail.jsp 로 넘어가는 데이터를 파라미터(Parameter) 라고 하며 여기서는 총2개가 넘어간다.
• =>각각 이름(Name)은 no 와 page 이고 값(Value)은 "3" 과 "1" 이다. 파라미터는 String 형이다.
• <img> 요소는 반드시 src 와 alt 속성을 가져야 한다.
• 표를 HTML 에서 표현하기 위해서는 <table> 요소를 이용한다.
• table 요소는 구조상 머리부분을 <thead> 요소가, 내용 부분을 <tbody> 요소가, 하단부분을 <tfoot> 요소가 담당한다.
• table 에서 한 줄(row) 을 의미하는 요소는 <tr> 이다.
• table 에서 하나의 데이터 셀을 의미하는 요소는 <td> 이다.
• table 에서 하나의 제목 셀을 의미하는 요소는 <th> 이다.
• 유저가 입력한 데이터를 서버로 넘길때 필요한 요소는 <form> 이다.
• <form> 요소에 입력된 데이터들을 넘길 주소를 작성하려면 action 속성에 작성하다. 또 넘길 방식을 작성하려면 method 속성에 쓴다.
• 서버로 넘길 방식은 get 방식과 post 방식이 있다. (그 외에도 RESTFUL을 이용하려면 put, delete 등도 있다.)
• post 방식은 HTTP 프로토콜의 body에 파라미터가 넘어가는 방식으로 주소창에 노출되지 않는다. 또 용량제한이 없어서 글쓰기, 로그인, 회원가입, 파일업로드등에 사용된다.
• 파일 업로드시 enctype 을 multipart / formdata 로 설정하고 반드시 method 를 post 방식으로 넘겨야한다. ENCTYPE="multipart/form-data"
• enctype 은 전송되는 데이터 형식을 말한다. 따로 작성하지 않으면 default 값인 application/www-form-urlencoded 으로 설정되어 넘어간다.
• 한 줄 글자 입력필드는 input 요소다. 타입으로는 text, password 가 있다.
• 그 외에도 HTML5 에서는 email, number, date...등이 많으나 잘 사용하지는 않고, data-picker 등은 라이브러리를 활용한다. 왜냐하면 크로스브라우징 때문이다. *data-picker 는 jQuery 에서 제공하는 달력위젯이다.
• 크로스브라우징(Cross Browsing) 은 W3C 에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS 나 HTML 렌더링 기술로 비슷하게 만들어 어떤 환경에서도 이상없이 작동되게 하는 웹페이지를 제작하는 방법이다.
• 쉽게 말해 어느 브라우저에서 작동시켜도 동일하게 작동되는 것을 말한다.
• 넘겨야 할 데이터가 있는데, 유저에게 보여주고 싶지 않을 때는 <input type="hidden"> 이다.
• 폼안의 input, select, textarea 는 반ㄷ느시 name 속성을 가지고 있어야 파라미터가 제대로 넘어간다.
• <button> 요소의 type 은 button / submit / reset 이 있다. submit 을 하는 button 이 아니라 단지 기능을 가진 button 인 경우에는 type 을 반드시 button 으로 지정해줘야 한다. 그렇지 않으면 button 클릭시 자동으로 submit 이 되기 때문이다.
• 요소는 block-level 과 inline-level 요소로 나뉜다.
• block-level 요소는 컨테이너다. 레이아웃을 담당한다.
• inline-level 요소는 컨텐츠(글자)다.
• block-level 안에 자식으로 inline-level 을 가질 수 있지만, inline-level안에 block-level을 넣어서는 안된다.
• 예) <div><span></span></div> 가능 / <span><div></div></span> 불가능
• CSS는 다양한 선택자를 가진다. h1, span 등은 요소 선택자다.
• #id, #wrap 등은 아이디 선택자다.
• .box, .shadow, .list_movie 등은 클래스 선택자다.
• '>' 는 자식 선택자다.
• ' '(한칸띄우기)는 자손 선택자다.
• ':' 는 가상클래스 선택자다.
• '::' 는 가상요소 선택자다.
• input type="radio" 여기서 type 은 속성 선택자다.
• block-level 요소는 width, height 를 지정하여 크기를 줄 수 있다.
• inline-level 요소는 크기를 지정할 수 없다. 인라인레벨 요소중 대체되는 요소들은 크기를 지정할 수 있다.
• 대체되는 요소 : hr, img, table, textarea, select, input..
• 강조를 나타내는 요소들은 <em>, <strong> 이 있다.
• 프로젝트 개발시 자신이 설정한 css 가 안될 경우 구체성을 반드시 확인한다.
• 기본적으로 요소들은 겹쳐서는 안된다. (즉 벽돌쌓듯이 잘 쌓여있고, 구조가 탄탄해야 한다. 그렇기 때문에 컨테이너들은 기본적으로 position:relative 가 맞다. 하지만 팝업등 겹쳐야 하는 경우에는 z-index 를 잘 설정해야한다.
• 글자의 색상을 지정하는 css 속성은 color 속성이다.
• 뒷배경색상을 지정하는 속성은 background-color이다.
• 한 페이지의 내부링크를 만들때는 a 요소의 href 속성에 id를 작성한다.(#을 포함해서)

• 아이디는 한 페이지에 똑같은 이름으로 두 개 이상 쓸 수 없다. 즉 고유한 이름이어야 한다.
• 클래스는 한 페이지에 여러개 있어도 되고, 한 요소에 여러개를 지정할 수도 있다. (button class="btn delete check"></button>
• 외부 css 를 HTML 에 적용하기 위해서는 <link> 요소를 연결한다.
• <link> 요소로 연결할 자원의 주소를 href 속성에 쓴다.
• <link> 요소로 연결한 자원과 HTML 관계를 rel 속성에 쓴다.
• 글자들의 정렬을 위한 속성은 text-inline 속성이다.
• 글자들이 부모를 기준으로 가운데 정렬 되게 하려면 text-align 속성의 값을 center 로 지정한다.
• 글자들을 읽기 편하게 양옆으로 정렬시키기 위해서는 text-align 속성의 값을 justify 로 지정한다. 글자간의 간격은 line-height 다.
• *text-align 은 block 요소 안에 inline 요소를 정렬한다.
• 블록레벨안에 글자가 한 줄이 있고, 그 글자들을 수직으로 가운데 정렬 하기 위해서는 블록레벨의 height 속성의 값과 line-height 속성의 값을 같게 써주면 된다.
• 부모로부터 벗어난 자식들을 처리하는 속성은 overflow 이다.
• IR(Image Replacement) 기법과 IS(Image Sprite)

• 여러 아이템을 수평으로 설정하기 위해서는 display:inline-block 이나 float:left 를 이용한다. 그 두가지는 장단점이 있다.
• float 의 경우 공간을 차지하지 않기 때문에 부모에 overflow 를 지정하거나 height 값을 지정하거나 마지막 자식에 clear:both 를 지정해야 한다.
• 파비콘 설정은 <link> 요소를 이용한다.
• 글자 들여쓰기는 text-indent 속성이다.
• 마우스 커서의 모양을 지정하는 속성은 cursor 이다.
• 잘 만들어진 웹애플리케이션일수록 cursor 를 잘 활용한다. 즉, 클릭할 수 있는 모든 기능에는 cursor 를 pointer 로 지정해야 한다.(UX적인 관점)
• css 의 변화값을 부드럽게 처리하기 위해서는 transition 속성을 적용한다.
• 투명한 뒷 배경색을 적용하기 위해서 rgba() 속성을 이용한다. *완전 반투명이기 때문에 z-index 까지
• 요소에 그림자를 적용하기 위해서 box-shadow 속성을 이용한다.
• 글자에 그림자를 적용하기 위해서 text-shadow 속성을 이용한다.
• 클릭했을 때를 적용하는 가상클래스는 active 이다.
• input 등 포커스가 맞을때의 가상클래스는 focus 이다.
• 박스의 끝을 둥글게 처리하기 위해서 border-radius 속성을 사용한다.

• javascript 는 클라이언트 컴퓨터의 브라우저(Browser) 에서 작동된다. jsp 에서 자바스크립트를 혼용해서 써도 작동되는 곳은 엄연히 다르다. jsp 는 서버안에서(*정확히는 WAS 의 JVM안에서) 작동하여 그 결과 HTML 이 만들어질 뿐이고, 그 HTML 이 클라이언트로 넘어와서 브라우저 안에서 작동하는 것이다.
• Javascript 에서 변수의 선언은 var 키워드를 사용한다. *최신은 let 과 상수는 const 를 이용.
  
• Javascript 에서 함수의 선언은 function 키워드를 사용한다.
• 특정함수를 특정시간마다 계속 호출하는 함수는 setInterval() 이다.
• 특정함수를 특정시간후에 한번 호출하는 함수는 setTimeout() 이다.
• 위의 함수를 멈추기 위해서 사용하는 함수는 clearInterval() 이다.
• 난수의 발생을 위해서 Math.random() 함수를 사용한다.
• 날짜 및 시간을 이용하기 위해서 date 객체를 사용한다.
• 날짜 및 시간을 더 편리하게 사용하기 위해서 moment 라이브러리를 활용한다.
• 브라우저 자체를 의미하는 객체는 window 이다.
• HTML 문서 자체를 의미하는 객체는 document 이다.
• 주소창을 의미하는 객체는 location 이다.
• window, document, location 등의 객체를 브라우저가 가진 객체라고 하며 BOM(Browser Object Model) 이라고 한다.
• h1, div, input 등 HTML 에 있는 요소들을 트리구조로 인식하는 방법을 문서객체모델 DOM(Document Object Model) 이라고 한다.
• HTML5 에서 새로 추가된 기능(Canvas, audio, video) 은 순수 자바스크립트 API(Application Programming Interface) 를 이용해야만 한다.
• Javascript 를 편리하게 사용하기 위해서 jQuery 라이브러리를 이용한다.
• jQuery 는 DOM 선택이 쉽고 요소들의 내용(css, 글자) 의 변경이 쉽다.
• jQuery 는 이펙트, 애니메이션이 쉽다.
• jQuery 는 이벤트처리가 쉽다. 
• jQuery() 함수는 $() 로 축약하여 사용한다. *$() 란 무엇입니까? => jQuery 함수를 호출하는 코드 입니다.
• $(선택자) 로 jQuery 요소객체를 얻어올 수 있다.
• 이벤트리스너를 등록하는 메서드는 on 이다. * .on("이벤트명",function(){}) 인자 2개짜리
• 이벤트리스너를 제거하는 메서드는 off 이다.
• click 메서드를 이용하면 편리하게 'click' 이벤트를 처리할 수 있다.
• this 는 Javascript 객체이다.
• 자바스크립트객체를 jquery 객체로 변경하려면 $(javascript객체)이다.
• jquery 객체에서 자바스크립트 요소 객체를 얻어오려면 jquery 객체.get메서드를 이용한다.
• 요소의 css를 변경하거나 얻어오기 위해서 css 메서드를 이용한다.
• 요소의 글자를 변경하거나 얻어오기 위해서 text 메서드를 이용한다.
• input, select, textarea 에서 내용을 변경하거나 얻어오기 위해서는 val 메서드를 이용한다.
• 해당요소가 부모로부터 몇번째 요소인지 얻어오는 메서드는 index이다.
• 배열이나 여러 jquery 요소객체의 각번지에 접근하기 위해서 사용하는 메서드는 each 이다. *each 메서드에 대해서 더 알아보자.
• 요소의 속성을 얻어오거나 변경하기 위해서 사용하는 메서드는 attr 이다.
• 요소의 클래스를 추가하는 메서드는 addClass 이다.
• 요소의 클래스를 제거하는 메서드는 removeClass 이다.
• 요소가 특정클래스를 가지고 있는지 확인하는 메서드는 hasClass 이다.
• display:none 을 쉽게하는 메서드는 hide 이다.
• diplay:block 을 쉽게하는 메서드는 show 이다.
• 요소의 앞요소를 선택하는 메서드는 prev 이다.
• 요소의 뒷요소를 선택하는 메서드는 next 이다.
• 부모를 선택하는 메서드는 parent 이다.
• 조상요소들을 선택하는 메서드는 parents 이다.
• 자식요소들을 선택하는 메서드는 children 이다.
• 랩퍼(wrapper) 객체들 중에 특정 index 를 선택하는 메서드는 eq 이다. *랩퍼 객체란 기본 자료형에 대해서 객체로서 인식되도록 포장을 했다고 알아두면 된다. wrapper 객체에 대해서 더 알아보자.
• 자식요소들 중에 특정요소를 찾아내는 메서드는 find 이다.
• $("div") / $("<div>") 둘의 차이점은 앞에는 div 란 요소를 선택한 것이고 뒤에는 div 를 새롭게 생성한 것이다.
• 부모.append( 자식) <-- 부모의 마지막 자식으로 삽입하는 메서드이다.
• 자식.appendTo(부모)<-- 부모의 마지막 자식으로 삽입하는 메서드이다.
• 부모.prepend(자식)<-- 부모의 첫번째 자식으로 삽입하는 메서드이다.
• 자식.prependTo(부모)<-- 부모의 첫번째 자식으로 삽입하는 메서드이다.
• 자식요소들 전부를 지우는 메서드는 empty 이다.
• 특정요소 한 개를 지우는 메서드는 remove 이다.
• 자바스크립트에서 템플릿을 활용하기 위해서 underscore 라이브러리를 활용한다.
• jquery 는 $이듯이 underscore 는 _(언더바) 또는 userscore 이다.
• 다음 ajax 구문을 설명하세요.

• 자바(Java)는 객체지향언어이다.
• t, e, s, t 4글자를 이용하여 클래스는 Test / 메서드는 test() / 변수는 test / 상수는 TEST / 생성자는 Test() 
• 자바의 자료형은 두가지다. 기본자료형과 객체자료형(참조자료형)
• 다음을 채우세요

• 다음을 채우세요

• 다음과 같이 출력되는 프로그램을 작성하세요.

• 클래스의 멤버는 멤버필드와 멤버메서드
• VO의 생성규칙 3가지

1. 멤버필드를 private 으로 선언
2. 기본생성자를 선언
3. setter 와 getter 설정

• 멤버필드(전역변수)와 지역변수의 차이에 대해서 설명하세요

• 멤버의 종류는 인스턴스와 스테틱
• 멤버필드의 선언

• 메서드의 선언

• 생성자

• 오버로딩에 대해서 설명하세요

• 자바의 숨겨진 비밀(코딩의 편리함을 위해 생략가능)

• String 의 경우 값비교시 equals() 사용
• 향상된 for 문

• 상속의 키워드는 extends 이다.
• Object 클래스는 단군과 같은 존재다. *모든 인스턴스에 존재한다. : 모든 클래스의 조상
• 인스턴스 내부의 객체들로 형변환이 가능함(2차 레퍼런스 변경) : 다형성
• super() 는 부모생성자 호출 / super 는 부모의 객체 레퍼런스를 의미
• 오버로딩과 오버라이딩

• 다형성

• 컨테이너란 객체의 생명주기를 관리한다.
• 생명주기란 객체가 생성되고, 서비스되고, 소멸되는 과정을 말한다.
• 서블릿컨테이너는 Servlet & JSP 의 생명주기를 관리한다.
• 서블릿컨테이너는 웹어플리케이션(Web Application Server) 라고 한다.
• 브라우저의 주소창에 주소를 입력하거나, a링크 클릭은 get 방식이다.
• form 요소에서 method 속성이 post 일 경우 post 방식 호출이다.
• 주소뒤에 '?파라미터명=파라미터값' 을 쿼리스트링(QueryString) 이라고 한다. *get 방식
• jsp(Java Server Page) 도 사실 Servlet 이다.
• 클라이언트가 해당 jsp 페이지를 요청하면 .java 파일이 생성되고 컴파일 되어 .class 파일이 생성후 객체가 생서된다.
• <% %>스크립트릿 : 자바코드를 코딩할 수 있는 곳이다. * _jspService 메서드안에 코딩된다.
• * _jspService 내장객체에는 request / response / out / session / application / config /page / pageContext / exception 이거에 대해서는 더 알아보자.
• <%= %> 표현식 : HTML 영역에 자바의 데이터를 출력 out.println 메서드와 같다.
• <%-- --%> JSP 주석 : .java 파일 생성시 사라진다.
• <%@ %> 지시어: 클래스 임포트나 페이지 설정등
• <%! %> 선언문: 클래스 영역 / 멤버자리
• 라이브러리는 lib 폴더
• 커넨션풀은 커넥션을 여러 개 생성하여 모아 놋는 것이다. *커넥션풀에 대해서 자세히 알아보기.
• 커넨션풀은 META-INF 폴더에 context.xml 으로 설정
• 웹서비스 개발시 eclipse 에서 Dynamic Web Project 로 생성한다.
• 필요한 프레임워크 / 드라이버 / 라이브러리등을 Web-INF 폴더안의 lib 폴더에 복사한다.
• 필요한 package 를 생성한다. config / vo / dao / util /mapper 
• mybatis-config.xml 을 복사 : DataSource 의 JNDI 를 맞춰야한다. / mpper 파일의 경로도 제대로 지정해야 한다.  *JNDI 에 대해서 알아보기
• 테이블 당 한개의 VO 를 생성한다 / 이 객체와 SQL 간의 맵핑
• 데이터베이스와 연결전용 객체인 DAO 클래스 선언한다. / 테이블 당 한 개
• mapper 파일도 복사 후 이름 변경 : 테이블이름과 동일하게
• 필요한 JSP 파일을 생성한다.
• 해당 JSP 에 필요한  SQL 구문을 mapper 파일에 작성한다
• 해당 DAO 클래스에 메서드를 선언한다.
• 해당 JSP 파일에서 DAO 에서 만든 메서드를 호출한다.
• 클라이언트에서 넘어온 파라미터의 값을 얻기 위해 사용하는 메서드는 request.getParameter이다.
• filter() 객체를 활용하면 여러 페이지에 전처리 / 후처리가 가능(한글처리나 로그인체크 등)
• 넌뷰에서 뷰로 이동시 response.sendRedirect 메서드를 이용
• 프레임워크(Framework) 는 프로그래밍의 흐름과 객체의 생명주기를 스스로 처리한다. <-> 라이브러리는 프로그래머가 필요할 때 객체를 생성하여 사용한다.
• 마이바티스 프레임워크는 SQL 매핑 프레임워크(퍼시스턴스 프레임워크) 라고 한다.
• 우리가 작성한 SQL 구문과 객체와의 매핑
• SQL 구문을 작성하는 문서는 mapper 파일 / table 당 한 개를 생성한다.
• DB 설정(WAS 에서 생성한 커넥션풀을 JNDI 로 얻는) 과 mapper 파일의 경로 등을 설정하는 mybatis-config.xml
• 테이블 당 한개의 VO 를 생성한다. 이 객체와 SQL 간의 매핑 : 조인이 있다면 조인 후 필요한 멤버필드도 포함하여 선언.
• 데이터베이스와 연결전용 객체인 DAO 객체 생성 / 테이블당 한 개
• ajax 의 경우 서버에서는 결과물이 반드시 jason 이어야한다.
• content-type 을 application / jason 으로 설정함
• 잭슨제이슨(Jackson Json) 라이브러리를 이용하여 자바의 객체를 jason 으로 변환가능하다
• 결론적으로 뷰는 HTML(일반 jsp) / Jason 뷰 / redirect 뷰로 볼 수 있다.
• 웹서비스는 컴퓨터와 컴퓨터 간의 상호작용을 위한 시스템이다.
• 월드와이드웹은 사람과 컴퓨터간의 상호작용이다.