JAY⌨️CODE

자바스크립트는 ECMA Script6 (2015) 이후 여러 편리한 문법이 도입되었다. 신문법 중 ... 을 활용한 문법을 몇 개 볼 수 있는데, 일반적으로 점점점(...)을 말줄임표로 사용하는 것처럼 '이것 등등', 혹은 '특정 기능이 생략되어있다' 라는 뜻을 가지는 직관적인 표현식이라고 할 수 있다. 대표적으로 이 점점점(...) 을 활용해서 편리하게 코딩할 수 있는 자바스크립트 문법 세 가지를 소개한다. 1️⃣ Rest Parameter (나머지 매개변수) Rest Parameter 는 말 그대로 Rest(나머지)의 역할을 한다. 함수 작성 시 매개변수의 개수를 지정하지 않고 함수 사용 시 작성된 arguments 입력값을 모두 배열로 받아준다. 사용 방법은 함수 작성 시 parameter 앞 에 ..

🤔 포스팅 작성에 앞서 권고드립니다! 혹시 자바스크립트 입문자 분이 이 글을 읽고 계시다면 fetch(), promise 객체에 대해 충분한 이해를 먼저 진행하시기를 권장드립니다. 저 역시 입문자로 API 호출 패턴에 대해 충분히 반복학습을 진행한 뒤에 반복되는 코드를 발견하고 생산성을 높이기 위해 스니펫 제작을 진행하게 되었습니다. 해당 게시물은 fetch() 메소드를 promise.then 메소드를 활용해 실행하는 방식과, async/await을 활용해 실행하는 방식 두 가지로 구성되어 있으며 Visual Studio Code 프로그램을 기준으로 작성되었습니다. 😎 스니펫 설정 방법 vscode 에서 사용자 코드 조각 구성(snippets) 설정으로 이동. 전역(global.code-snippets)..

1️⃣ fetch API 란? API(애플리케이션 프로그래밍 인터페이스)가 등장하고 애플리케이션을 데이터베이스와 서버에 연결해야 할 필요성이 커짐에 따라 현재 HTTP 요청의 중요성은 아무리 강조해도 지나치지 않게 되었다. 자바스크립트에는 이러한 요청을 수행할 수 있는 매우 편리한 내장 메서드인 fetch() 가 있다. fetch()는 HTTP 요청에 사용되는 Promise 기반 API 이며, 이전의 XMLHttpRequest와 같은 복잡한 네트워크 요청 절차를 사용하기 쉽도록 개선한 문법이다. 2️⃣ fetch API의 주요 장점 Fetch는 promise 기반으로, 비동기 작업을 사용하고 관리하는 것을 쉽게 해준다. 간단하고 깔끔한 구문을 제공하므로 코드의 가독성과 유지 관리가 더욱 쉬워진다. cat..

⚠️ 일반적인 조건부 로직으로 사용되는 if문을 다른 작성 패턴으로 대체하는 이유? if문 조건이 한 번에 너무 많은 요소를 비교할 경우 중첩(nested) 조건이 많아지므로 가독성이 떨어진다. 조건식에서 동일한 코드가 반복되는 경우 소스코드가 너무 길어지고 비효율적이다. 특정 부분의 변경이 필요하면 모든 조건을 살펴봐야 하기 때문에 유지보수가 어렵다. 위와 같은 이유로 if, else 문과 같은 조건문을 남발하면 가독성을 해치는 코드를 작성하게 된다. 아래에 이어서 문제를 해결할 수 있는 대안을 소개하고자 한다. if (user) { if (user.accessLevel) { if (user.accessLevel === 'admin') { console.log("관리자님 안녕하세요."); } else ..

1️⃣ class 란? 2016년 ES6 부터 도입된 instance를 생성하는 생성자 함수. 객체를 생산하는 붕어빵 틀과 같은 개념으로 흔히 설명하는데, 생산 도면 혹은 청사진이라고도 표현할 수 있다. class + 이름 + { constructor ... } 로 구성. constructor()는 new 연산자로 호출되는 인스턴스의 기본 상태를 자동으로 설정해주는 생성자 메서드. 특별한 절차 없이 객체를 초기화 할 수 있다. class내부에 있는 Field는 변수와 비슷하게 사용되는데, Constructor와 Method 전체에서 사용되며, 소멸되지 않는다는 특징이 있다. 자바스크립트만의 사용자 정의 타입 생성(객체 생성) 방법을 다른 언어의 클래스 문법처럼 바꿔준 것. 이처럼 내부적인 동작은 동일하지..

1️⃣ 객체 지향 프로그래밍이란? 객체 지향 프로그래밍(Object-Oriented Programming, OOP)이란 객체를 데이터 목록으로 보는 시각에서 벗어나 각각 독립적인 기능을 하는 부품과 같이 상호작용하도록 하는 프로그래밍 방법론. 추상화 상속 다형성 캡슐화 4가지의 특징을 갖고 있으며, 설계의 이점들을 가장 잘 살릴 수 있는 방향으로 각 객체들의 역할을 정의해 나가는 것에 초점을 맞춰 프로그래밍을 진행한다. 객체 지향적 설계를 통해 직관성과 재사용성이 높은 코드를 작성할 수 있으며, 반복 없이 간결하고 변경이 용이한 유연한 프로그램을 만들 수 있다는 장점이 있다. 대표적인 객체 지향 설계 요소로 class가 있다. 해당 게시물에서는 객체리터럴 프로토타입 클래스에 대한 예제를 소개하고 간단하게..

1️⃣ 비슷한 기능을 하는 for..in, for ...of 무슨 차이가 있을까? JavaScript는 Object, Array, Map 및 String과 같은 Collection을 반복하는 여러 메서드를 제공한다. for in과 for of는 ES6에서 요소를 순회하기 위한 목적으로 새롭게 추가 되었다. 두 메서드의 구현 방식은 동일하다. 그렇다면 차이점은 뭘까? 아래 예제를 통해 살펴보자. 1️⃣ for...in loop ✅ Object와 함께 for...in 사용 for...in은 Object의 key를 순회. 아래 예시와 같이 사용하면 key를 순회하면서 value값도 함께 표시할 수 있다. // for..in Input const car = { make: "🚘Tesla", model: "Mode..

1️⃣ if, else if else조건문은 JS에서 가장 기본적인 제어문 중 하나. if문은 조건식이 True인 경우에 코드를 실행. else문은 조건식이 False인 경우에 실행. //조건문 구조 if (num > 10) { console.log('🔍 num이 10보다 크다.'); } else { console.log('🔍 num이 10과 같거나 작다.'); } const won = 1000; if (won > 800) { console.log('🥖800원에 구매 가능'); } else if (won > 400) { console.log('🧀400원에 구매 가능'); } else { console.log('돈이 없는 분은 구매할 수 없습니다...'); } // = 🥖800원에 구매 가능 //2중 조건..

1️⃣ for문 가장 보편적인 반목문! for() 조건이 true 반복문 실행, false면 실행 안 함. for( 초기화; 조건; 종료식 ) { 반복 실행 내용 } 구조 종료식에서 숫자 + ++ 는 한 개씩 증가시킨다는 뜻. for(;;) for문 무한 반복 //기본 구조 for( let i = 0; i < 10; i++) { console.log(`😀Hello for ${i}`) } // = '😀Hello for 0' ~ '😀Hello for 9' //구구단 예제 // 9단 for (let i = 1; i

HTML 삽입 미리보기할 수 없는 소스 1️⃣ 함수, function 이란? 자바스크립트에서 function은 재사용 가능한 코드 블록을 의미. 아키텍처 파악, 유지 보수에도 유리! function 은 변수처럼 선언 가능. 입력값 parameter 을 받아 결과값을 출력 return 하는 방식. 보통 function(인자)라고 말하는데, parameter는 선언할 때, argument 는 실제 사용될 때의 용어. 파선아실! 암기. function은 다른 function의 (prarameter)로도 전달 가능. 2️⃣ 자바스크립트의 호이스팅 Hoisting 과 함수 선언 Hoisting은 변수와 함수 선언이 Scope의 맨 위로 옮겨지는 것. function 은 변수 var let const 와 마찬가지로..

Object를 학습하다가 나온 Map! Map이 유용한 건 알겠는데 뭔지 잘 모르겠다... (비전공 입문자의 눈물🥲) 간단하게 정리하면 Map은 {Object}와 다르게 기본 Key를 포함하지 않고 입력된 내용만 포함한다. Map의 Key는 모든 값(function, array …등) 설정 가능! Key - value 데이터 추가,제거 성능도 object보다 우수하고 자체 순회도 가능하다. 👍 1️⃣ Map 생성 Map 생성 구조는 변수명 = new Map() → 변수명.set(key, value) Map의 .get 메소드는 Map 객체 내에서 특정 key의 value를 반환. // 신규 Map 생성 let weather = new Map(); weather.set('sunny', '🌞') weather..

[ Array ]와 { Object }는 각각 JS에서 여러 개의 값을 하나의 변수에 저장할 수 있게 하는 데이터 구조이다. 항상 보는 구조지만 비전공자 JS 입문자는 헷갈려서 이해를 위해 정리해본다. 1️⃣ [ Array ] 배열 [대괄호]를 통해 표현. 대괄호 안의 항목의 명칭은 [ element ] 0부터 시작해서 [0, 1, 2 ]… 와 같은 형식으로 데이터 저장. JS에서는 Array도 Object에 포함! 특별한 Object로는 Array나 Function이 있다. Array 접근 및 수정 예제 // Array 생성 const fruit = [ '🍑Peach', '🍒Cherry', '🍋Lemon']; // 맨 앞에 신규 element 추가 fruit.unshift('🍇Grape') // 맨 뒤..