비전공자 공부일기
-
[WEB : Servlet] Cookie 쿠키(생성, 읽기, 제거)비전공자 공부일기/:: WEB & Front-End 2019. 7. 2. 17:30
2019. 07. 02 필기 자바스크립트 쿠키는 따로 있음. 자바스크립트 쿠키는 권한이 있는, 예를들면 로그인 상태의 사람만 볼 수 있는 응답화면을 제공한다. 다음 예시의 쿠키는 이런 권한이 없어도 볼 수 있는 응답화면을 제공한다. 쿠키 - 클라이언트에 저장되는 정보 / 간단한 데이터를 String 으로 저장 세션 - 서버에 저장되는 정보 / 보안을 요하는 필요한 데이터를 객체로 저장 * 웹 페이지의 브라우저에서 마우스 오른쪽을 누르고 '(페이지) 검사'를 누르면 검사창이 뜨는데, 검사창 상단의 Application 탭을 누르면 Cookie를 확인할 수 있다. 쿠키를 생성하여 응답문서에 쿠키를 저장하여 클라이언트에게 전달하는 서블릿 @WebServlet("/read.itwill") public class..
-
Servlet - 파일 업로드비전공자 공부일기/:: WEB & Front-End 2019. 7. 2. 17:25
2019. 07. 02 웹에 파일을 업로드 하기 위해선 입력페이지에서 전달된 입력값과 입력파일을 반환받아 클라이언트에게 응답문서로 전달하는 서블릿 @WebServlet("/view.itwill") public class FileViewServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); PrintWriter out=..
-
웹개발 - 서블릿 생명주기 Servlet Life Cycle비전공자 공부일기/:: WEB & Front-End 2019. 7. 2. 09:51
2019. 07. 01 필기 서블릿 생명주기란? 서블릿은 클라이언트로부터 요청을 받으면 요청에 의해 WAS(Web Application Server)의 컨테이너가 인스턴스를 생성하여 요청 처리 후 응답한다. => WAS의 컨테이너가 서블릿 인스턴스의 생성, 사용(=메소드 호출), 소멸에 대한 전반적인 관리를 담당한다. => 만약 기존에 생성된 서블릿 인스턴스가 이미 존재할 경우 새로 인스턴스를 생성하지 않는다 => WAS가 종료되면 컨테이너가 서블릿 인스턴스를 소멸시킨다 => 이 때, 서블릿 인스턴스의 생성~사용~소멸 과정을 '생명주기(=Life Cycle)'이라고 한다. 서블릿의 생명주기를 확인해보는 예시 @WebServlet(name = "LifeCycleServlet", urlPatterns = {..
-
웹개발16 - 선택자(selector), 자식요소비전공자 공부일기/:: WEB & Front-End 2019. 6. 26. 15:34
2019. 06. 25-26 필기 이번 챕터에서는 선택자를 검색해 조건에 맞는 요소들을 걸러내고, 원하는 메소드를 적용시키는 문법을 보도록 하겠다. 선택자로 요소 검색 jQuery에서는 다음과 같이 태그 선택자(selector)를 이용하여 엘리먼트를 검색할 수 있다. $("selector"); 아이디 선택자(단일) 또는 클래스 선택자(다수)를 이용하여 검색할 수도 있다. $(".classname"); $("#idname"); 저번에 jQuery는 모두 메소드라고 했었다. 선택자 검색으로 걸러낸 요소들에 메소드를 적용할 수 있다. $("selector").method(); 메소드의 ( ) 안이 비어있으면 메소드 실행한다. ("속성", "변환값")과 같이 전달값이 있으면 속성의 기존값을 전달값으로 변경한다...
-
웹개발13 - 프로토타입비전공자 공부일기/:: WEB & Front-End 2019. 6. 20. 17:07
2019. 06. 20 개인공부 자바스크립트에 대한 정보를 검색하던 중 이런 설명을 발견했다. 바로 자바스크립트는 클래스기반 언어인 자바와는 달리 '프로토타입 기반의 객체지향언어'라는 것이다. 프로토타입? 이게 뭐지. 찾아봐도 한눈에 들어오질 않아 좀 더 공부를 해보게 되었다. 일단 '프로토타입'이란 말은 꼭 프로그래밍 외적으로도 일상생활에서 많이 들어본 말일 것이다.(아마 건담이나 에바 덕후라면 더욱 익숙하지 않을까..?) 보통 '초기모델'정도의 뜻으로 많이 쓰이는 것 같다. 내가 찾은 바에 따르면(ㅋㅋ), 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다. 그리고 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받는다. 이처럼 자바스크립트의 모든 객체는 최..
-
웹개발 12 - 객체, 클래스, 메소드비전공자 공부일기/:: WEB & Front-End 2019. 6. 20. 17:07
2019. 06. 20 필기 프로그래밍 언어를 배울 때 '객체'라는 개념을 이해하는 게 참 어렵다. 다음은 최대한 여기저기서 긁어모아 정리해 본 내용이다. 자바스트립트는 브라우저를 객체로 표현하여 프로그램을 작성하는 언어이다. 그러나 객체지향이라기보단, '객체기반 프로그래밍 언어'라고 보는 게 더 적합하다고 한다. 또는 이런 설명도 있다. 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어이다. 자바스크립트는 Object 클래스를 이용하여 객체를 생성하고 객체에 프로퍼티 또는 메소드를 추가,변경,삭제하여 사용 Object 클래스 : 프로퍼티와 메소드가 선언되어 있지 않은 클래스 객체란, 프로퍼티(Property:값 저장)와 메소드(Method: 기능제공)의 모임이다. 메소드 :..
-
웹개발 11 - 자바스크립트 함수비전공자 공부일기/:: WEB & Front-End 2019. 6. 19. 15:51
2019. 06. 19 필기 함수 Function 란? --> 원하는 기능을 제공하기 위한 명령들의 모임 --> 데이터를 전달받아 정해진 작업을 수행하고 그 결과를 리턴하도록 작성된 코드블록 함수 선언 후 호출에 의해 함수의 명령 실행 자바스크립트 함수의 형식 및 선언 함수의 형식 return 키워드의 기능 : 1)함수의 종료 2)함수의 반환값을 호출명령 위치로 반환 *cf* 자바 또는 자바스크립트 문법을 모르는 사람들을 위해 첨언하자면, abc( ) > 값을 전달받지 못한 매개변수는 undefined로 표현 --- 함수 매개변수의 개수보다 많은 값 전달 가능 >> 오버된 값은 자동 소멸 ------ 자바와는 달리 매개변수와 값의 개수가 일치하지 않아도 에러는 떨어지지 않는다..
-
[CSS-02]박스모델, 테이블 box model, table비전공자 공부일기/:: WEB & Front-End 2019. 6. 18. 13:42
2019. 06. 17 필기 박스모델(Box Model) 이란? : 이미지 또는 텍스트 출력을 위한 사각형 모양의 영역 margin : 박스모델과 박스모델 사이 간격 >> px(고정) %(유동) margin: 00px >> top&&bottom&right&left margin: 00px 00px; >> top&bottom right&left margin: 00px 00px 00px 00px; >> top right bottom left >>>> 구역의 네 변 중에서 하나의 마진만 조정하고 싶으면 margin-bottom: 00px; 과 같은 형식으로 선언 border : 박스모델의 외곽선 border-width : 외곽선 굵기 설정 --- px 키워드(thin, medium,..
-
[CSS-01] background 설정비전공자 공부일기/:: WEB & Front-End 2019. 6. 17. 15:02
2019. 06. 18 필기 background : 배경 관련 모든 스타일 속성값 사용 가능 background-color: colorname; : 배경색을 설정하는 속성 background-image : url(""); : 배경화면 이미지 설정 --- => 이미지파일 크기가 박스모델보다 작은 경우 가로와 세로 방향으로 반복출력 --- => 이미지파일 크기가 박스모델보다 큰 경우엔 이미지가 잘려서 출력됨 background-size: 설정값; : 배경화면 이미지 사이즈 설정 ----- auto(기본) : 이미지를 그대로 출력 ----- contain : 이미지 폭과 높이 중 작은 곳을 100%로 변경하여 출력 - 비율 유지(남는 곳은 여백) ----- cover : 이미지 폭과 높이 중 큰 곳을 100%..
-
[웹개발 기초] 여러가지 선택자와 속성들비전공자 공부일기/:: WEB & Front-End 2019. 6. 14. 18:10
2019. 06. 14 필기 ● 선택자(selector) 전체 선택자 : 모든 엘리먼트 선택 - 비권장 태그 선택자 : 엘리멘트이름(태그이름)을 이용하여 엘리먼트 선택 클래스 선택자 : 엘리먼트에 부여된 클래스값을 이용하여 엘리먼트 선택 => 엘리먼트의 클래스값 앞에 .을 붙여 사용 => 다수의 엘리먼트에 스타일 적용 아이디 선택자 : 엘리먼트에 부여된 고유값을 이용하여 엘리먼트 선택 => 엘리먼트의 고유값 앞에 #을 붙여 사용 => 하나의 엘리먼트에 스타일 적용 그룹 선택자 : 선택자를 ,로 여러개 나열 선언하여 엘리먼트를 선택 후손 선택자 : 부모 엘리먼트에 존재하는 모든 하위 엘리먼트 선택 형식) 부모선택자 후손선택자 자식 선택자 : 부모 엘리먼트에 존재하는 모든 자식 엘리먼트 선택 형식) 부모선택..