차곡차곡 차곡차곡

새로운 프로젝트를 시작하기 위해 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/..

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..

왜 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...

IDE(Integrated Development Environment) 프로그래밍을 위한 통합 개발 환경 컴파일, 빌드, 디버깅, 프로파일링, 배포 같은 툴들이 제공됩니다. 다음과 같은 IDE가 있다고 합니다. Visual Studio Xcode Clion Vi/Vim 가장 많이 사용되는 Visual Studio가 있지만 mac을 사용하고 있기 때문에 Xcode를 선택합니다. Create Git repository on my Mac을 체크해야 합니다!

Representational State Transfer REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐입니다. 최근 서버 프로그램은 다양한 브라우저와 모바일 디바이스에서 통신을 할 수 있어야 합니다. 이러한 멀티 플랫폼에 대한 지원을 위해 서비스 자원에 대한 아키텍처를 세우고 이용하는 방법입니다. REST의 특징 1. Server-Client (서버-클라이언트 구조) - server의 자원을 바탕으로 API를 제공하고, client에서 자원을 요청합니다. 2. Stateless (무상태) - server는 각각의 요청을 별개의 것으로 인식하고 처리..

타이핑 연습을 하다가 시작한 미니 프로젝트입니다. 얼마 전 새로운 키보드가 생겼습니다. 맥북 에어 키보드에 적응되어있는 손가락이 갈 길을 찾지 못하고 엉뚱한 곳으로 가서 타이핑 연습을 해야 했습니다. 연습하던 중 지금 보고 있는 페이지의 단어들을 타이핑하면 재미있겠다는 생각과 틈틈이 연습하고 싶은 마음이 들어서 프로젝트를 시작했습니다. 타이핑 연습을 하는데 굳이 연습하는 페이지를 찾아 들어가야 한다는 불편함과 그 페이지에서 제공하는 단어가 적어서 같은 단어를 반복해서 타이핑하는 지루함이 있었습니다. 그래서 직접 원하는 문장을 드래그하여 타이핑 연습할 수 있는 크롬 확장 프로그램을 만들어야겠다는 생각이 든 겁니다. 만들기 위한 준비 1. 구글 크롬 확장 프로그램을 만드는 방법 2. 페이지에서 드래그하여 선..

객체 지향 프로그램 설계를 할 때 자주 발생하는 문제를 해결하기 위한 패턴 애플리테이션이 커짐에 따라서 코드 구조화가 중요해 집니다. 복잡한 코드를 유지 관리 가능하고 읽기 쉬우며 재사용 가능한 코드로 작성하기 위해서 디자인 패턴이 사용됩니다. 또한 소프트웨어를 설계할 때 특정한 맥락에서 자주 발생하는 문제를 처리하는 해결책에 공통점이 있습니다. 또한 패턴은 팀원 간의 공통된 언어를 만들어 의사 소통을 원활하게 만들어 주기도 합니다. 그러나 모든 문제를 디자인 패턴으로 해결하기보다 코드 베이스의 간결성이 생각해야 합니다. 디자인 패턴에 얽매이기 보다 그 패턴이 왜 효율적인지 이해하는 것이 좋습니다. Gang of Four 디자인 패턴 23가지의 디자인 패턴이 Creational, Structural, B..

useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); 메모이제이션된 콜백을 반환합니다. 인라인 콜백과 그것의 의존성 값의 배열을 전달하면 useCallback은 콜백의 메모이제이션된 버전을 반환합니다. 메모이제이션된 버전은 콜백의 의존성이 변경되었을 때에만 변경됩니다. useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다. useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 메모이제이션된 값을 반환합니다. 생성(create) 함수와 그것의 의존성 값의 배열을 전달..

기본 Hook useState const [state, setState] = useState(initialState); 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초의 state 값은 첫 번째 전달된 인자인 initialState의 값과 같습니다. state 값을 갱신하는 경우 setState(newState); 함수적 갱신 function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( setCount(prevCount => prevCount + 1)}>+ ) 갱신된 값이 이전의 값(prevCount)을 바탕으로 계산됩니다. 업데이트 함수가 현재 상태와 정확히 동일한 값을 반환한다면 바로..

3. Behavioral Design Patterns - 객체 간의 통신을 개선합니다. Chain of Responsibility Pattern 더보기 느슨하게 결합 된 객체의 체인을 제공하는 동작 디자인 패턴입니다. 책임 패턴의 좋은 예는 일련의 중첩된 DOM 요소를 통해 전파되는 DOM의 이벤트 버블링입니다. 그 중 하나에 이벤트를 수신하고 그에 대해 작동하기 위해 연결된 "이벤트 리스너"가 있을 수 있습니다. class CumulativeSum { constructor(intialValue = 0) { this.sum = intialValue; } add(value) { this.sum += value; return this; } } // usage const sum1 = new Cumulative..