전체 글 (265) 썸네일형 리스트형 [Javascript] for ... of for ... of문은 iterable 객체를 순회하는 반복문이다. ECMAScript 2015(ES6)부터 도입된 자바스크립트의 반복문 중 하나로, DOM 컬렉션 객체의 각 요소를 반복하여 작업하는 데 용이한 방법을 제공한다. cf) DOM 컬렉션 객체인 HTMLCollection과 NodeList 모두 유사 배열 객체이면서 이터러블 객체다. for ... of문은 iterable 객체의 순회를 위해 고안된 것으로 이를 사용하기 위해서는 iterable 객체에 대한 이해가 필요하다. 이터러블 프로토콜 ES6 이전에는 순회 가능한 객체에 대해 통일된 규약이 없었다. 예를 들면 배열, 문자열, 유사 배열, DOM 컬렉션 등은 통일된 규약이 아닌 나름대로의 데이터 구조를 가지고 for문과 for ... in.. [Javascript] computed property 문법(객체의 key를 변수로 접근하기) 과거, 자바스크립트에서는 객체를 만들 때 정해진 문자열 이름의 속성명을 사용해 왔다. 하지만 ES6 이후로는 computed property를 사용하여 객체를 선언하는 순간 변수 또는 함수를 활용하여 동적인 프로퍼티명을 할당할 수 있게 되었다. 즉, computed property 문법은 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법인 것이다. let kk = "id";let obj = { name : "super", [kk] : 123 // computed property}let mm = "rank";obj[mm] = '#1'; console.log(obj) // {name: "super", id: 123, rank: "#1"} 속성이 추가됨 변수를 .. [Javascript] 호이스팅(Hoisting)의 발생 원리 자바스크립트에서 호이스팅(Hoisting)이란 변수 또는 함수의 선언이 맨 위로 끌어올려지는 현상을 말한다. 그래서 개발자가 어느 라인 어느 위치에 코드를 선언하더라도 실행되기 전 해당 코드가 최상단으로 끌어올려지고 실행된다. 이러한 호이스팅이 발생하는 원인은 자바스크립트의 변수 생성(instantiation)과 초기화(initialization)의 작업이 분리되어 진행되기 때문이다. console.log(a()); // 'a'console.log(b()); // Uncaught TypeError: b is not a functionconsole.log(c()); // Uncaught TypeError: b is not a function function a() { return 'a';} var b.. [Javascript] Cookie 다루기 Cookie란?Cookie는 데이터이면서 우리가 현재 사용하는 PC에 작은 텍스트 파일로 저장되어 있는 것이다. 어떤 사이트에 접속했을 때 '일주일 동안 이 창 보지 않기'나 로그인 페이지에서 '아이디 저장' 또는 '자동 로그인' 같은 기능을 사용해 본 적이 있지 않은가? 사실 브라우저는 내용을 기억할 공간이 없는데, 이를 도와주는 것이 바로 쿠키이다. 쿠키에 대해 알아보기 전에 쿠키가 저장되는 방식은 key : value라는 점을 기억해 두자. 브라우저가 웹 페이지를 서버로부터 요청하게 되면 이 페이지에 속한 쿠키들이 추가로 요청된다. 이러한 방법을 통해 유저에 대한 정보를 기억하는 필수 데이터를 서버가 가져올 수 있는 것이다. Cookie vs Session쿠키는 사용자가 브라우저의 쿠키 데이터를 비.. [Javascript] 객체의 value 값으로 key 값 찾기 Object 함수와 배열 내장 함수를 적절히 조합하여 사용하면 생각보다 간단히 구현이 가능하다. function getKeyByValue(object, value){ return Object.keys(object).find(key => object[key] === value);} 우선 key만 따로 배열로 배열로 전환한 뒤(Object.keys()), 배열 내장 함수 find()를 통해 배열을 순회하여 object[key]의 값과 비교하려는 value의 값이 같으면 그 값을 반환시킨다. 참고https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-value%EA%B0%92%EC%9C%BC%EB%A1%9C-key%EA%B0%92-%EC%B0%BE%EA%B8%B0 [Javascript] forEach()에 break 걸기 본래 Javascript에서 Array.forEach()는 break문을 따로 지원하지 않는다. 만약 일반 for문의 break 구문을 forEach에서 구현하고 싶다면 아래의 3가지 방법을 사용할 수 있다. try... catch문 안에서 forEach를 실행하고 강제로 예외를 던져 루프를 벗어나는 방법Array.some() 함수를 사용하는 방법Array.every() 함수를 사용하는 방법 이들을 차례로 소개해 보려 한다. 1. try...catch 사용하기forEach()에서는 return true를 하든 false를 하든 관계 없이 모두 continue로 작동된다. 따라서 return을 통해 break처리를 할 수는 없어 아예 예외 처리를 통해 강제로 반복문에서 벗어나는 방법을 사용한다. let a.. [Spring Boot] Path Variable - 가변 URI 사용 이번에는 우리가 정의한 URI 값을 변경할 수 있도록, 즉 변수를 사용하여 Endpoint를 활용해 보도록 하겠음. API의 URI를 클라이언트에서 활용할 때에는 정의된 형태로만 호출해야 함. API는 Application Programming Interface이고 Interface는 곧 약속이므로 이 API를 제공하는 사람이 정의해 놓은 방식대로 사용해야 한다는 것. 정의되지 않은 URI를 호출하면 HTTP Status Code 중에서 Page Not Found(또는 Not Found) 에러를 반환하고 정의되지 않은 메서드를 호출하면 Method Not Allowed를 받게 됨. 이처럼 고정된 API만 사용하는 것이 아니라 만약 URI에 가변적인 데이터를 추가해 사용할 수 있다편 편리할 것임. 그렇다면.. [Javascript] Event 동작 취소하기 웹 브라우저의 구성요소들은 각각 기본적인 동작 방법을 가지고 있다. 텍스트 필드에 포커스를 둔 상태에서 키보드를 입력하면 텍스트가 입력된다.form에서 submit 버튼을 누르면 데이터가 전송된다.를 클릭하면 href 속성의 URL로 이동한다.이러한 기본적인 동작들을 이벤트라고 하는데 지난 포스트에서는 이벤트를 추가하는 세 가지 방법에 대해 정리한 바 있다. [Javascript] 이벤트 추가 바로 알기이벤트(event)란 웹 페이지에서 발생하는 상호작용을 말한다. 웹 페이지에서 '무언가 일어났다'는 일종의 신호 같은 것이다. 우리가 사용하는 웹 애플리케이션에서는 수많은 이벤트가 발생한다.developing-move.tistory.com 이벤트는 등록뿐 아니라 취소하거나 조작할 수도 있는데 다음의 세 .. 이전 1 2 3 4 5 6 7 ··· 34 다음
