Front-end
-
[부스트코스/back-end] 2. DB연결 웹앱 : forward, servlet&JSP 연동Front-end/부스트코스 : 웹 프로그래밍 2020. 3. 23. 21:41
요청을 받은 서버가 요청의 일부를 다른 서버에게 넘겨주는 작업 forward와 redirect의 차이점? 리다이렉트는 서버가 클라이언트에게 새로 요청할 곳을 알려주는 작업이면서 URL이 변경되고, 포워드는 요청받은 서버가 전부 처리하는 것이 아니라 다른 서버에게 맡기는 것 (URL이 바뀌지 않음) 요청이 1개인지 요청이 2개인지 아는 것이 중요함! #front protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { int dice = (int)(Math.random()*6)+1; request.setAttribu..
-
[부스트코스/back-end] 2. DB연결 웹앱 : redirectFront-end/부스트코스 : 웹 프로그래밍 2020. 3. 21. 18:33
HTTP 프로토콜로 정해진 규칙 서버는 클라이언트로부터 요청을 받은 후 클라이언트에게 특정 URL로 이동하라고 요청할 수 있음 -> 이때 status code를 302로 보내고 함께 이동할 URL 정보를 헤더에 담아 response로 전송함 클라이언트(브라우저)의 주소창이 전송받은 URL로 변경됨 서블릿이나 jsp는 리다이렉트를 하기 위해 sendRedirect() 메소드 사용 redirect2 동작 방식 redirect1.jsp 요청 redirect2.jsp로 리다이렉트 요청 (status code : 302) 웹 브라우저는 WAS의 리다이렉트 요청을 받고 redirect2.jsp 요청 redirect2.jsp 결과 출력
-
[부스트코스] 2. DB연결 웹앱 : JSP 내장객체Front-end/부스트코스 : 웹 프로그래밍 2020. 3. 21. 18:18
JSP를 실행하면 서블릿 소스가 생성되고 실행됨 -> 대부분의 코드는 _jspService() 메소드 안에 삽입 이때 삽입된 코드 윗 부분에 미리 선언된 객체들이 있음 -> 이런 객체들을 내장객체라고 함 내장 객체 Java Class 주요 역할 request javax.servlet.http.HttpServletRequest HTML form 요소 선택 값과 같은 사용자 입력 정보를 읽어올 때 사용 response javax.servlet.http.HttpServletResponse 사용자 요청에 대한 응답을 처리할 때 사용 pageContext javax.servlet.jsp.PageContext 현재 JSP실행에 대한 context 정보를 ..
-
[부스트코스] 2. DB연결 웹앱 : JSP란?Front-end/부스트코스 : 웹 프로그래밍 2020. 3. 15. 23:12
HTML 내에 Java 코드를 삽입하여 웹 서버에서 동적으로 웹 페이지를 생성하여 웹 브라우저에 돌려주는 언어 모든 JSP 파일은 실행시 자바 서블릿으로 변환됨 구성요소 : 스크립팅, 지시자, 액션태그 JSP의 등장배경 1998년 MS에서 ASP(Active Server Page)라는 쉽게 웹을 개발할 수 있는 스크립트(script) 엔진을 발표 1997년에 발표된 서블릿은 ASP에 비하여 상대적으로 개발 방식이 불편함 1999년 ASP에 대항하고자 썬마이크로시스템즈에서 JSP를 발표 --- 페이지 지시자 : 이 부분이 서블릿으로 바꿀 때 어떻게 해야 하는지 지시하는 부분 --- scriptlet : 자바 코드를 입력할 수 있는 부분 Service 메소..
-
📒 React Document 메모Front-end/React.js 2020. 3. 12. 13:08
React document 정리 리액트는 JSX 문법을 사용한다. ➡️ 자바스크립트 내 HTML 태그들을 끼워넣는 표현 방법 HTML 친화적이라 쉬움 마크업과 로직을 분리하지 않고 UI 작성 가능 리액트 컴파일 과정에서 에러 디텍트가 가능함 무조건 사용해야 하는 것은 아니지만 권장 Props - 부모 컴포넌트가 자식 컴포넌트에게 넘겨주는 파라미터 같은 것들, Read-only하므로 변경하고자 할 때 필요한 개념이 State Components - element들이 모여 하나의 컴포넌트를 이룸, 반복되는 UI나 기능들을 효율적으로 나타내고자 컴포넌트를 단위로 분리해주는 것이 좋음 function을 class로 변환하는 방법 React.Component를 상속받는 동일한 이름의 ES6 클래스 생성함 rend..
-
HTTP Status code / HTTP 상태 코드 정리Front-end/Web development : 웹 개발 2020. 3. 12. 10:54
클라이언트 - 서버 구조에서 클라이언트가 서버에게 request를 보내면 서버는 이에 대해 response를 보낸다. 모든 HTTP 응답 코드는 5개로 분류할 수 있다. => Status code의 첫 번째 숫자에 따라 response class가 달라진다. 1️⃣ 1로 시작하는 경우 = Informational responses : 요청을 받았으며 프로세스를 계속함 100 Continue 요청의 시작 부분이 받아들여졌으며 클라이언트는 계속 이어서 보내야 함 이미 요청을 완료한 경우에는 무시해도 됨 101 Switching Protocol 요청 헤더의 Update 필드 중 하나로 서버가 프로토콜을 변경함 102 Processing 서버가 요청을 수신하고 이를 처리하고 있으나 제대로 된 응답을 알려줄 수 ..
-
[부스트코스] 2. DB 연결 웹앱 : WEB UI 개발Front-end/부스트코스 : 웹 프로그래밍 2020. 3. 7. 22:50
강의 : www.edwith.org/boostcourse-web [부스트코스] 웹 프로그래밍 강좌소개 : edwith - 부스트코스 www.edwith.org * Window 객체 전역 객체로 많은 메소드들이 존재함 (.으로 부를 수 있고 생략 가능) alert : 브라우저에서 경고창을 띄울 때 사용함 setTimeout : 인자로 함수(콜백함수 : 나중에 실행되는 함수)를 받음 함수 다음으로 나오는 파라미터(밀리세컨드) 이후 첫 번째 파라미터인 함수를 실행한다는 메소드 비동기이므로 다른 것들 먼저 실행하고 있음 스택이 실행되고 나서 비동기가 실행된다! function run() { setTimeout(function() { var msg = "hello world!"; console.log(msg); ..