Posts

Codility

[분석] Codility - PermCheck - Javascript

1 minute read

Codility 연습문제 > PermCheck > Javascript 주어진 배열이 순열인지 확인하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

[분석] Codility - MissingInteger - Javascript

2 minute read

Codility 연습문제 > MissingInteger > Javascript 주어진 시퀀스에서 발생하지 않은 가장 작은 양의 정수를 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

[분석] Codility - MaxCounters - Javascript

2 minute read

Codility 연습문제 > MaxCounters > Javascript 모든 교대 작업을 완료 후 카운터를 1씩 늘리며 그중 가장 최대 값을 구하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

[분석] Codility - FrogRiverOne - Javascript

1 minute read

Codility 연습문제 > FrogRiverOne > Javascript 개구리가 강 반대편으로 점프할 수 있는 가장 빠른 시간을 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

[분석] Codility - TapeEquilibrium - Javascript

2 minute read

Codility 연습문제 > TapeEquilibrium > Javascript | (A [0] + … + A [P-1])-(A [P] + … + A [N-1]) | 두 그룹의 절대값중 최소값을 구하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의...

[분석] Codility - PermMissingElem - Javascript

1 minute read

Codility 연습문제 > PermMissingElem > Javascript 주어진 순열에서 누락된 요소를 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

[분석] Codility - FrogJmp - Javascript

1 minute read

Codility 연습문제 > FrogJmp > Javascript 위치 X에서 Y 로의 최소 점프 수를 계산합니다. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

[분석] Codility - OddOccurrencesInArray - Javascript

1 minute read

Codility 연습문제 > OddOccurrencesInArray > Javascript 홀수 요소에서 발생하는 값을 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

[분석] Codility - CyclicRotation - Javascript

1 minute read

Codility 연습문제 > CyclicRotation > Javascript 주어진 단계 수만큼 배열을 오른쪽으로 회전하며 K번째 회전된 배열을 반환하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하...

[분석] Codility - BinaryGap - Javascript

1 minute read

Codility 연습문제 > BinaryGap > Javascript 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.

Back to top ↑

Webpack

Webpack - 웹팩 Module Resolution (8)

1 minute read

지난 포스트에 이어서 웹팩의 Module Resolution에 대해서 알아보도록 하겠습니다. Module Resolution 리졸버(resolver)는 절대 경로로 모듈을 찾는데 도움을 주는 라이브러리입니다. 모듈은 다음과 같이 다른 모듈의 종속성으로 필요할 수 있습니다.

Webpack - 웹팩 Modules (7)

1 minute read

지난 포스트에 이어서 웹팩의 모듈에 대해서 알아보도록 하겠습니다. Modules 모듈형 프로그램밍에서 개발자는 프로그램을 모듈이라는 기능의 개별 청크로 나눕니다.

Webpack - 웹팩 Configuration (6)

1 minute read

지난 포스트에 이어서 웹팩의 구성 설정에 대해서 알아보도록 하겠습니다. Configuration 웹팩 구성이 똑같이 보이는 경우가 거의 없다는 사실을 눈치채셨을 것입니다. 이는 웹팩의 구성파일이 웹팩 구성을 내보내는 Javascript 파일이기 때문입니다. 이 구성은 정의된 ...

Webpack - 웹팩 Plugins (5)

1 minute read

지난 포스트에 이어서 웹팩의 구성 요소인 Plugin에 대해서 알아보도록 하겠습니다. Plugin 플러그인은 웹팩의 중추입니다.웹팩 자체는 웹팩 구성에서 사용하는 것과 동일한 플러그인 시스템에 구축됩니다. 또한 로더가 할 수 없는 다른 작업을 수행할 목적으로도 사용됩니다. ...

Webpack - 웹팩 Loaders (4)

2 minute read

지난 포스트에 이어서 웹팩의 구성 요소인 Loaders에 대해서 알아보도록 하겠습니다. Loaders 로더는 모듈의 소스 코드에 적용되는 변환입니다. 파일을 가져오거나, load 할 때 파일을 사전 처리할 수 있습니다. 따라서 로더는 다른 빌드 도구의 tasks (ex: gu...

Webpack - 웹팩 Output (3)

less than 1 minute read

지난 포스트에 이어서 웹팩의 구성 요소인 Output에 대해서 알아보도록 하겠습니다. Output 출력 구성 옵션을 구성하면 컴파일된 파일을 디스크에 쓰는 방법을 웹팩에게 알려줍니다. 여러 진입점이 있을 수 있지만, 출력 구성은 하나만 지정됩니다. 사용방법 웹팩 구성에서 출...

Webpack - 웹팩 Entry (2)

2 minute read

지난 포스트에 이어서 웹팩의 구성 요소인 Entry에 대해서 알아보도록 하겠습니다.

Back to top ↑

Frontend 지식

Javascript 모듈 패턴과 Closure(클로저)

1 minute read

Javascript 모듈 패턴은 Javascript 의 코드 관리 기법중 하나로 객체 핸들링을 위한 방법론 중 하나입니다. 보통 객체의 유효범위(Scope)를 주어 Private, Public 을 구분하여 캡슐화를 할 때 사용하는 방법으로 다시말해 네임 스페이스 패턴에 렉시컬 스코...

일급 객체 그리고 익명 함수? 람다?

1 minute read

여러분들은 익명 함수란 용어는 많이 들어봤을 것입니다. 프로그래밍 언어에서 언급되는 일급 객체(First-class citizen)에 익명 함수가 포함되어 있습니다. 즉 익명 함수가 일급 개체인 샘이죠. 그렇다면 일급 객체는 무엇이고 익명 함수는 뭘까요? 어떤 관계가 있고 어떻게...

Progressive Rendering (점진적 렌더링) 이란?

1 minute read

점진적 렌더링이란? Progressive Rendering (이하 PSSR) 은 Server에서 중요한 콘텐츠를 렌더링한 후, 중요하지 않은 콘텐츠를 기다리지 않고 Client로 Streaming 하고, 이후에 Server에서 나머지 중요하지 않은 콘텐츠들이 렌더링되면 다시 Cli...

Mono Repo 개념 정리

less than 1 minute read

최근 Mono Repo의 개념을 바탕으로 모듈 프로젝트를 진행하게 되어 이번 포스트에서는 Mono Repo에 대해 알아보는 시간을 갖을까 합니다.

Isomorphic, Universal, SEO 개념

4 minute read

이번 포스트에서는 간단하게 Isomorphic, Universal 그리고 SEO에 대한 개념정리를 해볼까 합니다. Isomorphic (이서모픽) 개념

Back to top ↑

Rollup

Rollup - alias 플러그인 (4)

2 minute read

이번에는 Rollup 의 alias 플러그인에 대해서 알아보도록 하겠습니다. @rollup/plugin-alias @rollup/plugin-alias 은 Rollup 패키지 번들링시 별칭을 정의하기위한 plugin 입니다.

Rollup - node resolve 플러그인 (3)

3 minute read

이번에는 Rollup의 @rollup/plugin-node-resolve 플러그인의 사용방법에 대해 자세히 알아보겠습니다. @rollup/plugin-node-resolve

Rollup - 플러그인 소개 및 설치 (2)

3 minute read

이번에는 전에 소개했던 Rollup의 소개 및 설치에 이어서 Rollup의 빌드에 필요한 각종 플러그인에 대해서 알아보도록 하겠습니다.

Back to top ↑

Cypress

Cypress - 테스트 작성 (3)

3 minute read

이번 편에서는 Cypress를 이용해 첫 테스트 코드를 작성해 보겠습니다. STEP1: 테스트 파일 추가

Cypress - 설치 및 실행 (2)

less than 1 minute read

이번 포스트에서는 Cypress를 사용자의 Local에 설치하는 방법에 대해 정리합니다. 설치환경 macOS 10.9 이상 (64 비트 만 해당) Linux Ubuntu 12.04 이상, Fedora 21 및 Debian 8 (64 비트 만 해당) Windows ...

Back to top ↑

Storybook UI

Storybook - Knobs 애드온 (2)

3 minute read

이번에는 Storybook의 Knobs 애드온에 대해서 알아보도록 하겠습니다. Knobs 애드온? Knobs 애드온은 우리가 만든 컴포넌트에 사용되는 props를 Storybook 화면에서 입력을 통해 값을 바꿔 바로 반영시켜줄 수 있는 애드온입니다.

Back to top ↑

Lerna

Lerna - 패키지 버전 관리 및 발행 (3)

2 minute read

이번 편에서는 사용자가 생성한 Lerna 프로젝트의 패키지의 버전관리 및 발행에 대해서 알아보겠습니다. 만약 해당 프로젝트가 git 과 연결되어 있다면 Lerna 는 발행시에 버전을 설정하고 git 저정소에 해당 프로젝트를 자동으로 push 할 수 있습니다.

Lerna - 설치 및 패키지 생성 (1)

4 minute read

이전 포스트에서 Mono Repo 개념에 대해서 이전에 간략하게 정리를 하였습니다. 이제 본격적으로 Mono Repo를 경험할 수 있는 Lerna에 대해 알아보겠습니다.

Back to top ↑

Jest e2e

Jest - Expect 기능 익히기 (3)

6 minute read

이번 포스트에서는 Jest 의 Expect 에 대해서 알아보겠습니다. Expect 기능? 테스트를 작성할 때 값이 특정 조건을 충족하는지 확인할 필요가 있습니다. Expect는 여러가지 상황을 검증할 수 있는 수많은 Mathers 에 액세스 할 수 있게 도와줍니다.

Jest - Globals 기능 익히기 (2)

10 minute read

이번 포스트에서는 Jest 의 Globals 에 대해서 알아보겠습니다. 앞으로 Jest를 멋지게 사용하기 위해서는 다양한 기능들을 알아야 하겠지만 걱정하지 마세요. 단지 재미있는 소설책을 읽듯이 Jest의 다양한 기능들을 쉽게 익히실 수 있습니다.

Jest - 유닛 테스트 소개 및 설치 (1)

1 minute read

제가 프론트엔드 개발에서 처음으로 유닛 테스트를 경험했던게 Angular 를 처음 사용하던 시기였던것 같습니다. 그 당시엔 이건 뭐지? 왜 항상 Javascript 소스와 동일한 이름의 spec 파일이 생성될까? 이거 꼭 필요한가? 라는 생각으로 자세하게 보지 않았습니다.

Back to top ↑

React Query

React Query - 가이드 및 개념 (3)

5 minute read

React Query - 가이드 및 개념 정리 포스팅의 내용은 모두 React Query Docs의 내용과 제 사견으로 이루어져 있습니다. 이해하기에 부족하거나 빠진 내용이 있을 수 있을 수 있으므로 더 자세한 내용을 확인하시고 싶으시다면 공식 Doc 을 참고해 주시면 ...

React Query - 기본정보 (2)

2 minute read

React Query VS SWR VS Apollo VS RTK 쿼리 비교 비교표는 React Query 소개페이지에서 확인할 수 있습니다. https://react-query.tanstack.com/comparison 포스팅의 내용은 모두 React Query Doc...

React Query - 준비 및 소개 (1)

5 minute read

React-Query는 React 앱에서 비동기 로직을 쉽게 다루게 해주는 라이브러리입니다. 다만 아직 한국어 자료는 많이 없는것 같아 React-Query를 사용하시는 데 도움이 되었으면 하는 마음에서 몇 편의 내용으로 나눠 정리를 하게 되었습니다. 포스팅의 내용은 모...

Back to top ↑

Git

Git - 소개 및 상황별 사용법 (1)

5 minute read

이번 포스트에서는 개발 업무시 가장 필수라 할 수 있는 Git에 대해 간단한 소개와 상황별 Git 사용법에 대해서 알아보겠습니다.

Back to top ↑

Mono Repo

Mono Repo 개념 정리

less than 1 minute read

최근 Mono Repo의 개념을 바탕으로 모듈 프로젝트를 진행하게 되어 이번 포스트에서는 Mono Repo에 대해 알아보는 시간을 갖을까 합니다.

Back to top ↑