전체 글

안녕하세요. 사진과 철학에 관심이 많은 웹 프론트엔드 개발자 오원종입니다. 시간이 지나도 꾸준히 읽힐 수 있는 글을 쓰고 싶습니다. 재미있는 일만 하면서 살고 있는 사람입니다.
지난 8월 들었었던 이웅재님의 우아한 타입스크립트 내용을 정리해서 블로그 포스팅 해 보려고 한다. 1/2부로 나누어서 세미나를 진행하였고, 포스팅도 2번에 나누어서 할 생각이다. 많은 사람들이 타입스크립트를 쓰면 버그도 사라지고, 테스트 코드를 작성하지 않아도 된다고 착각하는 경우가 있다. 이는 분명히 잘못된 생각이며, 타입스크립트를 가지고 타이핑을 잘 하면 우리가 가질 수 있는 이점은 런타임 전에 오류를 미리 파악할 수 있다는 점이다. 작성자와 사용자 타입스크립트의 타입 시스템은 다음과 같은 특징을 가지고 있다. 타입을 명시적으로 지정할 수 있음 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 우리는 함수를 가운데에 매개로 해서 구현자와 사용자를 연결한다. 때로은 이 둘..
본 포스팅에서는 RxJS를 통해 반응형 프로그래밍의 원리에 대해서 조금 더 자세하게 알아보는 시간을 가지려고 한다. 나의 이전 여러 포스팅에서 객체지향 방식에 대해서 설명을 했었다. 객체지향 방식에서는 클래스가 주요 작업 단위가 된다. 이러한 클래스를 얻을 때 까지 컴포넌트는 세분화가 되며 클래스의 상태를 조작하면 어플리케이션의 로직이 개선된다. [C++] OOP 1 [C++] OOP 2 [C++] OOP 3 하지만 반응형 프로그래밍은 조금 다르다. 기본적으로 반응형 프로그래밍에서 기본 작업 단위는 스트림(stream)이다. 반응형 프로그래밍을 하기 위해서는 스트림 관점에서 생각하고 데이터를 유지하는 대신 원하는 상태에 도달할 때까지 데이터를 흐르게 하고 그 과정에서 변환을 적용하도록 설계해야 한다. 클..
이번 포스팅에서는 OOP에 대한 내용을 마지막으로 정리해 보고자 한다. 상속 상속이란 다른 클래스의 특성을 내려 받는 것을 의미한다. 부모 클래스와 자식 클래스로 이루어지며 자식 클래스는 부모 클래스의 멤버변수와 멤버 메서드, 소멸자를 가진다. 또한 자식 클래스는 멤버 변수 및 메서드를 추가할 수 있다. // Animal.h class Animal { public: Animal(int age); private: int mAge; }; // Cat.h class Cat : public Animal { public: Cat(int age, const char* name); private: char* mName; }; // Cat.cpp Cat::Cat(int age, const char* name) : An..
지금까지 백준만 풀다가 올해 남은 기간동안에는 구글 킥스타트 문제들을 좀 풀어보기로 했다. 구글 킥스타트는 구글에서 매년 개최하는 알고리즘 대회이다. 전 세계의 수만명이 참가하여 코딩 실력을 겨룬다. 1년에 여러 차례 대회가 열리는데(2020년 기준 한 달에 한 번꼴) 매번 대회가 끝나면 등수가 공개되어서, 객관적인 나의 수준도 판단할 수 있다. 매년 조금씩 바뀌지만 올해는 각 라운드당 3시간동안 네 문제를 푸는 형식으로 진행이 되고 있다. 나는 올해 중반부터 시작했고, 처음이다보니 아직 문제를 막 잘 풀지는 못했다. 그래서 2020년에 출제된 기출문제를 하나씩 풀어보면서 연습하고 그 내용을 블로그에 정리해 보려고 한다. 총 4문제 중에 4번 문제는 못 풀었고, 1~3번 문제만 풀어서 이에 대한 간단한 ..
이번 포스팅에서는 리액트의 Context API의 개념과 Use Cases에 대해서 정리해 본다. Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 예를 들면 프로젝트 내의 환경 설정, 사용자 정보와 같은 것들이 있을 수가 있다. 과거에는 이러한 데이터를 최상위 컴포넌트의 state에 담아서 props로 전달했었다. 하지만 이렇게 하는 경우 컴포넌트의 깊이가 깊어질 수록 거쳐야 하는 컴포넌트가 많아서 번거로움이 있었다. 이를 해결하기 위해서 Redux나 MobX와 같은 별도의 라이브러리를 사용하기도 하지만, 별도의 라이브러리가 없어도 Context API를 통해 전역 상태를 관리할 수가 있다. 지금부터 리액트 공식 문서에서 제공하는 Context API를 하..
링크드인 러닝 네트워크 기초 강의를 듣고 공부한 내용을 정리해 보려고 한다. 토폴로지 (Topology) 토폴로지는 노드들과 연결된 회선들을 포함한 네트워크의 구성을 나타내는 개념이다. 크게 물리적 토폴로지와 논리적 토폴로지로 구분한다. 물리적 토폴로지(Physical Topology) : 노드, 링크와 같은 네트워크 구성 요소들에 의해 결정된다. 논리적 토폴로지(Logical Topology) : 노드 사이의 데이터 흐름에 의해 결정된다. 토폴로지는 그래프 이론에 따라 다음과 같은 종류들로 나누어 질 수 있다. 메시 토폴로지 (Mesh Topology) 메시 토폴로지는 망이나 그물 형태의 토폴로지를 의미한다. 완전 연결형(Full Mesh)과 부분 연결형(Partial Mesh)으로 나뉜다. 완전 연결..
개인적인 목적으로 RxJS를 공부하기 시작했다. 공부한 내용들을 여기에서 정리하고 공유하고자 한다. 동기 연산 vs 비동기 연산 동기 코드와 비동기 코드의 차이는 지연시간(latency)이 있는지 없는지의 차이가 가장 큰 차이점이 아닐까 싶다. 일반적으로 비동기적인 코드보다 동기적인 코드가 이해하기가 더 수월하다. 하지만 우리가 개발하는 어플리케이션에서는 메시지를 보내고 응답이 올 때 까지 시간이 걸리고 이 시간들이 쌓이는 동안 아무것도 하지 않으면 어플리케이션이 정상적으로 돌아가지 못하는 수준까지 가는 경우도 있다. 기존의 이러한 방식에서 벗어나 복잡성이 증가한 어플리케이션에서 유휴 상태가 없이 사용자의 시간을 아낄 수 있게 하기 위해서는 비동기적인 처리가 불가피하다. 동기 코드를 구현하는 가장 쉽고 ..
Frenchpod 101 레벨 1 레슨 15~18까지의 공부한 내용을 정리해 보았다. 어휘 un immeuble : building Cet immeuble est ancien. : This building is old. un bandit : a gangster Jesse James est un bandit. : Jesse James is a gangster. loin : far Je ne peux pas le voir, c'est trop loin. : I can't see it, it's too far away. un abonnement : a subscription, a pass J'ai un abonnement au New York Times. : I have a subscription to the..
DevOwen
오웬의 개발 이야기