새로운 아이디어와 가치를 창출하는
프론트엔드 개발자, 김명성입니다!
React Test 코드 작성
1. 기술스택 react 18 react-router-dom v6 react-query testing-library 기술 스택의 경우, 과 과 같이 최신 버젼의 라이브러리를 사용하였고, API 호출을 위한 와 서버 상태관리를 위한 를 이용하였고, React 공식 홈페이지에도 게시되어있듯 Facebook에서는 사용을 권장하는 만큼 테스트 코드 작성은 를 이용하여 진행하였습니다. 2. React Testing Library React Testing Library(RTL)은 기존의 Enzym…
Reflow는 언제 발생하는가?
Reflow는 언제 발생하는가? 성능 최적화를 위해 Reflow를 줄이는 방법에 대해서 알아보는 중 DOM의 위치나 사이즈를 가져오는 것도 reflow를 발생시킬 수 있다는 내용을 접하게 되었고 테스트를 진행해보았습니다. 먼저 그냥 단순히 사이즈나 위치를 가져오는 것은 reflow를 발생시키지 않지만, DOM의 스타일을 수정하는 경우 정확한 사이즈나 위치 정보를 가져오기 위해서 강제 reflow가 발생할 수 있습니다. 요약하면, 모양, 크기, 위치 등을 바꾸면 레이아웃(렌더링 과정 중 일부)을 …
React 상태관리
1. 상태 상태란, 변화하는 데이터 즉, UI에 동적으로 표현되는 데이터, 사용자에 action에 따라서 변경될 수 있는 컴포넌트의 부분, 자바스크립트의 객체로, 웹페이지내에서 눈에 보이는 데이터들(ex. 메뉴, 게시글 제목, 게시글 내용)뿐만 아니라 서버와 주고 받아야하는 데이터를 말한다. 다음은 React에서 말하는 상태(state)이다. Plain Javascript Object hold information influences the output of render 웹 애플리케이션을 렌더(…
AWS ECS와 CodePipeline
들어가기 전에. AWS ECS를 사용하기 전에 먼저 Docker에 대해 알아볼 필요가 있다. Docker는 컨테이너에 기반해 애플리케이션을 구축하는 소프트웨어 플랫폼이다. 가상 머신처럼 독립된 실행환경을 만들어주는 것으로, 운영체제를 설치하 것과 유사한 효과를 낼 수 있지만, 실제 운영체제를 설치하지 않기 때문에 설치 용량이 적고 실행 속도 또한 빠르다. 예전에는 윈도에 VM Ware와 같은 가상 머신을 설치하였으나 최근에는 리눅스 계열에서 Docker가 그 역할을 대신하고 있다. Docker와…
라이브러리 배포 cjs? ejs?
개요 언젠가 한번 나만의 라이브러리를 만들어서 배포해보고 싶다는 생각을 갖구있다가 이번에 디자인시스템 개발을 도전하게 되었다. 리액트 컴포넌트 기반으로 디자인시스템 개발에 대한 자료를 찾아보다가 + + 을 활용하여 개발을 진행하고 웹팩대신 이용해서 빌드하여 npm으로 배포를 한다는 블로그 글들을 많이 찾게 되었고 도전해보기로 했다 Rollup ? , 그리고 요것들(?)은 뭐 기존에 프론트 개발을 하면서 많이 사용해봐서 알겠는데 웹팩 말고 Rollup? 이건 뭐하는거지?? 내가 아는 …
try-catch와 .catch
개요 회사 코드를 살펴보던 중 Redux 부분을 살펴보는데 saga를 통해 API를 호출하고 데이터를 받아오는 과정에서 API요청을 을 사용해서 받아오고 API를 랩핑하는 함수는 을 사용하고 있었다. 그러다 이 둘로 구분한 이유와 문의 중첩에 관해서 궁금증이 생겼다. 먼저 다음 코드는 redux-saga에서 사용된 와 의 혼합버젼(?)이다. 여기서 생기는 궁금증은 funcProcess에서 과연 result에서 error를 받았는데 왜 catch로 안떨어지고 저렇게 try문 안에 따로 re…
VanilaJS Carousel 만들기
Carousel 만들기 요구사항 터치로 슬라이드를 이동시킬 수 있다. 양쪽 버튼을 클릭하여 슬라이드를 이동시킬 수 있다. 무한 반복 슬라이드가 되어야 한다. 구현 carousel-container : 전체적인 케로셀 컨테이너 carousel-slide : 슬라이드를 담을 컨테이너(그릇?!) 정도로 이해하면 될 거 같다. prev, next : 슬라이드 이동 버튼 CSS는 간략히 설명하자면, carousel-container라는 메인 컨테이너안에 엄청나게 긴 슬라이드 컨테이너 박스 carousel…
Next.js에 카카오맵 추가하기
시작하기 카카오 개발자 사이트에 로그인한다. 로그인 후 앱키(자바스크립트)를 발급받는다. WEB 플랫폼에서 사이트 도메인을 등록한다. Next.js에 적용하기
Storybook 적용하기
이슈 컴포넌트를 설계할 때, 필요한게 생길 때마다 해당 케이스에 맞게 컴포넌트를 설계하다 보니, 비슷한 기능을 가진 컴포넌트들이 생겨났고, 결과적으로 재활용성이 떨어졌다. 개발은 컴포넌트 단위로 진행하지만 실제 개발환경은 항상 페이지 단위로 만들어지기 때문에 어쩌면 당연히 일어날 수도 있지만 웹 개발에 있어서 재활용성이 떨어진다는 것은 생산성이 나빠지거나 추후에 리팩토링을 할 때, 과정이 커지고 복잡해질 가능성이 있다. Storybook 이란? 스토리북(Storybook)은 UI 컴포넌트를 위한…
아토믹 디자인
아토믹 디자인 디자인 요소들을 나누어 파악하고 이 요소들을 조합을 통해서 디자인을 구성하는 방식. 즉, 컴포넌트 중심의 디자인 패턴. 리액트는 컴포넌트를 중심으로 만들어지는 프레임워크로, 컴포넌트의 재사용성이 매우 중요하다. 중복이 되는 컴포넌트를 공통으로 사용할 수 있도록 빼는 것이 관건인데, 이것은 개발을 진행하다 보면 일일히 생각하며 진행하는 것이 어렵다. 결국에는 중복되는 코드가 많아지고, 이를 관리하는 것이 어려워지게 되는 것이다. 그렇기에 개발 단계 처음부터 재사용성이 용이하며, 여러…