본문 바로가기

전체 글54

var, let, const 차이 JavaScript에서 변수를 선언하는 방법으로 var, let, const 세 가지 키워드가 있다 각 키워드는 변수의 유효 범위(scope), 재선언(redeclaration), 재할당(reassignment) 측면에서 서로 다른 특징을 가지고 있다 이들의 차이점을 이해하는 것은 안정적이고 예측 가능한 코드를 작성하는 데 중요하다 1. var 유효 범위 함수 레벨 스코프(function-level scope) var로 선언된 변수는 선언된 함수의 전체에서 유효하다 함수 외부에서 선언된 경우 전역 변수가 된다 재선언 가능 같은 스코프 내에서 var를 사용하여 변수를 여러 번 선언할 수 있다 재할당 가능 선언된 변수에 새로운 값을 할당할 수 있다 예시: var greeting = "Hello, world!.. 2024. 3. 4.
콜백 지옥 해결법 - Promise 와 async/await 콜백 지옥(Callback Hell)은 비동기 JavaScript 코드를 작성할 때 자주 발생하는 문제다 이는 여러 중첩된 콜백 함수가 가독성을 떨어뜨리고 코드 유지 관리를 어렵게 만든다 JavaScript에는 이 문제를 해결하는 두 가지 기능, Promise와 async/await가 있다 이들을 활용하면 코드를 훨씬 깔끔하게 유지할 수 있다 Promise를 사용한 비동기 통신 Promise는 비동기 작업을 위한 대표적인 해결책으로, 콜백 대신 사용할 수 있다 Promise는 비동기 작업의 성공(resolve) 또는 실패(reject)를 처리하는 객체다 예시: 파일 읽기 작업 콜백 방식 fs.readFile('file1.txt', 'utf8', function(err, data) { if (err) { .. 2024. 3. 4.
Promise와 Callback 차이 JavaScript에서 비동기 작업을 처리하는 데 사용되는 두 가지 중요한 패턴은 콜백(Callback)과 프로미스(Promise)다 이 두 방식은 비동기 로직을 처리하는 방법과 관련된 개념적, 구현적 차이를 가지고 있다 cf) 비동기 작업을 처리한다라는 것은 프로그램의 실행 흐름을 멈추지 않고, 어떤 작업(보통 I/O 작업, 네트워크 요청 등)이 백그라운드에서 수행되는 동안 다른 코드의 실행을 계속 진행할 수 있도록 하는 것을 의미 즉, 특정 작업의 완료를 기다리는 동안 프로그램이 블로킹되지 않고 다른 작업을 수행할 수 있음 JavaScript에서 비동기 처리의 필요성은 주로 I/O 작업, 네트워크 요청, 타이머 설정 등 프로그램의 실행 흐름을 블록하지 않으면서도 특정 작업을 수행해야 할 때 발생한다 .. 2024. 3. 4.
비동기 함수 비동기 함수는 자바스크립트에만 있는 개념은 아니지만 특히 웹 개발에 쓰이는 자바스크립트에서 매우 중요한 역할을 한다 비동기 함수는 지금 당장 처리하지 않고 나중에 완료될 작업을 수행한다 그래서 함수의 실행이 끝난 후에도 그 결과가 바로 반환되지 않고 완료되는 데 시간이 걸릴 때 사용된다 예를 들어 파일 읽기, 네트워크 요청 등 만약 위와 같이 시간이 걸리는 작업을 동기적으로 처리한다면 작업이 완료될 때까지 프로그램은 멈추게 된다 이는 사용자 경험을 저하시키고, 특히 웹 애플리케이션에서 페이지가 멈춘 것처럼 보일 수 있다 비동기 함수를 사용하면 이런 지연이 발생하는 작업을 백그라운드에서 처리하고 작업이 완료되면 결과를 처리할 수 있게 된다 이를 통해 애플리케이션이 멈추지 않고 다른 작업을 계속 수행할 수 .. 2024. 3. 2.
자바스크립트 클로저 Closure 클로저 함수와 그 함수가 선언된 렉시컬 환경의 조합 어떤 함수가 선언된 당시의 환경을 기억하여, 함수가 실행될 때에도 그 환경에 접근할 수 있게 해준다 데이터를 은닉하고 캡슐화하는 데 유용하게 사용됨 function 외부함수(외부변수) { return function 내부함수() { console.log(외부변수); }; } const 예제 = 외부함수('안녕하세요!'); 예제(); // 콘솔에는 '안녕하세요!'가 출력됩니다. 예제 코드에서 외부함수는 내부함수를 생성하고 반환한다 내부함수는 외부함수의 매개변수인 외부변수에 접근할 수 있다 이처럼 내부함수가 자신이 생성될 때의 환경(여기서는 외부변수를 포함하는 환경)을 기억하는 것이 클로저의 핵심 개념이다 예제()를 호출하면 외부함수의 실행 컨텍스트가 이미.. 2024. 3. 2.
호이스팅 호이스팅은 자바스크립트에서 변수와 함수의 선언이 스코프 내에서 최상단으로 끌어올려지는 동작을 말한다 이것은 코드 실행되기 전에 발생하며, 코드가 실행되기 전에 자바스크립트 엔진이 변수 및 함수 선언을 스캔하고 해당 스코프 내에서 최상단으로 끌어올린다 이로 인해 변수와 함수가 실제 선언된 위치와 상관없이 참조될 수 있다 즉, 변수를 선언 전에 사용해도 에러가 발생하지 않고 값이 undefined로 초기화된다 함수 선언식(함수 선언문)은 전체가 호이스팅된다 함수 표현식은 변수 선언만 호이스팅된다 console.log(num); // undefined var num = 5; console.log(func1()); // "Hello!" function func1() { return "Hello!"; } cons.. 2024. 3. 1.
async / await 사용법 (초보 프로그래머의 공부용이라 혹시 들어와서 보게 되실 경우 참고용으로만 받아들이시길) 면접에서 질문을 받게 된다면 Promise와의 차이점이라든가 다른 개념과 함께 물어볼 수 있고 비동기 동기 함수 관련 꼬리질문이 들어올 수 있다 async / await을 사용한 비동기 통신의 경우, async 함수 내에서 await 키워드를 사용하여 비동기 작업의 결과를 기다리게 할 수 있다 코드가 동기적으로 작성되어 가독성이 향상된다 즉 코드가 한 줄이 끝나야 다음 줄이 실행되는 식으로 동작하게 되는 것이다 원래 비동기 코드는 완료될 때까지 기다리지 않고 바로 다음 줄로 넘어간다 이러한 이유로 코드의 실행 순서와 코드의 작성 순서가 다를 수 있다 예를 들어 데이터를 서버에 요청한 후 서버로부터 데이터를 받아서 다음.. 2024. 3. 1.
프론트엔드 면접 질문 앞으로 정리해나갈 것들 리스트 (분류 수정 필요) 자바스크립트 async / await 사용법 호이스팅 클로저 비동기 함수 Promise와 Callback 차이 콜백 지옥 해결법 Promise를 이용한 비동기 통신과 async/await 사용한 비동기 통신 차이 var, let, const 차이 함수 선언형과 함수 표현식의 차이 렉시컬 환경이란 실행 컨텍스트란 데이터 타입 형 변환 프로토타입 깊은 복사 & 얕은 복사 불변성 유지하려면? this requestAnimationFrame 제어 컴포넌트와 비제어 컴포넌트 key props 사용 이유 왜 리액트 타입스크립트 사용 리액트 리액트 사용하는 이유 CSR vs SSR 리액트 Virtual DOM 클래스형 컴포넌트와 함수형 컴포넌트 차이 이벤트 버블링과 캡쳐링, 이벤트 위임 props.. 2024. 3. 1.
면접 준비.. 면접이 잡혔는데 원래 면접 볼 거란 예상 하나도 없었는데 갑자기 면접 잡혀서 그래도 요즘 같은 시기에 면접 기회 자체가 희귀하고 감사해서 일단 가긴 하는데 너무 갑작스러워서 큰일 났다 친구는 그냥 안 간다고 하라는데 그래도 겪어봐야 담에 준비를 더 철저히 할 수 있지 않을까 싶어서 일단 참석은 하기로 했는데 흑역사 하나 더 생성하겠네 원래 내 계획은 올 하반기에 본격적으로 취직할 생각이었다 지금은 아직 공부도 덜 되어있고 경험도 부족해서 당연히 서류 탈락할 것이라 생각한 건데 감사하게도 기회가 주어졌다 갔다 오면 더 성장은 하겠지만 난 괜찮은데 면접관분들이 시간 낭비했다고 생각할까 봐 좀 걱정이네 스타트업은 시간 중요할 텐데 뭘 공부해야 할지도 모르겠다 그냥 경험 삼아 보러 갔다 오는 게 되겠네 내일은 .. 2024. 2. 28.

티스토리툴바