async/await은 왜 쓰는가? : JS 비동기 처리하기

들어가는 말예전에 async/await에 대해 간단히 정리한 적이 있다. 하지만 그때는 문법 위주로만 설명하다 보니,비동기 흐름이 왜 그렇게 발전했는지, 무엇이 개선되고 어떤 점을 주의해야 하는지는 충분히 다루지 못했다.이번 글은 그 아쉬움을 채우기 위해 준비했다. 동기와 비동기의 개념부터 시작해,콜백 → Promise → async/await으로 이어지는 흐름을 차근차근 짚어보며비동기를 올바르게 다루는 사고 방식을 정리해보려 한다.이 글을 통해 배우는 것동기(Sync) vs 비동기(Async)의 차이자바스크립트에서의 비동기 처리 흐름: 콜백 → Promise → async/await각각의 방식이 해결한 문제와 한계병렬 처리 시 성능 차이와 실제 사용 전략동기란?기본적인 코드 흐름은 대부분 동기적이다. ..

• format_list_bulleted JavaScript
• · 2025. 5. 2.
• textsms

websocket과 라이브러리

websocket webSocket은 TCP 연결에서 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. webSocket의 특징 양방향 통신 (Full-Duplex) 방식 클라이언트와 서버가 서로에게 데이터를 주고 받을 수 있음 일반적인 Http통신은 client가 요청을 보내는 경우에만 server가 응답하는 단방향 통신 실시간 네트워킹(Real Time-Networking) 웹 환경에서 연속된 데이터를 빠르게 노출 ex) 채팅, 주식 여러 단발기에서 빠르게 데이터를 교환 최초 접속에서만 http프로토콜 위에서 handshaking을 하기 때문에 http header를 사용한다. Socket.io Socket.io는 node.js를 지원하고, websocket을 기반..

• format_list_bulleted JavaScript
• · 2022. 4. 28.
• textsms

불변성은 왜 지켜야할까?

불변성 (Immutability) 불변성은 값이나 상태를 변경할 수 없는 것을 의미합니다. 프로그래밍에서 불변성은 데이터 원본의 훼손을 막는 것을 의미합니다. 간단히 말하자면, 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것입니다. 자바스크립트에서는 원시타입은 불변성을 지니지만, 객체타입은 값이 변할 수 있습니다. 원시 타입 원시 타입에는 Boolean, Number, String, null, undefined, Symbol이 있습니다. 먼저 코드를 보겠습니다. let str = "example1"; str = "example2"; console.log(str) // example2 위에서는 원시타입은 값을 변경할 수 없다고 했는데 위와 같은 결과가 나왔습니다. 사실, 위 과정은 값이 변경..

• format_list_bulleted JavaScript
• · 2022. 4. 27.
• textsms

함수 스코프와 블록 스코프

스코프 변수나 함수가 선언되어 사용할 수 있는 유효 범위를 말합니다. 스코프는 크게 전역 스코프와 지역 스코프로 나누는데, 지역 스코프에 오늘 정리할 함수 스코프와 블록 스코프가 있습니다. 전역 스코프 : 어디든지 변수에 접근이 가능 지역 스코프 : 정해진 범위 안에서 접근이 가능 함수 스코프 자바스크립트는 함수 스코프를 기본으로 사용합니다. 함수 스코프는 새로운 함수가 생성될 때마다 새로운 스코프가 발생되는데, 함수에서 선언한 변수는 해당 함수 내에서만 접근 가능하다는 걸 의미합니다. function sayHello() { var hello = 'hello'; } hello; //ReferenceError 위 코드를 보면, sayHello라는 함수가 생성된 것을 볼 수 있습니다. hello라는 변수가 ..

• format_list_bulleted JavaScript
• · 2022. 4. 24.
• textsms

async/await은 왜 쓰는가?

이번 글에서는 Promise와 async/await의 차이에 대해서 공부해보겠습니다! 더 자세하게 내용을 작성했습니다!2025.05.02 - [JavaScript] - async/await은 왜 쓰는가? : JS 비동기 처리하기동기 / 비동기 특징동기의 (대략적인) 특징동시에 여러 작업을 수행할 수 없다.흐름을 예측하기 쉽다. 먼저 수행되고 나중에 수행되는 것들이 명확하다.비동기의 (대략적인) 특징동시에 여러 작업을 수행할 수 있다.흐름을 예측하기 어렵다. (무엇이 먼저 완료될 지 보장할 수 없다.)PromisePromise는 자바스크립트에서 비동기 처리에 사용되는 객체입니다.코드는 실행 되었지만 결과를 아직 반환하지 않은 객체라고 설명할 수 있습니다. Promise는 3가지 상태가 있습니다. Pendi..

• format_list_bulleted JavaScript
• · 2022. 4. 18.
• textsms

[JavaScript] 함수 표현식 VS 함수 선언식

이번에는 자바스크립트에서 함수를 선언하는 방법을 알아보겠습니다! :) 함수 선언식 일반적으로 작성하는 함수 방법입니다. function 함수명() { //함수 로직 } function funcDeclarations() { return 'function declaration'; } // 함수 호출 funcDeclarations(); 함수 표현식 함수를 변수에 저장하여 활용하는 방식입니다. var 함수명 = function () { //함수 로직 } var funcExpression = function () { return 'function epression' } // 함수 호출 funcExpression(); 함수 선언식 VS 함수 표현식 둘의 가장 큰 차이점은 호이스팅에 있습니다. 먼저 호이스팅은 선언한..

• format_list_bulleted JavaScript
• · 2022. 1. 25.
• textsms