자바스크립트 - Vanilla JS

[자바스크립트 / Vanilla JS] async / await 비동기 통신

이 번 회차에서는 프로젝트에서 필자가 직접 개발하던 도중에 적용한 비동기 통신 기능 중 ES7에서 새로 나온 기능 중 하나인 async / await에 대해 다룰 것 이다. 난 비동기 통신을 사용하여 input 값 null value check를 성공적으로 완료 -> POST fetch를 통해 파일 업로드가 성공적으로 완료 -> POST fetch를 통해 파일 업로드가 완료된 경로와 그 파일에 대한 정보를 DB에 INSERT 하는 함수를 개발하는 파트에 사용하였다. 잡언은 여기서 각설하고 async / await와 비동기통신에 대해 설명하겠다. async / await 그리고 비동기 통신이란? 자바스크립트는 싱글 스레드 프로그래밍언어기 때문에 비동기처리가 필수적이다. 비동기 처리는 그 결과가 언제 반환될..

[자바스크립트 / Vanilla JS] new 연산자와 생성자 함수

생성자 함수란? 생성자 함수를 한 문장의 팩트로 표현하자면 "객체를 생성하는 역할을 하는 함수"이다. 더 설명할 말이 없다 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없다. 생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다. 만약 return 문이 있다면 아래와 같은 간단한 규칙이 적용된다. 객체를 return 한다면 this 대신 객체가 반환 원시형을 return 한다면 return문이 무시 return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다 생성자 함수의 특징 생성자 함수의 특징은 다음과 같이 ..

[자바스크립트 / Vanilla JS] window.onload 여러 번 사용하기

자바스크립트에서 페이지가 모두 로딩된 후 함수 등을 호출하는 방법을 많이 사용한다. 그런데 만약 웹페이지에서 window.onload가 여러 번 사용하는 경우에는 여러 번 호출되지 않고 단 한 번만 호출된다는 단점이 있다. window.onload을 사용해야 할 때에는만약 자바스크립트를 사용한 라이브러리를 만들었을 때 ... 그리고 이 라이브러리가 여러개이고 모두 페이지가 모두 로딩된 후 동작해야한다면 onload를 대체할 방법이 필요하다. # window.onload 대체하는 방법을 알아보자, 이 경우 생각할 수 있는 방법은 window.onload를 사용하는 대신에 바로 window.addEventListener()를 사용하여 window 객체에 이벤트를 직접 추가하는 방법이 있다. window.ad..

[자바스크립트 / Vanilla JS] 비공개 멤버

비공개 멤버 function add(num1, num2) { var sum = num1 + num2; return sum; } 위 코드의 함수에는 num1, num2, sum이라는 세 가지의 고유변수가 있다. 이들 변수는 함수 내부에서는 접근이 가능하지만 함수 외부에서는 접근이 불가능하다. 비공개 멤버에 대한 별도의 문법은 없지만 클로저를 사용해서 구현할 수 있다. 생성자 함수 안에서 클로저를 만들면, 클로저 유효범위 안의 변수는 생성자 함수 외부에 노출되지 않지만 객체의 공개 메서드 안에서는 쓸 수 있다. 클로저를 함수 안에 만들어 사용하면 스코프 체인을 통해 이들 변수에 접근이 가능하게 된다. 즉, 생성자에서 객체를 반환할 때 객체의 메서드를 정의하면, 이 메서드안에서는 비공개 변수에 접근할 수 있는..

[자바스크립트 / Vanilla JS] if(조건문) 줄이기

필자가 지금 현 상황에서 코드리팩토링의 초점을 맞추고 있는 부분은 바로 "if(조건문)" 최소화이다 사실 완전 초보중에 초보일 때는 if문을 많이 써도 그냥 보기 편하니까 가독성이 좋은 코드라고 생각했지만 점점 경험이 쌓이고 성장할 수록 if문이 여러개 있으면 그냥 보기가 싫고 머리가 아프다 if(조건문)을 줄이는 이유는 간단하다 "높은 가독성"과 "유지 보수하기 좋은 코드"를 만들기 위하여 이런 저런 문서들을 찾아봤을 때 if문을 다른 방법으로 줄이든 뭘 하든 사실 성능에는 크게 차이가 없다고 한다. 그냥 가독성과 유지보수 때문에 줄이는거라고 보면 된다. 1. 삼항 연산자 삼항 연산자 사용법은 간단하다. (조건문) ? 참일 경우 표현식 : 거짓일 경우 표현식 // if else문 var num = 10..

[자바스크립트 / Vanilla JS] ES6 템플릿 리터럴 (Template Literal)

템플릿 리터럴(Template Literal) 템플릿 리터럴이란 자바스크립트에서 문자열을 입력하는 방식이다. 기존에는 var str = 'Hello ES6'와 같은 방식으로 사용하였으나 ES6에서는 백틱(back-tick)이라는 기호(`)를 사용한다 const str = `Hello ES6`; 위와 같이 백틱을 이용하게 되면 여러 줄에 걸쳐 문자열을 정의할 수도 있고, 자바스크립트의 변수를 문자열 안에 바로 연결할 수 있는 이점이 생긴다. 템플릿 리터럴은 + 연산자를 사용하지 않아도 간단한 방법으로 새로운 문자열을 삽입할 수 있는 기능을 제공한다. 이를 문자열 인터폴레이션(String Interpolation)이라 한다. 문자열 인터폴레이션은 ${ … }으로 표현식을 감싼다. 문자열 인터폴레이션 내의 표..

[자바스크립트 / Vanilla JS] 반복문에 대하여 (for.. for in.. for of.. forEach)

자바스크립트의 반복문에는 총 8가지의 반복문이 존재한다 1. for : 고전적인 for문 2. for in : 객체의 프로퍼티 키 열거 전용 3. for of : 이터러블 순회 전용 4. forEach(): 배열 순회 전용 메서드 5. while : 고전적인 while문 6. do while : 고전적인 do...while문 7. Object 객체 메서드: 객체 순회 전용 8. Array.prototye 메서드 : 배열 전용 이 번 글에서는 간단하게 for, fon in, for of, forEach문을 다룰 예정이다. 1. forEach 문 코드 리팩토링에서 잠깐 다뤘던 forEach문이다. forEach()는 배열에 활용이 가능한 메서드로, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메..

[자바스크립트 / Vanilla JS] 변수를 선언해주는 var, let, const에 대하여

다른 학습 과정을 적다가 가장 기본적인 자바스크립트의 변수에 대하여 확실히 알고 들어가야한다고 생각이 들어서 순서를 상관않고 해당 포스팅을 작성하게 되었다 본론으로 들어가기 앞서 먼저 알아야 할 내용으로는 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거친다는것을 먼저 인지해야한다 변수 선언 변수의 선언은 var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가되었고, 이로 인해 var의 사용빈도는 줄어들었다. 선언 단계: 변수명을 등록하여 변수의 존재를 알린다. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. var name console.log(name) // undefined var 키워드를 이용한 변..