개발 블로그

api의 정의는 다음과 같다. API(Application Programming Interface)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 출처: 위키백과 예를 들면, 브라우저에서 경고창을 띄우는 것을 생각해보자. 이는 내가 직접 자바스크립트에서 경고창을 만들어서 띄우는 것이 아니다. 브라우저가 제공하는 기능 중에 하나인 alert만 입력하면 브라우저에서 경고창을 띄울 수 있는 것이다. 여기서 이 alert가 api인 것이다. 우리는 복잡하게 생각할 필요 없이 이미 브라우저 등이 제공하는 api를 갖다가 쓰면 되는 것이다. 다른 예시를 들어보면, Window.innerHeight는 윈도우 창의 높이(세로 길이)를 반..

자바스크립트 기초를 공부했다면 정해진 커리큘럼처럼 만들어 보는 것이 투두리스트인 것 같다. 근데 막상 하려고하면 배운 개념중에 어떤 것을 써야하는지 감이 안 잡힌다. 그래서 노마드코더 강의로 공부하면서 일단 무작정 따라쳤다. 이해가 안가는 부분이 너무 많았다. 그래도 꾸역꾸역 따라치고 이해가 안되어도 코드 한 줄 한 줄 뜯어가면서 리뷰했다. 여기서 배운것 + 내가 구현하고 싶은 기능 몇 가지를 추가해서 나만의 투두리스트를 완성했다. 주요기능은, 1)기본적인 폼을 제출하면 이를 자바스크립트로 리스트를 출력하고 로컬 스토리지에 저장&파싱, 리스트 삭제 2)목록 활성화, 비활성화 : 박스를 클릭해서 완료한 목록임을 나타내고 그 객체를 allCompleted 배열에 넣기 반대로는 완료하지 않은 목록임을 나타내고..

바닐라 자바스크립트로 뮤직 플레이어를 만들어 보았다. 주요 기능으로는, 1)앨범 커버를 클릭하면 모달창이 띄워지고 앨범정보를 JSON으로부터 받아온다. 2)제목을 클릭하면 음악이 처음부터 재생된다. 3)좋아요 기능 : 하트를 클릭하면 하트가 활성화 된다. but 저장이 되지 않아 새로고침을 했을 때 좋아요가 날라간다... 이 중 제일 어렵고 힘들었던건 1번이다. JSON 파일을 만들어서 해당 앨범정보를 작성한 다음, fetch를 이용해 불러온다. 앨범 커버를 클릭하면, html에서 작성한 data-key와 data-value를 기준으로해서 JSON의 value와 dataset.value가 같은 정보를 필터링한다. 그런 다음 모달창을 띄우고 createHTMLString을 통해 필터링된 해당 정보를 모달창..

비동기를 해결하려면 callback 지옥이 생기게 되어 가독성이 저하되고 예외처리에 불편함이 생기게 된다. 이러한 것들을 보완하기 위해 나온 것이 promise, async & await 이다. Promise 자바스크립트 비동기 처리에 사용되는 객체 promise 인스턴스 안에 비동기 처리될 대상을 넣어준다. promise는 다음과 같이 작성한다. resolve는 약속을 지켰을 때 호출, (잘 실행되었다는 뜻) reject는 약속을 지키지 못했을 때 호출한다. .then은 코드가 잘 실행되었다면 그 다음에 실행할 코드를 정의한 것이다. .catch는 코드가 실행되지 못했을 경우 그 다음에 실행할 코드를 정의한 것이다. async await 비동기 함수를 동기 함수처럼 읽고 쓸 때 사용한다. 외부 정보를 ..

예외처리란 예기치 못한 상황이 발생했을 때를 미리 예측하고 대비하여 프로그램이 중단되지 않고 계속 실행될 수 있도록 하는 것을 말한다. 예외 상황을 예를 들면 1부터 10사이의 숫자를 입력해야하는데 11을 입력한 경우 등이 있겠다. 예외(에러)의 경우 -SyntaxError : 문법 등 자바스크립트 파싱 중 에러 -TypeError : 사용할 수 없는 변수를 썼을 때 -ReferenceError : 허용되지 않은 참조 사용 -RangeError : 허용 숫자 범위 초과 -EvalError : eval()의 잘못된 활용 -URIError : encodeURI() 혹은 decodeURI()의 잘못된 활용 -사용자 정의 에러 . . . 예외상황이 발생한 경우에 사용하는 것이 바로 Try Catch Finall..

모듈은 재사용 가능한 코드 단위이자 파일 간에 주고받을 수 있는 코드 단위를 말한다. 모듈은 함수, 클래스, 배열, 객체, 상수가 될 수 있다. export export는 모듈을 다른 파일로 내보낼 때 사용한다. 예를 들어, 아래와 같은 코드를 export 할 때에는 sayHello = (name) => console.log(`내 이름은 ${name}이야`); 아래와 같이 쓴다. export sayHello; 또는 아래와 같이 함수를 정의할 때 명시해주어도 된다. export sayHello = (name) => console.log(`내 이름은 ${name}이야`); 함수뿐만 아니라 상수, 배열, 클래스, 객체도 마찬가지다. export const name = `김구름`; export let oddNu..

부모 클래스가 가지고 있는 것(변수, 메소드)을 자식 클래스가 그대로 받는 것을 상속이라고 한다. 자식클래스는 부모클래스의 변수와 메소드를 디폴트로 받게 된다. 상속은 다음과 같은 구조로 쓰인다. class Student extends Person { super(name); this.school = school; this.major = major; } ①Person을 상속 받는 새로운 Student라는 클래스를 생성한다는 의미이다. ②자식만의 상태를 가지고 싶다면(자식 클래스의 constructor에서 this를 사용하고 싶다면) 반드시 부모클래스의 생성자 super를 먼저 호출한 후 써야한다. super라는 것은 부모클래스를 호출하며, student가 상속한 Person의 constructor 속 na..

자바스크립트는 '프로토타입'기반 언어이기에 원래 클래스라는 개념이 없었다. 하지만 클래스의 유용성으로 es5부터 클래스가 함수를 흉내내면서 쓰이기 시작한다. 클래스는 객체 지향 프로그래밍(Object Oriented Programming, OOP)을 가능하게 한다. 객체 지향 프로그래밍이란? 세상 만물을 상태(변수)와 동작(메소드)으로 정의하고, 이렇게 정의한 틀을 가지고 객체들을 마구마구 찍어내는 프로그래밍 방법론. 쉽게 이해하려면 달고나를 생각해본다. 달고나 틀(상태, 동작)로 녹인 설탕 위를 눌러 찍어낸다.(객체) 예시) 고양이(객체)를 다음과 같이 모델링한다. 1. 고양이의 상태 -나이, 키, 종... 2. 고양이의 동작 -배가 고프면 까칠해진다. -내가 코딩을 하면 방해한다. -졸리면 잔다. 이..