TypeScript ·
[Typescript] 외부 라이브러리 사용 간 Type 정의
외부 라이브러리 를 사용하는 경우 만약 해당 라이브러리 에 type 이 정의되어 있지 않다면 어떻게 type 을 정의해서 사용할까? 에 대한 내용을 포스팅하도록 한다. npm 을 통해서 axios 에 대한 라이브러리 를 설치 후 import 를 통해 사용해 보도록 하자.
hippo/devloghippo/devlogTypeScript ·
외부 라이브러리 를 사용하는 경우 만약 해당 라이브러리 에 type 이 정의되어 있지 않다면 어떻게 type 을 정의해서 사용할까? 에 대한 내용을 포스팅하도록 한다. npm 을 통해서 axios 에 대한 라이브러리 를 설치 후 import 를 통해 사용해 보도록 하자.
TypeScript ·
typescript 의 추론과 가드를 통한 타이핑을 학습한 내용을 포스팅한다. 타입 호환은 기본적으로 작은 범위의 타입이 큰 범위의 타입을 호환할 수 없다는 골자를 가지고 있다. 예를들면 아래와 같다. 함수로 보면 sum1 이 더 큰 범위이기 때문에 add1의 타입을 호환할 수 있지만, 반대로 add1 이 sum1을 호환할 수는 없다.
TypeScript ·
typescript 의 추론과 가드를 통한 타이핑을 학습한 내용을 포스팅한다. 위 코드에서 보면 DetailDropdown 에서 Dropdown 인터페이스를 상속받아 사용하기 때문에 문제없이 추론 및 정의가 가능하다.
TypeScript ·
우리가 모든 타입의 경우의 수를 두고 함수를 여러개 만든다는 것은 말도 안되는 일일 것이다. 따라서, 타입을 정의하기 위해 Generic 타입을 사용한다. 위 소스에서 볼 수 있듯이 우리는 T를 통해 타입을 먼저 정의해놓지 않고 사용하는 측에서 정의하게끔 함수를 만들었다.
TypeScript ·
외부 라이브러리 를 사용하는 경우 만약 해당 라이브러리 에 type 이 정의되어 있지 않다면 어떻게 type 을 정의해서 사용할까? 에 대한 내용을 포스팅하도록 한다. npm 을 통해서 axios 에 대한 라이브러리 를 설치 후 import 를 통해 사용해 보도록 하자.
TypeScript ·
TypeScript에서 타입을 정의하는 interface와 type에 대해 비교해본다. Interface를 통해 타입을 정의하고 실제 변수를 선언할 때 해당 타입을 선언해주는 방법이 있다. 두가지 방법으로 정의할 수 있다.
TypeScript ·
이번에 대규모 차세대 프로젝트에서 프론트 공통개발을 담당하게 되면서 여러가지 새롭게 써보고 구현해야되는 것들이 생겨났다. 우리는 Vue3프레임워크를 사용해서 진행하게 되므로 기본이되는 Typescript를 활용할 계획이어서 빠르게 학습을 진행하게 되었다.
JavaScript ·
클로저(Closure) 는 Javascript 에서 꾀나 기본적인 개념이다. Scope 와도 많이 관련되어 있고 코드를 짜는데 있어서 변수의 어휘적 범위(Lexical Scoping) 를 잘 고려해야 실수 없는 소스를 짤 수 있을것 같다.
JavaScript ·
이번에는 Javascript 의 타입 var, let, const 에 대하여 포스팅을 진행한다. 중간중간 Scope에 대한 기술도 들어갈 예정이다. 스코프(Scope) 는 식별자의 유효범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다.
JavaScript ·
Javscript 는 생각보다 복잡하게 동작한다. Javscript Engine 은 기본적으로 단일 스레드(Single Thread) 방식으로 동작한다. 하지만, 이러한 상황에서 그럼 Browser에서는 굉장히 많은 작업들이 동시에 일어나는 것은 어떻게 진행되는 것일까?
JavaScript ·
클로저(Closure) 는 Javascript 에서 꾀나 기본적인 개념이다. Scope 와도 많이 관련되어 있고 코드를 짜는데 있어서 변수의 어휘적 범위(Lexical Scoping) 를 잘 고려해야 실수 없는 소스를 짤 수 있을것 같다.
JavaScript ·
이번 포스팅에서는 JavaScript에서 중요한 프로그래밍 기법중 하나인 throttling 과 debouncing에 대하여 개념 및 사용유형에 대해서 포스팅을 기록해본다. throttling 과 debouncing은 하나의 프로그래밍 기법이므로 개발자의 판단하에 다양한 기능에 해당 기법으로 녹아들 수 있다.
Algorithm ·
카카오 캐시변형 문제를 삽입정렬화 시킨 문제이다. 내장함수들을 이용해서는 간단하게 풀어보았지만, 내장함수를 사용하지 않고 삽입정렬로 풀어보니 조금 생각이 필요했다.
Algorithm ·
최근 알고리즘을 다시한번 정리해보는 차원에서 하나하나 다시 풀어보고 있다. 풀면서 뭔가 다른사람들이 푼 좋은 아이디어도 얻게되고 좋은것 같다. 이번에도 가장 기본이 되는 선택정렬을 풀어 보았다.
Algorithm ·
입력으로 필수로 들어야하는 과목을 나열한 String과 수강한 순서대로 나열한 String을 준다. 첫번째 인자의 순서대로 필수 수강이 필요한 과목을 모두 순서에 맞게 수강하였으면 Yes 아니면 No 를 출력하라
JavaScript ·
Javascript를 공부하면서 굉장히 많이 보이는게 Event관련 기능들이다. 이번에는 앞선 이벤트 버블링에 이어 Event의 전달 과정의 두번째로 이벤트 캡쳐을 기록해보고자 한다. 이벤트 캡처링이란 이벤트 버블링과는 반대로 동작한다고 이해하면 된다.
JavaScript ·
Javascript를 공부하면서 굉장히 많이 보이는게 Event관련 기능들이다. 이번에는 Event의 전달 과정의 첫번째로 이벤트 버블링을 기록해보고자 한다. 대충은 알고 있지만 모든 정리를 하면 더욱 내것이 되는 기분이라 좀 더 자세히 다뤄봐야 겠다.
JavaScript ·
Javascript로 구현 과제를 공부하던 도중 Method Chaining에 관한 부분을 알게 되었다. 유용한 구현법인 만큼 짧지만 기록해두어야 겠다는 생각이 들어 기록해본다.
JavaScript ·
실행 컨텍스트를 공부하던 중 var 와 let,const간의 차이 즉, Variable Environment와 Lexical Environmnet와의 환경 차이에 대해서 궁금증이 생겼다. var의 경우에는 Creation Phase 단계에서 초기화 및 메모리값 할당(undefined)가 일어나지만 let, const의 경우 변수…
JavaScript ·
좋은 기회로 실행컨텍스트(Execution Context) 에 대한 궁금증을 갖게 되었다. 중요한 부분은 이 실행 컨텍스트가 Javascript 에서 굉장히 중요한 역할을 하고 있다는 것이고 아직까지 깊게 공부를 해본적이 없어 이번 기회에 정확히 짚어가고 싶어서 기록을 시작해본다.
JavaScript ·
공부를 하다가 리마인드할겸 간단하게 적어본다. 이벤트 코드 관련 동작에서 많이 사용되는 preventDefault에 대하여 기록해본다.
Algorithm ·
주어진 n 명의 인원을 순서대로 세워놓고 각자의 번호를 부여받으며, k 번째마다 탈락하며, 탈락한 인원을 제하고 순서는 그대로 이어간다. 마지막 남는 사람이 공주를 구한다. 공주구하는 인원 구하라.
JavaScript ·
예를 들어 아래와 같은 HTML의 XML 데이터가 있다고 하자. Javascript 를 통해서 이 값에 접근해본다. 보통 xml 데이터를 String 으로 주고 태그의 내부 값을 조작하라는 문제가 많이 나온다. 이런경우는 아래와 같이하면 어떨까 생각해 보았다.
Algorithm ·
먼저 소수에 대한 정의를 살펴볼 필요가 있다. 소수는 1과 자기 자신으로만 나누어지는 수 이다. 1은 소수가 아니다. 모든 자연수는 소수들의 곱으로 표현된다.
JavaScript ·
앞선 포스트에서 이벤트 루프 에 대하여 공부해봤다. 공부를 하다보니 Javascript Engine 에 대하여 궁금증 이 생겨 추가로 공부하여 기록한다. 자바스크립트 엔진은 각 브라우저 별로 상이하다. SpiderMonkey : 파이어 폭스
JavaScript ·
우리가 사용하는 자바스크립트 엔진은 단일 호출 스텍을 사용한다. 즉, 웹 브라우저에서 요청한 작업들을 동시에 하나만 처리할 수 있다는 개념이다. 그러나 우리는 웹 브라우저에서 여러가지 작업들이 동시에 동작하는 것, 동시성을 보장하는 것을 볼 수 있다.
Algorithm ·
주어진 배열 내 특정값을 찾아 제거한다. 특별히 어려운 문제는 아니다. 다만, 배열의 합을 구할때 reduce 함수를 활용하는 방법을 간단하게 알아볼 수 있다.
JavaScript ·
코딜리티를 구경하던 중 간단한 구현과제 문제가 보여서 바닐라로 구현해보았다. 문제는 간단하게 "LIKE | { 좋아요갯수 }" 버튼을 생성하고 누를때마다 좋아요 갯수를 증/감 하는 문제이다. 특별한건 없지만 최대한 깔끔하게 짜도록 노력해보았고, 조금씩 다른사람 코드도 보면서 배우도록 해야겠다.
JavaScript ·
전달받은 타겟 정보(클라이언트에서 받은 이벤트정보)가 발생 시 가장 가까운 특정 태그를 찾는방법 render 를 통해서 아래와 같이 태그가 추가된다.
JavaScript ·
아래는 공부하고 있는 프로젝트에서 만든 render 함수이다. 여기서 기록해노을 내용은 dataset 함수를 통한 태그 특정하는 기능이다.
JavaScript ·
비동기 처리를 위한 콜백함수의 단점을 보완하기 위해 제안됨 Promise 객체 생성 Promise 객체에서는 executor 라는 함수가 자동으로 실행되고, executor 라는 함수는 resolve 와 reject 라는 두 개의 함수를 인자로 받아서 비동기 처리 함수를 실행
JavaScript ·
Syncronous(동기) : 요청을 보낸 후, 해당 요청을 기다렸다가 응답을 받은 다음 동작을 실행하는것 즉, 순차적으로 코드가 진행된다. Asyncronous(비동기) : 요청을 보낸 후, 응답을 기다리지 않고 다음 코드를 실행한다.
JavaScript ·
javascript 변수 또는 함수 선언 시 해당 변수가 유효한 범위를 의미한다. 3가지 전역(Global) , 함수(Function), Block(블록) Scope 가 있으며 선언에 따라 유효범위가 다르기 때문에 이해가 필요함
JavaScript ·
호이스팅이란 끌어 올리다 의 뜻으로 이해하면 된다. 우리가 알고 있는 여러 언어들은 통상 일반적으로 함수 또는 변수를 선언한 후에 아래 라인에서 선언한 것들을 사용 가능 하지만 Javascript 의 경우에는 함수 또는 변수를 선언하기 전에 사용해도 에러가 나지 않는 현상을 말한다.
JavaScript ·
조건문을 좀 더 간결하게 사용할 수 있다. 위 조건문을 삼항연산자를 통해 작성하면 아래와 같다 인자값이 없을 경우 undefined 출력
JavaScript ·
삭제는 Array.splice(시작Index, 삭제갯수) 마지막에 값을 넣는다. 배열의 끝에 있는 값을 리턴해주고, 해당 아이템은 배열에서 삭제 우리가 아는 자료구조의 push, pop 으로 이해해도 된다 배열의 첫번째 값을 삭제하고, 뒤에 있는 아이템을 앞으로 당긴다.
JavaScript ·
Class명 {} 로 함수와 같이 정의 가능 Class 내부에 Constructor() 를 통해 프로퍼티 및 값을 정의한다. Method 는 Class 안에 정의하면 된다. 자바와 같이 extends 를 통해 상속할 Class 선언
JavaScript ·
함수 선언을 보다 간단하게 하기 위해 고안되었다. 화살표 함수는 익명 함수이다. 따라서 호출하기 위해 변수에 대입하는 경우가 많다. 화살표 함수를 사용할 시 this 값은 상위 객체를 가르킨다. 예를 들면 아래와 같을 수 있다.
JavaScript ·
forEach 문은 배열에 접근할 때 for 반복문 대신 접근할 수 있는 내장 메서드 이다. 위 코드를 돌려보면 여기서 forEach 의 결과를 보면 a 배열의 값과 인덱스 값, 매개변수로 준 값이 차례로 호출되는 것을 볼 수 있다.
JavaScript ·
javscript 객체는 Property 와 Method(함수) 로 이루어져있고,Property 는 보통 Key, Value 로 이루어져 있다. 객체 리터럴 방식 new Object() 생성 방식 생성자 함수로 생성
JavaScript ·
NULL : 값이 없음을 나타낸다. undefined : 값이 할당되지 않았음을 나타낸다. undefined 의 경우는 타입과 값이 모두 'undefined' 로 나오지만 null 의 경우 타입이 Object 로 출력되는 것을 기억하자
Algorithm ·
괄호의 조합(ex. ()(())()()) 을 입력받으며, '(' 문자는 쇠막대기가 추가된다고 가정하고 '()' 의 경우 해당 시점의 막대기를 자른다고 생각한다. 입력받은 조합에서 몇개의 막대기가 나오는지 구한다.
Algorithm ·
후위식 연산값을 입력받고 결과값을 리턴하여라 스택문제를 연습할때 가장 기본적인 문제로 숫자는 스택에 쌓고 연산자가 나오면 앞선 두개의 스택값을 pop 하여 연산하는 방식
Algorithm ·
괄호와문자로 이루어진 문자열을 입력받고 괄호 사이에 들어가있는 단어를 모두 제거하라 Javscript 에서 스택은 push, pop 을 이용하며 LIFO 만 잘 기억하자.
Algorithm ·
두개의 문자열 a,b 가 주어지고 a 에서 b 와 아나그램이 부합하는 경우의 수를 구하여라 이문제는 지금까지 공부했던 hash, Sliding Window, 투포인트 알고리즘을 모두 사용한다.
Algorithm ·
N 일간의 매출 기록이 주어지고 K 일간의 연속된 매출 중 최대 매출을 구하라 이 문제는 슬라이딩 윈도우(Sliding Window) 방법이며 주어진 배열에서 K 개의 숫자를 옆으로 이동하며 로직을 완성하는 방법이다.
Algorithm ·
N 개의 원소를 갖는 배열에서 연속된 수의 합이 6이 되는 경우 구하기 투포인터 알고리즘의 이점은 중복 for 문으로 n2 의 시간복잡도보다 줄일 수 있다는 점이다.
Algorithm ·
1차원 배열이 주어지면 2개의 가상의 포인터 즉, 각각 다른 원소를 가르키고 있는 포인터를 가지고 조작하며 원하는 비교를 통해 결과값을 얻어낸다.
Algorithm ·
M 번의 테스트에 대한 등수값이 주어지고 그안에서 N 명의 멘토, 멘티가 가능한 경우의 수를 구하라 (단, 멘토는 모든 테스트에서 멘티보다 등수가 높아야함)
Algorithm ·
주어진 숫자들의 역수를 검사하여 소수임을 확인하라. 이 문제는 난이도가 높다기 보다는 시간복잡도 측면에서 소수를 판별하는데 sqrt 를 통해 전체다 검사하는것이 아니라 제곱근 만큼만 검사를 한다. 약수의 경우 항상 큰수와 작은수가 있기 때문에 작은수를 검사하게 되면 큰수는 당연히 검사가 되는 개념으로 이해하면 될 것...
Algorithm ·
특정 문자열(String) 이 주어지고 해당 문자열이 회문 문자열에 해당하는지 여부를 판단하라. 기본 솔루션 이 문제는 정말 간단한 회문문자열 검증 문제였다.
Algorithm ·
N X N 길이의 격자판에서 상하좌우 값보다 큰 경우 봉우리로 인정 및 Count 주어진 N X N 배열 가장자리는 0 으로 가정하여 전체 봉우리의 갯수 를 구하라.
Algorithm ·
N X N 2차원 배열을 주어지고 행,열,대각선의 합 중 가장 큰 부분을 구하여라 먼저 문제를 보자마자 기억나는 아이디어는 합을 모두 구해서 배열에 담고 비교하자 였다.
Algorithm ·
입력값으로 N X N 행의 배열이 주어지고 해당 배열은 사람의 키를 의미한다. 맨앞에서 볼 때 보이는 사람일경우 즉, 자신의 앞 모든사람보다 키가 큰 사람을 구하라
Algorithm ·
N 명의 점수를 입력한 배열 이 주어지고 그 배열의 등수 구하기 기본 솔루션 주어진 배열의 값에 대하여 등수를 구하는 문제였다. 여기서 기억할 것은 신규 배열로 등수를 초기화 후 반복문을 통하여 큰 값에 대한 갯수만큼 등수를 업하는 아이디어 이다.
