괘종소리 세기 ✒️ 방명록 github

[JavaScript] ES6 문법을 알아보자 (ECMAScript 2015)ES6이란 ECMAScript의 버전 중 가장 최신 버전을 말합니다. ES1이 제일 초기 버전이고 지금은 ES6까지 나온 상태죠. 제가 개발을 시작한 건 ES6이 상용화된 이후라서 어? 이게 ES6에 추가된 문법이었구나doringri.tistory.com일전에 이런 포스트를 작정했습니다만 ECMAScript 2015만 정리했고, 내용도 교육용 사이트인 W3schools에서 대표적인 문법만 추려놓은 거라 빠진 부분이 많았죠. 그래서 이번엔 이 책을 읽으면서 몰랐던 부분을 정리하고자 합니다... (아니 몰랐던 부분은 왜 이렇게 매번 튀어나오는 거지?) 객체 관련(5장)1. 계산된 속성 이름(computed property name)..

1. 스택const stack = [];stack.push(3);stack.push(2);stack.pop();console.log(stack.reverse()); // [2, 3] push(), pop() 메소드로 구현할 수 있다.  2. 큐push(), shift() (맨 앞에 있는 요소 추출) 를 사용하여 구현할 수 있지만, shift()는 O(n)의 시간복잡도를 가지고 있다. 시간상 이점을 가져오고 싶다면 연결 리스트로 큐를 만든다.class Node { constructor(data) { this.data = data; this.next = null; }}class Queue { constructor() { this.front = null; ..

파이썬에 이어 작성하는 자바스크립트 문법,,이번에도 필자가 몰랐던 부분 위주로 정리함.(계속 추가됨)  [Python] 코딩테스트에서 알아놓으면 유용한 파이썬 문법※ 파이썬 복습 겸 필자가 몰랐던 것 위주로 정리 람다 함수(lambda x, y: x + y)(1,2) # 3(lambda li: li[1])([1,2,3]) # 2  리스트 관련elements = ["a", "b", "c"]# 리스트 요소의 인덱스elements.index("요소명")# 리스트doringri.tistory.com 리스트 관련const elements = ["a", "b", "c"];// 리스트 특정 위치에 요소 추가 및 삭제// elements.splice(인덱스, 제거할 요소의 개수, 추가할 요소들...);elements...

웹팩(Webpack)은 대표적인 자바스크립트 번들링 툴이다.React 같은 프레임워크에서는 웹팩이 기본적으로 세팅되어 있지만, 바닐라 자바스크립트로 개발할 때도 번들링 툴을 설치하여 번들 파일을 만드는 것이 권장된다.  왜 번들링 툴이 권장되는가?지난 포스팅에서 라이브러리를 쉽게 사용하기 위해 npm을 사용하고, npm 사용 시 나오는 node_modules가 너무 무겁기에, 실제 필요한 코드들만 하나의 js 파일로 만들어주는 역할을 번들링 툴이 한다고 언급했었다. 모든 라이브러리를 CDN 링크로 받아오는 게 아닌 이상 번들링 툴은 필수적으로 사용된다.전통적인 방법은 CDN으로 이루어졌는데, 여기에는 문제가 있다.js 파일에서 라이브러리를 사용하려면 무조건 html에서 링크를 받아와야 하기 때문에, 결국..

회사에서 타입스크립트를 사용한지는 좀 됐지만 정작 문서를 제대로 살펴본 적은 없다는 걸 깨달았습니다.신입 분이 공부하는 걸 보고 제 자신을 되돌아보게 되었습니다. 나는 과연 얼마나 알고 있는 걸까,, 아래 문서를 정리한 포스트입니다. Handbook - The TypeScript HandbookYour first step to learn TypeScriptwww.typescriptlang.org 1. 타입 추론(Types by Inference)변수 정의 시 명시적으로 타입을 지정해주지 않아도 타입스크립트는 알아서 타입을 생성합니다.// 명시적으로 타입 지정let name: string = "doringri";// 이래도 알아서 string 타입으로 사용함let name = "doringri"; 2...

프로젝트 중 반복문을 돌면서 비동기 요청을 해야 하는 상황이 있어서 찾아보았습니다.타입을 작성하는 게 이해가 쉬울 것 같아서 TypeScript로 작성하였습니다.  1. forEach무조건 비동기적으로 처리됨.const nums: number[] = [1, 2, 3];nums.forEach(num => { axios.get(`127.0.0.1:8080/${num}`) .then(() => console.log(num));});요청 순서는 1, 2, 3의 순서지만 비동기적이므로 응답이 먼저 오는 순서대로 로그가 찍힌다.async나 await로도 동기 처리가 되지 않는다.   2. for 또는 for-ofasync와 await을 사용함으로써 순서대로 처리가 가능함. 아래 코드에서는 for-of 문..

클로저(Closure)를 응용하여 반복되는 사전작업(변수 정의)을 피하는 방법을 사용해 본다.// 함수 호출 시마다 a, b라는 변수가 계속 정의된다.const compare = (x) => { const a = 10; const b = 20; return x > a && x > b ? "bigger" : "smaller";}console.log(compare(30));console.log(compare(5));↓// 클로저를 이용한다.// a와 b의 값은 compare 내부 스코프에 한 번 저장된다.// 그러면 return 안의 anonymous 함수가 compare의 렉시컬 환경에서 a, b의 값을 참조해 온다.const compare = (x) => { const a = 10;..

이전에 React의 setInterval을 사용하면서 발생한 문제와 그 해결법에 대해 포스팅을 했었습니다. (아래 포스트 참고) { setInterval(() => { if (!isReverse) { setCurrentSeconds(prevState => prevState + 1); } else { setCurrentSeconds(prevS" data-og-host="doringri.tistory.com" data-og-source-url="https://doringri.tistory.com/79" data-og-image="https://blog.kakaocdn.net/dna/bzwS1M/hyVVHPMNNS/AAAAAAAAAAAAAAAAAAAAABGATb6USWfWNzr3NoWDmmvT6T-HFDtIF5FhRLJukKEE/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=e5itnnpIX%2BhA%2Ba7DPXr3TX%2BJmxk%3D

자바스크립트는 위에서부터 아래로 순차적으로 코드를 해석하는 인터프리터(Interpreter) 언어입니다. 하지만 모든 코드가 순차적으로 동작하는 건 아닌데요, 그 이유는 호이스팅(Hoisting) 이라는 알고리즘이 정의된 함수와 변수들을 모두 찾아서 먼저 선언시키기 때문입니다. (※ 코드 위치 자체가 끌어올려지는 건 아니며, 렉시컬 환경(Lexical Environment)에 등록되는 것입니다. 렉시컬 환경에는 어떤 스코프 범위에서 사용될 변수와 함수들이 저장되며, 스코프의 개수만큼 생성됩니다. 예를 들어, 함수가 하나 있다면 그 함수 내부의 렉시컬 환경, 그리고 함수 밖의 전역 렉시컬 환경까지 총 두 개가 생깁니다.) 아래의 코드에서는 함수 선언문으로 greet()라는 함수를 만들었습니다. greet(..

ES6이란 ECMAScript의 버전 중 가장 최신 버전을 말합니다. ES1이 제일 초기 버전이고 지금은 ES6까지 나온 상태죠. 제가 개발을 시작한 건 ES6이 상용화된 이후라서 어? 이게 ES6에 추가된 문법이었구나 하고 알아가는 시간이 되었습니다. JavaScript Versions W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 위 링크에 들어가시면 ES6에는 어떤..

객체 간 다른 요소 확인npm i deep-object-diff 오류 발생시 --force(충돌 우회) 옵션이나 --legacy-peer-deps(충돌 무시) 옵션을 사용합니다. import { diff } from "deep-object-diff";const object1 = {"a": 1, "b": 2, "c": 3};const object2 = {"a": 1, "b": 2, "c": 4};console.log(diff(object1, object2));  두 가지 객체에서 다른 요소가 객체 형태로 반환됩니다.  두 객체가 같은지 확인결국 diff(object1, object2) 의 결과가 {} (빈 객체) 로 나오면 두 객체가 서로 같다는 뜻이겠지요. 그런데 아시는 분은 아시겠지만 Javascrip..

함수 a()의 파라미터로 b()라는 함수를 줄 때 b()를 콜백 함수라고 한다. 콜백 함수는 보통 비동기 작업 시 함수의 실행 순서를 지정해주기 위해 사용한다. 그런데 비동기 작업이 여러 개일 때 이들의 순서를 모두 콜백 함수로 지정하려고 한다면 계속 중첩되어, 코드가 알아보기 힘들어질 것이다. function test(message, callback) { axios.get("http://127.0.0.1:8080").then((response) => { callback(message); }); } test("1", function(result) { console.log(result); test("2", function(result) { console.log(result); test("3", functi..