Front-End/JavaScript7

• 인터프리터 언어인 자바스크립트에서는 어떻게 호이스팅을 할까? 자바스크립트가 인터프리터 언어임에도 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 실행하기위해 컴파일 단계와 실행 단계 를 통하여 코드를 단순히 한 줄씩 바로 해석하고 실행하지 않고, 먼저 컴파일 단계에서 코드를 파악하고 필요한 메모리를 확보하는 과정을 거치기 때문입니다.이를 통해 코드 내에서 선언 위치와 상관없이 변수를 사용할 수 있는 유연성을 제공합니다.컴파일 단계자바스크립트 엔진은 스크립트를 실행하기 전에 먼저 컴파일 단계를 거칩니다.이 과정에서 함수 및 변수 선언을 한 부분이 메모리에 할당되고 변수와 함수 선언을 미리 메모리에 올려두기 때문에 실제 코드에서 선언된 위치보다 앞에서 접근이 가능해지는 것입니다. let, const와 다르게 var를 통해 변수가 선언되면, 컴파일 단계에서 변수가.. Front-End/JavaScript 2025. 1. 17.

• 웹 애플리케이션의 성능을 최적화할 수 있는 방법 코드 스플리팅을 통해 자바스크립트 파일을 필요한 부분만 나누어 로드 : 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분만 먼저 로드하여 페이지 로딩 속도를 개선레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식이미지 파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법캐싱을 활용하여 한 번 로딩된 리소스를 다시 다운로드하지 않고 브라우저가 캐시된 데이터를 재사용하여 성능을 크게 향상스크립트 로딩 시 비동기 로딩(async) 이나 지연 로딩(defer) 을 적용하여 자바스크립트가 DOM을 차단하지 않도록 하는 방법 : 페이지가 로딩되는 동안에도 자바스크립트 파일을 병렬로 불러오거나, 적절.. Front-End/JavaScript 2025. 1. 17.

• 자식 Element가 있을 때 Drag&Drop Event 가 여러 번 호출 되는 이슈 0. 개요팀 내 코드 리뷰 중 React 컴포넌트에서 Drag&Drop Event가 여러 번 호출되어 컴포넌트가 Drag&Drop Event가 호출되는 만큼 리렌더링되는 이슈가 있었습니다.의도한 동작은 컴포넌트에 mouse over 유무에 따라 컴포넌트가 변경되는 것이었기 때문에 계속해서 리렌더링되는 이슈는 잡아야 할 필요가 있었습니다.이 글에서는 해당 이슈에 대한 원인과 이슈를 해결하는 방법에 대해 살펴보겠습니다.(아래 예제들은 개발자 도구를 열어 console.log를 확인하면서 테스트 해보는 게 좋습니다.)See the Pen Drag&Drop Event Example by 윤창현 (@ibgcsnij-the-selector) on CodePen.  1. 원인위 예제를 토대로 원인을 알아보자면, D.. Front-End/JavaScript 2024. 12. 8.

• 

  [Javascript] 알쓸신잡(알아두면 쓸모있는 신기한 잡아스크립트) - 2 다양한 자바스크립트 서적과 글을 보고 다양한 문제를 직면하면서 생소하게 느낀 부분들을 정리해논 글 입니다. (목차를 보고 관심있는 부부만 읽어도 좋습니다.)단순히 제 주관으로 판단하고 작성하는 글이기 때문에 가이드가 될 수는 없으니 주의해주시면 감사하겠습니다 🌟  1. 스코프(Scope)스코프는 컨텍스트는 값과 "표현식"이 "표현"되거나 참조 될 수 있는 현재 실행되는 컨텍스트를 의미합니다. 만약 변수 또는 표현식이 "해당 스코프"내에 있지 않다면, 사용할 수 없습니다. // 불가능한 케이스function exampleFunction() { const x = "declared inside function"; // 변수 x는 안에서만 사용 가능합니다. console.log("Inside functio.. Front-End/JavaScript 2024. 11. 19.

• 

  plop 라이브러리로 디자인 시스템 컴포넌트 파일을 템플릿화 해보자! 이 글로 얻을 수 있는 정보1. plop를 이용한 파일 템플릿화2. plop 라이브러리 설치 및 사용법2. plop 템플릿3. handlebars 템플릿 0. 개요디자인 시스템 컴포넌트를 구성하면서 스토리북 관련 구글링 중에 파일을 템플릿화 하여 쉽게 생성할 수 있는 plop 라이브러리를 알게되어 디자인 시스템 파일 템플릿 방법을 알아보고 템플릿을 공유해보려 합니다. 1. plop 라이브러리란?plop라이브러리는 개요에서 말했듯이 파일을 템플릿화 하여 쉽게 생성할 수 있게 도와주는 라이브러리 입니다.plop은 프롬프트 라이브러리인 inquirer와 텍스트 형식을 생성하는 템플릿 언어를 사용해 템플릿을 만드는 handlebars 라이브러리로 만들어졌습니다. 즉, 프롬프트를 통해 정보를 입력받고 그 정보로 .. Front-End/JavaScript 2024. 11. 17.

• [Javascript] 알쓸신잡(알아두면 쓸모있는 신기한 잡아스크립트) - 1 다양한 자바스크립트 서적과 글을 보고 다양한 문제를 직면하면서 생소하게 느낀 부분들을 정리해논 글 입니다. (목차를 보고 관심있는 부부만 읽어도 좋습니다.)단순히 제 주관으로 판단하고 작성하는 글이기 때문에 가이드가 될 수는 없으니 주의해주시면 감사하겠습니다 🌟  1. REPL(Read Eval Print Loop)기본적으로 Javascript는 컴퓨터가 한줄 씩 읽는 인터프리터 방식의 언어입니다.이 Javascript는 브라우저의 콘솔에서도 사용할 수 있습니다. 이 때, 브라우저의 콘솔에서 한 줄씩 입력(Read)받고 받은 입력을 평가(Eval)한 후 결과를 출력(Print)합니다. 그 후 다시 프롬프트가 나타나 새로운 입력을 기다립니다.(Loop)이 과정을 REPL(Read-Eval-Print-Lo.. Front-End/JavaScript 2023. 2. 5.

• [Javascript] 비구조화(구조분해) 할당 미세(?) 팁 자바스크립트를 다루다보면 비구조화 할당은 많이 접해보셨으리라 생각됩니다. 리액트 스터디 중 mdn web docs 를 보는데, 기본적인 비구조화 할당에 대한 글은 많이 봤지만 아래 내용에 관한 글은 본 기억이 없어서 작성하게 되었습니다. (제가 못 본 걸 수도,,,) 선언 없는 할당 var a, b; ({a, b} = {a: 1, b: 2}); 할당 문을 둘러싼 괄호()는 선언 없이 객체 리터럴(object literal) 비구조화 할당을 사용할 때 필요한 구문입니다. {a, b} = {a:1, b:2}는 유효한 독립 구문이 아닙니다. 좌변의 {a, b}이 객체 리터럴이 아닌 블록으로 간주되기 때문입니다. 하지만, ({a, b} = {a:1, b:2})는 유효한데, 해당 문법은 var {a, b} = {.. Front-End/JavaScript 2022. 12. 27.