OWEN

이번 포스팅에서는 리액트에서 코드 스플리팅이 무엇이고 어떻게 하는지에 대한 방법을 간단하게 설명해 보려고 한다. 우리가 리액트 프로젝트를 완성한 후 서비스를 사용자에게 전달하기 위해서는 빌드를 통해서 배포해야 한다. 이 과정에서 파일 크기를 가능하면 최소화 하는 것이 바람직한데, 그 이유는 이 파일 크기가 성능을 결정하고 결과적으로 사용자 경험에까지 영향을 미치기 때문이다. 또한 브라우저에서 JSX나 최신 자바스크립트 문법 등이 문제없이 잘 실행될 수 있도록 트랜스파일링 하는 작업도 해 주어야 한다. 일반적으로 이러한 작업은 웹팩(webpack)에서 담당하며, 웹팩을 따로 설정해 주지 않으면 프로젝트의 모든 자바스크립트 파일은 하나의 파일로 합쳐지고, CSS 역시 하나의 파일로 합쳐지게 된다. 하나의 파..

Frenchpod 101 레벨 1 레슨 19~23까지의 공부한 내용을 정리해 보았다. 어휘 savoir : to know Nous ne saurons probablement jamais l'origine de cette habitude. : We will probably never know the origins of this habit. en retard : late Il est toujours en retard aux cours. : He is always late for class. vite : quickly, fast Il parle très vite. : He speaks very quickly. cher : expensive C'est cher de vivre à Tokyo. : It is ex..

이번 포스팅에서는 캐스팅에 대한 내용을 정리해 보려고 한다. 캐스팅에는 암시적 캐스팅과 명시적 캐스팅이 있다. 암시적(Implicit) 캐스팅은 컴파일러가 형을 변환해 주는 것을 말한다. 단, 형 변환이 허용이 되고 프로그래머가 명시적으로 형 변환을 안 할 경우에 해당된다. int number1 = 3; long number2 = number1; // 암시적 캐스팅 명시적(Explicit) 캐스팅은 프로그래머가 형 변환을 위한 코드를 직접 작성하는 것을 의미한다. C++의 캐스팅은 다음과 같은 것들이 있다. 기존의 C 스타일 캐스팅은 아래의 4가지 캐스팅 중 하나를 했었고 컴파일러가 명확하게 잡지 못한다는 문제가 있어서 아래처럼 세분화 하게 되었다. static_cast const_cast dynamic..

Next.js는 React에서 기존에 CSR(Client Side Rendering)의 특징에 더하여 SSR(Servers Side Rendering)을 혼합하여 운영환경에서 최적의 퍼포먼스를 낼 수 있게 도와주는 프레임워크이다. 2020년 11월 현재 버전 10.0.1이 나와있으며 다음과 같은 기능들을 지원한다. 페이지 기반 라우팅 (동적 라우팅) 데이터 패칭 빠른 성능을 위한 코드 스플리팅 CSS in JS 이미지 최적화 빠른 컴포넌트 재활성화 정적 파일 처리 타입스크립트 환경 변수 브라우저 지원 각각에 대한 자세한 사항들은 이후에 하나씩 알아보고자 한다. Next.js는 SPA에서 CSR이 가질 수 밖에 없는 한계들을 보완해 주는 도구이다. SSR과 CSR에 대한 포스팅 참고 CSR은 초기 로딩 속..

지난 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번 문제만 풀어서 이에 대한 간단한 ..