반응형 전체 글71 [HTTP] Access-Control-Allow-Origin 이란? Access-Control-Allow-Origin 이란? 웹 브라우저에서 발생하는 Cross-Origin 요청을 제어하는 HTTP 헤더이다. Cross-Origin 요청은 웹 애플리케이션이 서로 다른 도메인, 프로토콜 또는 포트를 가지고 있는 리소스에 접근하는 요청을 말한다. 웹 브라우저에서 JavaScript를 사용하여 Cross-Origin 요청을 보낼 때, 브라우저는 해당 요청의 보안을 위해 Same-Origin Policy를 적용합니다. Same-Origin Policy는 기본적으로 동일 출처 (Same-Origin)에서만 요청을 허용하고, 다른 출처로의 요청은 차단합니다. 하지만, 애플리케이션에서 특정 출처로부터의 Cross-Origin 요청을 허용해야 할 때가 있습니다. 이때 Access-Co.. 2023. 6. 29. [Scheduler] 초간단!! Spring boot Scheduler 설명 및 사용법 Scheduler란? Scheduler는 특정 시간에 주기적으로 작업을 실행하고 싶을때 주로 사용된다. 예를 들면 1년이 지난 User들을 휴먼계정 처리하고 싶다. 라고 할때 일정 시간(예: 매일 밤11시59분)에 휴먼계정 처리 API를 호출한다. 사용법 1. Main 클래스에 @EnabledScheduling 애노테이션을 달아준다. 2. 일정 시간에 실행할 부분을 만들어 보자. cron: "초 분 시 일 월 요일" 순으로 원하는 시간을 작성해주면 된다. zone: 날짜나 시간을 어떤걸 기준으로 할지 설정해준다.(본인은 서울이기때문에 Asia/Seoul로 설정함) 2023. 6. 29. [HTTP] Origin이란? Origin이란? Origin은 요청이 시작된 서버의 위치를 나타내는 문구이다. 만약 어떤 사용자가 카카오 로그인 서버로 로그인 요청을 한다고 가정해보자. 로그인 요청: Client -> Kakao 로그인 응답: Kakao -> Client 여기서 서버 Ip는 2개이다. 1. Client 서버 2. Kakao 로그인 API 서버 이 2개의 IP는 서로 다른 IP번호를 갖고 있게 된다. 예를 들어 Client 서버는 http://client:80 이라고 하고 로그인 서버는 http://kakao/login:9091/이라고 해본다면 클라이언트 서버(http://client:80)가 로그인 서버(http://kakao/login:9091/)에게 HTTP 요청을 보낼 때 Origin 이 다르다라고 하는 것이다... 2023. 6. 29. [HTTP] CORS(Cross Origin Resource sharing)란 무엇인가? CORS 란? 쉽게 설명하자면 현재 Ip가 아닌 다른 Ip로 리소스를 요청하는 구조이다. 브라우저에서는 보안 적인 이유로 cross-origin HTTP 요청들을 제한한다. 그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다. 서버가 동의한 브라우저에서는 요청을 허락하고, 동의하지 않는다면 거절한다. 이런 허락 요청 및 수락, 거절 메커니즘은 HTTP-header를 이용한다. 이를 CORS(Cross-Origin Resource Sharign)라고 부른다. 여기서 이해가 되지 않는다면 아래 세 가지 키워드를 살펴보자. 1. Origin (Cross Origin VS Same Origin) 2. SOP 3. Access-Control-Allow-Origin CORS는 어떻게 동작시킬까? C.. 2023. 6. 28. [HTTP] SOP(Same Origin Policy)란 무엇인가? SOP란? Same-Origin Policy (SOP)는 웹 보안을 위한 중요한 개념으로, 웹 브라우저에서 적용되는 보안 정책입니다. SOP는 웹 애플리케이션에서 다른 출처의 리소스에 대한 접근을 제한함으로써 웹 애플리케이션의 안전성을 보장합니다. SOP는 웹 브라우저에서 실행되는 JavaScript 코드에 대한 제약을 설정하여 다른 출처로의 요청을 제한합니다. 출처(Origin)는 프로토콜, 호스트, 포트 번호로 구성되며, 동일 출처(Same-Origin)의 리소스에 대해서만 접근을 허용합니다. SOP의 주요 원칙은 다음과 같습니다: 동일 출처 정책: 웹 페이지의 스크립트는 동일한 출처에서 로드된 리소스에만 접근할 수 있습니다. 출처는 프로토콜, 호스트, 포트 번호로 정의됩니다. Cross-Origin.. 2023. 6. 28. [JetBrains] 라인 분리자(Line separator) 설정 및 Tab size, Indent 설정 운영체제별로 Line separator가 다르기 때문에 종종 문제를 일으키곤 한다. 이번에는 JetBrains 에디터에서 LF 설정 하는 법을 알아보자. Settins에 들어가서 설정을 변경하자. settings -> Editor -> Code Style에 Line separator를 변경해주자 Unix and macOs 로 맞춰주고 Apply -> OK 설정 이렇게 하면 설정이 완료 된다. 추가로 Tab size, indent(스페이스바 띄어쓰기 간격) 설정을 해야 한다면 Code Style 하위에 원하는 언어를 선택해 설정 할 수 있다. 2023. 6. 28. Git 에서 CRLF 개행 문자 차이 해결 CRLF 란? CR: Carriage Return (\r) LF: Line Feed (\n) 해당 용어(CR, LF)는 새로운 줄 (New line) 으로 바꾸는 방식을 의미한다. Windows에서는 line ending으로 CR, LF를 사용하고 Unix, Max OS 는 LF만 사용하기 때문에 문제가 발생한다. 이런 문제를 방지하기 위해 OS 가 달라도 문제가 없도록 crlf 처리 방법을 결정해야 한다. Git 설정 core.eof : git 이 line ending을 처리하는데 관련 된 항목 core.eol = native. 기본 설정. 시스템에서 line ending 을 처리하는 방법에 따른다. windows에서는 CRLF 를 사용 Linux, OS X 는 LF 만 사용 core.eol = crl.. 2023. 6. 28. [vue3] Vue.Draggable 정리 관련 정리 해야함 참고 사이트 https://sortablejs.github.io/Vue.Draggable/#/handle vuedraggable sortablejs.github.io https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/nested-with-vmodel.vue GitHub - SortableJS/Vue.Draggable: Vue drag-and-drop component based on Sortable.js Vue drag-and-drop component based on Sortable.js. Contribute to SortableJS/Vue.Draggable development by creating .. 2023. 6. 23. [vue3] SCSS사용 방법(정말 쉬움.) SCSS란? CSS pre-processor로서 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성 및 가독성을 높여주며 유지보수에 용이하다. SCSS 설치 npm install -D sass 프로젝트에서 sass파일 만들기 project - src - assets - scss main.scss assets 안에 scss라는 폴더를 생성하고 main.scss 파일을 생성하자. 생성했으면 main.js에 import해서 사용하도록 한다. import { createApp } from "vue"; import App from "./App.vue"; import "./assets/scss/main.scss"; //이부분이 scss import한 부분 createApp(App).mount("#app"); 2023. 6. 23. 이전 1 2 3 4 5 6 7 8 다음 반응형