방구석 개발자의 놀이터

1. lazy loading 적용 전 아래의 사진은 고객사의 로고들이 있는 고객사례 컴포넌트이다. 해당 컴포넌트는 index 페이지에 포함되어있다. 즉, 고객이 최초에 홈페이지에 들어왔을 때 보여지는 화면에 포함되어있다. 하지만 해당 컴포넌트는 스크롤을 좀 내려야 볼 수 있다. 그렇다면 과연 고객이 처음 홈페이지에 들어왔을 때 해당 이미지들을 불러와야 할까? 현재는 처음 홈페이지 들어오면 아래 사진과 같이 해당 이미지들을 전부 불러온다. 고객은 최초에 홈페이지에 들어왔을 때 보이지 않는 컴포넌트의 40개 img load를 기다려야한다. 물론 이미지의 사이즈가 크지 않지만, 언제든 고객사 로고는 추가될 수 있으며 인터넷이 좋지 않은 상황에서는 더욱 차이가 날 수 있다. 2. lazy loading 적용 방..

리팩터링 책을 읽고 난 후 너무 당연하게 여겨왔던 코드에 대한 의문이 생기는 날이 종종 생겼다. 그 중 하나가 Modal toggle 로직이였다. 어떠한 문제가 있었고 어떻게 개선했는지 예제로 알아보자. (변수명, 함수명은 예제를 위해 임시로 지어논 이름입니다.) 1. Modal toggle 로직을 변경하고 싶었던 이유 이전의 Modal toggle 로직은 아래와 같았다. 빨간색 박스 : Modal toggle에 관여하는 state 영역 주황색 박스 : Modal toggle 함수 노란색 박스 : Modal을 렌더링 해주는 영역 위와 같은 구조는 Modal이 추가될 때 마다 state를 추가해야하고, state 변화에 따라 toggle 함수를 변경해야 한다. 또한, 컴포넌트에서 사용되는 state가 많아..

open modal 버튼을 클릭 시 Modal Component가 렌더링 된다고 할 때 click 함수를 어떤걸 사용할지에 따라 테스트코드는 다음과 같이 작성할 수 있다. 1. fireEvent.click을 사용할 경우 it("부모 컴포넌트 state를 이용한 모달 버튼을 클릭하면 모달이 나타난다", () => { renderComponent(); //모달이 처음에는 보이지 않는다 expect(screen.queryByText("모달 타이틀")).toBeNull(); //버튼 클릭 시 모달 등장 const buttons = screen.getAllByText("open modal"); fireEvent.click(buttons[0]); //모달 등장 const modal = screen.getByTest..

프로젝트를 진행하다보면 여러 이유로 proxy를 나눠야할 상황이 발생할 수 있다. 여기서 다룰 상황은 2가지 이다. 1. api 버전 혹은 제공하는 환경이 달라져 proxy를 나눠야 할 경우 기본적인 proxy 수동 세팅은 src > setupProxy.js 파일을 만들어 아래와 같이 세팅하면 가능하다. // src/setupProxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function(app) { app.use( createProxyMiddleware("/api/v1", { target: "https://api.test.com", changeOrigin: true, cookieDom..

1. 배경 설명 위와 같이 사이드바가 있다고 가정해보자. 사이드바 전체 영역에 overflow-y:auto 가 걸려있고 그 안에 메뉴 영역에 마우스를 올렸을 때 툴팁이 띄워지는 구조를 만들 때 아래와 같은 스타일 문제(?)를 마주칠 수 있다. 사이드바 전체 영역의 overflow-y:auto로 인해 툴팁이 가려지게된다. 이 때 overflow-y:auto 와 overflow-x:visible을 같이 쓰려고 하지만 W3C 공식 문서에 보면 둘은 같이 적용할 수 없게된다. 한쪽이 auto or scroll일 경우 나머지 한쪽이 visible을 하면 visible -> auto 로 취급된다. 2. 해결 방안 기존의 사이드바 영역을 초록색 div로 한번 더 감싼다. (즉, 사이드에 parent div를 추가) ..

React Query의 기술적 개념 및 사용 방법등은 다른 블로그에 많기 때문에 여기서는 기술적 개념 보다는 나의 생각을 적으려고한다. 1. React-query 전환 하게 된 계기 사업의 방향성을 전환하여 새로운 프로젝트를 진행하고 있었다. 이 프로젝트의 프론트엔드 구조는 현재 우리가 서비스를 제공하는 플랫폼의 프론트엔드 소스를 본떠 만들어 전역 상태관리는 Redux, Redux-thunk로 이루어져 있었다. 새로운 프로젝트 특성 상 고객의 요청에 따른 커스텀 기능을 가진 페이지를 만드는 일이 많아졌다. (A기업에 들어가는 페이지+기능, B기업에 들어가는 페이지+기능, C기업에 들어가는 페이지+기능이 모두 다르다는 것) 그러던 중 최근에 디자인 패턴, 폴더 구조에 관심이 생겨 찾아보던 와중에 현재 프로..

React에서 DOM에 html을 그리는 원리 및 코드는 다음과 같다. ReactDOM.render( // 테스트 React.createElement("div",null,"테스트"), document.getElementById("root") ); 위의 예제는 div하나만 그리지만 일반적으로 저렇게 간단한 코드를 사용하는 경우는 거의 없다. 예를 들어, 태그 안에 여러 태그가 있다고 가정해보자. ReactDOM.render( /* 테스트1 테스트2 */ React.createElement( "div", null, React.createElement( "div", null, Reat.createElement("h1",null,"테스트1"), Reat.createElement("h1",null,"테스트2") ..

Hoisting(호이스팅) 관련 내용을 보다가 함수 선언 function을 주로 사용하는지 const (arrow function)을 주로 사용하는지 각 선호도에 대해 각자의 생각을 토론하는 글을 보고 재미있어서 정리해보았다. (토론 출처 : https://dev.to/skinnypetethegiraffe/function-or-const-which-do-you-prefer-typescriptjavascript-apa) // function function test() { return "test"; } // arrow function const test = () => "test"; 1. function 선언을 선호하는 이유 hoisting(호이스팅)을 지원 (중첩 함수를 작성할 때 코드 정리 용이) con..

결론적으로 변수를 불변객체로 관리하면 나중에 두개의 변수를 비교할 때 편리하다. 이 말을 밑에 예시 코드로 확인해보자. const animal1 = { animal: [ {name: "dog", age: 10}, {name: "cat", age: 20} ] } const animal2 = { animal: [ {name: "dog", age: 10}, {name: "cat", age: 18} ] } 위의 animal1 과 animal2를 비교한다고 해보자. 만약 불변성을 유지하지 않은채로 변수를 관리 한다면 1. animal1.animal.length === animal2.animal.length 2. animal1.animal[0] === animal2.animal[0] 3. animal1.animal..

웹펙을 사용하게되면 웹에서 사용하는 다양한 파일들을 모듈별로 다룰 수 있게된다. 웹펙의 왼쪽 그림처럼 서로 참조관계에 있는 파일들을 모아서 하나의 파일로 묶는것을 Bundle 이라고한다. 웹펙이 이렇게 Bundle을 시켜줌으로써, 웹펙은 모듈 번들러라고도 불린다. Bundle이 중요한 이유 1. 모든 모듈을 로드하기 위해 검색하는 시간이 단축 2. 사용하지 않는 코드를 제거 3. 파일의 크기를 줄여줌