[분석] Codility - PermCheck - Javascript
Codility 연습문제 > PermCheck > Javascript 주어진 배열이 순열인지 확인하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
- Codility 10
- Webpack 8
- Frontend 지식 7
- Rollup 4
- Cypress 4
- Storybook UI 4
- Lerna 3
- Jest e2e 3
- React Query 3
- Git 2
- Mono Repo 1
Codility
[분석] Codility - MissingInteger - Javascript
Codility 연습문제 > MissingInteger > Javascript 주어진 시퀀스에서 발생하지 않은 가장 작은 양의 정수를 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
[분석] Codility - MaxCounters - Javascript
Codility 연습문제 > MaxCounters > Javascript 모든 교대 작업을 완료 후 카운터를 1씩 늘리며 그중 가장 최대 값을 구하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
[분석] Codility - FrogRiverOne - Javascript
Codility 연습문제 > FrogRiverOne > Javascript 개구리가 강 반대편으로 점프할 수 있는 가장 빠른 시간을 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
[분석] Codility - TapeEquilibrium - Javascript
Codility 연습문제 > TapeEquilibrium > Javascript | (A [0] + … + A [P-1])-(A [P] + … + A [N-1]) | 두 그룹의 절대값중 최소값을 구하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의...
[분석] Codility - PermMissingElem - Javascript
Codility 연습문제 > PermMissingElem > Javascript 주어진 순열에서 누락된 요소를 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
[분석] Codility - FrogJmp - Javascript
Codility 연습문제 > FrogJmp > Javascript 위치 X에서 Y 로의 최소 점프 수를 계산합니다. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
[분석] Codility - OddOccurrencesInArray - Javascript
Codility 연습문제 > OddOccurrencesInArray > Javascript 홀수 요소에서 발생하는 값을 찾는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
[분석] Codility - CyclicRotation - Javascript
Codility 연습문제 > CyclicRotation > Javascript 주어진 단계 수만큼 배열을 오른쪽으로 회전하며 K번째 회전된 배열을 반환하는 문제. 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하...
[분석] Codility - BinaryGap - Javascript
Codility 연습문제 > BinaryGap > Javascript 실제 문제의 저작권은 Codility 에 있으므로 전체 문제의 내용은 Codility 페이지를 방문해 확인하세요.
Webpack
Webpack - 웹팩 Module Resolution (8)
지난 포스트에 이어서 웹팩의 Module Resolution에 대해서 알아보도록 하겠습니다. Module Resolution 리졸버(resolver)는 절대 경로로 모듈을 찾는데 도움을 주는 라이브러리입니다. 모듈은 다음과 같이 다른 모듈의 종속성으로 필요할 수 있습니다.
Webpack - 웹팩 Modules (7)
지난 포스트에 이어서 웹팩의 모듈에 대해서 알아보도록 하겠습니다. Modules 모듈형 프로그램밍에서 개발자는 프로그램을 모듈이라는 기능의 개별 청크로 나눕니다.
Webpack - 웹팩 Configuration (6)
지난 포스트에 이어서 웹팩의 구성 설정에 대해서 알아보도록 하겠습니다. Configuration 웹팩 구성이 똑같이 보이는 경우가 거의 없다는 사실을 눈치채셨을 것입니다. 이는 웹팩의 구성파일이 웹팩 구성을 내보내는 Javascript 파일이기 때문입니다. 이 구성은 정의된 ...
Webpack - 웹팩 Plugins (5)
지난 포스트에 이어서 웹팩의 구성 요소인 Plugin에 대해서 알아보도록 하겠습니다. Plugin 플러그인은 웹팩의 중추입니다.웹팩 자체는 웹팩 구성에서 사용하는 것과 동일한 플러그인 시스템에 구축됩니다. 또한 로더가 할 수 없는 다른 작업을 수행할 목적으로도 사용됩니다. ...
Webpack - 웹팩 Loaders (4)
지난 포스트에 이어서 웹팩의 구성 요소인 Loaders에 대해서 알아보도록 하겠습니다. Loaders 로더는 모듈의 소스 코드에 적용되는 변환입니다. 파일을 가져오거나, load 할 때 파일을 사전 처리할 수 있습니다. 따라서 로더는 다른 빌드 도구의 tasks (ex: gu...
Webpack - 웹팩 Output (3)
지난 포스트에 이어서 웹팩의 구성 요소인 Output에 대해서 알아보도록 하겠습니다. Output 출력 구성 옵션을 구성하면 컴파일된 파일을 디스크에 쓰는 방법을 웹팩에게 알려줍니다. 여러 진입점이 있을 수 있지만, 출력 구성은 하나만 지정됩니다. 사용방법 웹팩 구성에서 출...
Webpack - 웹팩 Entry (2)
지난 포스트에 이어서 웹팩의 구성 요소인 Entry에 대해서 알아보도록 하겠습니다.
Webpack - 웹팩 개념 및 시작하기 (1)
이번 포스트부터는 Webpack(이하 웹팩)에 대해서 소개할까 합니다.
Frontend 지식
Javascript 모듈 패턴과 Closure(클로저)
Javascript 모듈 패턴은 Javascript 의 코드 관리 기법중 하나로 객체 핸들링을 위한 방법론 중 하나입니다. 보통 객체의 유효범위(Scope)를 주어 Private, Public 을 구분하여 캡슐화를 할 때 사용하는 방법으로 다시말해 네임 스페이스 패턴에 렉시컬 스코...
일급 객체 그리고 익명 함수? 람다?
여러분들은 익명 함수란 용어는 많이 들어봤을 것입니다. 프로그래밍 언어에서 언급되는 일급 객체(First-class citizen)에 익명 함수가 포함되어 있습니다. 즉 익명 함수가 일급 개체인 샘이죠. 그렇다면 일급 객체는 무엇이고 익명 함수는 뭘까요? 어떤 관계가 있고 어떻게...
Progressive Rendering (점진적 렌더링) 이란?
점진적 렌더링이란? Progressive Rendering (이하 PSSR) 은 Server에서 중요한 콘텐츠를 렌더링한 후, 중요하지 않은 콘텐츠를 기다리지 않고 Client로 Streaming 하고, 이후에 Server에서 나머지 중요하지 않은 콘텐츠들이 렌더링되면 다시 Cli...
Mono Repo 개념 정리
최근 Mono Repo의 개념을 바탕으로 모듈 프로젝트를 진행하게 되어 이번 포스트에서는 Mono Repo에 대해 알아보는 시간을 갖을까 합니다.
SSR 와 SPA 그리고 New SSR
이번 포스트에서는 SSR 와 SPA 그리고 New SSR에 대해 알아보도록 하겠습니다.
Isomorphic, Universal, SEO 개념
이번 포스트에서는 간단하게 Isomorphic, Universal 그리고 SEO에 대한 개념정리를 해볼까 합니다. Isomorphic (이서모픽) 개념
Rollup
Rollup - alias 플러그인 (4)
이번에는 Rollup 의 alias 플러그인에 대해서 알아보도록 하겠습니다. @rollup/plugin-alias @rollup/plugin-alias 은 Rollup 패키지 번들링시 별칭을 정의하기위한 plugin 입니다.
Rollup - node resolve 플러그인 (3)
이번에는 Rollup의 @rollup/plugin-node-resolve 플러그인의 사용방법에 대해 자세히 알아보겠습니다. @rollup/plugin-node-resolve
Rollup - 플러그인 소개 및 설치 (2)
이번에는 전에 소개했던 Rollup의 소개 및 설치에 이어서 Rollup의 빌드에 필요한 각종 플러그인에 대해서 알아보도록 하겠습니다.
Rollup - 소개 및 설치 (1)
이번 포스트부터는 빌드툴중의 하나인 Rollup 에 대해 다뤄볼까 합니다.
Cypress
Cypress - 디버깅 연습 (4)
이번에는 Cypress 를 이용한 디버깅에 대해서 알아보도록 하겠습니다.
Cypress - 테스트 작성 (3)
이번 편에서는 Cypress를 이용해 첫 테스트 코드를 작성해 보겠습니다. STEP1: 테스트 파일 추가
Cypress - 설치 및 실행 (2)
이번 포스트에서는 Cypress를 사용자의 Local에 설치하는 방법에 대해 정리합니다. 설치환경 macOS 10.9 이상 (64 비트 만 해당) Linux Ubuntu 12.04 이상, Fedora 21 및 Debian 8 (64 비트 만 해당) Windows ...
Cypress - e2e 테스트 준비 (1)
이번 포스트부터는 Cypress e2e 테스트에 대해서 알아보도록 하겠습니다.
Storybook UI
Storybook - Docs 애드온 (4)
이번에는 Storybook의 Docs 애드온에 대해서 알아보도록 하겠습니다.
Storybook - Actions 애드온 (3)
이번에는 Storybook의 Actions 애드온에 대해서 알아보도록 하겠습니다.
Storybook - Knobs 애드온 (2)
이번에는 Storybook의 Knobs 애드온에 대해서 알아보도록 하겠습니다. Knobs 애드온? Knobs 애드온은 우리가 만든 컴포넌트에 사용되는 props를 Storybook 화면에서 입력을 통해 값을 바꿔 바로 반영시켜줄 수 있는 애드온입니다.
Storybook - 소개 및 설치 (1)
이번 포스트부터는 Storybook이란 툴에 대해서 알아볼까 합니다.
Lerna
Lerna - 패키지 버전 관리 및 발행 (3)
이번 편에서는 사용자가 생성한 Lerna 프로젝트의 패키지의 버전관리 및 발행에 대해서 알아보겠습니다. 만약 해당 프로젝트가 git 과 연결되어 있다면 Lerna 는 발행시에 버전을 설정하고 git 저정소에 해당 프로젝트를 자동으로 push 할 수 있습니다.
Lerna - 의존성 설치 및 Hoist (2)
이번에는 Lerna 의 의존성 설치 및 Hoist 에 대해서 알아보도록 하겠습니다.
Lerna - 설치 및 패키지 생성 (1)
이전 포스트에서 Mono Repo 개념에 대해서 이전에 간략하게 정리를 하였습니다. 이제 본격적으로 Mono Repo를 경험할 수 있는 Lerna에 대해 알아보겠습니다.
Jest e2e
Jest - Expect 기능 익히기 (3)
이번 포스트에서는 Jest 의 Expect 에 대해서 알아보겠습니다. Expect 기능? 테스트를 작성할 때 값이 특정 조건을 충족하는지 확인할 필요가 있습니다. Expect는 여러가지 상황을 검증할 수 있는 수많은 Mathers 에 액세스 할 수 있게 도와줍니다.
Jest - Globals 기능 익히기 (2)
이번 포스트에서는 Jest 의 Globals 에 대해서 알아보겠습니다. 앞으로 Jest를 멋지게 사용하기 위해서는 다양한 기능들을 알아야 하겠지만 걱정하지 마세요. 단지 재미있는 소설책을 읽듯이 Jest의 다양한 기능들을 쉽게 익히실 수 있습니다.
Jest - 유닛 테스트 소개 및 설치 (1)
제가 프론트엔드 개발에서 처음으로 유닛 테스트를 경험했던게 Angular 를 처음 사용하던 시기였던것 같습니다. 그 당시엔 이건 뭐지? 왜 항상 Javascript 소스와 동일한 이름의 spec 파일이 생성될까? 이거 꼭 필요한가? 라는 생각으로 자세하게 보지 않았습니다.
React Query
React Query - 가이드 및 개념 (3)
React Query - 가이드 및 개념 정리 포스팅의 내용은 모두 React Query Docs의 내용과 제 사견으로 이루어져 있습니다. 이해하기에 부족하거나 빠진 내용이 있을 수 있을 수 있으므로 더 자세한 내용을 확인하시고 싶으시다면 공식 Doc 을 참고해 주시면 ...
React Query - 기본정보 (2)
React Query VS SWR VS Apollo VS RTK 쿼리 비교 비교표는 React Query 소개페이지에서 확인할 수 있습니다. https://react-query.tanstack.com/comparison 포스팅의 내용은 모두 React Query Doc...
React Query - 준비 및 소개 (1)
React-Query는 React 앱에서 비동기 로직을 쉽게 다루게 해주는 라이브러리입니다. 다만 아직 한국어 자료는 많이 없는것 같아 React-Query를 사용하시는 데 도움이 되었으면 하는 마음에서 몇 편의 내용으로 나눠 정리를 하게 되었습니다. 포스팅의 내용은 모...
Git
Git - 상황별 사용법 (2)
이전 포스트에 이어 Git 상황별 사용법에 대해서 계속 알아보겠습니다.
Git - 소개 및 상황별 사용법 (1)
이번 포스트에서는 개발 업무시 가장 필수라 할 수 있는 Git에 대해 간단한 소개와 상황별 Git 사용법에 대해서 알아보겠습니다.
Mono Repo
Mono Repo 개념 정리
최근 Mono Repo의 개념을 바탕으로 모듈 프로젝트를 진행하게 되어 이번 포스트에서는 Mono Repo에 대해 알아보는 시간을 갖을까 합니다.