DH의 개발 공부로그 DH의 개발 공부로그

async / await 병렬 구조await는 병렬을 만들지 않는다.Promise를 먼저 만들고, 나중에 await 해야 병렬이다.이 내용만 기억하고 있어도 async / await 병렬 구조에 대해 절반은 마스터 했다고 해도 무방합니다.그렇다면 이제 async / await의 병렬 구조가 무엇인지에 대해 알아보곘습니다.그에 앞서 병렬이 뭔지에 대해 간략하게 알아보겠습니다.직렬(Sequential) vs 병렬(Parallel)직렬: 구성 요소가 하나의 선형 경로로 연결된 방식병렬: 구성 요소가 여러 갈래로 나뉘어 각각 독립적인 경로를 가지는 방식직렬과 병렬의 정의는 위의 설명과 같습니다. 이제 코드 상으로 들어가서 좀 더 이해하기 쉽게 설명을 드리면 아래와 같습니다.✅ 직렬직렬은 작업을 하나씩 순서대로 ..

스코프(Scope) 스코프란? 번역하면 "범위" 를 뜻하며, 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙입니다. 자바스크립트는 이 규칙대로 식별자를 찾습니다. 예를 들어 이름이 같은 2개의 변수 중 어느 것을 참조해야 하는지, 어떻게 식별해야 할지를 정할 때 필요한 것으로, 정리하자면 "식별자에 접근할 수 있는 범위" 를 정의한 것을 스코프라고 합니다. 스코프의 구분 자바스크립트의 스코프를 구분해보면 2가지로 구분할 수 있습니다. 1. 전역 스코프 (Global Scope) 2. 지역 스코프 (Local scope)전역 스코프는 전체 범위, 코드 어디에서든 참조가 가능한 스코프를 말합니다. 그리고 지역 스코프는 해당 지..

trim() trim이란? 문자열 양 끝의 공백을 제거하고 원본 문자열을 수정하지 않고 새로운 문자열을 반환해주는 메서드입니다. 공백이란 모든 공백문자(space, tab, NBSP 등)와 모든 개행문자(LF, CR 등)를 의미합니다. 간단하게 설명하자면 자바스크립트에서 문자열의 공백을 제거할 때 사용하는 메서드입니다. 예제 const greeting = ' Hello world! '; console.log(greeting); // output: " Hello world! "; console.log(greeting.trim()); // output: "Hello world!"; trimStart() 또는 trimEnd()를 이용하여 한 쪽의 공백만을 제거할 수도 있습니다. const gre..

호이스팅 (Hoisting) 호이스팅(hoisting)이란,끌어올리다, 올리다, 게양등의 뜻으로 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. 쉽게 말해서 변수 및 함수 선언이 해당 스코프의 상단으로 "끌어올려지는" 현상을 말합니다. 예시 코드를 통해서 알아보겠습니다. // 입력 코드 console.log(a) // undefined var a = 5; // 실제로는 아래와 같이 실행 var a console.log(a) // undefined a = 5 즉, 코드의 실행 순서와는 상관없이 변수 및 함수 선언이 스코프 상단으로 옮겨지는 것을 의미합니다. var과 let, const의 차이 var, let, const는 자바스크립트에서 변수를 선언하기 위해 사용이 되는..

반복문 반복문 중에서 for 또는 forEach 말고 사용은 해봤지만 자주 사용하지 않아서 헷갈리는 for...in과 for...of를 정리하고 이 둘의 차이점을 알아보겠습니다. for...in문 for...in문은 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복합니다. (Symbol로 키가 지정된 속성은 무시합니다.)라고 MDN 사이트에 정리가 되어있습니다. 한마디로 for...in문은 객체의 속성들을 순환하면서 작업을 수행하는 것입니다. const object = { a: 1, b: 2, c: 3 }; for (const key in object) { console.log(`${key}: ${object[key]}`); } // output //..

Script 태그 HTML 파싱 ▶️ JavaScript 파일 다운로드 후 실행 아마 대부분의 경우에 제일 많이 위치하여 사용하는 방법일 겁니다. 자바스크립트 파일을 다운로드하기 전 HTML 코드를 모두 파싱 하기 때문에 사용자가 화면의 내용을 빨리 볼 수 있다는 장점이 있습니다. 하지만 HTML 코드가 자바스크립트 의존적인 웹사이트라면 사용자가 화면을 보기까지에는 똑같이 오랜 시간이 걸릴 수 있다는 단점이 있습니다. 3. async 속성을 추가해 head 태그 안으로 넣기 HTML 파싱 ▶️ JavaScript 파일 만나면 병렬적으로 다운로드 ▶️ JavaScript 파일 다운 완료되면 HTML 파싱 정지 ▶️ JavaScript 파일 실행 ▶️ HTML 이어서 파싱 async 속성을 추가하는 경우에는..

애니메이션 웹사이트에서 메뉴바, 사이드바를 보면 위의 이미지 처럼 밑에 또는 뒤에 바가 애니메이션이 것을 많이 보셨을 겁니다. 그리하여 이번에는 CSS 애니메이션을 공부하고 정리할 겸 위의 이미지에 보이는 메뉴바 애니메이션을 만들어 보았습니다. HTML 메뉴를 만드는 방법은 여러가지의 방법과 다양한 태그로 만들 수 있지만 이번에 중요한 부분은 CSS이기 때문에 간단하게 nav와 div 그리고 애니메이션을 위한 span으로 구성을 하였습니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 CSS 메뉴바 애니메이션에서 가장 중요한 부분이 바로 CSS입니다. 우선 메뉴들을 옆으로 나열해주기 위해서 flex를 사용하였습니다. nav { position: relative; // 애니메이션을 위한 기준 display: fle..

스토리지 자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생깁니다. 그리하여 보통 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하는 경우가 있습니다. 하지만 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수 있습니다. 이럴 때 이용이 가능한 것이 웹 스토리지입니다. 웹 스토리지 객체(web storage object)에는 localStorage와 sessionStorage가 있습니다. 이 두 스토리지는 브라우저 내에 키-값 쌍을 저장할 수 있으며, 페이지를 새로 고침하거나(sessionStorage의 경우) 또는 브라우저를 다시 실행해도(localStorage의 경우) 데이터가 사라지지 않고 남아있게 됩니..