진행하고 있는 프로젝트의 오픈 준비로 한동안 포스팅을 하지 못하고 있었다. 1차 오픈을 하고 어느정도의 여유를 찾은 만큼, 틈틈이 포스팅을 다시 해보려고 한다. 오늘은 프로젝트 마무리 단계에서 SEO를 위한 각종 분석툴과 GA, 메타테그를 붙이면서 프로젝트 전체에 적용되어야 할 HOC를 만드는 과정에서 배운 내용을 적어보려고 한다. 먼저 HOC란 High Order Component. 즉 고차 컴포넌트이다. 고차 컴포넌트 – React A JavaScript library for building user interfaces ko.reactjs.org 설명에 잘 나와있듯이, 컴포넌트를 인자로 받아 새 컴포넌트를 반환하는 함수이다. 일반적으로 컴포넌트는 props를 받아 UI를 렌더링하지만, HOC는 컴포넌..

코드 반 주석 반 첫 번째 포스팅은 여러군데에서 써먹을 수 있을만한 테이블 컴포넌트이다. 시작에 앞서, 포스팅에 사용되는 기술스택은 다음과 같다. react typescript styled-component 만들어야 하는 결과물은 다음과 같다. 고려해야 할 조건은 아래의 10개 정도로, 꽤 많다. 표의 각 셀은 제목과 내용으로 이루어져 있음 제목과 내용은 기본적으로 텍스트(string)가 온다고 가정하지만, 경우에 따라 어떤 요소든 받을 수 있어야 함 한 행에는 1개 혹은 2개의 셀이 올 수 있음 행의 높이는 가장 내용이 많은 셀 기준으로 맞춰짐 (수직정렬은 가운데) 행에 셀이 1개 인지 2개 인지에 따라 셀의 크기가 달라짐 (전체 너비의 100% / 50%) 표의 너비는 컨테이너의 너비에 따라 반응형으..

이미지 최적화와 웹 사이트 속도는 떼려야 뗄 수 없는 관계이다. 이미지의 용량을 압축과 최적화를 통해 줄일 만큼 줄였다면, 이제 페이지 로딩 시간을 향상하기 위한 지연 로딩(Lazy Loading)을 적용해보자. 지연 로딩이 적용된 이미지는, 사용자의 눈에 충분히 노출되기 전에는 데이터 요청이 일어나지 않게 할 수 있다. 그러므로 이를 통해 페이지의 초기 로딩 속도를 비약적으로 향상시킬 수 있다. React와 TypeScript를 사용한 이미지 컴포넌트 코드는 다음과 같다. Image.tsx import React, { useEffect, useRef, useState } from "react"; //* polyfill 2개. 아래에 설명있음*// import "intersection-observer";..

Typo를 관리하는 컴포넌트. 테마에 지정해놓은 Typo의 값을 사용하는 것에만 집중했다. import React from "react"; import { WithChildrenAndStyle } from "../../../interfaces"; import { styled } from "../../../styles/Themes"; export interface Props extends WithChildrenAndStyle { ellipse?: boolean; type?: "body" | "head"; dp?: "block" | "inline" | "inline-block" | "flex"; ws?: "pre" | "no-wrap" | "pre-wrap"; s?: string; c?: string; } ..

최근 지인으로부터 css in js 에 대한 불만 아닌 불만을 들을 기회가 있었다. css, js, html이 각자 가지고 있는 역할이 분명히 다른데, (컴포넌트 위주의 웹 개발 환경이 득세하다보니) css in js등의 등장으로 그 역할이 모호해지고 있다는 것이다. 그 말에도 일리가 있다고 생각했다. 사실 구현의 측면에서는 그 역할이 사라지거나 불분명해지진 않았다. 하지만 컴포넌트 위주의 웹 개발에서는 html태그의 계층구조, 스크립트와 dom의 연결, bem등을 사용한 css클래스 네이밍 등의 작업에 많은 시간을 투자하지 않고 결과물을 낼 수 있게 된 것은 사실인 것 같다. css in js가 가지고 있는 성능상의 이슈도 있고, 기술에는 정답이 없다고 생각하는 만큼 이러한 추세가 앞으로 또 어떻게 변..