반응형

프론트엔드 (Front-End)/자바스크립트 ( Javascript ) 7

<Javascript> 다중으로 조건문 연산하기 (삼항연산자)

다중연산자는 모두가 알고 있다. 그럼 3개 이상은 어떻게 구현해야 할까,,? - 구문 condition ? exprIfTrue : exprIfFalse 조건 연산자는 아래와 같이 연결해 사용할 수 있다. 이는 연결된 if … else if … else if … else와 유사합니다. function example(…) { return condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4; } 위 코드는 아래의 연결된 if ...else 문과 동일하다고 볼 수 있다. function example(…) { if (condition1) { return value1; } else if (cond..

<Javascript> 지역변수와 전역변수의 차이

이번 포스팅은 자바스크립트에서 지역변수와 전역변수의 차이에 대해서 포스팅할 것이다. >>> 변수의 유효 범위(variable scope) 자바스크립트에서 객체나 함수는 모든 변수(variable)이다. 변수의 유효 범위 (scope) 란 해당 변수가 접근할 수 있는 변수, 객체 그리고 함수의 집합을 의미한다. 자바스크립트에서 변수는 유효 범위에 따라 다음과 같이 구분된다. 1. 지역 변수(local variable) 2. 전역 변수(global variable) A. 지역 변수(local variable) 먼저, 지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킨다. 이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다. 함수의 매개변수 또..

<javascript> 웹 스토리지(localStorage, sessionStorage) 사용 방법

이번 주제는 웹 스토리지(localStorage, sessionStorage) 사용 방법에 관하여 포스팅 한다. 자바스크립트로 웹개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생긴다. 그럴때는 대부분 데이터베이스의 서버나, 클라우드에 데이터를 저장하게 되는데, 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방한 데이터 혹은 토큰과 같이 일회성 데이터일 경우 브라우저 내에서 데이터를 저장하도록 한다. 이번 포스팅에서는 브라우저 내에 데이터를 저장하도록 하는 웹 스토리지 기술인 로컬 스토리지, 세션스토리지에 대해서 알아보도록 하자. - 로컬 스토리지(localStorage) - 세션 스토리지(sessionStorage) >>> 로컬 스토리지(localStorage) 와 세션 스토리지(se..

<JavaScript> location.href 페이지 이동

질문 : Javascript 에서 페이지 이동은 어떻게 할것인가? 방법은 대표적으로 2가지의 방법이 있다. location.href 와 location.replace(). location.href에서 href는 객체에 속해 있는 설정으로 현재 접속중인 페이지의 정보를 갖고 있다. 그리고 그 값을 변경할 수 있는 프로퍼티 이기 때문에 다른 페이지로 이동하는데도 사용되고 있다. 현재 페이지 확인 방법 location.href; // https://10.13.10.21:8080/outpage location.href 로 페이지 이동 방법 location.href = "www.naver.com"; //네이버로 이동하게 된다. location.href vs location.replace()의 차이 location..

<Javascript> var, let, const 차이점

자바스크립트에서 변수를 선언하는 종류에는 3가지가 있다. 이것은 항상 다시 찾아보게 된다. 까먹지 않게 기록하여 보자. 1. var var은 변수 선언으로 단점이 존재한다. var carName = 'volvo'; console.log(carName); var carName = 'hyundal'; console.log(carName); --------------------------- volvo hyundal 변수를 재선언 하였더니 에러가 나오지 않고 각기 다른 값이 출력된다. 코드량이 많아 진다면 사용 위치를 파악하기 힘들뿐더러 값이 변경될 위험이 있다. 요새는 var 선언을 잘 사용하지 않는다. 2.const & let ES6 이후, var을 보안하기 위해 새로운 변수 선언 방식이 추가되었다. con..

[JavaScript] Daum 주소 검색 API 활용하기

Daum 주소 검색 API 활용하기 1. '주소 찾기' 버튼 클릭 2. 주소찾기 팝업창에서 자신이 찾고자 하는 주소 검색 및 선택 3. 선택된 주소 회원가입페이지 주소 필드에 입력 4. 상세 주소 입력 Daum 에서 제공하는 주소록 API https://postcode.map.daum.net/guide =>> 참고링크 - Key를 발급 받을 필요가 없습니다. - 사용량에 대한 제한이 없습니다. - 기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다. - 기초구역번호가 발급된 도로명 주소, 영문 주소를 확인 가능합니다. - 행정안전부에서 제공하는 "도로명 주소" DB를 직접 업데이트 받고 있으므로 가장 최신의 데이터를 이용하실 수 있습니 다. - 하단 로고를 임의로 가릴 경우, 사용에 제약이 발생할..

AJAX란? ( ajax 사용 방법 )

AJAX AJAX란? JavaScript의 라이브러리중 하나. Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로고침 안해도 페이지의 일부만을 위한 데이터를 로드하는 기법이다. JavaScript를 사용한 비동기 처리 통신 및 클라이언트와 서버간에 XML 데이터를 주고받는 기술 !! 파라미터들을 오브젝트 형식으로 받는다. type은 get이나 post 같은 HTTP Method. Url는 데이터를 받아올 페이지. (API 통신) Data는 요청시에 함께 보낼 파라미터. DataType은 받아올 데이터의 형식. Success는 성공시에 수..

반응형