본문 바로가기

WEB55

CORS 이슈 해결 CORS란? CORS를 해결해보자 프로젝트를 하면서 프론트에서 서버에서 제공한 API로 요청하자, CORS 에러가 발생했다. 지금까지 CORS에러를 해결하기만 하고 정확히 CORS가 무엇이고 어떻게 동작하는지 알지 못했다. 이번에 CORS가 어떻게 동작하고 CORS 에러를 해결하는 방법을 공부하였고 공부하면서 알게된 내용을 정래해보았다. CORS? Cross Origin Resource Sharing CORS는 한 도메인 또는 Origin의 웹 페이지가 다른 도메인 (도메인 간 요청)을 가진 리소스에 액세스 할 수 있게하는 보안 메커니즘이다. CORS는 서버와 클라이언트가 정해진 헤더를 통해 서로 요청이나 응답에 반응할지 결정하는 방식으로 CORS라는 이름으로 표준화 되었다. CORS는 최신 브라우저에서.. 2022. 10. 25.
OSI 7계층, TCP 4계층 2022. 10. 17.
Web Service Architecture 1. Web Server는 웹 브라우저 클라이언트로부터 HTTP 요청을 받는다. 2. Web Server는 클라이언트의 요청(Request)을 WAS에 보낸다. 3. WAS는 관련된 Servlet을 메모리에 올린다. 4. WAS는 web.xml을 참조하여 해당 Servlet에 대한 Thread를 생성한다. (Thread Pool 이용) 5. HttpServletRequest와 HttpServletResponse 객체를 생성하여 Servlet에 전달한다. - 5-1. Thread는 Servlet의 service()메서드를 호출한다. - 5-2. service()메서드는 요청에 맞게 doGet() 또는 doPost() 메서드를 호출한다. - protected doGet(HttpServletRequest re.. 2022. 10. 10.
HTTP API 설계 예시 2022. 10. 1.
client to server 2022. 10. 1.
POST, PUT, PATCH 차이점 HTTP Method 1.POST I.새 리소스 생성(등록) - 서버가 아직 “식별하지 않은” 새 리소스 생성 ex) 회원(리소스)에서 가입기능(method) ex) 회원(리소스)에서 수정기능(method) II. 요청 데이터 처리 - 단순히 데이터를 생성하거나, 변경하는 것을 넘어서 프로세스를 처리해야하는 경우 ex) 주문에서 결제완료 → 배달시작 → 배달완료 같은 단순히 값 변경을 넘어 프로세스의 상태가 변경되는 경우 - POST의 결과로 새로운 리소스가 생성되지 않을 수도 있을때 컨트롤 URI 사용 ex) POST /orders/{orders{/start-delivery (컨트롤 URI) 2. PUT I. 리소스를 대체 - 리소스가 있으면 “완전히” 대체 - 리소스가 없으면 생성 ex) 폴더안에 새.. 2022. 10. 1.
HTTP API 설계 2022. 10. 1.
HTTP 메시지 구조 공식 스펙 https://www.rfc-editor.org/rfc/rfc7230#section-3 2022. 10. 1.
web 인증 방식 2022. 9. 22.
NODE JS ✔Node.js란? Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다. Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다. Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. ✔Node.js를 사용하는 이유 - Node.js를 이용하여 서버를 만들 수 있다. - javascript가 브라우저 뿐만아니.. 2022. 8. 30.
기본값이 inherit CSS 속성 기본값이(default) inherit인 속성은 부모가 설정한 값으로 같이 바뀜. 단, 자식이 직접 값을 입력하면 입력한 값이 적용됨. *기본값이 inherit인 속성 - color - font-size - text-align - font-weight - text-decoration *기본값이 inherit이 아닌 속성 - display - width - height - background-color - letter-spacing - margin - padding - border-radius 2022. 8. 25.
block 속성 정렬 inline-block, inline - 수동적으로 정렬됨 - 부모의 text-align 속성에 의해 block - 능동적으로 정렬 - margin 을 이용 - 우측 : margin-left: auto; - 가운데: margin:0 auto; - 왼쪽 : margin-right: auto; (default 값이 왼쪽이기 때문에 굳이 사용안해도 된다) 2022. 8. 24.