WEB (6) 썸네일형 리스트형 [이슈모음] CORS 해결 SOP(동일 출처 정책, Same-Origin Policy) 정책을 위반하는 행동을 하게 되어 CORS 에러가 나타난 것이다. CORS 정책은 가져오는 리소스들이 안전한지 검사하는 브라우저의 방화벽이다. 리소스 요청에 의한 응답은 받았으나 브라우저가 이를 분석해 동일 출처하게 아니면 에러를 반환하는 것이다. 결국 CORS 해결책은 서버의 허용이 필요하다. 응답헤더에 Access-Control-Allow-Origin을 담아 클라이언트로 전달해야 한다. 허용할 출처를 기재하여 클라이언트에 응답하면 된다. 즉, 백엔드 개발자가 고쳐야 할 부분인 것이다. 사전지식 : HTML [link, img] 태그에서 다른 사이트 리소스에 접근 가능 (Cross-Origin) => Same Origin Policy 무시 [.. vue error : VueLoaderPlugin is not a constructor [유사 에러] Cannot find module 'vue-loader/dist/pluginWebpack5 Cannot find module 'vue-loader/lib/plugin' Require stack: => Webpack, Webpack-cli 버젼이달라 vue-loader 정의 방식이 다르다. 아직 뚜렷한 해답은 못찾은 상황 (webpack 5버젼, cli 15버젼) 클론중인 영상이 있다면 그에 맞게 웹팩 버젼을 다운그레이드 시키면 된다. [webpack 버젼 설정] npm i webpack@0.0.0 vue error : The template root requires exactly one element. 이 에러는 root를 하나로 설정해야하는 규칙을 지키지 못해 발생한 것이다. 전체를 div태그로 묶어줘야 한다. ~ Vue 3버전 설치와 세팅 1. NodeJS 설치 2-1 Teminal 에 npm install -g @vue/cli 입력 2-2 직접 script 태그에 추가 [WEB] jQuery Ajax & JSON 비동기식 처리 모델과 Ajax 1. 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 전환이 발생한다. (서버와의 통신) 2. 서버는 요청받은 페이지를 반환하는데 이 때 HTML에서 로드하는 CSS나 JS파일도 같이 반환된다. 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 서버로부터 웹페이지가 반환되면 클라이언트는 이를 렌더링하여 화면에 표시한다. Ajax(Asynchronous JavaScript and XML) - 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식 - 비동기식 처리 모델은 병렬적으로 작업을 수행한다. 작업이 종료되지 않은 상태라도 다음 작업을 실행한다. - 서버.. [HTML] 태그 단축키(emmet) [HTML] 태그 단축키(emmet) Visual Studio Code 에서, [file] -> [preference] -> [settings] -> "emmet" 검색 후 체크 tml이나 css등을 작성할때 시간을 단축시켜주는 확장 플러그인이다. vscode에는 기본적으로 적용되어 있으니 사용해보자. ! + tab 키를 누르면 기본 폼이 만들어진다. link + tab 키를 누르면 스타일시트 코드가 완성된다. div.c + tab => li*3 = div>span + tab => 이전 1 다음