개발자라면 API라는 단어를 굉장히 많이 보고 듣게된다. 대체 API가 무엇을 의미할까? API란? 어떠한 프로그램에서 제공하는 기능을 사용자가 활용할 수 있도록 만든 인터페이스(Interface). 어떠한 방식으로 정보를 요청해야 하는지, 그리고 어떤 데이터를 제공 받을 수 있는지에대한 규격 API의 사용으로 해당 기능을 어떻게 구현하는지 몰라도 API가 가져다주는 기능을 사용하면 되니 리소스를 아낄 수 있다. 인터페이스(Interface)란? : 컴퓨터 시스템끼리정보를 교환하기 위한 수단이나 방법 API를 이해하기 어렵다면 실생활과 연관지어 아래 예시를 보면 이해하기 쉽다 우리가 접근하는 사이트 혹은 프로그램을 식당으로 가정한다. 식당에서 제공하는 메뉴판을 API 명세서라고 한다. 손님은 메뉴판이 없..

호이스팅(Hoisting) Javascript는 코드를 실행하기 전 먼저 선언된 변수, 함수를 전역 환경에 담고 그 이후에 정리된 코드를 실행한다. 호이스팅은 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 말한다. (실제로 끌어올려지는 것은 아니다) 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 변수의 선언 단계 변수는 선언 단계, 초기화 단계, 할당 단계를 거치게 된다 1. 선언단계(Declaration phase) : 선언한 변수를 식별자(변수명)가 담기는 객체에 할당하는 단계 : 초기화 전까지는 TDZ 상태이다. 2. 초기화 단계(Initialization phase) : 변수에 할당할 메모리 공간을 부여하는 단계 : 해당 단계에서 변수는 undefined로 초기화 된다 3. ..

스코프(Scope)란? Scope를 우리말로 번역하면 '범위'라는 뜻을 갖고 있다. JavaScript에서는 참조 대상 식별자(identifier)를 찾아내기 위한 규칙을 뜻한다. 쉽게 풀어서 해석하자면, 변수에 접근할 수 있는 범위라고 말할 수 있다. 스코프는 중첩이 가능하다. 스코프의 종류 블록 스코프(Block scope) : 또는 전역 스코프(Global scope) - 전역 스코프에 선언한 변수는 어느 곳에서든 해당 변수에 접근할 수 있다. var a = 10; function print(){ console.log(a) } print(); // 10 if () { var y = 0; } console.log(y); // 0 함수 스코프(Function-level scope) : 또는 지역 스코프..

이벤트(Event)란? 이벤트란, DOM내에서 키보드 버튼을 누르거나 마우스를 클릭 하는 등의 사건을 말한다. 이벤트 발생시에는 그에 맞는 대응을 하여야 하고 이를 위해 이벤트는 일반적으로 함수에 연결되어있다. 해당 함수를 이벤트 핸들러라고 한다. 이벤트 핸들러에는 이벤트에 대응하는 처리를 기술한다 이벤트 종류 자주사용하는 이벤트는 아래와 같다 더 많은 이벤트는 MDN에서 확인할 수 있다 UI Event Event Description load 웹페이지나 스크립트의 로드가 완료되었을 때 unload 웹페이지가 언로드 될 때 (주로 새로운 페이지를 요청한 경우) error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 resize 브라우저 창의 크기를 조절했을 때 scroll 사..

💡 DOM(문서 객체 모델)이란? DOM이란 HTML, XML 문서의 프로그래밍인터페이스다. DOM은 문서의 구조화된 표현을 제공하며 자바스크립트 같은 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 노드와 객체로 이루어진 문서를 트리구조로 표현한다. (DOM tree) DOM은 W3C의 공식 표준이며 플랫폼/프로그래밍 언어에 중립적이다. DOM Tree document node (문서 노드) 트리의 최상위 루트 노드. document 객체를 가르킨다. DOM에 진입할 수 있는 진입점 역할을 해줌. HTML 문서에 document node는 1개만 존재한다. window.document, document로 사용할 수 있음..

웹 스토리지(Web storage) 웹 개발시에 데이터를 어딘가에 저장해야 할 일이 생긴다. 웹 스토리지는 클라이언트(브라우저)를 통해 비교적 간단한 데이터를 저장하는 기술이다. 웹 스토리지는 Local storage와 Sesson storage가 존재한다. 두 storage는 아래의 공통점을 갖는다 local 환경에 데이터를 저장 key-value 형태로 저장 문자열 형태로 반환 웹스토리지는 개발자 도구 Application 탭에서 확인할 수 있다 로컬 스토리지(Local storage) 도메인 단위로 구분되며 활용된다 => 도메인이 같다면 path가 다르더라도 데이터가 존재한다 브라우저를 종료해도 존재한다 사용방법 (API) 기본적으로 window.localStorage로 사용한다. window를 생..

매개변수와 인자 매개변수와 인자는 헷갈리기 쉬운 개념으로, 한번 정확히 정리해보려 한다 전달인자와 매개변수를 활용해 함수의 재활용성을 높일 수 있다 매개변수(parameter)란? 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수 (메서드 선언의 변수 목록) 매개변수 값을 return을 통해 출력할 수 있음 인자(argument)란? 함수가 호출될 때 함수로 값을 전달해주는 값 (메서드 호출 시 실제 값) function sum (num1, num2){ // 매개변수(parameter) console.log(num1+num2) } sum(1,5) // 인자(argument) 만약 함수 호출시에 함수를 정의할 때 보다 적은 인자를 입력할경우, 입력하지 않은 매개변수는 undefine..

반복문이란? 반복문은 반복적인 일을 수행해야할 때 사용한다 똑같은 코드를 10번 반복하는 것은 굉장히 비효율적임 때문에 반복적인 코드의 양을 획기적으로 압축하고 반복적인 일의 수행을 효율적으로 처리하도록 도와줌 for, while이 대표적이며 for in, for of, do-while이 존재함 반복문에서 사용할 수 있는 break와 continue도 알아보자 for문 for (let i = 0; i

절대경로란? 최상위 폴더(root)를 기준으로 절대적인 경로 - 보통 다른 사람의 문서나 파일을 이용할 때 사용함(cdn) - 어느 곳에서든 경로에 접근할 수 있다는 장점 존재함 - 경로가 변경되면 경로를 일일히 수정해야한다는 단점 (정적) 상대경로란? 현재 작업 디렉터리를 기준으로 연결하려는 파일의 상대적인 경로 - 주소나 프로젝트 디렉토리 위치가 바뀌어도 내부 구조만 그대로라면 수정없이 그대로 사용할 수 있다는 장점 - 자신의 위치가 바뀌는 것에 취약 / 최상위(root) 디렉토리 ./ 현재 디렉토리 (생략가능) ../ 상위 디렉토리 reset.css에서 js폴더의 script.js파일 경로 - 절대경로 : /js/script.js - 상대경로 : ../js/script.js index에서 css폴더..

조건문은 간단하게 말해 어떠한 조건이 성립되는 경우에 로직을 실행시키고, 성립이 되지 않는 경우 해당 로직을 건너뛰는 기능을 한다. 조건의 성립여부를 알기위해 우리는 비교연산자에 대해 알아야한다 비교연산자 : 자바스크립트의 데이터를 서로 비교해 boolean 값으로 반환해준다 - 비교연산자에는 느슨한 비교연산자, 엄격한 비교연산자가 존재. 실무에서는 엄격한 비교연산자만을 사용한다 느슨한 비교연산자 1 == '1' // true 0 == '0' // true 0 == [] // true '0' = [] // false - 데이터 값은 비교하지만, 타입은 비교하지 않음. - 문자열 0과 숫자 0은 엄격히 구분되어야 하기에 느슨한 비교연산자의 사용을 지양하여야 한다 엄격한 비교연산자 1 === '1' //fa..