Jacob's Development Blog

실제 프로덕션 환경에서 컴포넌트를 만들다 보면, 여러 경우에 따라 다른 컴포넌트를 보여줘야 하는 경우가 많다. 예를 들어 파일 다운로드 관련하여 준비, 진행, 완료라는 세 가지 타입을 가진 데이터를 내려준다고 해보자. export enum DownLoadStatus { "ready" = "ready", "progress" = "progress", "complete" = "complete" } 그리고 프론트에서는 이 상태에 따라 다른 컴포넌트를 보여줘야 한다. 그럼 아래와 같이 코드를 작성할 수 있을 것이다. import React from 'react'; export function DownLoad({ status }) { ...logic if (DownLoadStatus.ready === status)..

오늘은 정말 간단한 항상 보이는 스크롤바를 구현하려고 한다. 위와 같이 일반적인 웹사이트에서는 사실 사용할 일이 많지 않다. 오히려 스크롤이 계속 남으면 거슬리기만 하고, 사용자 경험을 높이진 않을 것이다. 그럼 언제 필요할까? 나 같은 경우는 관리자 페이지를 구현할 때 사용했다. 커머스 어드민의 경우 Table을 그린다고 했을 때 컬럼이 정말 많다. 가격, 상품명, 상품번호, 쿠폰 적용, 할인가, 공급가, 전시 여부 등 나열하면 끝도 없다. 조금 극단적으로 보여준다면 아래와 같은 그림이 된다. 1번 영역은 이미 화면 밖으로 벗어난거라고 생각하면 되고, 2번 영역이 우리가 보면서 디자인이 완성된 카드 부분이라고 생각하면 된다. 저 밖으로 벗어나가면 가로 스크롤을 통해서 내용을 볼 수가 있겠지만, 어드민 ..

간단하게 아코디언(Accordion)을 구현해 보려고 한다. 사실 Bootstrap, Material-ui 등 이미 많이 구현되어 있어서 직접 구현할 일은 많지 않겠지만, 자체 디자인 시스템을 만들기 시작한 지 얼마 안 되었다면 가끔은 직접 구현할 일도 있다. 사실 내 이야기이다... 뭐 여하튼... 어려운 것은 아니니깐 살짝만 구현해 보려고 한다. Accordion이 뭔데? Accordion은 접었다 펼수 있는 카드 컴포넌트라고 생각하면 쉽다. 예를 들어 실제 우리 홈페이지에서 내가 구현한 컴포넌트를 본다면 아래와 같은 모습이다. 결제 페이지인만큼 애니메이션은 과하지 않은 선에서 자연스럽게 적용해봤다. Typescript와 styled-components를 이용해서 만들어 봤는데, 사실 성능을 생각한다..

글을 시작하기 전에 넋두리... 며칠 전 나는 간단한(?) 카드를 만드는 미니 프로젝트를 만들었다. 메인 라이브러리로는 평소 자주 사용하던 React를 사용했고, UI 라이브러리는 이뻐서 사용해 보고 싶었지만 기회가 없어 못 사용해봤던 antd를 사용했다. 그리고 다른 언어와 기술들을 조합하여 프로젝트를 완성했다. 사실 antd를 사용했더라도 당연히 내가 구현하고 싶은 방향과 UI/UX가 있기 때문에 CSS를 수정했다. 물론 리액트를 사용하며 inline CSS, *. css 방식, styled components, CSS-in-JS, scss (이건 조금?) 사용해본 경험은 있었지만, 빠르게 구현하자는 생각에 inline CSS를 통해 장바구니 앱을 구현했다. "그런데 이렇게 구현하면 어떤 일이 일어났..

React는 어떻게 작동할까? 먼저 아래 있는 앱과 부모, 자식 컴포넌트로 구성된 예제를 보자. // App.js import React, { useEffect } from "react"; import { Parent } from "./Parent"; import { Child } from "./Child"; function App() { console.log("자식 렌더링 시작"); useEffect(() => { console.log("자식 리렌더링!"); }); return ( ); } export default App; 더보기 // 부모 컴포넌트(Parent.js) import React, { useEffect, useState } from "react"; export const Parent = ..

이 글에서 사용한 코드(깃 저장소) - https://github.com/JungKyuHyun/react-intl-test 오랜만에 올리는 React 관련 포스팅. 최근 react-native 프로젝트에 react-intl을 적용하면서 찾아본 것들을 적어보려고 한다. 사실 이전에도 react를 이용하여 관리자 페이지를 만들었을 때도 react-intl을 적용하는 이슈를 할당받아 해결했었다. (TMI: Jira를 사용하고 회사라는 곳에서 받은 생애 첫 이슈여서, 평생 기억에 남을거 같다.) 하여튼 react로 만든 웹이건, react-native로 만든 앱이건 둘다 사용 가능하다는 말을 하고 싶었다. 국제화라는 게 생각보다 어렵지 않으니 관련하여 참고하면 좋을 거 같다. react-intl 사실 이 라이브..

DOM 돔(DOM)이란 Document Object Model의 약자이며, HTML 및 XML 문서를 위한 API이다. 돔은 객체 간의 관계를 지정하지 않았기 때문에 논리적 구조라고 하며, 개발자는 DOM을 사용하여 문서를 작성하고 구조를 탐색하며, 돔에 요소 또는 내용을 추가, 수정, 삭제할 수 있다. Dom을 조금 더 이해하려면 Data Structure Tree(데이터 트리 구조)에 대해 이해 해야 한다. Data Structure Tree 트리의 최상위 데이터(Root, 루트)는 매우 중요하거나 그 아래 다른 요소를 포함하기 위해 존재한다. 루트는 매우 중요한 역할을 하며, 트리에서 추출할 정보를 검색할 수 있는 공간을 제공한다. DOM Parser 모든 브라우저에는 HTML 문서를 DOM으로 구..

먼저 간단하게 `메모제이션`에 대해 알고 넘어가자. 메모제이션(Memoization) → 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법. → 적절히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 더 사용하는 경향이 있어도 성능 측면에서 큰 이점이 있어서 알고리즘 성능 최적화에 많이 사용된다. 컴퓨터프로그래밍용어로, 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 방지할 수 있게 하는 기법이다.동적 계획법의 핵심이 되는 기술로써 결국 메모리라는 공간 비용을 투입해 계산에 소요되는 시간 비용을 줄이는 방식이다. - 나무위키 - → 시간복잡도를 O(N)으로 줄인다. useMemo 일반적으로 Re..