[Node] RestAPI, URI 고려사항, 응답 상태 코드

1. RestAPI - Rest는 Represetational State Transfer이라는 용어의 약자로 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 발표 - 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미하며 자원의 표현과 상태(정보) 전달을 하는 것 - URI를 통해 자원을 명시하고, HTTP Method(GET, POST, DELETE, PUT...)를 통해 자원에 대한 행위(CRUD Operation)를 적용하고 자원을 JSON, XML, TEXT ... 들 여러 형태의 표현으로 나타내어 데이터를 주고 받는다 GET 해당 리소스를 조회(데이터를 가져오는 요청) POST 리소스를 조회하고 자세한 정보를 가져온다.(데이터 전달) PUT 해당 리소스를 ..

[Node] FrontEnd & BackEnd 연동

- FrontEnd는 React.js - BackEnd는 Node.js 먼저, 둘을 연동하기 위해서는 데이터를 주고 받기 위한 통신 라이브러리인 axios를 설치해야 한다. - npm install axios 그리고 FrontEnd(React.js) 쪽에 있는 package.json에 proxy를 추가해 줘야 한다. 이 proxy는 Front 쪽에서 axios로 요청하는 모든 것은 proxy에 적혀 있는 포트로 연결해서 요청하고 데이터를 가져온다. "proxy" : "http://localhost:8080" 이처럼 적혀 있다면 Front에서 3000포트로 연결하더라고 Back의 8080 포트에 접속하는 것이다. axios.get("주소").then(res => {}).catch(error => {}); ..

[Node] Node.js 초기 설치, 설정, 용어, 동작

1. npm init(package.json 설정) - 먼저, npm init을 터미널에 입력을 해 package.json을 설정한다. 2. express 설치 - npm install express -save 을 이용해 express 설치 3. 실제 사용할 server.js 작성 // node_modules의 express 패키지를 가져온다. var express = require("express"); // app이라는 변수에 express 함수의 값을 저장한다. var app = express(); // 환경변수(process.env.PORT)에서 port를 가져온다. 그러나 환경변수 값이 없으면 5050 포트를 지정한다. var port = app.listen(process.env.PORT || 5..

[Spring] Spring에서의 REST 컨트롤러 사용 및 JSON 객체를 이용한 REST 방식의 Ajax 이용

- Ajax(JavaScript) https://tadaktadak-it.tistory.com/93 [JSP] Ajax(Asynchronous Javascript and XML), GET/POST 방식 * GET 방식과 POST 방식 - GET이 기본이고 필요할 때 POST 사용 - 전송할 데이터 양이 적고 노출되어도 무방하다면 GET 방식을 기본으로 사용하고, 전송할 데이터의 양이 크거나 노출이 되면 안 될 데이 tadaktadak-it.tistory.com - REST, JSON, Ajax(jQuery) https://tadaktadak-it.tistory.com/114 [Spring] REST(Representational State Transfer), JSON(JavaScript Object No..

[Spring] REST(Representational State Transfer), JSON(JavaScript Object Notation), Ajax(jQuery)

1. REST란? "하나의 URI는 하나의 고유한 리소스를 대표하도록 설계된다." REST(Representational State Transfer) 란 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고받는 모든 것을 의미하며 자원의 표현과 상태(정보) 전달을 하는 것 URI를 통해 자원을 명시하고, HTTP Method(GET, POST, DELETE, PUT...)를 통해 자원에 대한 행위(CRUD Operation)를 적용하고 자원을 JSON, XML, TEXT ... 들 여러 형태의 표현으로 나타내어 데이터를 주고 받는다. CRUD Operation Create : 생성(POST) Read : 조회(GET) Update : 수정(PUT, PATCH) Delete : 삭제(DE..

[JSP] Ajax(Asynchronous Javascript and XML), GET/POST 방식

* GET 방식과 POST 방식 - GET이 기본이고 필요할 때 POST 사용 - 전송할 데이터 양이 적고 노출되어도 무방하다면 GET 방식을 기본으로 사용하고, 전송할 데이터의 양이 크거나 노출이 되면 안 될 데이터라면 POST 방식을 사용 GET 방식 - 주소에 데이터를 추가해서 전달하는 방식, 쿼리스트링에 포함되어 전송되므로 길이의 제한이 있으며 주소에 데이터가 보이므로 보안상 취약점이 존재 query string : url 뒤에 ? 이후의 문자열 "키1=값1&키2=값2&..." POST 방식 - 데이터를 별도로 요청 body에 첨부하여 전달하는 방식 - 브라우저의 히스토리에도 남지 않고 데이터는 쿼리 문자열과는 별도로 전송 - 따라서 데이터의 길이에 대한 제한도 없고 GET 방식보다 보안성이 좋음..

[HTML] form(input, textarae, select) 태그, fieldset, legend

1. form 태그 - 웹 페이지 내에서 사용자로부터 입력을 받은 후 데이터를 모아서 다른 페이지로 전송할 때 사용하는 태그 여러 입력들(input, textarea, select ...) 2. input 태그 - 사용자에게 입력받기 위해 사용하는 태그로 form 태그 안에 속해 있는 태그 type 속성 그 외 속성들 예시 - method는 get과 post 방식이 있는데 get은 주소창에 데이터가 쓰여지고 post는 안 쓰여진다. - type을 생략하면 자동으로 text 타입이 된다. - radio에서 같은 세트로 하고 싶다면 name을 같게 해야 한다. 속성에 checked를 써주면 그 요소가 체크가 된 상태로 페이지가 시작한다. - checkbox는 중복 선택이 가능하다. 그리고 다른 name으로 ..