Study-Note

[boostcourse full-stack] http://www.edwith.org/boostcourse-web * JSTL 프론트 개발자가 JSP를 수정하는데, JSP 안에 자바코드와 HTML코드가 섞여 있다면 수정할 때 굉장히 어려움을 느끼게 될 가능성이 크다. 이런 문제를 해결하기 위해서 등장한 것이 JSTL이다. JSTL을 이용하면 태그형식으로 조건문, 반복문 등을 사용할 수 있다. EL과 연동하면 더욱 강력하게 사용 가능하다. JSTL이란?JSTL(JSP Standard Tag Library)은 JSP 페이지에서 조건문 처리, 반복문 처리 등을 html tag형태로 작성할 수 있게 도와준다. JSTL을 사용하기http://tomcat.apache.org/download-taglibs.cgi위의 ..

[boostcourse full-stack] http://www.edwith.org/boostcourse-web * EL: %{ } 표현 언어(Expression Language)는 값을 표현하는 데 사용되는 스크립트 언어로서 JSP의 기본 문법을 보완하는 역할을 한다.JSP에 백엔드, 프론트 엔드가 섞여있기 때문에 효율을 좀더 높이기 위해 사용한다.자바 코드보다 간단하고 깔끔한 코드 작성이 가능하다. 표현 언어가 제공하는 기능 JSP의 스코프(scope)에 맞는 속성 사용집합 객체에 대한 접근 방법 제공수치 연산, 관계 연산, 논리 연산자 제공자바 클래스 메소드 호출 기능 제공표현언어 만의 기본 객체 제공 표현언어의 표현방법 표현언어의 기본 객체 표현 언어의 기본 객체 사용 예 표현 언어의 데이터 타입..

[boostcourse full-stack] http://www.edwith.org/boostcourse-web * Scope 참고) http://hyeonstorage.tistory.com/88 * 4가지 Scope Application : 웹 어플리케이션이 시작되고 종료될 때까지 변수가 유지되는 경우 사용Session : 웹 브라우저 별로 변수가 관리되는 경우 사용 (세션객체 생성 후 소멸시 까지 - 여러개의 요청이 들어와도 계속 유지된다)Request : http요청을 WAS가 받아서 웹 브라우저에게 응답할 때까지 변수가 유지되는 경우 사용 (요청이 들어온 후 응답을 보낼 때 까지 사용 가능)Page : 페이지 내에서 지역변수처럼 사용 (선언 된 그 페이지 내에서만 사용 가능) * Page Scop..

[boostcourse full-stack] http://www.edwith.org/boostcourse-web * JSP JSP 코드 예제 sum10 2. JSP주석JSP 페이지에서만 사용되며 로 끝나는 형태JSP 주석은 해당 페이지를, 웹 브라우저를 통해 출력 결과로서 표시하거나, 웹 브라우저 상에서 소스 보기를 해도 표시 되지 않음. 또한 JSP주석 내에 실행코드를 넣어도 그 코드는 실행되지 않는다. - JSP주석의 예시 3. 자바주석자바 주석은 //, /**/을 사용해서 작성한다.//은 한 줄짜리 주석을 작성할 때 사용되고, /**/은 여러 줄의 주석을 작성할 때 사용스크립트릿이나 선언문에서 사용되는 주석으로, 자바와 주석 처리 방법이 같다. - 자바주석의 예시//주석 /*주석 여러 줄에 걸친 주..

2. DB 연결 웹 애플리케이션 - WEB UI * window 객체 (alert, setTimeout 등...) window.setTimeout() setTimeout() //window는 전역객체라서 생략 가능하다. function run() { setTimeout(function() { var msg = "hello codesquad"; console.log(msg); //이 메시지는 즉시 실행되지 않습니다. }, 1000); } run(); 1000(1초)이라고 설정해 둔 시간이 지나면 메시지(함수 실행)를 띄운다. setTimeout 실행 순서: setTimeout의 실행은 비동기(asynchronous)로 실행되어, 동기적인 다른 실행이 끝나야 실행된다. setTimeout 안의 함수(콜백함수..

* JavaScript 변수, 연산자 타입 - 자바스크립트의 버전 자바스크립트 버전은 ECMAScript(줄여서ES)의 버전에 따라서 결정된다. 이를 자바스크립트 실행 엔진이 한 라인씩 반영, ES5, ES6(ES2015) … 2018년을 중심으로 ES6를 지원하는 브라우저가 많기 떄문에 몇 년간 ES6 문법이 표준이다. ES6는 ES5문법을 포함하고 있어 하위 호환성 문제가 없다. (but, feature별로 지원하지 않는 브라우저가 있을 수 있으므로 조심) - 변수 변수는 var / let, const(ES6에 있는 기능)로 선언한다. 선언에 따라 scope라는 변수의 유효범위가 달라진다. ex) var a = "boostcourse"; - 연산자 연산자 우선순위를 표현하기 위해서는 ()를 사용한다...

* 아파치 톰켓 설치 다음의 명령어로 톰캣을 실행할 수 있다. ./bin/startup.sh 톰캣이 시작되었다는 메시지는 출력되지만 8080포트로 접근이 되지 않을 때는 root 권한으로 서버를 시작한다. sudo ./bin/startup.sh 아파치 톰켓 설치 폴더 아래의 bin폴더에 있는 shutdown.bat파일이나 shutdown.sh파일을 더블클릭하여 실행하면 아파치 톰캣을 종료할 수 있다. 혹은, 실행 중인 창을 닫아도 아파치 톰캣이 종료된다. 아파치 톰켓이 종료 된 후 http://localhost:8080으로 다시 접속하면 오류 화면이 보여진다. * 서블릿 컴파일 및 실행하기 package examples; import java.io.IOException; import java.io.Pri..

* float 기반 샘플 화면 레이아웃 [참고] http://flexboxfroggy.com/#ko 기본 배치를 한 후 필요한 부분에 float를 사용해서 좌, 우로 배치하는 것이 일반적이다. clear: left, clear: both는 float를 인식해서 겹치지 않게 해준다. float인 경우에는 자식으로 생각하지 않기 때문에 wrap에 설정한 배경색이 적용되지 않았다. 이 경우에는 wrap안에 overflow 속성을 줘서 인식하게끔 할 수 있다. %로 주는 경우 고정 폭이 아닌 가변폭으로 적용되어 페이지 크기에 따라 반응한다. - HTML 타이틀 입니다. menu home name 반가워요! :-) crong jk honux pobi oh~ right footer입니다. - CSS li { lis..

* HTML Tag의 종류 [참고] https://www.w3schools.com/tags/default.asp 링크, 이미지, 목록, 제목 anchor, img, ul/li, p, div 등이 자주 사용된다. div: block 엘리먼트, 일반적인 영역(더미 영역)을 표현할 때 가장 많이 사용 ul, li: list를 나타낼 때 a href: 링크 추가 반갑습니다 여기 여러분들이 좋아하는 과일이 있어요. 사과 사과 메론 귤 * HTML layout Tag [참고] https://www.w3schools.com/tags/tag_header.asp 레이아웃: HTML 화면을 구성하는 기본적인 모습들 header: div와 같은 역할 section: 영역을 분리 nav: 네비게이션 (카테고리처럼 사용) fo..

HTML 정리 - HTML 구조 홍길동 웹 사이트 방문을 환영합니다. 웹 사이트의 콘텐츠 로 구성됨. html은 head, title, body로 구성되어있다.body안에 프로그램을 작성한다. 은 줄바꿈 옵션 &는 스페이스바 - HTML 태그 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h1 글자 크기 확인입니다 h 태그는 자동 줄 바꿈 기능을 제공하며 숫자가 작을 수록 큰 글자이다. 글이나 사진에 링크를 걸고싶다면 테그를 추가한다. 홍길동 웹사이트로 이동 //이렇게 설정할 경우 현재 창에서 링크가 열림 새로운 창에서 링크가 열리도록 하고싶다면 MBC 가기 표(table) 만들기 표 제목 HD1 HD1 1-1 1-2..