본문 바로가기

전체 글

(64)
(Algorithm/Javascript) stack이란? 자바스크립트로 stack구현하기 stack 자료구조란?stack은 자료구조 중 하나이다.  stack은 데이터가 나중에 들어온 것이 먼저 나가는 구조를 가지고 있다.  (LIFO-Last In, First Out - 후입선출) 바구니에 담긴 cd를 생각하면 편하다. 바구니의 바닥은 막혀있기에 가장 아래에 있는 cd를 꺼내기 위해서는 순서대로 위에서부터 cd를 꺼내야 한다.    stack 사용처stack은 undo 기능(사용자 명령을 저장했다가 가장 최근에 한 명령부터 되돌림) 등에 사용된다. 자바스크립트 엔진의 호출스텍 역시 stack 구조이다. 따라서 최대 호출 스택 크기를 초과하면 stack overflow 에러가 발생할 수 있다.   stack 구현자바스크립트는 별도의 스택 자료구조를 제공하지 않는다. 대신, 자바스크립트의 배열..
(Algorithm/Javascript) 트리 노드 만들고 xml 형태로 출력하기 상속관계가 위와 같은 트리가 있다고 가정하면 상속관계는 아래와 같이 표기할 수 있다. 이때 최상위 부모인 A는 부모가 없으므로 부모 정보에 null을 표기했다.//[parentName, myName]const relations = [ [null, "A"], ["A", "B"], ["A", "C"], ["B", "D"], ["B", "E"], ["C", "F"],];   트리 노드 만들기이후 상속 정보가 담긴 relation을 순회하면서 노드를 만든다. myName으로 만들어진 노드가 없다면 노드를 만들고, parentName가 null이 아닌 경우를 제외하고 parentName으로 만들어진 노드가 없다면 노드를 만들고, parentName노드 자식 리스트에 myName 노드를 추가한다. 이렇게..
(Javascript) 2차 배열 만드는 방법, 2차 배열의 참조가 같아지는 오류 2차 배열에서 주의해야 하는 참조 자바스크립트에서 빈 문자열로 2차 배열을 만들어야 한다고 하자  이때 new Array와 full을 이용해 아래와 같은 방법을 생각해 낼 수 있다.//error! 배열 내부의 참조가 모두 같아져 버린다.new Array(len1).full(new Array(len2).fill(0)) 하지만 결론적으로 말하자면 위와 같이 배열을 설정하면 안 된다. 그 이유는 배열이 생성되는 과정을 자세히 들여다보면 알 수 있다.  1. new Array(len2).fill(0)가 배열을 생성한다. 2. new Array(len1)가 배열을 생성한다.3. new Array(len1)의 fill 함수가 new Array(len2)의 참조로 배열 내부를 채운다. 결론적으로 new Array(l..
(Typescript) 제너릭 generic이란? 사용 방법 제너릭이란?코드를 작성하다 보면 input 타입에 따라 return 타입을 제어해야 하는 경우가 생긴다. 이 경우 any 타입을 사용하면 자유롭게 입력 타입과 반환 타입을 설정할 수 있지만, 타입 안정성이 떨어져서 연결이 끊어진다. 그렇다고 타입이 다른 함수를 각각 정의하려니 코드가 반복되어 비효율적이다.이런 문제를 해결하기 위해 등장한 것이 바로 제너릭(generic)이다. 제너릭은 코드의 재사용성을 높이고, 타입 안전성을 유지하면서 다양한 타입을 처리할 수 있게 해주는 강력한 기능이다. 제너릭(generic)을 사용하면 반복되는 코드를 아래와 같이 간단하게 나타낼 수 있다.//같은 기능에 타입만 다른 함수들을 반복적으로 선언해야한다.function returnNumber(item: number): n..
(Typescript) 타입 선언 방법 3탄, 클래스 타입 선언 방법 이전 포스팅으로 객체와 변수, 함수 등의 타입 선언 방법에 대해 다루었다. 이번 포스팅에서는 클래스의 타입을 선언하는 방법에 대해서 정리하고자 한다. 타입스크립트의 클래스 선언 방법은 자바스크립트와 유사하지만,  접근 제어자, getter/setter, 인터페이스, abstract 클래스 등 타입스크립트만의 고유 기능이 있으며 이 기능들을 활용하면 좀 더 명확하고 안정성이 높은 코드를 짤 수 있다.    1.  클래스의 타입 선언 방법 / constructor 단축구문클래스의 타입을 설정하는 타입스크립트의 기본 문법은 아래와 같다. 자바스크립트의 클래스 선언과 동일하게 필드 선언과 초기화(constructor)가 들어가 있고, 여기에 타입이 추가된다.class User { name: string; a..
(Typescript) 유니온 타입(|)과 인터섹션 타입(&)이란? 사용법 정리 이번 포스팅에서는 타입스크립트에서 사용되는 유니온 타입(|)과 인터섹션 타입(&)을 다룬다.  생김새는 기존 자바스크립트의 논리연산자(||, &&)와 유사하게 생겼지만, 사용법은 전혀 다르다.  이번 포스팅에서는 타입스크립트에서 해당 타입이 어떻게 사용되는지 정리하고자 한다.   유니온 타입 (Union Type, |)유니온 타입은 여러 타입 중 하나의 타입을 가지는 타입을 정의할 때 사용된다. 예를 들어 해당 타입이 문자열 또는 숫자 중 하나가 될 수 있다면 string | number 이런 식으로 표현할 수 있다. let score: number | string;score = 98;score = "100"; 배열도 유니온 타입으로 설정할 수 있다.  다만 배열은 괄호를 어떻게 사용하느냐에 따라 차이가..
(Typescript) 타입 선언 방법 정리 2편, 인터페이스란? 타입 별칭과의 차이 이전 포스팅에서 다양한 타입 선언 방법에 대해서 포스팅했다. 그중에서 타입 별칭이라는 선언 방법이 있었는데, 이 타입 별칭이라는 선언 방법이 인터페이스 선언 방법과 상당히 유사하다.  인터페이스와 타입별칭은 사용 방법도, 생김새도 비슷하지만 약간의 차이점이 있다.  이번 포스팅에서는 둘의 차이점을 정리한다.  먼저 타입 별칭이 무엇인지 궁금하다면 하단 포스팅을 참고하면 된다.  (Typescript) 타입스크립트, 타입 선언 방법 정리 1편타입스크립트에서는 타입을 선언할 수 있는 방법이 다양하다. 워낙 다양하다 보니 타입을 선언하는 방법이 헷갈리기에 해당 포스팅으로 정리하고자 한다.   기본 타입 정의자바스크립트의lemu-devblog.tistory.com   1. 인터페이스는 객체 타입만 정의할 수 있..
(React) useState를 이용한 input 필드 입력받기, 한 글자만 입력 되는 이유 자바스크립트와 다른 react의 input바닐라 자바스크립트로 요소의 value를 받아오고자 할 때 아래와 같은 순서를 거친다.HTML input 태그로 요소를 생성한다.자바스크립트로 해당 요소 DOM을 받아온다. (querySelector, getElementById 등 사용)받아온 DOM의 value 값을 가져온다.  하지만 리액트를 사용해 위와 같이 접근하려고 하면 문제가 생긴다.JSX로  요소를 생성해도 자바스크립트와 달리 한 글자만 입력되는 난감한 상황이 펼쳐지기 때문이다.이는 리액트 특유의 렌더링 방식 때문에 생기는 현상이다.  요소에 value 속성을 설정하고 onChange 핸들러를 제공하지 않으면입력값이 리액트 상태에 반영되지 않는다. 리액트는 이때 사용자 입력을 감지하고 컴포넌트를..