본문 바로가기

JavaScript14

[cors-anywhere] 나만의 프록시 서버를 만들어보자 [cors-anywhere] 나만의 프록시 서버를 만들어보자 개발을 하는 사람이라면 흔하게 사용해보는 것이 공공데이터포털에서 제공하는 오픈API이다. 그리고 또 흔하게 겪는것이 CORS 에러이다. 나 또한 회사 업무중에 javascript fetch api로 호출을 해야 할 때 겪게 되었다. CORS란 Cross-Origin Resource Sharing, 교차 출처 리소스 공유이다. 쉽게 말하여 다른 서버에서 HTTP 요청을 보내고, 이를 허용하지 않았기 때문에 200 이더라도 내가 원하는 응답 값을 받지 못한 것이다. 로컬 환경에서의 개발을 할 때는 프록시 서버를 이용하여 이를 피할 수 있다. 프록시 서버는 요청과 응답 사이, 즉 클라이언트와 서버 사이에서 헤더 추가 또는 요청 허용, 거부하는 역할을.. 2022. 4. 13.
이클립스 eclipse .js 파일 흑백으로 나올 때 이클립스 eclipse .js 파일 흑백으로 나올 때 Preferences -> File Associations add -> .js 입력 -> OK Associated editers -> Generic Text Editor 클릭 -> Default 클릭 2021. 5. 22.
[JSP] Ajax (jquery) [JSP] Ajax (jquery) 이전 포스팅에서 Javascript에서 Ajax를 이용하는 방법에 대하여 알아보았다. 2021.03.11 - [JSP/JSP정리] - [JSP] Ajax [JSP] Ajax [JSP] Ajax 이전까지 배운 데이터 전송방식은 페이지 전체가 이동하며 데이터를 가공한 후 이용했다. 하지만 회원가입페이지의 경우 중복확인 버튼과 같은 현재 페이지 내에서 정보를 가공한 후 heekng.tistory.com 이번에는 jQuery에서 Ajax를 이용하는 방법에 대해 알아보자. Javaxcript와 jQuery에서 Ajax를 이용하는 방법의 차이 기본적인 Ajax의 구조는 Javascrip를 이용하는 문법과 jQuery문법의 차이밖에 없다. 하지만 jQuery를 사용하는 이점은 코드.. 2021. 3. 20.
[JS] 브라우저 객체 모델 BOM - 2 [JS] 브라우저 객체 모델 BOM - 2 2021/02/17 - [Javascript/Javascript정리] - [JS] 브라우저 객체 모델 BOM - 1 location 객체 location객체는 현재 브라우저에 표시된 HTML문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용한다. location객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL주소를 다양하게 해석하여 처리할 수 있다. href 페이지의 URL 전체 정보를 반환한다. URL을 지정하여 페이지 이동이 가능하다. location.href 의 형태로 작성한다. 1. document.write(location.href);와 같이 출력의 대상으로 작성한다면 해당 페이지의 정보를 반환한다. 2. location.href = ".. 2021. 2. 17.
[JS] 브라우저 객체 모델 BOM - 1 [JS] 브라우저 객체 모델 BOM 자바스크립트를 이용하여 브라우저 자체에 접근하는 방법을 알아본다. 목차 브라우저 객체 모델이란? window 객체 브라우저 객체 모델이란? 자바스크립트를 이용하면 HTML 태그에 대한 접근 뿐만이 아니라 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. 이 때 사용하는 객체 모델을 브라우저 객체 모델(BOM, Browser Object Model)이라고 한다. 브라우저의 종류는 익스플로러, 크롬, 파이어폭스 등 다양하다. 때문에 BOM은 DOM과 다르게 W3C의 표준 객체 모델이 아니다. 하지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. 이러한 BOM객체들을 전역 객체로 사용할 수 있다. window 객체 .. 2021. 2. 17.
이클립스에서 자바스크립트 자동완성 사용하기 이클립스에서 자바스크립트 자동완성 사용하기 ecripse IDE를 사용하며 웹 페이지를 만들면 기본적으로 자바스크립트 코드 자동완성이 되지 않는다. 이때는 따로 플러그인을 설치해야한다. 1. 플러그인 다운로드 https://github.com/angelozerr/tern.java/releases Releases · angelozerr/tern.java Use tern.js in Java context. Contribute to angelozerr/tern.java development by creating an account on GitHub. github.com 위 주소로 접속하여 tern.repository-1.2.1.zip 을 다운로드 받아준다. 2. 이클립스에 플러그인 추가하기 이클립스에서 Hel.. 2021. 2. 15.
[JS] DOM 객체, 프로퍼티 [JS] DOM 객체 DOM이란 Document Object Model의 약자로 HTML 태그들을 하나씩 개체화한 것이다. HTML페이지의 내용과 모양을 Javascript로 제어하기 위해 사용되는 객체들이다. HTML 태그 당 DOM객체가 하나씩 생성된다. HTML 태그의 포함관계에 따라서 부모 자식 관계로 구성한다. 목차 HTML문서의 태그를 객체로 받아오기 받아온 태그 객체 이용하기 DOM객체의 프로퍼티 HTML문서의 태그를 객체로 받아오기 DOM객체를 사용하는 가장 기본은 document를 이용하는 것이다. 이전에 document.write를 이용할 때 사용한 적 있었다. [JS] 자바스크립트로 본문에 코드 추가하기 [JS] 자바스크립트로 본문에 코드 추가하기 웹 페이지에서 사용자가 어떠한 행동을.. 2021. 2. 14.
[JS] 객체, 프로토타입, property [JS] 객체, property 자바스크립트에서 객체를 알아본다. 객체의 고유한 속성은 프로퍼티(property)라고 부르며, 여러 프로퍼티와 값의 쌍으로 표현된다. 자바스크립트에서 객체는 타 언어(자바, 파이썬, C, 등)에 비해 자주 사용되지는 않는다. 추후에 배울 JSON타입의 데이터를 추출할 때 사용하거나, Ajax 통신으로 여러 개의 값을 서버에 전달할 때 {}로 묶어서 전달하는 방식으로 사용된다. 목차 자바스크립트 객체 생성방법 자바스크립트 객체 프로퍼티(property) 객체 접근방법 프로토타입 자바스크립트 객체의 유형 - 코어 객체 코어 객체 - Date타입 자바스크립트 객체 생성방법 자바스크립트에서 객체를 생성하는 방법은 변수를 선언할 때와 유사한 형태로 작성한다. var 객체명 = { .. 2021. 2. 13.
[JS] 함수 function [JS] 함수 function 자바스크립트의 함수 선언방법과 전역함수에 대해 알아본다. 목차 자바스크립트 함수 선언방법 자바스크립트의 전역함수 자바스크립트 함수 선언방법 자바스크립트에서 함수를 선언할 때에는 다음과 같이 작성한다. function 식별자(매개변수1, 매개변수2, ...){ 연산내용1; 연산내용2; 연산내용3; ... return 리턴값 [생략가능] } function키워드로 함수 선언을 알린다. 식별자를 작성한 후 매개변수를 작성한다. 소활호 () 내에서 매개변수를 작성하며, 콤마 , 로 매개변수를 구분한다. 생략 가능하다. 중괄호 {} 내에서 연산할 내용을 작성한다. return 키워드는 리턴값이 필요할 때 작성하지만, 리턴값이 필요하지 않을 때에는 생략 가능하다. See the Pen.. 2021. 2. 12.