공삼
article thumbnail
[JS]비동기 패턴의 이점과 이벤트 리스너
Front-End/JavaScript 2024. 2. 7. 13:58

동기 비동기에 대해 https://strap.tistory.com/entry/%EB%8F%99%EA%B8%B0-%EB%B9%84%EB%8F%99%EA%B8%B0%EB%9E%80 동기, 비동기란? 동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말 strap.tistory.com 비동기 패턴의 이점 응답성 향상: 비동기 패턴을 사용하면 여러 작업을 동시에 처리할 수 있어 사용자 경험을 향상시킨다. 웹 페이지가 멈추지 않고 반응하는 느낌을 제공할 수 있다. 성능 향상: 비동기 패턴은 작업을 병렬로 처리하여 전체적인 시스템 성능을 향상시킨다. 특히 네트워크 호출과..

article thumbnail
[JavaScript] 자료형, 형변환
Front-End/JavaScript 2023. 8. 25. 23:22

자료형 (Data Types) https://ko.javascript.info/types 자료형 ko.javascript.info 숫자형 BigInt 문자형 불린형 null undefined → 값이 할당되지 않은 상 객체와 심볼 typeof 연산자 문자형 큰 따옴표나 작은따옴표는 차이가 없지만 백틱 ` 에는 다른의미가 있다. 백틱 사이에 ${ } 를 이용해 변수나 표현식을 넣어주면 문자열 중간에 표현이 가능하다는 점이다. alert( "the result is ${1 + 2}" ); alert( `Hello, ${name}!` ); 등과 같이 사용할 수 있지만 첫째 줄 처럼 큰따옴표는 인식되지 않는다. 무조건 ${} 식의 형태를 사용하기 위해선 백틱을 사용해야 한다. Typeof 연산자 첨부한 사이트의..

article thumbnail
var, let, const 차이
Front-End/JavaScript 2023. 8. 25. 22:30

var와 let,const 환경차이 var - object 환경 let & const - declarative 선언환경을 가지기때문에 결과값이 달라진다. Object 환경 특징 - 함수 스코프 : 'var'로 선언된 변수는 해당 함수의 스코프 내에서만 유효하다. 함수 외부에서 접근할 수없다. - 호이스팅 : 'var'로 선언된 변수는 해당 스코프 내에서 최상위로 끌어올려지는 현상(호이스팅)을 가진다. 즉 변수 선언이 해당 스코프의 최상단으로 옮겨지기 때문에 변수 선언 이전에도 변수를 참조할 수 있다. 렉시컬환경 내 메모리환경에 호이스팅으로 끌어올려지면 var는 undefined로 할당된다. var가 할당 되기전이기때문에 undefined 출력된다. 반면에 let 과 const도 똑같이 호이스팅되지만 동작..

article thumbnail
동기, 비동기란?
CS 2023. 4. 1. 11:20

동기(Synchronous) 동기방식은 어떠한 일을 처리하는 동안 다음 작업이 수행하지 못하고 첫번째 작업이 끝난 후 다음동작이 가능한 것을 말한다. 순서대로 하나씩 작업을 처리할 수 있는 방식을 말하는 것이다. 🤔 : 동기는 동시에 일어나는 이라는 의미를 갖고있어. 비동기 (Asynchronous) 비동기방식은 반대로 요청을 다른 작업을 하는 와중에 다음 동작을 수행할 수 있다. 첫번째 작업이 수행되고 응답을 기다리는동안 뒤의 동작을 먼저 실행하여 동시에 작업을 처리할 수 있는 방식이다. 🤔 : 비동기는 동시에 일어나지 않는 이라는 의미를 갖고있어. 🙋‍♂️ 여기서 잠깐. 동기는 동시적으로 일어나는 뜻, 비동기는 동시에 일어나지 않다는 뜻. 이상하게 들릴 수 있지만 여기서 말하는 동시는 작업의 요청과 ..

article thumbnail
ECMAScript, 바벨(Babel)
Front-End/React 2023. 2. 15. 23:21

ECMAScript JavaScript는 ECMAScript 사양을 준수하는 범용 스크립팅 언어다. 대부분의 웹 브라우저에서는 JavaScript를 볼 수 있는데 브라우저마다 ECMAScript 지원되는 것이 다르기 때문에 조금씩문법에 대해 호환성이나, 속도 차이가 날 수 있다. 수행 능력과 지원되는 ECMAScript가 다르기 때문에 사람들은 일반적으로 JavaScript 호환성보다 ECMAScript 호환성이라는 단어를 더 사용한다. 바벨 바벨은 ES6 사양으로 작성된 코드를 함수적으로 동일한 ES5 코드로 바꿔준다. 대부분의 주요 브라우저는 ES5까지는 지원을 하기 때문에, 개발자들은 브라우저 간 호환성 걱정을 덜 수 있었다. 이전에 인터넷 익스플로어는 ES6가 지원되지 않아 ES5를 사용했는데 그..

article thumbnail
(JavaScript) This, Binding
Front-End/JavaScript 2023. 1. 5. 22:42

이 글은 우아한Tech 영상을 참고하여 작성하였습니다. https://www.youtube.com/watch?v=7RiMu2DQrb4 this 란? this는 현재 실행중인 함수나 메서드가 속한 객체를 참조하는 키워드이다. this를 사용하여 현재 실행중인 컨텍스트 내에서 사용되는 객체에 접근할 수 있다. 🙌 브라우저 --> this는 window 다. window에 탑재된 속성들이 출력되는 것을 볼 수 있다. 🙌 노드 --> 모듈을 가리킨다. 콘솔로그에 노드의 this를 출력하면 텅텅 빈 객체가 출력이 된다. globalThis 를 출력하면 노드에서 사용되는 전역 객체들이 출력된다. 바인딩 (Binding) 이란? 먼저 자바스크립트에서 모든 함수(Function)은 this를 갖고 있다. 함수가 호출될..

article thumbnail
(JavaScript)NPM과 NPX에 대해 쉽고 얕게 이해하기
Front-End/JavaScript 2022. 12. 27. 22:56

NPM (Node Package Manger) 기본적으로 자바 스크립트를 배우기위해서는 다들 Node.js를 설치했을 것이다. 그 때 보는 Node로 이를 이용하여 다양한 자바스크립트 애플리케이션을 실행할 수 있고, 서버에 주로 사용한다. 자바스크립트는 웹상에서 사용하거나 node.js를 설치하여 로컬환경에서 사용할 수 있다. 자바스크립트로 작성된 오픈소스나 라이브러리 등을 가져와서 사용하려면 npm을 사용한다. 재밌는 범쌤의 이야기를 인용해보자. 자바스크립트로 작성된 오픈소스, 라이브러리가 작성된 도서관이 있다. 이곳에서 책을 빌리기전 먼저 해야하는 것은 npm init npm init -y git init 처럼 제일 처음 기본값을 생성한다고 생각하면 된다. 이를 수행하면 package.json 파일이..