Thought of the day

게으름은 즐겁지만 괴로운 상태이다. 우리는 행복해지기 위해 무엇인가 하고 있어야 한다.
(Indolence is a delightful but distressing state; we must be doing something to be happy)
- 마하트마 간디 / Mahatma Gandhi

2021년 04월 23일 오늘은 11시 57분에 공부를 시작했다. 오늘은 어제 공부했던 타입스크립트 내용정리를 시작으로 새롭게 타입스크립트의 제네릭(generic)에 대해 공부를 할 예정이다. 알고리즘 문제풀이는 5문제정도 풀이를 예정으로 한다.

TO DO LIST

• 알고리즘 관련 책 독서

  • ~ 30P (완료)

    
    

• A → V → R → Z

  
  

• ReactJS - Z

  • TypeScript 기본 실습 (진행중...)
  • 
    

• Vanilla JS and ReactJS 실습

  • VanillaJS로 Grocery Bud 만들기 (예정)
  • ReactJS로 Grocery Bud 만들기 (예정)

  Read More

무엇을 하든 기초가 정말 중요하다. 이전에 한 번 이 트리순회를 공부했을때에는 단순히 코드작성과 단순 이해만 했기 때문에 문제에 제대로 응용이 되지 않았던 것 같다.
그래서 이번에는 한 번 직접 손으로 스택 내부에 스택 프레임이 어떻게 쌓이는지 그려보며 내부의 재귀형태의 함수 호출은 어떻게 이루어지는지 살펴보았다. 또 스택과 함께 트리 구조도 어떻게 가지치기를 하는지 살펴보았다.

나중에 다시 복습을 위해 직접 그려 본 스택의 프레임과 트리구조를 아래에 첨부한다.

재귀함수의 동작을 스택 프레임과 연관지어 이해

아래에 작성한 간단한 재귀함수의 동작방식을 스택 프레임과 연관지어 설명해보려고 한다.
이미 재귀함수는 문제풀이나 기본적인 개념이해는 되었지만, 스택과 연관지어 기본적인 동작방식을 설명해본적은 없기 때문에 이번 포스팅을 계기로 한 번 정리를 해보려고 한다.

Read More

이번 포스팅에서는 자바스크립트를 공부하다가 용어상 혼동되는 부분이 있어 간단하게 정리하고 넘어가고자 한다.
계속 공부를 해나가면서 혹시 용어상 혼동되는 부분이 있으면 이 포스팅 글에 지속적으로 업데이트를 해나가도록 하겠다.

Stack frame vs Execution context

알고리즘 관련 공부를 하다가 함수 실행과 관련된 글을 읽던 중에 스택 프레임(Stack frame)이라는 말이 나왔다. 함수가 실행되면 함수의 매개변수와 지역변수, 복기주소로 구성된 스택 프레임이 스택에 쌓이게 되고, 함수가 최종적으로 실행이 되면 복기주소를 통해서 자기가 호출되었던 주소로 되돌아 간다고 한다.
이전에 자바스크립트에서 스코프에 대해서 공부를 했을때, 실행 컨텍스트에 대해서도 공부를 했었는데 스택 프레임과 같은 개념인 것 같아서 찾아보니 용어만 다를 뿐 같은 것이라는 것을 알게 되었다.

이전에 스코프와 실행 컨텍스트에 대해서 공부하면서 정리했던 포스팅의 링크를 아래에 첨부해둔다.
다시 한 번 반복해서 읽어보자.
https://leehyungi0622.github.io/2021/03/19/202103/210319-javascript-basic_til/

Call stack vs Execution stack

콜 스택(Call stack)과 컨텍스트 스택(Context stack)이 있는데 콜 스택은 자바스크립트 코드가 실행될때 생성된 실행 컨텍스트를 보관하는 LIFO 스택이라는 것은 공부를 통해 알고 있다. 그런데 다른곳에서는 같은 개념의 설명을 컨텍스트 스택이라고 하는 곳도 있었다.
이 역시 스택 프레임과 실행 컨텍스트와 같이 다른 용어지만 같은 것이라고 한다.

Thought of the day

게으름은 즐겁지만 괴로운 상태이다. 우리는 행복해지기 위해 무엇인가 하고 있어야 한다.
(Indolence is a delightful but distressing state; we must be doing something to be happy)
- 마하트마 간디 / Mahatma Gandhi

2021년 04월 22일 오늘은 08시 50분에 공부를 시작했다. 오늘은 알고리즘 문제풀이를 시작으로 타입스크립트의 interface, type alias에 대해서 공부를 할 예정이다.

TO DO LIST

• 알고리즘 관련 책 독서

  • ~ 30P (완료)

    
    

• A → V → R → Z

  
  

• ReactJS - Z

  • TypeScript 기본 실습 (예정)
  • 
    

• Vanilla JS and ReactJS 실습

  • VanillaJS로 Grocery Bud 만들기 (예정)
  • ReactJS로 Grocery Bud 만들기 (예정)

  Read More

암묵적 타입 정의, 명시적 타입 정의

아래와 같이 코드를 작성해주면 암묵적으로 num이라는 변수의 타입은 정의된 값 10에 의해 number 타입으로 타입지정이 된다.

1

let num = 10;

그런데 만약에 값을 정의하지 않고 변수만 선언하는 경우, 이러한 경우에는 타입을 지정해서 해당 변수에 할당될 수 있는 값의 타입을 지정해주는 것이 좋다.

1

let num: number;

간혹 타입을 지정할때 Number, String, Boolean, Object 등으로 작성을 해서 실수하는 경우가 있는데, 앞서 작성한 것들은 모두 자바스크립트에서 객체들이기 때문에 타입은 모두 맨 앞을 소문자로 표기해서 타입지정을 해주도록 하자.

배열과 튜플

• 배열 표기법

  1 2 3

  let arr1: Array<string> = ['1', '2', '3']; let arr2: (string | number | boolean)[] = [true, 2, '3']; let arr3: number[] = [1, 2, 3];

  타입스크립트에서 숫자타입의 배열을 명시적으로 작성할때 Array와 number[] 두 가지 방법으로 작성할 수 있다.
  두 번째 작성한 것과 같이 복합적인 타입 값들로 구성된 배열 타입으로 명시적으로 지정할 수도 있다.

• 엄격한 배열의 사용

  1 2	let arr1: [boolean, number, string] = [true, 2, '3']; // tuple let arr2: [boolean, 1, string] = [true, 1, '3']; // 두번째 인자를 고정된 상수 타입으로 지정할 수도 있다.

  Read More

JavaScript와 TypeScript

Typescript는 JavaScript의 superset이라고 불리며, 자바스크립트의 변수/함수의 매개변수와 리턴값에 명시적으로 타입을 지정한다.

항상 그러하듯이 공식 사이트를 참고하면서 공부하면 좋다.

https://www.typescriptlang.org/

Typescript는 언어이자 라이브러리로, 프로그래밍 언어는 실행기가 필요하다. JavaScript의 실행기는 ‘Browser’와 ‘Node’가 있다. 이 실행기가 프로그래밍 언어를 해석해주는 역할을 해준다. 그렇다면 TypeScript의 실행기는 무엇일까? TypeScript의 실행기는 현재 개발중에 있는 Deno이다. 아직은 안정적인 버전이아니기 때문에 라이브러리가 TypeScript의 실행기이다. 실행기가 라이브러리라서 좋은 점은 빠르게 release할 수 있다는 점이 있지만 단점으로는 여러가지 버그가 존재한다는 것이다.
TypeScript의 라이브러리(실행기)를 설치하기 위해서는 Node를 설치해줘야 되기 때문에 Node에 대해서 어느정도는 이해해야 한다.
이 TypeScript 라이브러리가 TypeScript를 JavaScript로 코드 변환을 해주는데 이는 브라우저는 JavaScript 코드만 이해할 수 있기 때문이다.

Read More

결정 알고리즘은 이분검색을 기반으로 한다.

알고리즘 문제에서 주어진 조건에서의 최대값 혹은 최소값을 구하는 문제 중에 몇 몇 문제는 결정 알고리즘(Decision algorithm)을 활용해서 풀이해야 한다.
결정 알고리즘은 이분 검색을 기반으로 하는 문제로, 전체 데이터를 순회하면 시간 복잡도 O(N)을 갖지만 이분 검색으로 데이터를 검색하면 O(logN)만큼의 시간 복잡도를 갖는다.

예시문제
길이가 N인 숫자 리스트가 있다고 가정했을때, 총 T 개의 그룹으로 리스트를 나눠야 한다.
T개의 그룹으로 리스트를 나눴을때 한 그룹당 최소 얼마의 숫자합이여야 하는지 구하시오.

Read More

오늘부터 여지까지 공부했던 내용들을 토대로 조금씩 프론트엔드 개발 기술면접 대비를 해보려고 한다. 아직 공부한 내용은 많지 않지만, 내가 공부했던 내용들 중에서 좀 더 보충해야 되는 부분이 있다면 내용을 보강해서 진행해보도록 하겠다.
알고 있는 내용이라고 하더라도 막상 누군가로부터 질문을 받게 되면 제대로 대답을 못하게 되는게 일반적이라 평소에 조금씩 꾸준하게 준비해두려고 한다.
면접 예상 질문은 구글링을 한 내용을 참고하였으며, 여지까지 공부했던 내용들과 가장 기본이 되는 내용들을 위주로 질문을 선별해서 작성하였다.

## interview Q1. 호이스팅(Hoisting)에 대해서 설명하세요.

## interview Q2. 이벤트 버블링(Event bubbling)에 대해서 설명하세요.

## interview Q2-1. 이벤트 위임에 대해서 설명하세요.

## interview Q3. document load 이벤트와 document DOMContentLoaded 이벤트의 차이점에 대해서 설명하세요.

## interview Q3-1. 왜 load 이벤트를 사용했나요? 그 이유를 설명하고 이 이벤트를 사용함으로써 생기는 단점에 대해서 설명하세요. 그리고 다른 대안을 알고 있다면 설명을 하고 왜 그 대안을 사용할 건지에 대해서 설명하세요.

## interview Q4. ==와 ===의 차이점에 대해서 설명하세요.

## interview Q5. 100까지 증가하면서 3의 배수에는 fizz를 출력하고, 5의 배수에는 buzz를 출력하고, 3과 5의 배수에는 fizzbuzz를 출력하는 for loop를 손코딩하고 설명하세요.

## interview Q6. 웹 사이트의 전역 스코프를 그대로 두고 건드리지 않는 것이 좋은 이유와 방법에 대해서 설명하세요.

## interview Q7. Promise와 그 Polyfill에 대해서 알고 있는대로 설명하세요.

Read More

Thought of the day

게으름은 즐겁지만 괴로운 상태이다. 우리는 행복해지기 위해 무엇인가 하고 있어야 한다.
(Indolence is a delightful but distressing state; we must be doing something to be happy)
- 마하트마 간디 / Mahatma Gandhi

2021년 04월 20일 오늘은 한시간 정도 운동을 하고 10시 40분에 공부를 시작했다. 오늘은 알고리즘 공부를 시작으로 하루를 시작해보려고 한다.

TO DO LIST

• A → V → R → Z

  
  

• ReactJS - Z

  • TypeScript 기본 실습 210420(완료)

  • 
    

• Vanilla JS and ReactJS 실습

  • VanillaJS로 Grocery Bud 만들기 (예정)
  • ReactJS로 Grocery Bud 만들기 (예정)
  
  

• 기본 알고리즘 문제풀기

  • 기본 알고리즘 문제 10문제 풀이 (3/10 완료)

    
    

• 블로그 포스팅

  • TypeScript TIL 작성하기 - 210420 (예정)
  • Front-end Interview 질문 대비 블로그 포스팅하기 (작성중...)
  • 결정 알고리즘(Decision algorithm) 관련 글 포스팅하기 (완료)
  • Vanilla JavaScript Traversing DOM & using Selectors inside of the element에 대해서 포스팅하기 (예정)
  • React TIL 작성 (작성중...)
  • React 상태관리에 대해서 블로그 포스팅하기 (작성중...)
  • React project의 개괄적인 내용에 대해서 블로그 포스팅하기 (작성중...)
  • Vanilla JavaScript TDD Practice 관련 블로그 포스팅하기 (작성중...)
  • 동기/비동기에 대해서 블로그 포스팅하기 (예정)
  
  

• Slack clone

  • Repository 생성하기 (예정)

    
    

• TDD Practice with VanillaJS

  • ~#Issue ~ (예정)
  
  

• TDD Practice with NodeJS

  • #Issue 10 ~ (진행중...)

  Read More