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

클래스 컴포넌트에서 Hooks + 함수형 컴포넌트

리액트가 만들어진 배경

• JavaScript를 사용한 DOM 조작

  만약에 어플리케이션의 규모가 커지게 되면, 상태와 이벤트 관리를 위한 코드가 복잡해진다. 따라서 Ember, Backbone, AngularJS라는 프레임워크가 등장을 해서, 자바 스크립트의 특정 값이 바뀌면 특정 DOM의 속성도 바뀌도록 규칙을 가지고 설계되었다.
  하지만 React의 경우에는 특정 값의 상태가 바뀌었을때 기존의 View를 날려버리고 다시 화면에 보여지는 View를 생성하는 형태로 동작하도록 구상되어 만들어졌다. 이런 방식으로 동작을 하게 되면, 특정 규칙에 의해 DOM속성을 조작하지 않아도 되기 때문에 개발면에서는 편하지만, 작은 어플리케이션의 경우에는 괜찮지만, 어느정도 규모가 있는 어플리케이션이라면 동적인 화면 표현에 있어, 성능상 문제가 된다.
  하지만 React는 Virtual DOM이라는 것을 사용했기 때문에 성능을 지켜가면서 가능하도록 설계되었다.
  Virtual DOM이란 말 그대로 가상 돔으로 브라우저에서 실제로 보여지는 DOM이 아니라 그냥 메모리에 가상으로 존재하는 DOM으로써 JavaScript 객체이기 때문에 작동 성능이 실제 브라우저에서 DOM을 보여주는 것보다 속도가 훨씬 빠르다.

  React에서는 상태가 업데이트되면, 업데이트가 필요한 UI를 메모리에 있는 Virtual DOM에 렌더링을 하게 된다.
  그 다음으로 React 팀이 개발한 비교 알고리즘을 통해서 실제 브라우저 상에서 보여지는 DOM과 메모리에 존재하는 Virtual DOM을 비교하고 차이점을 감지하고 나서 실제 DOM에 이를 패치(필요한 변화만 반영)를 해주게 된다.

Read More

Thought of the day

가장 큰 영광은 한 번도 실패하지 않음이 아니라 실패할 때마다 다시 일어서는 데에 있다.
(Our greatest glory is not in never falling. but in rising every time we fall.)
공자 / Confucius

TO DO LIST

• Python 과제

  • Blackjack game class 설계한 내용 코드로 구현하기 (완료)
  • Procedural Programming으로 Blackjack game 만들기 (조건은 slack 확인)(예정)
  • HackerRank 3문제풀기 (예정)
    • https://www.hackerrank.com/challenges/30-inheritance/problem
    • https://www.hackerrank.com/challenges/30-abstract-classes/problem
    • https://www.hackerrank.com/challenges/class-1-dealing-with-complex-numbers/problem

• Side Project 시작

  • Side Project Diary 8일차 작성 (예정)

• 개발관련 Blog 포스팅하기

  • React router unit test과 관련된 내용 포스팅 (완료)
  • Bundle size와 Lazy loading과 관련된 내용 포스팅 (완료)

  Read More

React Router Test

이번 포스팅에서는 React router testing에 대해서 정리해보려고 한다.
React router test파일은 <App/> component에 대한 test file을 작성한다.

• 우선 기본적으로 작성할 테스트 케이스의 내용을 정리해보자.

  • (Test case 1) 처음 <App/> component가 rendering될때 root path와 matching되는 Home component가 rendering되는가?
  • (Test case 2) <nav> 태그로 만든 각 menu를 클릭했을때 각 각의 matching되는 component로 rendering이 되는가?
  • (Test case 3) route에 해당하는 path가 없는 경우에는 404 Not Found component가 rendering되는가?
  • (Test case 4) 페이지가 loading되는 동안 <Loading /> component가 페이지가 표시되는가?

  Test case 4의 Loading component가 DOM에 그려지는 것을 확인하기 위해서 component를 Lazy하게 가져와야 한다.

Read More

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

• ReactJS Router

웹페이지의 링크를 클릭하면, 다른 화면으로의 전이가 일어나는데, 이러한 화면 전이와 관련된 routing은 React의 react-router-dom이라는 Routing package를 사용해서 정의한다.

• React Router Installation

  react-router-dom은 navigation을 만들어 주기 위한 package이다.

  1	$ yarn add react-router-dom

  Read More

Side Project Diary 6/7일차

오늘은 금요일날 강사님으로부터 개인 프로젝트 진행과 관련하여 advice 받은 내용들을 정리하는 것을 시작으로 Side Project Diary의 내용을 시작하려고 한다.
우선 첫번째, Git branch 관리의 경우, 많은 기업들이 git flow model을 사용하고 있으므로, 복잡하더라도 git flow model을 사용해서 프로젝트를 진행하는 것이 좋겠다고 하셨다. 그래서 개인적인 판단에 프로젝트가 simple하다면, github flow를, 비교적 프로젝트가 어느정도의 복잡성을 가진다면, git flow model을 사용할 예정이다. 적절히 두 가지 git branch model을 사용해서 프로젝트를 진행하기로 결정했다.
두번째, 각 프로젝트별로 다양한 프레임워크를 사용해서 개발을 하는 것이 좋은지에 대해서 여쭤보았는데, 이 부분에 대해서는 최대한 해당 프레임워크의 특징을 잘 살려서 개발을 하는 것이 중요하다고 하셨다. 그리고 단순히 개발에만 그치는 것이 아니라 각 각의 프레임워크의 장단점들을 서로 비교해서 설명할 수 있어야 한다고 하셨다. 그래서 이 부분에 대해서는 각 프로젝트의 README 파일의 Project reflection 부분에 면접 대비해서 내용을 정리해보기로 했다.

Read More

Thought of the day

모든 천재들에게는 약간의 미친 구석이 있다.
(There is no great genius without some touch of madness.)
세네카 / Seneca

TO DO LIST

• Side Project 시작

  • Side Project Diary 6/7일차 작성 (완료)

• Blog내용 이전하기

  • React router관련 내용 포스팅 (완료)

• Python 과제

  • Blackjack game class 설계한 내용 코드로 구현하기 (예정)
  • Procedural Programming으로 Blackjack game 만들기 (조건은 slack 확인)(예정)
  • HackerRank 3문제풀기 (예정)
    • https://www.hackerrank.com/challenges/30-inheritance/problem
    • https://www.hackerrank.com/challenges/30-abstract-classes/problem
    • https://www.hackerrank.com/challenges/class-1-dealing-with-complex-numbers/problem

  Read More

Blackjack Class Design

< Blackjack class design Handwriting >

Read More

Thought of the day

좋아하는 직업을 택하면 평생 하루도 일하지 않아도 될 것이니라.
(Choose a job you love, and you will never have to work a day in your life.)
공자 / Confucius

DAILY RECORD

오늘은 7시 50분에 하루를 시작했다.
나태해지지 않기 위해 꾸준히 하는 습관을 만들어가자.

TO DO LIST

• 210210분 Python TIL작성

  • Python TIL 블로그 포스팅 (완료)

• Python 과제

  • Blackjack game class 설계 (완료)

  • HackerRank 3문제풀기 (예정)

    Read More

Hexo 블로그를 운영하면서 업로드한 이미지들 때문에 웹 페이지의 로딩시간이 이전보다 많이 느려졌다.
그래서 업로드한 이미지 파일들을 모두 compression해서 파일크기를 1/4 사이즈로 만든다음에 업로드하였다. 그런데도 웹 페이지 로딩시간이 생각보다 오래 걸려서 한 번 Googling을 해보았다.

그래서 발견한 것이 Hexo Image Optimization이다.

Hexo 내에 존재하는 모든 image파일 확장자를 가진 파일들을 최적화 시켜주고, 별도의 설정으로 post의 thumbnail 이미지도 최적화 시켜준다고 한다.

그래서 친절하게 설명되어 있는 설명을 보며, 최적화 설정을 모두 마쳤다.

Read More

오늘 배운 내용은 전반적으로 객체지향 프로그래밍 언어로써 Python을 잘 활용하기 위해 중요한 내용이기 때문에 포스팅을 두 개로 나눠서 작성해보았다.

오늘 배운내용

Class, instance, static method

• Class method: @classmethod decorator를 사용하며, cls를 인자로 사용

  • cls 인자를 받는다.
  • class variable과 연관된 일을 할때 사용이 된다.

• Instance method: self를 인자로 사용

  -객체의 고유 속성값을 사용한다.

• Static method: 아무 인자 없이 사용

  • 일반 함수와 같은 역할을 한다.
  • class와 관련있는 함수로써, class내부에서 정의하고자 할 때 사용된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

class Wallet:
  def __init__(self, account):
      self.account = account
  balance = 0
  name = 'Your wallet'

  @classmethod
  def set_default(cls, amount):
      while amount < 1:
          print("Err: You should set default value over 1. Try again!")
          amount = int(input("Set default value: "))
      cls.balance = amount
      print('Set default balance to {}'.format(amount))
  #instance method
  def add_to_account(self, amount):
      self.account += amount
      print('Your total balance is {}'.format(self.account + Wallet.balance))

  @staticmethod
  def see_static_name():
      print(Wallet.name)

  def get_class_name(cls):
      print(cls.name)
class MyWallet(Wallet):
  name = 'My wallet'

Read More