JS Calllback 함수란?

콜백 함수란?콜백 함수는 다른 함수에 인수로 전달되는 함수이다. 자바스크립트는 함수를 1급 객체(First-class object)로 취급하기 때문에 함수를 변수에 할당하거나 함수의 인수로 전달할 수 있다. 콜백 함수는 일반적으로 비동기 작업을 처리하기 위해 사용된다. 비동기 작업이 완료된 후 호출될 함수를 미리 전달해두고 작업이 끝났을 때 해당 함수가 실행되도록 만드는 방식이다. 콜백함수의 구분콜백함수는 주로 비동기 작업을 처리하기 위해 사용되지만 동기 작업에도 사용할 수 있다. 두 가지 방법의 예시를 통해 콜백 함수를 알아보자. 먼저 두 가지 방식에 대한 차이점을 간단하게 설명하면 동기적 콜백 함수는 코드가 순차적으로 실행된다. 콜백 함수가 완료되기 전까지 다음 코드로 넘어가지 않는다. 비동기적 콜백..

• format_list_bulleted Frontend/JavaScript
• · 2024. 9. 9.
• textsms

JS 순수함수

순수함수란?자바스크립트에서 순수함수는 함수형 프로그래밍에서 중요한 개념이다. 순수함수는 부작용(side-effect)이 없고 동일한 입력에 대해 항상 동일한 출력을 보장하는 함수이다. 이를 통해 코드의 예측 가능성과 안정성을 높일 수 있다. 순수함수의 주요 특징참조 투명성 - Referentially Transparent함수에 동일한 인자를 넣으면 항상 동일한 결과가 나와야 한다. 예를 들어 함수 add가 2와 3을 입력받았을 때 항상 5를 반환해야 한다. 부수 효과 없음 No Side-Effects함수의 실행이 외부 상태나 데이터에 영향을 미치지 않아야 한다. 예를 들어 함수 내부에서 변수 값을 변경하거나 파일 시스템, 네트워크, DOM 등을 수정하면 부작용이 발생했다고 할 수 있다. 순수함수 예시fu..

• format_list_bulleted Frontend/JavaScript
• · 2024. 9. 4.
• textsms

JS 엔진의 구조와 작동원리 (JS 런타임 환경까지)

⚙️자바스크립트 엔진이란?JavaScript 엔진은 JavaScript 코드를 실행하는 소프트웨어 컴포넌트이다. 대표적인 예로 구글 크롬의 V8 엔진, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore (Nitro) 등이 있다. JS 엔진은 웹 브라우저나 Node.js와 같은 런타임 환경에서 사용된다.좀 더 자세하게 알기 위해 위키피디아의 글을 인용하였다.자바스크립트 엔진 (JavaScript engine)은 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터이다. 자바스크립트 엔진은 전통적인 인터프리터일 수도 있고, 특정한 방식으로 바이트코드로 JIT 컴파일 을 할 수 있다. 여러 목적으로 자바스크립트 엔진을 사용하지만, 대체적으로 웹 브라우저에서 사용된다.JS 엔진이 코드를 ..

• format_list_bulleted Frontend/JavaScript
• · 2024. 8. 16.
• textsms

JS 동기/비동기 처리 - 콜백부터 async/await

비동기 처리란 무엇인가?동기 vs 비동기동기 처리: 요청과 결과가 동시에 일어난다. 즉 특정 작업이 완료될 때까지 다음 작업은 대기해야 한다.비동기 처리: 요청 후 결과를 기다리지 않고 다음 작업을 먼저 실행한다. 결과는 나중에 준비되면 처리한다.자바스크립트와 비동기자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있다.하지만 setTimeout, AJAX 요청, DOM 이벤트 등 많은 작업들이 시간이 걸린다. 이러한 작업들을 동기적으로 처리하면 사용자 경험이 굉장히 나빠진다 (브라우저 멈춤 현상)따라서 자바스크립트는 비동기 처리를 통해 이러한 문제를 해결한다.비동기 처리 방식의 종류 콜백 함수가장 기본적인 비동기 처리 방식이다.비동기 작업이 완료되면 호출될 함수를 미리 등록..

• format_list_bulleted Frontend/JavaScript
• · 2024. 8. 14.
• textsms

JavaScript로 간단한 투두리스트 만들기

STEP1. 투두리스트의 기본 디자인과 기능 완성하기 주요 기능 투두리스트 추가하기 투두리스트 수정, 삭제 체크한 투두리스트 줄 긋기 디렉터리 구조 my-todo-list/ │ ├── src/ │ ├── js/ │ │ └── main.js │ ├── css/ │ │ └── main.css │ └── assets/ │ │ ├── index.html ├── README.md └── package.json 소스파일 index.html TODO 삭제 main.css body { font-family: sans-serif; } header img { position: relative; width: auto; left: -100px; top: 100px; } .todo-wrapper { position: relat..

• format_list_bulleted Frontend/JavaScript
• · 2024. 3. 11.
• textsms

JS 함수

JS 함수 선언 방법JavaScript에서 함수는 크게 선언문(Function Declaration) 방식과 표현식(Function Expression) 방식으로 정의한다.함수 선언문 (Function Declaration)함수 선언문은 function 키워드를 사용하여 이름이 지정된 함수를 정의한다.함수 선언문은 호이스팅 되므로, 선언 전에 호출할 수 있다.호이스팅(Hoisting)호이스팅(Hoisting)은 JavaScript에서 변수와 함수 선언을 코드의 최상단으로 끌어올리는 동작이다.이로 인해 코드의 어느 위치에서든지 함수를 호출할 수 있다.// 함수 선언문function sum(a, b) { return a + b;}console.log(sum(2, 3)); // 5함수 표현식 (Funct..

• format_list_bulleted Frontend/JavaScript
• · 2024. 3. 6.
• textsms