본문 바로가기

IT/JavaScript & TypeScript49

[TypeScript] 타입스크립트의 TS7053 오류와 타입 추론 타입스크립트에서 TS7053 오류가 발생하는 경우를 살펴보자.우선 아래 코드를 보자.const obj = { name: "doringri",};let propertyName = "name";console.log(obj[propertyName]); // TS7053 error 자바스크립트라면 아무런 문제가 없는 코드지만, 타입스크립트는 에러를 표시한다.하지만 propertyName을 const로 정의하면 어떨까? const obj = { name: "doringri",};const propertyName = "name";console.log(obj[propertyName]); // doringri 에러 없이 잘 출력된다. 타입스크립트는 어떤 변수를 선언하거나 초기화할 때 타입 추론을 .. 2024. 11. 30.
[TypeScript] 타입스크립트의 Duck Typing과 Freshness Duck Typing타입스크립트의 타입 추론은 값의 형태에 기반하여 이루어지는데, 이걸 구조적 서브타이핑(Structural SubTyping) 또는 덕 타이핑(Duck Typing)이라고 한다. Java 등에서 사용하는 명목적 서브타이핑(Nominal SubTyping)은 명시적으로 타입이나 상속 관계를 지정해주어야 하는 반면, 구조적 서브타이핑은 객체의 프로퍼티를 기반으로 타입을 호환시킨다. // 명목적 서브타이핑 예시type Animal = { name: string; age: number;}// Duck은 Animal에게 상속받았다고 관계를 명시해두고 있음type Duck = Animal & { isBirdFluInfected: boolean;} 위 코드에서 Duck 타입으로 선언.. 2024. 11. 29.
[JavaScript/알고리즘] 의상 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 이번에도 DFS 상태트리로 완전탐색을 시도하였습니다.function solution(clothes) { // 종류에 따라 의상 분류 const classifiedClothes = {}; for (let cloth of clothes) { if (!classifiedClothes[cloth[1]]) { classifiedClothes[cloth[1]] = []; } classifiedClothes[cloth[1]].push(cloth[0]); } .. 2024. 11. 17.
[JavaScript/알고리즘] 전화번호 목록 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 어떤 문자열이 리스트 내 다른 문자열의 접두어가 되는 경우 false, 그런 경우가 없다면 true를 출력하는 문제.function solution(phone_book) { for (let i=0; i 최소직사각형 문제처럼 답은 맞지만 효율성 테스트에서 시간초과 에러 발생함.  정답 힌트리스트를 사전순으로 정렬한 뒤, 다음 인덱스에 해당하는 요소와 비교하는 것만으로도 해결 가능한 문제.즉, "정렬" 하는 것이 알고리즘 해결에 좋은지 생각하기  정답function solution(phone_book) { phone_book.sort(); .. 2024. 11. 14.
[JavaScript/알고리즘] 최소직사각형 프로그래머스 Lv.1 "최소직사각형" 문제 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 주어진 여러 사이즈의 명함들의 가로세로 길이를 모두 수납할 수 있는 가장 작은 사이즈의 지갑을 만드는 알고리즘입니다.위 예시에서 2번 명함을 가로로 눕힌다면 80(가로)*40(세로) 크기의 지갑으로 모든 명함을 수납할 수 있습니다. 변명이지만 이 문제는 알고리즘 고득점 kit의 '완전탐색' 으로 분류되어 있었습니다.function solution(sizes) { const ch = []; let res = Infinity; const dfs = (lv) => { if (lv ==.. 2024. 11. 9.
[JavaScript] 자바스크립트 BFS 문제풀이 예시 BFS는 너비 우선 탐색입니다. 예전 포스트에 넓이(...) 라고 잘못 썼었더군요. 어제 수정했습니다.Queue를 통해 구현되며, 가까운 레벨의 노드부터 탐색하면서 최단 거리를 찾는 문제에 많이 이용됩니다. 즉 DFS와 달리, 찾고자 하는 목표를 얻으면 바로 멈춰서 결과를 도출한다는 특징이 있습니다. 이런 트리가 있다면 DFS(전위 순회)는 1->2->4->5->... 의 순서겠지만, BFS는 1->2->3->4->5->6->7 의 순서가 되겠지요. BFS는 방문한 노드를 다시 방문할 필요가 없기 때문에, 문제를 풀 때는 어떤 노드를 방문했는지 검사하는 리스트가 반드시 필요합니다.  문제 출처 : 프로그래머스 Lv. 3 '네트워크' Solved-Algorithm/JavaScript/프로그래머스/3/431.. 2024. 10. 17.
[JavaScript] 자바스크립트 DFS 문제풀이 예시 DFS(깊이 우선 탐색)는 재귀를 이용한 방식이며, 우선 한 노드의 끝까지 탐색해야 한다면 이용합니다.주어진 숫자들을 모두 이용하여 어떤 값을 만들어내야 하는 문제값들이 주어지고, 어떤 특정한 결과를 얻기 위해 얼마나 많은 방법이 있는지 도출해야 하는 문제미로 찾기 문제이런 문제들은 트리의 마지막 레벨까지, 그리고 가끔은 모든 구성요소를 탐색해서 그 결과들끼리 비교를 하거나 하기 때문에 DFS를 많이 이용합니다.  문제 출처 : 프로그래머스 Lv.2 '타겟 넘버' function solution(numbers, target) { let count = 0; const dfs = (lv, val) => { if (lv === numbers.length) { .. 2024. 10. 7.
[JavaScript] 자바스크립트 ES6에 대해 더 깊게 알아보자 [JavaScript] ES6 문법을 알아보자 (ECMAScript 2015)ES6이란 ECMAScript의 버전 중 가장 최신 버전을 말합니다. ES1이 제일 초기 버전이고 지금은 ES6까지 나온 상태죠. 제가 개발을 시작한 건 ES6이 상용화된 이후라서 어? 이게 ES6에 추가된 문법이었구나doringri.tistory.com일전에 이런 포스트를 작정했습니다만 ECMAScript 2015만 정리했고, 내용도 교육용 사이트인 W3schools에서 대표적인 문법만 추려놓은 거라 빠진 부분이 많았죠. 그래서 이번엔 이 책을 읽으면서 몰랐던 부분을 정리하고자 합니다... (아니 몰랐던 부분은 왜 이렇게 매번 튀어나오는 거지?) 객체 관련(5장)1. 계산된 속성 이름(computed property name).. 2024. 10. 3.
[JavaScript] 스택, 큐 구현 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; .. 2024. 10. 1.
[JavaScript] 코딩테스트에 유용한 자바스크립트 문법 파이썬에 이어 작성하는 자바스크립트 문법,,이번에도 필자가 몰랐던 부분 위주로 정리함.(계속 추가됨)  [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... 2024. 9. 25.
[JavaScript] 웹팩(Webpack) 구성하기 웹팩(Webpack)은 대표적인 자바스크립트 번들링 툴이다.React 같은 프레임워크에서는 웹팩이 기본적으로 세팅되어 있지만, 바닐라 자바스크립트로 개발할 때도 번들링 툴을 설치하여 번들 파일을 만드는 것이 권장된다.  왜 번들링 툴이 권장되는가?지난 포스팅에서 라이브러리를 쉽게 사용하기 위해 npm을 사용하고, npm 사용 시 나오는 node_modules가 너무 무겁기에, 실제 필요한 코드들만 하나의 js 파일로 만들어주는 역할을 번들링 툴이 한다고 언급했었다. 모든 라이브러리를 CDN 링크로 받아오는 게 아닌 이상 번들링 툴은 필수적으로 사용된다.전통적인 방법은 CDN으로 이루어졌는데, 여기에는 문제가 있다.js 파일에서 라이브러리를 사용하려면 무조건 html에서 링크를 받아와야 하기 때문에, 결국.. 2024. 9. 16.
[TypeScript] 타입스크립트 기초 회사에서 타입스크립트를 사용한지는 좀 됐지만 정작 문서를 제대로 살펴본 적은 없다는 걸 깨달았습니다.신입 분이 공부하는 걸 보고 제 자신을 되돌아보게 되었습니다. 나는 과연 얼마나 알고 있는 걸까,, 아래 문서를 정리한 포스트입니다. Handbook - The TypeScript HandbookYour first step to learn TypeScriptwww.typescriptlang.org 1. 타입 추론(Types by Inference)변수 정의 시 명시적으로 타입을 지정해주지 않아도 타입스크립트는 알아서 타입을 생성합니다.// 명시적으로 타입 지정let name: string = "doringri";// 이래도 알아서 string 타입으로 사용함let name = "doringri"; 2... 2024. 7. 3.
[JavaScript/TypeScript] 반복문 안에 있는 비동기 처리 방법 프로젝트 중 반복문을 돌면서 비동기 요청을 해야 하는 상황이 있어서 찾아보았습니다.타입을 작성하는 게 이해가 쉬울 것 같아서 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 문.. 2024. 5. 10.
[JavaScript] 클로저를 통해 코드 최적화(Optimizing)하기 클로저(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;.. 2024. 4. 29.
[JavaScript] 클로저(Closure) 이전에 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=1764514799&allow_ip=&allow_referer=&signature=YIVPyyJiWt0nvSb61MB41pUuW9s%3D 2024. 4. 24.