방구석 개발자의 놀이터

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가 많아..

프로젝트를 진행하다보면 여러 이유로 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..

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") ..

결론적으로 변수를 불변객체로 관리하면 나중에 두개의 변수를 비교할 때 편리하다. 이 말을 밑에 예시 코드로 확인해보자. 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..

React 에서는 일반적으로 react-router-dom 패키지를 이용하여 페이지 전환을 하지만 jsp혹은 일반 html에서는 태그를 이용해서 페이지 전환을 한다. 1. 태그 - 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 애플리케이션이 들고 있던 상태들을 모두 날려버리게 됨 - 렌더링된 컴포넌트들도 모두 사라지고 다시 처음부터 렌더링 2. Link 컴포넌트 - 페이지를 전환하면, 페이지를 새로 불러오지 않고 애플리케이션은 그대로 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경 - Link컴포넌트 자체는 태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 내장

vscode에서 함수형 컴포넌트를 작성할 때 항상 작성되는 폼이 있는데 이 때 Snippet 설정을 한다면 생산성을 높일 수 있다. 1. 원하는 Snippet 모양을 작성한다. (ex. 함수형 컴포넌트) import React from 'react'; function ${TM_FILENAME_BASE}(){ return( ); } export default ${TM_FILENAME_BASE}; 여기서 ${TM_FILENAME_BASE} 는 파일의 확장명을 제외한 파일명을 의미한다. 즉, Sample.js 파일에 생성을하면 Sample이 들어가게 된다. 2. snippet-generator.app/ 에 들어가서 위의 코드를 붙여넣는다. ①번에는 만드려는 Snippet의 설명 (ex. create funct..

key값을 이용해서 의도적으로 컴포넌트를 언마운트 시켜야 할 때가 있다. export default function App(){ return( 사용자 상세 정보 ); } function UserDetail({user}){ // 여기에 상태값들이 있다고 가정하자 } 다음과 같이 사용자 정보를 받아서 렌더링을 하는 UserDetail 컴포넌트가 있다고 가정하자 이떄 UserDetail 함수에서 관리하는 상태값들이 있다고 가정할 때 그 상태값들은 해당 유저에 대한 상태값으로 부모로부터 넘어오는 user 데이터가 변경됐을 때 UserDetail함수 안의 상태값을 초기화 해야한다. 이 때, export default function App(){ return( 사용자 상세 정보 ); } function UserDe..

React DOM 요소에서 반복되는 요소에 key값을 넣어주는게 렌더링에서 효율적이다. 아래의 예제로 확인해보자! if(flag){ return( 사과 바나나 ); } else { return( 사과 파인애플 바나나 ); } 위와 같이 flag 조건에 따른 렌더링을 할 때 리액트는 이전의 돔과 비교해서 다른 점을 렌더링해주는 특징이 있다. 이전 돔과 비교할 때 순서를 기준으로 비교한다. 즉, 사과 바나나 순서에서 사과 파인애플 바나나 순서로 비교해서 따라서 위와 같이 조건에 따라 변한다면 파인애플과 바나나가 새로 렌더링된다. 하지만! 우리 입장에서는 파인애플만 추가된건데 굳이 바나나까지 새로 렌더링 된다면 비효율적이다! (물론 예제처럼 몇 안되는 돔 요소면 성능 차이는 없겠지만 복잡한 연산의 렌더링일 경..

1. useEffect 함수 react dom에 렌더링 된 후 비동기식으로 실행 비동기식으로 실행되므로 복잡한 연산을 사용해도 화면 빠르게 그려짐 2. useLayoutEffect 함수 react dom에 렌더링 된 후 동기식으로 실행 동기식으로 실행되므로 복잡한 연산을 사용하면 화면이 느리게 그려짐 렌더링 직후 돔 요소의 값을 읽어들이는 경우 또는 조건에 따라서 컴포넌트를 다시 렌더링하고 싶은 경우에만 useLayoutEffect 함수를 사용하자