이 기술 블로그를 만들기 위해 5년을 미뤘다.

Javascript에서 클라이언트와 서버 간 데이터를 주고받기 위해 사용되는 비동기 HTTP 통신 방식으로는 대표적으로 fetch, axios, ajax 등이 있다. 이들의 공통점과 차이점을 알아보자. fetch 별도의 설치 없이 모던 브라우저에서 사용 가능 POST, PUT 요청의 경우에는 body에 데이터를 실어 보냄 fetch(`/payload`, { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ pname }) }).then(res => { // ... }) 단점 - IE에서는 지원하지 않으므로 polyfill 주입 필요 (chrome 42+, firefox 39+, edge 14+, s..

HTML 파일에서 외부 js 파일을 가져오는 방법은 다음과 같다. 그럼 여기서 궁금한 점이 발생한다. script 태그의 위치는 어디에 위치해야 할까? 보통 브라우저는 HTML 문서를 파싱할 때, 위에서부터 차례대로 파싱하게 된다. 그렇기 때문에 파싱 과정에서 script 태그를 만나면 해당 js 파일의 다운로드가 완료될 때까지 DOM 생성을 멈춘다. 따라서, 스크립트가 페이지 생성을 막아버리므로 사용자는 스크립트를 다운받을 때까지 스크립트의 아래에 위치한 페이지를 볼 수 없게 된다. 이러한 이유 때문에 보통 script 태그는 보통 body의 최하단에 위치하는 게 일반적이다. 하지만 script 태그가 맨 아래에 위치하게 된다면, HTML 문서를 다운로드한 후 스크립트를 다운받아 실행하므로 페이지 로딩..

보통 자바스크립트로 애니메이션을 구현해야 할 경우, setInterval과 requestAnimationFrame을 이용한 방식이 가장 많이 사용된다. 나는 setInterval을 주로 사용했었는데, setInterval로 만든 애니메이션의 경우에는 같은 애니메이션을 동시에 여러 번 호출하는 경우 애니메이션이 꼬이면서 버벅임이 발생할 수 있다는 단점이 있다. (애니메이션 함수가 종료되기 전에 이벤트를 실행하는 경우에는 중첩돼서 이벤트가 실행되기 때문에 clearInterval로 기존 이벤트를 지워줘야 함) 그래서 이번에 requestAnimationFrame으로 코드를 리팩토링하면서 알게 된 setInterval과 requestAnimationFrame의 차이점을 간략히 정리했다. setInterval ..

실행 컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성 → 해당 실행 컨텍스트를 콜 스택에 저장 → 선입후출(stack)로 코드들을 실행하여 전체 코드의 환경과 순서 보장 예시 /* 여기는 전역 컨텍스트입니다. */ var a = 1; function outer() { /* 여기는 outer 함수의 컨텍스트입니다. */ function inner() { /* 여기는 inner 함수의 컨텍스트입니다. */ console.log(a);// undefined 출력var a = 3; } inner(); console.log(a);// 1 출력 } outer(); console.log(a);// 1 출력 : 차례대로 전..

This 실행 컨텍스트가 생성될 때(=함수가 실행될 때) 결정됨 실행 컨텍스트 생성 당시 this가 지정되지 않은 경우에는 전역 객체가 대신 저장됨 자바에서의 this와는 다른 개념 자바에서는 클래스로 생성한 인스턴스 객체를 의미 자바스크립트에서는 어디서든 this라는 개념이 사용될 수 있음 전역 공간에서의 This 전역 객체를 가리킴 브라우저에서는 window이고, node.js에서는 global 전역 변수 생성 시, 자바스크립트 엔진은 해당 변수를 전역 객체의 프로퍼티로 할당 var a = 1; console.log(a); // 1 console.log(window.a); // 1 console.log(this.a); // 1 // → 스코프 체인을 탐색하면서 전역(window)객체의 프로퍼티를 탐색..

javascript에서 window.open(url)을 사용하면 현재 부모창에서 새로운 페이지를 열 수 있다. window.open([URL 또는 html 파일명], [자식 창의 접근자 이름], [자식 창의 스타일]) 예를 들어, 다음과 같은 방식으로 사용하면 된다. window.open('https://www.naver.com/', 'naverView', 'width: 240px, height: 400px'); // 해당 url을 새로운 탭에서 엶 window.close(); // 해당 창을 닫음 SNS 로그인 등을 구현할 때 새 창을 띄워서 권한 승인을 받는 경우가 많은데, 이 때 해당 창이 닫힌 여부를 판단하여 이벤트를 발생시키고 싶다면? window.open() 함수가 window 객체를 반환하기..

forEach(element, index, array) 입력받은 배열의 요소와 인덱스를 차례대로 반환 리턴값 없음, for문처럼 사용 let arr = [1, 2, 3, 4, 5] arr.forEach(e => console.log(e)) // 차례대로 1, 2, 3, 4, 5 출력 for ... in / for ... of forEach에서 할 수 없는 break, continue 등 사용 가능 for ... of는 배열의 요소 값을 차례대로 반환 for ... in은 객체의 key값을 차례대로 반환 (배열에서의 for ... in은 인덱스를 순서대로 반환) let arr = [1, 3, 5, 7, 9] let kmj = { name: '미정', age: 25, job: '개발자' } for (let ..

211203에 호이스팅 관련 설명을 보충했습니다! 자바스크립트에서는 ES6 문법부터 var를 이용한 변수 선언을 권장하지 않고 있다. 메모리 누수 문제 때문이라고만 알고 정확한 이유는 모른 채 const와 let을 사용하고 있었는데, 오늘 정확한 이유와 차이점 등을 정리해 보려고 한다. var, let, const의 차이는 변수 재선언 가능 여부와 변수 재할당 가능 여부에 있다. 변수 재선언이란? 같은 변수명으로 다시 변수를 선언하는 것 변수 재할당이란? 선언된 변수에 값을 다시 할당하는 것 - var : 변수 재선언 가능 → 예기치 못한 값을 반환할 수 있음 var t = 3 console.log(t) // 3 출력 var t = 'hello' console.log(t) // hello 출력 t = 3..

람다식 : 익명 함수를 생성하기 위한 식, 함수에 가까움 매개변수가 하나일 경우 소괄호 생략 가능, 람다식 내 코드가 한 줄일 경우 중괄호 생략 가능 return문만 있을 때는 중괄호 생략 불가 // (타입 매개변수1, 매개변수2, ...) -> { ... } // 혹은 // (매개변수1, 매개변수2, ...) -> { ... } // 람다식 예시 (int a) -> { sout(a); }; - 람다식에서의 메소드 매개변수 또는 로컬 변수는 final 특성을 가짐 : 수정 불가 함수적 인터페이스(@FunctionalInterface) : 하나의 추상 메소드가 선언된 인터페이스를 람다식을 이용하여 구현 객체를 생성하고자 할 때 사용 인터페이스 상단에 @FunctionalInterface 어노테이션을 붙여서..

제네릭 타입이란? 타입을 파라미터로 가지는 클래스와 인터페이스 상속과 구현에 사용될 수 있음 public class 클래스명 { ... } public interface 인터페이스명 { ... } // 혹은 public class 클래스명 { ... } public interface 인터페이스명 { ... } → 제네릭 타입의 장점 1. 컴파일 시 강한 타입 체크 : 타입 에러 방지 2. 타입 변환 제거 : 요소를 명시하기 때문 - 예시 // Box 클래스 선언 public class Box { private T object; public T get() { return t; } public void set(T t) { this.t = t; } } // Box 제네릭 타입 이용 public class Bo..