김명성의
개발 노트
프론트엔드 엔지니어로 일하며 알게 된 것을 기록합니다.
28편 · 최신순
TypescripttypeRoots vs includetypeRoots typeRoots는 타입 정의 파일(.d.ts)들을 찾을 디렉터리를 지정하는 옵션입니다. 이 옵션은 TypeScript가 프로젝트의 전역 타입 정보를 인식할 때 사용됩니다. typeRoots는 nodemodules/@types와 @types 디렉터리를 포함하고 있습니다…
ReactReact Test 코드 작성💡 개요 모든 개발자들이 테스트 코드 작성의 중요성에 대해서 알지만, 쉽사리 실무에서 테스트 코드를 작성하면서 개발하기란 쉬운 일이 아니라는 것에 공감하실 것입니다. 특히나 프론트엔드에서는 시각적인 부분이 많다 보니 아무래도 눈으로 직접 검증하는 경우가 많은데요. 테스트 코드를 통해…
JavascriptReflow는 언제 발생하는가?Reflow는 언제 발생하는가? 성능 최적화를 위해 Reflow를 줄이는 방법에 대해서 알아보는 중 DOM의 위치나 사이즈를 가져오는 것도 reflow를 발생시킬 수 있다는 내용을 접하게 되었고 테스트를 진행해보았습니다. 먼저 그냥 단순히 사이즈나 위치를 가져오는 것은 reflow를 발…
ReactReact 상태관리💡 등장배경 초기 웹을 돌아보면 Back-end 서버로부터 웹페이지를 동적으로 렌더링해주어 Front-end에서의 상태관리는 물론 별도의 Front-end 서버도 필요하지 않았습니다. 하지만 점차 서버의 부하를 줄이고 사용자들에게 원활한 서비스를 제공하기 위해 페이지 렌더링과 UI 작…
DevelopmentAWS ECS와 CodePipeline💡 AWS의 ECS 그리고 AWS의 CodePipeline을 통해 CI / CD를 개선시켜 보았습니다. 들어가기 전에 AWS ECS를 사용하기 전에 먼저 Docker에 대해 알아볼 필요가 있습니다. Docker는 컨테이너에 기반해 애플리케이션을 구축하는 소프트웨어 플랫폼입니다. 가상…
Development라이브러리 배포 cjs? ejs?개요 언젠가 나만의 라이브러리를 만들어 배포하고 싶다는 생각을 갖고 있다가 이번에 디자인 시스템 개발에 도전하게 되었습니다. 리액트 컴포넌트 기반의 디자인 시스템 개발 자료를 찾아보던 중, Typescript + Storybook + React를 활용하여 개발을 진행하고 웹팩 대신 Ro…
Javascripttry-catch와 .catch개요 회사 코드를 살펴보던 중 Redux 부분에서 saga를 통해 API를 호출하고 데이터를 받아오는 과정에서 API 요청은 .then.catch를 사용해서 받아오고, API를 랩핑하는 함수는 try-catch를 사용하고 있었습니다. 그러다 이 둘로 구분한 이유와 try-catch문의…
DevelopmentVanilaJS Carousel 만들기Carousel 만들기 요구사항 1. 터치로 슬라이드를 이동시킬 수 있습니다. 2. 양쪽 버튼을 클릭하여 슬라이드를 이동시킬 수 있습니다. 3. 무한 반복 슬라이드가 되어야 합니다. 구현 carousel-container : 전체적인 캐러셀 컨테이너 carousel-slide : 슬라이…
DevelopmentNext.js에 카카오맵 추가하기시작하기 1. 카카오 개발자 사이트에 로그인합니다. 2. 로그인 후 앱키(자바스크립트)를 발급받습니다. 3. WEB 플랫폼에서 사이트 도메인을 등록합니다. Next.js에 적용하기
DevelopmentStorybook 적용하기이슈 컴포넌트를 설계할 때, 필요할 때마다 해당 케이스에 맞게 컴포넌트를 설계하다 보니, 비슷한 기능을 가진 컴포넌트들이 생겨났고, 결과적으로 재활용성이 떨어졌습니다. 개발은 컴포넌트 단위로 진행하지만 실제 개발 환경은 항상 페이지 단위로 만들어지기 때문에 어쩌면 당연히 일어날 수도 있…
Javascript커서와 HTML Element의 위치MouseEvent 해당 마우스 이벤트의 위치를 알기 위해 사용되는 프로퍼티는 다음과 같습니다. pageX, pageY ClientX, ClientY offsetX, offsetY layerX, layerY screenX, screenY 마우스 이벤트의 proto를 살펴보겠습니다 scr…
React아토믹 디자인아토믹 디자인 디자인 요소들을 나누어 파악하고 이 요소들의 조합을 통해서 디자인을 구성하는 방식입니다. 즉, 컴포넌트 중심의 디자인 패턴입니다. 리액트는 컴포넌트를 중심으로 만들어지는 프레임워크로, 컴포넌트의 재사용성이 매우 중요합니다. 중복되는 컴포넌트를 공통으로 사용할 수 있도록 빼…
ReactReact Portal리액트 포탈 논리적으로는 하위 컴포넌트여야 하는데, 시각적으로는 상위 컴포넌트를 덮어야 할 상황일 때 사용하는 기능입니다. 리액트 v16에서 도입된 기능으로, 기존의 리액트에서 컴포넌트를 렌더링하게 될 때 children은 부모 컴포넌트의 DOM 내부에 렌더링되어야 하지만, Portal…
DevelopmentMySQLMySQL MySQL은 오픈소스 RDBMS 중 가장 점유율이 높습니다. Linux OS와 그 위에서 돌아가는 MySQL을 설치하고 관리할 수 있는 능력은 백엔드 개발자의 기본 소양이라고 할 수 있습니다. Install - MacOS $ brew update $ brew install m…
DevelopmentAWS 무료 도메인 등록하기도메인 도메인은 사이트를 구분하는 글자입니다. 다른 사람이 사이트를 찾아갈 수 있도록 도메인이라는 "인터넷 주소"가 필요합니다. 무료 도메인 사이트 Freenom - A Name for Everyone (.tk .ml .ga .cf .gq) 무료 도메인을 만들 수 있습니다. 도메인 연결…
Development싱글톤 패턴Singleton 패턴 애플리케이션이 시작될 때 어떤 클래스가 최초 한 번만 메모리를 할당하고(Static) 그 메모리에 인스턴스를 만들어 사용하는 디자인 패턴입니다. 전체 시스템에서 오직 하나의 인스턴스만 존재하도록 보장합니다.
GitGit과 GithubGit? GitHub? Git은 소스 코드 버전 관리 및 협업을 위해 가장 많이 사용되는 VCS (Version Control System)입니다. GitHub은 Git을 호스팅해 주는 사이트로, '소셜 코딩'을 표방하며 가장 유명하고 널리 사용됩니다. Git 설치하기 https://g…
GitIssue Wiki Milestone ProjectGithub Issue 프로젝트를 진행하면서 발생하는 모든 이슈(버그 발생, 개발, 풀 리퀘스트 등)를 관리하는 기능입니다. 1. 이슈 생성하기 → 참고로 이슈 페이지에서 @이름을 통해 다른 사용자를 언급할 수 있고, #num을 통해 커밋과 이슈들을 참조해 소통을 원활하게 할 수 있습니…
Javascript비동기 프로그래밍들어가기 자바스크립트는 싱글스레드로 동작합니다. (작업을 순차적으로 처리합니다.) database나 file에 접근하거나 네트워크 통신이 필요한 경우 등의 작업이 필요하다면, 비동기 처리를 통해서 blocking하지 않고 효과적으로 처리할 수 있습니다. 동기(synchronous) 동기…
Javascript코어 자바스크립트들어가기 다음 글은 코어 자바스크립트 교재를 참고해서 자바스크립트에 대해 그동안 헷갈리던 부분과 핵심 부분을 요약 정리한 내용입니다. 1. 데이터 타입 변수 : 변경 가능한 데이터가 담길 수 있는 공간 식별자 : 그 변수의 이름을 말합니다. 참조 카운트 : 자신의 주소를 참조하는 변수의…
JavascriptJavascript OOP객체 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙인 것입니다. This 이 부분에 대해서는 추후에 따로 설명드리겠습니다. 일단은 this를 this가 속해 있는 메소드가 속해 있는 객체를 가리키는 특수한 예약어 정도로 알고 계시면 됩니다. 여기서 this는 kim이라는 객체를 가리키…
Javascript싱글스레드들어가기 프로그램 어떤 작업을 위해 실행할 수 있는 파일입니다. ex) 메모장 프로세스 실행 중인 프로그램입니다. 스레드 실행 중인 프로그램 안에서 실행되는 명령어입니다. ex) 특정 노래를 재생하는 스레드 및 새로운 노래를 재생 목록에 추가하기 위한 스레드 멀티프로그래밍 하나의 CPU…
JavascriptV8 엔진들어가기 인간과 컴퓨터는 서로 사용하는 언어가 다릅니다. 따라서 컴퓨터가 이해할 수 있는 통역사가 필요한데, 여기서 말하는 통역사의 역할을 하는 것이 바로 컴파일러 혹은 인터프리터입니다. 우리가 컴퓨터와 소통하기 위해서는 코드를 작성하고 이러한 코드를 기계어로 변환하여 컴퓨터와 소통할…
NodeJSNode.js 디버깅VSCODE-NodeJS 디버깅 1. vscode의 디버깅 탭에서 create a launch.json file을 클릭합니다. .vscode 폴더에 launch.json 파일이 생성된다. 2. break 포인트를 걸어줍니다. 3. 디버깅 시작 F5 버튼을 누르면 디버깅이 시작됩니다. 4…
NodeJSNode.jsNode.js Node.js는 웹 프로그래밍에서 서버 부분을 만들 때 쓰이는 언어입니다. 노드는 자바스크립트를 기본으로 해서 만들어진 언어입니다. Node.js를 알아가는데 중요한 것은 딱 두 가지라고 생각합니다. 싱글 스레드에 비동기 방식이라는 것과, 자바스크립트 기반이라는 것입니다.…
Typescript타입스크립트타입스크립트 컴파일 및 실행 TS 1. 타입스크립트 소스 → 타입스크립트 AST 2. 타입 검사기가 AST를 확인 3. 타입스크립트 AST → 자바스크립트 소스 JS 1. 자바스크립트 소스 → 자바스크립트 AST 2. AST → 바이트 코드 3. 런타임이 바이트코드를 평가 자바스크립트와…
WebCookie와 SessionHTTP의 특징과 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특징이자 약점을 보완하기 위해서 사용합니다. HTTP 프로토콜 환경에서 서버는 클라이언트가 누구인지 확인해야 합니다. 그 이유는 HTTP 프로토콜이 connectionless, stateless한 특성이 있기 때문입니다.…
WebHTTPWeb WWW = World Wide Web 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간 웹과 인터넷은 다름! 웹의 3요소: HTTP, HTML, URL HTTP = HyperText Transfer Protocol WWW 상에서 정보를 주고받을 수 있는 프로토콜입니다…