전체 글
-
TIL_201006(재귀적 알고리즘)카테고리 없음 2020. 10. 6. 22:11
부분집합 (Subset) function solution(arr) { let result = []; function search(index=0, subset=[]) { if (index === arr.length) { // 인덱스 값이 배열 길이 값과 같은 경우 종료 result.push([...subset]); return } else { // 현재 인덱스의 요소를 부분 집합에 포함 subset.push(arr[index]); search(index + 1, subset); // 현재 인덱스의 요소를 부분 집합에 포함하지 않음 subset.pop(); search(index + 1, subset); } } search(); return result; } 순열 (permutation) function s..
-
TIL_201005(Webpack, Babel 그리고 React [개발 환경 구성])카테고리 없음 2020. 10. 5. 21:31
npx create-react-app MyProject 프로젝트를 시작하기 위해 습관적으로 작성하던 명령어를 버리고 직접 개발 환경을 구성하기로 했습니다. 당연하게 실행되는 것들이 왜 그렇게 작동하는지 알아야 할 것 같았습니다. Learn Webpack for React 여기를 참고하여 하나씩 따라 해 보겠습니다. Initial Dependencies 디렉토리를 생성하고 이동한 다음 package.json을 생성하여 초기화합니다. mkdir MyProject && cd MyProject npm init -y Setting up Webpack npm i -D webpack webpack-cli webpak-dev-server npm으로 webpack과 커맨드 라인 인터페이스, 개발 서버를 위한 패키지를 받..
-
TIL_201003(webpack 시작하기)카테고리 없음 2020. 10. 3. 16:55
새로운 프로젝트를 시작하기 위해 webpack 초기 설정을 시작했습니다. webpack을 사용하는 이유는 모듈 단위로 개발이 가능하고 코드를 압축/최적화할 수 있기 때문입니다. 사실 Create-React-App으로 시작한다면 기본으로 설정되어 있지만 이번에는 처음부터 설정해보려 합니다. 만들어진 대로 사용하다 보니 놓치고 있는 부분이 많다는 생각이 들었기 때문입니다. webpack 공식문서의 가이드를 차근히 따라가 보기로 합니다. webpack 시작하기 asset 관리 Loading CSS // CSS 파일을 추가하는 모듈 npm install --save-dev style-loader css-loader // webpack.config.js module.exports = { entry: './src/..
-
TIL_201002(webpack)Today I Learned 2020. 10. 2. 15:10
Plugins Loader는 특정 유형의 모듈을 변환하는데 사용되지만 Plugin을 활용하여 번들 최적화, 에셋 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행할 수 있습니다. Plugin을 사용하려면 require() 해야하고 Plugins 배열에 추가해야 합니다. 대부분의 플러그인은 옵션을 변경하여 사용자 정의할 수 있습니다. const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm을 통한 설치 const webpack = require('webpack'); // 내장 플러그인에 접근 module.exports = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugi..
-
TIL_200930(webpack)Today I Learned 2020. 10. 1. 04:18
왜 webpack을 사용해야 하는가? webpack은 Javascript Bundling Tool입니다. 즉, 자바스크립트 소스들을 하나로 묶는 도구입니다. 1. Entry 설정을 통한 Javascript 리소스 모듈화 2. CommonsChunkPlugin 자동생성 3. npm으로 Javascript 리소스 일원화 4. Loader를 활용한 Node.js 도구의 활용 5. Webpack Configuration으로 간편한 로컬/테스트/리얼 환경별 빌드 관리 6. Webpack-dev-server 활용한 개발 편의성 증대 라는 장점이 있다고 하는데 아직은 잘 모르겠네요. 일단 공식문서를 읽어보며 천천히 알아가야겠습니다. webpack의 6가지 핵심 개념이 있습니다. 1. Entry 2. Output 3...
-
TIL_200929 (REST API)Today I Learned 2020. 9. 30. 02:00
Representational State Transfer REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐입니다. 최근 서버 프로그램은 다양한 브라우저와 모바일 디바이스에서 통신을 할 수 있어야 합니다. 이러한 멀티 플랫폼에 대한 지원을 위해 서비스 자원에 대한 아키텍처를 세우고 이용하는 방법입니다. REST의 특징 1. Server-Client (서버-클라이언트 구조) - server의 자원을 바탕으로 API를 제공하고, client에서 자원을 요청합니다. 2. Stateless (무상태) - server는 각각의 요청을 별개의 것으로 인식하고 처리..
-
[mini project] Drag typing (chromeExtension, getSelection(), Hangul.js)project 2020. 9. 28. 23:33
타이핑 연습을 하다가 시작한 미니 프로젝트입니다. 얼마 전 새로운 키보드가 생겼습니다. 맥북 에어 키보드에 적응되어있는 손가락이 갈 길을 찾지 못하고 엉뚱한 곳으로 가서 타이핑 연습을 해야 했습니다. 연습하던 중 지금 보고 있는 페이지의 단어들을 타이핑하면 재미있겠다는 생각과 틈틈이 연습하고 싶은 마음이 들어서 프로젝트를 시작했습니다. 타이핑 연습을 하는데 굳이 연습하는 페이지를 찾아 들어가야 한다는 불편함과 그 페이지에서 제공하는 단어가 적어서 같은 단어를 반복해서 타이핑하는 지루함이 있었습니다. 그래서 직접 원하는 문장을 드래그하여 타이핑 연습할 수 있는 크롬 확장 프로그램을 만들어야겠다는 생각이 든 겁니다. 만들기 위한 준비 1. 구글 크롬 확장 프로그램을 만드는 방법 2. 페이지에서 드래그하여 선..