기록은 미래의 나를 돕는다 .

React Test 코드 작성

💡 개요 모든 개발자들이 테스트코드 작성의 중요성에 대해서 알지만, 쉽사리 실무에서 테스트 코드를 작성하면서 개발을 하기란 쉬운 일이 아니란 것을 공감하실겁니다. 특히나 프론트엔드에서는 시각적인 부분이 많다보니 아무래도 눈으로 직접 검증하는 경우가 많은데요. 테스트 코드를 통해 안정적…

2022. 06. 06

Reflow는 언제 발생하는가?

Reflow는 언제 발생하는가? 성능 최적화를 위해 Reflow를 줄이는 방법에 대해서 알아보는 중 DOM의 위치나 사이즈를 가져오는 것도 reflow를 발생시킬 수 있다는 내용을 접하게 되었고 테스트를 진행해보았습니다. 먼저 그냥 단순히 사이즈나 위치를 가져오는 것은 reflow를 발…

2022. 04. 08

React 상태관리

💡 등장배경 초기 웹을 돌아보면, Back-end 서버로부터 웹페이지를 동적으로 렌더링해주어 Front-end에서의 상태관리는 물론 별도의 Front-end 서버도 필요하지 않았다. 하지만 점차 서버의 부하를 줄이고 사용자들에게 원할한 서비스를 제공하기 위해 페이지 렌더링과 UI 작업…

2022. 03. 11

AWS ECS와 CodePipeline

💡 AWS의 ECS 그리고 AWS의 CodePipeline을 통해 CI / CD를 개선시켜보았다. 들어가기 전에. AWS ECS를 사용하기 전에 먼저 Docker에 대해 알아볼 필요가 있다. Docker는 컨테이너에 기반해 애플리케이션을 구축하는 소프트웨어 플랫폼이다. 가상 머신처럼…

2022. 03. 10

라이브러리 배포 cjs? ejs?

개요 언젠가 한번 나만의 라이브러리를 만들어서 배포해보고 싶다는 생각을 갖구있다가 이번에 디자인시스템 개발을 도전하게 되었다. 리액트 컴포넌트 기반으로 디자인시스템 개발에 대한 자료를 찾아보다가 Typescript + Storybook + React 을 활용하여 개발을 진행하고 웹팩대신…

2021. 08. 20

try-catch와 .catch

개요 회사 코드를 살펴보던 중 Redux 부분을 살펴보는데 saga를 통해 API를 호출하고 데이터를 받아오는 과정에서 API요청을 .then.catch 을 사용해서 받아오고 API를 랩핑하는 함수는 try-catch 을 사용하고 있었다. 그러다 이 둘로 구분한 이유와 try-catch…

2021. 08. 15

VanilaJS Carousel 만들기

Carousel 만들기 요구사항 1. 터치로 슬라이드를 이동시킬 수 있다. 2. 양쪽 버튼을 클릭하여 슬라이드를 이동시킬 수 있다. 3. 무한 반복 슬라이드가 되어야 한다. 구현 carousel-container : 전체적인 케로셀 컨테이너 carousel-slide : 슬라이드를 담을…

2021. 05. 24

Next.js에 카카오맵 추가하기

시작하기 1. 카카오 개발자 사이트에 로그인한다. 2. 로그인 후 앱키(자바스크립트)를 발급받는다. 3. WEB 플랫폼에서 사이트 도메인을 등록한다. Next.js에 적용하기

2021. 05. 24

Storybook 적용하기

이슈 컴포넌트를 설계할 때, 필요한게 생길 때마다 해당 케이스에 맞게 컴포넌트를 설계하다 보니, 비슷한 기능을 가진 컴포넌트들이 생겨났고, 결과적으로 재활용성이 떨어졌다. 개발은 컴포넌트 단위로 진행하지만 실제 개발환경은 항상 페이지 단위로 만들어지기 때문에 어쩌면 당연히 일어날 수도…

2021. 05. 24

커서와 HTML Element의 위치

MouseEvent 해당 마우스 이벤트의 위치를 알기 위해 사용되는 프로퍼티는 다음과 같다. pageX, pageY ClientX, ClientY offsetX, offsetY layerX, layerY screenX, screenY 마우스이벤트의 proto 를 살펴보자 screenX,…

2021. 05. 24

아토믹 디자인

아토믹 디자인 디자인 요소들을 나누어 파악하고 이 요소들을 조합을 통해서 디자인을 구성하는 방식. 즉, 컴포넌트 중심의 디자인 패턴. 리액트는 컴포넌트를 중심으로 만들어지는 프레임워크로, 컴포넌트의 재사용성이 매우 중요하다. 중복이 되는 컴포넌트를 공통으로 사용할 수 있도록 빼는 것이…

2021. 05. 24

React Portal

리액트 포탈 논리적으로 하위 컴포넌트여야 하는데, 시각적으로는 상위 컴포넌트를 덮어야 할 상황일 때 사용 리액트 v16 에서 도입된 기능으로, 기존의 리액트에서 컴포넌트를 렌더링 하게 될 때, children 은 부모컴포넌트의 DOM 내부에 렌더링 되어야 하지만, Portals 를 사용…

2021. 05. 24

MySQL

MySQL MySQL은 오픈소스 RDMBS 중 가장 점유율이 높다. Linux OS와 그 위에서 돌아가는 MysQL을 설치하고 관리할 수 있는 능력은 백엔드 개발자의 기본 소양이라고 할 수 있다. Install - MacOS $ brew update $ brew install mysql…

2021. 05. 23

AWS 무료 도메인 등록하기

도메인 도메인은 사이트를 구분하는 글자입니다. 다른 사람이 당신의 사이트를 찾아가기 위해서, 도메인이라는 "인터넷 주소"가 필요합니다. 무료 도메인 사이트 Freenom - A Name for Everyone (.tk .ml .ga .cf .gq) 무료 도메인을 만들 수 있습니다. 도메…

2021. 05. 23

싱글톤 패턴

Singleton 패턴 애플리케이션이 시작될 때 어떤 클래스가 최초 한번만 메모리를 할당하고(Static) 그 메모리에 인스턴스를 만들어 사용하는 디자인패턴. 전체 시스템에서의 오직 하나의 인스턴스만 존재하도록 보장.

2021. 05. 23

Git

Git과 Github

Git? GitHub? Git은 소스 코드 버전 관리 및 협업을 위해 가장 많이 사용되는 VCS (Version Control System)이다. GitHub은 Git을 호스팅 해 주는 사이트로, '소셜 코딩'을 표방하며 가장 유명하고 널리 사용된다. Git 설치하기 https://gi…

2021. 05. 23

Git

Issue Wiki Milestone Project

Github Issue 프로젝트를 진행하면서 발생하는 모든 이슈 (버그 발생, 개발, 풀 리퀘스트 등등) 1. 이슈 생성하기 → 참고로 이슈페이지에서 @이름 을 통해 다른 사용자를 언급할 수 있고, #num 을 통해 커밋, 이슈 들을 참조해 소통을 원활하게 할 수 있다. 2. Label…

2021. 05. 23

비동기 프로그래밍

들어가기 자바스크립트는 싱글스레드로 동작한다. (작업을 순차적으로 처리한다.) database나 file에 접근하거나, 네트워크 통신이 필요한 경우 등의 작업이 필요하다면, 비동기 처리를 통해서 blocking하지 않고 효과적으로 처리할 수 있다. 동기(synchronous) 동기적인…

2021. 05. 23

코어 자바스크립트

들어가기 다음 글은 코어자바스크립트 교재를 참고해서 자바스크립트에 대해 그동안 헷갈리던 부분과 핵심부분을 요약정리한 부분입니다. 1. 데이터 타입 변수 : 변경 가능한 데이터가 담길 수 있는 공간 식별자 : 그 변수의 이름을 말한다. 참조 카운트 : 자신의 주소를 참조하는 변수의 개수…

2021. 05. 23

Javascript OOP

객체 서로 연관된 변수와 함수를 그룹핑하고 이름 붙인 것. This 이 부분에 대해선 추후에 빠른 시일내로 따로 설명드리겠습니다. 일단은 this는 this가 속해있는 메소드가 속해 있는 객체를 가리키는 특수한 예약어 정도로 알고 계시면 되겠습니다. 여기서 this는 kim이라는 객체를…

2021. 05. 23

싱글스레드

들어가기 프로그램 어떤 작업을 위해 실행할 수 있는 파일 ex) 메모장 프로세스 실행중인 프로그램 스레드 실행중인 프로그램 안에서의 실행되는 명령어 ex) 특정 노래를 재생하는 스레드 및 새로운 노래를 재생 목록에 추가하기 위한 스레드 멀티프로그래밍 하나의 CPU 상에서 여러 프로세스가…

2021. 05. 23