본문 바로가기

lang49

[Webapp] DOM API 탐색, 조작 DOM API HTML은 동적으로 다양한게 변경될 수 있습니다. DOM APIs에서 이를 지원하는 다양한 메서드와 속성이 있습니다. 라이브러리를 사용하기 전, low-level의 DOM API를 먼저 배워봅니다. querySelector getElementById 등등.. createElement, createTextNode, appendChild insertBefore, innerText, innerHTML, insertAdjacentHTML 등등 1. DOM Node 조작 DOM API 1 다양한 APIs 1) document. 2) element. 2 DOM 탐색 APIs 유용한 DOM element 속성 var a = document.querySelector(".w3-table-all"); a.t.. 2019. 12. 6.
[js] Array, Obejct JavaScript Javascript로 데이터를 표현하기 위해 배열(array)과 객체(object)를 이용합니다. 1. Javascript Array(배열) Declaration var a = [1, 2, 3, "hello", null, true, [[{1:0}]]]; console.log(a.length); console.log(a[500]); >> 7 undefined Method a.push() a.indexOf(x) : x가 배열 a에 있는지 확인 - 있으면 a[x] 출력 a.join() : 배열의 문자열로 합침 a.slice() a.concat(x) : a에 x를 붙인 값을 반환. a는 바뀌지 않습니다. * Spread operator : [...a, x] 라고하면 위와 문법이 똑같습니다.i.. 2019. 12. 5.
Web API 설명 WEB API 디자인 가이드 URI는 정보의 자원을 표현해야 합니다. 자원에 대한 행위는 HTTP method로 표현합니다. HTTP METHOD 역할 POST URI 요청시 리소스를 생성 GET 리소스를 조회하고 해당 document에 대한 자세한 정보 가져옴 PUT 리소스 수정 DELETE 리소스 삭제 URI는 정보의 자원을 표현 POST /members ​ 생성 GET /members ​ 멤버의 모든 정보 요청 PUT /members/1 ​ 수정 DELETE /members/1 ​ 삭제 슬래시 구분자(/)는 계층을 나타낼 때 사용 URI 마지막 문자로 슬래시 구분자 포함하지 않음 하이픈(-)은 URI 가독성 높일 때 사용 언더바(_)는 사용하지 않음 URI경로는 소문자만 사용. RFC 3986(UR.. 2019. 12. 3.
[Web] Rest API 설명 REST API 1. Rest API 클라이언트의 종류가 웹 브라우저, 안드로이드 앱, ios앱 등 다양해지면서 클라이언트에게 정보를 제공하는 방식을 하나로 일원화해야 했습니다. 일원화시키는 방식 중에 대표적 방식이 HTTP protocol 로 API를 제공하는 것입니다. HTTP 프로토콜로 제공하는 API를 REST API 라고 합니다. API Application Programming Interface 약자입니다. API는 응용 프로그램에서 사용할 수 있도록 os나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻합니다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공합니다. https://docs.oracle.com/javase/8/docs/ap.. 2019. 12. 2.
[Boostcourse] Maven, 메이븐 설정, 실행 설명(eclipse) 1. Maven Maven CoC pom.xml Maven? Maven은 애플리케이션을 개발하기 위해 반복적으로 진행해왔던 작업들을 지원하기 위해 등장한 도구입니다. Maven을 사용하면 빌드(Build), 패키징, 문서화, 테스트와 테스트 리포팅, git, 의존성관리, svn등과 같은 형상관리서버와 연동(SCMs), 배포 등의 작업을 손쉽게 할 수 있습니다. CoC? CoC(Convention over Configuration)이란 일종의 관습을 말하는데, 예를 들면 프로그램의 소스파일의 위치, 컴파일된 파일들의 위치를 미리 정해놓을 것을 말합니다. Maven 장점 편리성 향상 ​ 의존성 라이브러리 제공 설정 파일을 약간 수정하여 직접 다운로드받는 작업 없이 새로운 라이브러리를 사용할 수 있습니다. 다.. 2019. 11. 22.
[Boostcourse] DB 연결 웹 - 6. JSTL & EL 6. JSTL, EL 1. EL(Expression Language) jsp에서 표현식을 이용해 값을 출력할 때 변수의 값이 null이면, 화면에 null이 출력됩니다. 그 전에 null인지 체크하는 코드가 있었으면 좋겠죠? EL을 통해 이 변수를 좀 더 jsp에서 편하게 관리할 수 있습니다. EL isELIgnored 표현언어 (EL, Expression Language) 값을 표현하는 데 사용되는 스크립트 언어, JSP의 기본 문법을 보완하는 역할 JSP의 스코프에 맞는 속성 사용 집합 객체에 대한 접근 방법 제공 (collection) 수치 연산, 관계 연산, 논리 연산자 제공 자바 클래스 메소드 호출 기능 제공 표현언어만의 기본 객체 제공 실제 디자이너, front-end 개발자, back-end.. 2019. 11. 21.
[Boostcourse] DB 연결 웹 - 5. Scope Scope - BE 1. Scope란 Servlet, JSP 개발 시 변수를 많이 다룹니다. 변수의 사용범위를 다루는 스코프(scope)를 알아봅니다. 1) → 4) 순으로 큰 영역, 예를 들어 1)은 2,3,4를 포함 1) Application scope : 웹 어플리케이션이 시작되고 종료될 때까지 변수가 유지되는 경우 2) Session scope : 웹 브라우저 별로 변수가 관리되는 경우 사용, 여러 개의 요청이 들어와도 유지 3) Request scope : client가 http 요청(request)한 후 WAS가 받아서 웹 브라우저에게 응답(response)할 때까지 변수가 유지되는 경우 4) Page scope : 페이지 내에서 지역변수처럼 사용 (각 servlet, jsp 파일) 2. Pa.. 2019. 11. 20.
[Boostcourse] DB 연결 웹 - 4. Redirect & Forward Redirect, Forward - BE 1. Redirect 게시판 글 작성을 예로들어봅시다. 글을 모두 작성한 후에 글 작성 버튼을 클릭하겠죠? 이 때 클라이언트가 서버에게 글을 작성해주세요 라는 요청을 보내게 됩니다. 서버는 해당 글을 저장한 후, 웹 브루어제게 글 목록으로 이동하라고 응답을 보내게 됩니다. 웹 브라우저는 서버의 요청을 받은 후, 자동으로 서버에게 글 목록을 요청하여 응답받습니다. 서버가 클라이언트에게 어떤 URL로 이동하라는 요청을 보내는 것이 redirect라고 합니다. HttpServletResponse sendRedirect() 리다이렉트(redirect) 리다이렉트는 http프로토콜로 정해진 규칙입니다. 서버는 클라이언트의 요청에 대해 특정 URL로 이동을 요청할 수 있습니.. 2019. 11. 19.
[Boostcourse] DB 연결 웹 - 3. JSP (Java Server Pages) 1. JSP Microsoft의 ASP(Acitve Server Pages) (1998)와 같은 스크립트형 개발 방법이 인기를 끌면서, 1997년 발표된 서블릿은 ASP 비하여 상대적으로 개발방식이 불편했기 때문에 자바 진영에서는 이에 대응하여 JSP(Java Server Pages)(썬마이크로시스템스, 1999)를 발표합니다. JSP는 스크립트 언어입니다. JSP는 서블릿 기술을 사용합니다. jsp 파일 안에 java언어가 있음. 컨텐츠타입 = text/html 문자형식 UTF-8 페이지 인코딩 = UTF-8 안에는 java 코드를 넣을 수 있습니다. 이 java코드는 servlet으로 바뀌어서 실행됩니다. 이것은 out.print(total)과 같습니다. 2. JSP Life cycle WAS는 웹 .. 2019. 11. 18.
[Boostcourse] DB 연결 웹 - 2. WEB UI 개발 FE WEB UI 개발 - FE 1. Window 객체 (setTimeout) window.setTimeout() setTimeout() setTimeout 활용 (비동기 함수) setInterval 도 활용 인자로 함수를 받음, 보통 나중에 실행되는 함수를 콜백함수로 한다. js는 함수를 매개변수로 받고, 함수를 리턴할 수도있다. function run() { setTimeout(function() { var msg = "hello code"; console.log(msg); }, 2000); } run(); 2초 뒤에 함수실행 function run() { setTimeout(function() { var msg = "hello code"; console.log(msg); console.log("run ... 2019. 11. 18.
728x90

티스토리툴바