공삼
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
[ES5] 엄격모드란? StrictMode?
Front-End 2023. 8. 25. 23:54

엄격모드 StrictMode ECMAScript5 (ES5)에서 도입된 "StrictMode" 또는 "엄격모드"는 자바스크립트의 실행 컨텍스트 내에서 코드를 더 엄격하게 처리하는 방식을 의미한다. 엄격모드를 사용하면 더 많은 에러를 발견하고 예방하며, 작은 동작 차이를 제어할 수 있다. 엄격모드를 활성화 하려면 엄격모드를 활성화하려면 스크립트의 최상단이나 함수 내의 첫 줄에 "use stricet"; 문을 추가하면 된다. 반드시. 최상단에 있어야 엄격모드가 활성화 된다. React에서 사용한 나는 이런식으로 작성하였다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // 엄격 모드 활성화 React..

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
(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 파일이..