- Ajax 브라우저의 새로고침 없이 서버로부터 데이터를 얻어오는 방법 부스트코스 2-2에서도 잠깐 다뤘었으니 다시 보고 오자. > 왜 비동기 통신이라 하는가? 페이지를 쭉 그리다가, 서버로부터 데이터를 추가로 요청하는 코드가 나오면 send() 로 요청을 보내놓고 나머지 작업을 수행한다. function ajax(data) { var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function() { console.log(this.responseText); }); oReq.open("GET", "http://www.example.org/getData?data=data"); oReq.send(); } addEventListener 안에 있는 f..
- DOM? Document Object Model. 그러니까 HTML을 구성하는 각 요소들. 자바스크립트의 DOM API를 이용하면 HTML 요소를 찾고 동적으로 변경시킬 수 있다. - document. 으로 접근가능한 메서드들 (링크) document.addEventListener() document.getElementById() document.getElementByName() document.querySelector() document.createElement() - element. 으로 접근가능한 메서드들 (링크) element.childNodes() element.classList() element.firstChild() element.contains() element.innerHTML - 유..
[부스트코스] 3-1. JavaScript: 배열과 객체
- JavaScript에서의 배열 > 선언: var a = []; > 한 배열 안에 모든 타입의 원소가 들어갈 수 있다. 숫자, 문자, 배열 (-> 2차원 배열), dict 등... > 선언할 때 길이를 정해주지 않는데... a[500] = 10; 이렇게 해줘도 에러가 발생하지 않고 알아서 배열 길이가 501이 된다. 이 상태에서 정의해주지 않은 중간 값들 (a[250] 이라던지) 을 띄워보면 undefined가 뜸. (아무 쓰레기값이 뜨는게 아니다) - 유용한 배열 메서드들: 자바의 ArrayList 메서드들이랑 크게 다르지 않다 > push() > indexOf() > join() > concat() 주의: 메서드에 따라 원래 배열을 조작하는 것도 있고, 원래 배열은 그대로 두고 새 배열을 반환하는 ..
- REST API (REpresentational State Transfer API) 란? > 널리 사용되는 의미: HTTP 프로토콜로 제공하는 API > 일반적인 프로그래밍 언어를 사용할 때 'API를 사용한다' 고 하면 누가 이미 만들어놓은 함수 (메서드) 를 가져다 쓴다는 의미였다 > 'HTTP Request를 통해서' 서버에서 이미 만들어놓은 기능을 동작시켜 그에 따른 Response를 받는 것 > 보통 Response로는 JSON 파일을 받게 된다 > REST의 의미: 엄밀하게 RESTful이라고 하려면 다음과 같은 것들을 지켜야 한다 >> client-server >> stateless >> cache >> layered system >> code-on-demand: 여기까지는 HTTP를 사..
- JDBC (Java DataBase Connectivity) 자바를 이용해서 DB를 다루기 위한 API. 각 DB 벤더들마다 JDBC 인터페이스를 구현한 드라이버를 제공한다. - JDBC 사용법: 안드로이드에서 SQLite 쓸 때나 PHP에서 MySQL 쓸 때 어떻게 했는지 떠올려보자. 비슷하다. 1) JDBC 드라이버 설치 및 Import Maven에 의존성을 추가해서 쉽게 드라이버 라이브러리를 다운로드받을 수 있다. mysql mysql-connector-java 5.1.45 다운로드 받았으면 .java (혹은 .jsp) 파일에서 -> import java.sql.* 2) 연결 (Connection) 드라이버를 로드하고, 드라이버 매니저를 이용해 Connection 인스턴스를 얻는다. 이때 DB의..
- Maven이란 무엇인가? Java 기반 프로젝트의 라이프사이클 관리를 위한 빌드 관리 도구. 아파치 재단에서 제작. > 컴파일과 빌드를 동시에 수행 > 서버 측 Deploy 자원을 관리할 수 있는 환경 제공 > 라이브러리 관리가 용이: 라이브러리를 사용할 때 jar 파일을 다운로드받아서 특정 폴더에 넣는 식이 아니라, 설정 파일에 라이브러리 이름/주소를 써주면 알아서 그걸 가져오는 기능이 있다. 전에도 얼핏 들어본 적은 있고 특히 3번째 특징을 보면 생각나는게 안드로이드 스튜디오의 Gradle이다. 안드로이드 스튜디오에서도 라이브러리를 쓰고 싶으면 build.gradle 파일에다가 dependency 어쩌구를 추가해주면 그걸 Gradle이 인식해서 import해주는 기능이 있었다. 실제로 Gradle..
SQL은 이미 어느정도 아는 내용이기도 하고 얼마 전에 정처기 공부하면서 리뷰하기도 했었으니 대충 슥 보고 넘어가면 될 것 같다. 2-7. MySQL 설치 및 세팅 - 내 컴퓨터에는 이미 WAMP 스택이 깔려있었기 때문에 그거 깔면서 같이 설치됐을 MySQL을 그대로 써먹으면 될거라 생각 - wampstack/mysql/bin 폴더를 환경변수에 추가 - MySQL 로그인: 콘솔창에서 'mysql -u root -p' > -u는 아이디를 주는 부분이고 -p는 패스워드를 입력하겠다는 뜻. 패스워드는 WAMP 깔때 세팅했던 그거 > 아이디를 지정해주지 않고 그냥 mysql이라고만 치면 접근 거부 오류가 뜬다 2-8. SQL - 사용자 계정 생성 및 권한 주기 grant all privileges on (DB명..
1) EL: Expression Language - 값을 표현하는데 사용되는 스크립트 언어로 JSP의 기본 문법을 보완하는 역할을 함 > JSP에는 HTML도 들어가고, 자바 코드도 들어가고 막 섞여있음. 프론트 개발자와 백엔드 개발자 모두가 읽기 편하게 할 수는 없을까? 라는 고민에서 출발. - EL의 기능 > JSP의 스코프에 맞는 속성 사용 > 집합 객체에 대한 접근법 제공 > 수치연산, 관계연산, 논리연산자 제공 > 자바 메소드를 호출할 수 있는 기능 제공 > EL만의 기본 객체 제공: pageContext, pageScope, requestScope, param, header, cookie, ... - 기본 문법: ${exp} ex) ${member.id}님이 로그인하셨습니다. ex) ${par..
[부스트코스] 2-5. Scope
Page Scope -> Request Scope -> Session Scope -> Application Scope 뒤로 갈수록 범위가 넓어짐. 1) Page Scope: 한 페이지에서만 유지, 지역변수처럼 사용 - PageContext라는 추상 클래스 사용 - PageContext라는 JSP 내장 객체가 있음 - 한 페이지 내에서만 유지되는 것이므로 forward로 다른 페이지로 넘어가면 소멸됨 - 지역변수처럼 사용하지만 지역변수와 완전히 같은 것은 아님 (나중에 EL, JSTL을 배우면 안다?) - pageContext.setAttribute() / getAttribute() 로 저장했다가 뺐다가 하면 됨 (다른 scope들도 다 비슷함) 2) Request Scope: 하나의 Request를 받아..
1) redirect - 서버가 클라이언트로 요청을 받은 후, 클라이언트에게 특정 URL로 이동하라고 요청할 수 있음 - 서버 -> 클라이언트: HTTP 상태코드 302, 이동할 URL을 헤더에 담아 전송 - 클라이언트: 서버로부터 받은 상태값이 302이면, 헤더값을 보고 해당 Location으로 이동 (즉 해당 페이지를 자동 요청) - response 객체의 sendRedirect() 메서드를 이용하면 됨 - 크롬 개발자 도구의 Network 탭으로 가보면 302 응답코드를 확인할 수 있다 - 리다이렉트 대상 페이지를 다시 요청할 때는 또 새로운 request, response 객체가 생성된다 2) forward Client ->(request) -> Servlet 1 -> (forward) -> Se..