개발소발닭발

앞서 설명한 컨테이너 기술 중 가장 널리 사용되고 있는 기술이 도커다. 1. 도커 개념 - 애플리케이션을 패키징, 배포, 실행하기 위한 플랫폼. - 애플리케이션, 필요 라이브러리, 파일 시스템에 설치되는 모든 파일을 패키징 할 수 있다. - 컨테이너 이미지가 레이어 구조로 구성되어 여러 이미지에서 공유, 재사용 가능하다. 1. 이미지 애플리케이션과 해당 환경을 패키지화 한 것. 파일 시스템과 이미지가 실행될 때 실행되어야 하는 파일들의 경로와 같은 메타데이터 포함. 2. 레지스트리 도커 이미지를 저장하고 공유할 수 있는 저장소다. 3. 컨테이너 이미지에서 생성된 일반적인 리눅스 컨테이너다. 다른 프로세스와 완전히 격리되어 있으며, 리소스 사용이 제한되어있다. 이미지와 컨테이너를 혼동하지 말자. 도커는 이..

회사에서 쿠버네티스 환경을 경험하면서, 이거 공부해보고 싶다는 매력을 느꼈다. (이유는 없고 단지 모르는 분야라서.. ㅎㅎ) 컨테이너 관련 지식이 전무한 상태라, 선행학습으로 도커 관련 책(Docker in practice)을 먼저 읽었다.(3개월 걸렸다... 별로 추천하지 않는다.) 직장인의 공부가 늘 그렇듯, 조금씩, 그러나 꾸준히 공부해볼 생각이다. 스타트! 사내 영상 강의와, 인프라 문서로 선행 학습을 했지만, 쿠버네티스 인 액션 도서를 읽으면서 느낀 내용을 주로 포스팅할 예정이다. 내용 정리도 훌륭하게 되어 있고, 이해도 잘 된다고 느껴, 쿠버네티스를 배워보고 싶은 분들에게 해당 도서를 강력 추천한다. 1. 왜 쿠버네티스인가. 과거 애플리케이션: 모놀리식 단일 프로세스 강한 결합. 작은 부분을 ..

babel + ts + react 트랜스파일링과 번들에 관한 설명은 아래 링크에 가장 훌륭하게 요약되어 있다. github.com/Microsoft/TypeScript-Babel-Starter microsoft/TypeScript-Babel-Starter A sample setup using Babel CLI to build TypeScript code, and using TypeScript for type-checking. - microsoft/TypeScript-Babel-Starter github.com

1. 설치 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2. 설치 brew install zsh 3. 설치 sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh) 4. ~/.zshrc ZSH_THEME="agnoster" prompt_context() { # Custom (Random emoji) git_emoji=("🎨" "⚡️" "🔥" "🐛" "✨" "🚨") RAND_EMOJI_N=$(( $RANDOM % ${#git_emoji[@]} + 1)) prompt_seg..

유용하게 사용하고 있는 확장 도구들을 소개합니다. Chrome Momentum ★★★☆ 크롬의 새 탭에 다양하고, 유용한 정보들을 보여준다. JSON View ★★ JSON 포맷터. Allow-CORS ★☆ CORS 문제로 요청이 안될 때, 이 녀석을 이용해보자. 그래도 안된다면, 서버 개발자에게 요청하자. VSCODE Prettier ★★★★★ 설명이 필요 없다. 최고의 포맷터. ESLint ★★★★★ 설명이 필요 없다. 최고의 분석 도구. Debugger for Chrome 설명이 필요 없다. vscode에서 브레이크 포인트를 걸 수 있는 디버깅 도구. GitLens ★★★★ Git을 사용한다면 무조건 설치하자. Git History를 에디터에서 바로바로 볼 수 있다. Local History ★★★..

자바스크립트가 발전하면서, FE의 덩치가 커지고 있다. 이전보다 성능 이슈가 발생하기 쉬워졌고, 발생하지 않도록 여러가지를 고려해가며 서비스개발을 해야 한다. 개인적으로 FE에서 서비스의 성능 향상을 위해 할 수 있는 것은 크게 다음과 같다고 생각한다. 필요한 시점에 필요한 만큼만 요청하는, 좋은 자원 요청 방법. 요청한 파일의 용량을 줄이자. 괜찮은 랜더링 로직. 물론 위와 같은 방법들이 무조건 맞는 것은 아니며, 상황에 맞게 적절히 사용하는 것이 중요하다. 우선 브라우저가 하나의 자원을 요청하고 받기까지의 과정을 살펴보면 다음과 같다. - Stalled Request 전 대기 시간으로 cors, 캐시 할당등의 작업을 한다. - DNS Lookup 도메인에 따라 IP를 찾는다. - 이후 동일 도메인으로..

Rxjs 기본 개념과 간단한 실습 과정

브라우저의 세계에서 VSync가 어떻게 동작하고 있는지 알아보자.

디자이너와 기획자, 그리고 개발자를 위한 UI '디자인 시스템' 관리 모듈인 @storybook/react 를 소개하고자 한다.

[2016] Array.prototype.includes array.indexOf('5') !== -1 // 이전 array.includes(5) 해당 값의 포함 여부를 확인 할 수 있다. [2016] Exponentiation Operator Math.pow(5, 2) // 이전 5 ** 2 거듭 제곱 연산을 쉽게 할 수 있다. [2017] Object.values / Object.entries const obj = {name:'이석규', age:35}; Object.values(obj); // ["이석규", 35]; Object.entries(obj); // [["name", "이석규"],["age", 35]] 객체의 값을 배열로 반환 받을 수 있다. 객체의 키, 값 쌍을 2차원 배열로 받을 수 있다..