Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
- 앤드류 매튜스

TO DO LIST

• 독서

  • 17일 분 OReilly TypeScript 독서 33-53P

    • OReilly TypeScript 예제 코드실습 (예정)
    • 객체 리터럴 부분은 저번 포스팅부분에 내용추가하기 (예정)
      → https://leehyungi0622.github.io/2021/02/16/202102/210216-Typescript/
    • 배운내용 블로그에 포스팅하기 (예정)
    • 실습한 내용 GitHub에서 관리하기 (예정)

  Read More

이 포스팅은 O’Reilly TypeScript책을 통해 공부한 내용과 실습한 내용을 기반으로 작성하였습니다.

오늘 공부한 내용

타입별칭

일반적으로 변수를 선언하듯이 type 키워드로 type을 선언해서 사용할 수 있다.

1
2
3
4
5

type Age = number
type persono = {
  name: string
  age: Age
}

1
2
3
4
5
6
7
8
9
10

type Person = {
  name: string
  age: number
}
type Age = number
let age: Age = 55
let driver: Person = {
  name: 'James May',
  age: age
}

타입의 union과 intersection type

Read More

Thought of the day

실패한 고통보다 최선을 다하지 못했음을 깨닫는 것이 몇배 더 고통스럽다.
앤드류 매튜스

TO DO LIST

• Python 메인강의

  • 어제 배운내용에 대해서 Python TIL 포스팅하기 (예정)

  • 과제

    • Wikipedia의 한국 COVID-19 정보 페이지에서 필요한 정보를 Scrapping하기 (완료)

    • COVID-19관련 Web API의 JSON형식 데이터를 읽고 가공하기 (완료)
      → https://github.com/LeeHyungi0622/simple-covid19-flask-app

    • TIL:Flask 카테고리 따로 만들어서 VSCODE 환경에서의 Flask 개발환경 구축과 Flask Auto-Reload하는 방법에 대해서 포스팅하기 (예정)

      
      

• TDD 방식에 익숙해지기 위한 간단한 코드작성 연습하기

  • 배열이 주어졌을 때 최댓값, 최솟값, 평균, 중앙값, 최빈값을 구하는 함수들을 구현 (나머지 50% 예정)

  Read More

이번 포스팅에서는 파이썬 가상개발환경을 구성하는데 사용되는 pyenv, virtualenv, autoenv, pip, poetry의 사용법에 대해서 정리를 해보겠다.

우선 가상개발환경을 구축해서 개발환경을 분리하는 이유에 대해서 알아보자.

왜 개발환경을 가상개발환경으로써 분리해서 관리해야 하는가?

파이썬에는 다양한 버전이 존재하고, 각 각의 파이썬 어플리케이션에서 사용되는 파이썬의 버전 또한 다양하기 때문에 가상개발환경을 구축해서 베이스가 되는 파이썬의 버전을 다르게 설정해서 관리해야 한다.
그리고 파이썬은 많은 패키지들이 배포되고 있기 때문에 이러한 패키지들을 한 대의 컴퓨터에서 돌릴경우 Python runtime의 version과 Python libray가 서로 충돌을 하는 문제가 발생한다.
이러한 문제는 기본적으로 한 대의 컴퓨터에 런타임 및 라이브러리가 전역적으로 설치가 되어 사용이 되기때문에 발생한다.

그럼 해결책은?

Read More

네트워크

Web scraping 실습하기

• 환경설정

  1. requests, beautifulsoup4, lxml, jupyter 설치하기

  1 2 3 4

  $ poetry add requests $ poetry add beautifulsoup4 $ poetry add lxml $ poetry add —dev jupiter

  2. jupyter notebook 환경에서 requests를 사용해서 Web Scrapping하기

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

  import requests url = 'https://api.kurly.com/v2/categories?ver=1' response = requests.get(url) response # response data를 json 형태로 변환하기 response.json() """ {'data': {'categories': [{'no': '907', 'name': '채소', 'show_all_flag': True, 'pc_icon_url': 'https://img-cf.kurly.com/shop/data/category/icon_veggies_inactive_pc@2x.1586324570.png', 'icon_url': 'https://img-cf.kurly.com/shop/data/category/icon_veggies_inactive@3x.1586324413.png', 'pc_icon_active_url': 'https://img-cf.kurly.com/shop/data/ ...(생략)... """

  Read More

Thought of the day

실수 한 적이 없는 사람은 결코 어떠한 새로운 시도도 하지 않는다.
(A person who never made a mistake never tried anything new)
알버트 아인슈타인 / Albert Einstein

TO DO LIST

• 블로그 포스팅하기

  • TDD(Test-Driven Development)에 대해서 글 포스팅 (완료)
  • Jest의 test, it, describe의 사용에 대해서 글 포스팅 (완료)
  • virtualenv사용해서 환경구성하는 부분에 대해서 글 포스팅 (완료)
  • Server side rendering, Client side rendering에 대해서 글 포스팅(예정)
  
  

  Read More

본 포스팅 내용은 과거에 개인적으로 공부할때 정리했던 ReactJS의 내용을 복습의 목적으로 다시 정리하는 포스팅입니다.

React Hooks - useRef함수의 사용

• useRef로 특정 DOM 선택

  VanillaJS에서는 getElementBy나 querySelector를 사용해서 특정 DOM 객체를 조작한다. React에서도 특정 DOM 객체를 조작해야되는 경우가 있는데, element의 크기나 위치, Scroller bar의 위치, focus 설정하는 경우 등이 있다. 추가적으로 video.js, JWS HTML5 video관련 라이브러리의 사용이나 D3, chart.js와 같은 그래프 관련 라이브러리를 사용할때에도 적용할 특정 DOM을 선택해서 적용시켜야 하는 상황이 생긴다.
  React에서는 React Hook의 useRef라는 함수를 사용해서 변수를 생성해주고, 조작하고자 하는 특정 태그의 ref 속성값으로 생성한 useRef 변수를 넣어서 생성한 useRef 식별자를 통해 특정 DOM 객체에 접근한다.
  그외에 class형 컴포넌트에서는 React.createRef()를 사용해서 특정 DOM 객체를 선택하고, callback 함수를 사용해서도 가능하다.

  input 입력 태그의 값을 초기화 시켜주고, cursor의 focus를 특정 input입력태그로 이동을 시킨다.

  Read More

이번 포스팅에서는 Jest에서 테스트 코드를 작성할때 사용하는 test와 it 키워드의 사용과 여러 개의 테스트 케이스를 묶을때 사용하는 describe 키워드에 대해서 정리를 해보겠다.

test와 it 키워드의 사용

이전 포스팅에서 test라는 키워드를 사용해서 테스트 케이스를 작성해보았다. 이 키워드를 대체해서 it이라는 키워드도 사용될 수 있는데 작동 방식은 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// test keyword를 사용한 테스트 코드 작성
const { test, expect } = require('@jest/globals');
const sum = require('../sum');

// 작성한 테스트코드가 무엇을 하는지에 대해서 첫번째 parameter로 작성해준다.
test('properly adds two numbers', () => {
  // expected result
  expect(sum(1, 2)).toBe(3);
});

// it keyword를 사용한 테스트 코드 작성
it('properly adds two numbers', () => {
  expect(sum(1, 2)).toBe(3);
});

Read More

TDD?

이번 포스팅에서는 TDD에 대해서 정리를 해보려고 한다.

우선 TDD란 Test Driven Development의 약어로 테스트 주도 개발을 의미한다.
즉, 테스트가 개발을 이끌어 나가는 형태의 개발론이다.
이 TDD방식의 개발은 선 Test code 작성, 후 구현을 의미하며, 총 3가지 (실패, 성공, 리팩토링)의 절차로 구성된다. 구체적인 내용에 대해서는 테스트 자동화(Automated Testing)와 테스트의 종류에 관련된 내용을 우선 정리하고 정리해보도록 하겠다.
우선 개발에서 테스트의 정의는 내가 작성한 코드가 잘 작동한다는 것을 검증하는 단계이다. 가장 기본적으로 만들어진 어플리케이션을 테스트하는 방법은 직접 마우스와 키보드를 사용해서 의도대로 잘 동작하는지 확인할 수 있다.
하지만 이렇게 모든 기능을 사람 손으로 하나하나 확인하는 것은 여간 번거로운 일이 아닐 수 없다.

그래서 테스트 코드라는 것을 작성해서 테스트를 자동화시켜준다. 테스트 자동화란 사람이 직접 어플리케이션의 동작을 확인하는 것이 아닌, 작성한 테스트 코드를 통해서 테스트 시스템이 자동으로 확인을 해주는 것을 말한다.

테스트 자동화(Automated Testing)

• 테스트 자동화의 장점

  • 여러 사람들과 협업하여 작업을할때 각자가 작성한 코드에 문제가 있는지 빠르게 검사를 할 수 있다.
  • 새로운 기능을 추가하는 작업의 경우, 기존의 기능들을 망가뜨리는 것을 사전에 방지할 수 있다.
  • 테스트 코드를 적는다는 것은 개발할때 실제 발생할 수 있는 상황에 대하여 미리 정리해놓는 일련의 작업이기 때문에 미리 정리해놓고 그에 상응하는 코드를 작성하게 되면 필요한 사항들을 까먹지 않고 넣어줄 수 있다.
  • Code Refactoring시에도 좋다. 일부 기능에 대한 코드를 리팩토링할때 기존에 이 기능에 대한 테스트 코드가 존재한다면 리팩토링한 후에도 동일한 동작을 하는지 검사하면 되기 때문에 검증하기가 쉽다.

  Read More

백준 저지 2747번 피보나치 수 문제 Pseudo code + Python code

이 문제는 피보나치 수를 구하는 문제로, for-loop와 memoization, recursive 개념을 활용해서 풀이를 해보았다.
피보나치 수열의 값은 이미 계산된 값들의 누적 합으로 구성이 된다. 따라서 이미 계산된 부분은 별도의 변수에 값을 저장했다가 필요할때 참조하게 되면 빠르게 원하는 값을 도출해낼 수 있다.(fibonacci-memoization)

손코딩으로 작성한 코드 중 for-loop로 풀이한 부분의 초기리스트로 [1,1]이 아닌 [0,1]로 초기화를 시켜줘야 한다.(수정)

Read More