본문 바로가기

전체 글

 (64)
Next.js와 Tailwind CSS를 이용해 로컬 폰트 설정하기 들어가기 tailwind CSS를 연습 해보기 위해서 새로운 프로젝트를 시작했다. Next.js와 Tailwind CSS를 결합해서 사용하기 때문에 차근차근 하나씩 시도해보려 한다! 그 중에서 제일 먼저 타이포그래피를 설정해보자! Next/Font Next.js는 기본적으로 폰트도 최적화를 지원한다. 외부에서 받아오는 글꼴에 대한 네트워크 요청을 별도로 하지 않아 보안에 안정적인 부분도 있다! 또한 대부분의 웹 페이지는 글꼴을 받아오는 동안에 기본 글꼴을 보여주느라 깜빡이는 현상이 있는데, next의 font 최적화에서는 해당 부분도 온전히 해결되었다. 로컬폰트 적용하기 나는 구글 글꼴에는 없는 폰트를 사용할 것이기 때문에 폰트 파일을 받아서 사용할 예정이다. 여기(공식문서에 나오는 영상)를 보면 CDN..
좋은 테스트 코드 작성법 정리 애플리케이션의 품질과 안정성을 높이기 위해 사전에 결함을 찾아내고 수정하기 위한 행위 테스트는 주로 특정 모듈(컴포넌트)이 사양에 잘 동작하는지 검증 테스트 코드의 효과 좋은 설계에 대한 사고를 도와준다. 테스트 코드를 작성할 때 테스트 코드를 독립적으로 작성할 수 있도록 결합도를 낮추도록 설계하여 작성 가능 의미 있는 컴포넌트 단위로 분리가 가능하도록 설계 테스트 코드를 기반으로 빠르고 안정적이게 리팩토링 할 수 있다. 리팩토링: 결과의 변경 없이 코드의 구조를 수정 좁은 범위를 개선 하고 테스트를 한다면 문제를 발견하기가 훨씬 쉽다. 애플리케이션 기능의 이해를 돕는 문서가 된다. 올바른 테스트 작성을 위한 규칙 인터페이스를 기준으로 테스트를 작성해야 한다. 내부 구현에 대한 테스트는 캡슐화를 위반하여..
진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기(2) 2023.12.07 - [리액트] - 진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기 이 글은 위 글과 이어집니다. 프로그래스 바는 잘 구현을 했고 저 프로그래스 바 퍼센테이지 안에서 3개의 API를 구현해야한다. 그런데 어떤 API는 좀 오래걸리는 API가 있고, 또 어떤 API는 빠르게 결과값이 오는 API가 있어서 속도를 조절해주는게 필요했다. import { useEffect, useState } from 'react'; const usePercentage = ( isLoading: boolean, isSuccess: boolean, startPercent: number = 0, targetPercent: number = 100, speed: number = 250 ) => { const..
웹뷰 로딩 성능 개선하기 개요 각 네이티브 및 클라이언트에 웹뷰 형태로 제공하고 있는 프로젝트를 서빙하던 중에 고민점이 생긴 부분이 있었다. 해당 서비스는 탭 형태로 제공이 되어 클라이언트 같은 경우는 한 웹 뷰에서는 하나의 페이지만 보인다는 것이다. 그러나 한 페이지를 로드 하는데 약 6.4초 정도의 시간이 걸려 생각보다 로드 시간이 너무 오래 걸리는 느낌이었다. 정적 이미지가 많은 프로젝트는 아니었기에 다른 부분에서 렌더링 성능을 향상해보기로 했다! 현재 성능 네트워크 탭을 열고 분석하기 시작할 때 처음 번들이 3.4MB가 걸리는 것을 확인할 수 있었다. 웹 -> 웹을 열 때는 그리 큰 문제가 아니지만 네이티브에서 웹뷰를 열어줄 때는 꽤나 많은 데이터를 가져오고 있고 탭 하나에 한 페이지 씩만 보여주기 때문에 다른 페이지는 ..
진행률에 따른 텍스트 색상이 바뀌는 프로그레스바 구현하기 다음과 같은 형태로 프로그래스 바를 구현해달라는 디자인 요청이 왔다. .....? 진행률에 따른 가운데 퍼센테이지의 색상이 글자를 지나감에 따라서 색상을 반전시켜달라는 것이 디자인 요청의 목적이었다. (한번도 해본적 없는데...) 일단은 구현을 해보기로 했다. import styled from 'styled-components'; import { alignItemCenter, flex, justiCenter } from '../style/cssCommon'; type ProgressBarProp = { progressPer: number; }; const ProgressWrap = styled.div` width: 100%; height: 40px; position: relative; background..
Should have a queue. This is likely a bug in React. Please file an issue 해결하기 문제 개요 백엔드 API 4개를 한 화면에서 모두 처리해야하는 상황이 생겼다..! 심지어 모두 병렬적으로 실행하는 것이 아니라 동기적으로 처리해야 한다는게 고민이 되었다.. 그 중에서 한 API는 백엔드에서 분석하는 시간이 오래걸릴 수도 있기 때문에 분석이 완료되었는지 주기적으로 호출하는 Polling 작업도 필요했다. 정리해보자면 다음과 같다. API 4개를 한 화면에서 처리 첫 번째 API는 Polling 처리 고민 우리는 react-query를 사용하지 않기 때문에 의존성 분리를 위해 hook을 만들어서 사용하는 방식을 채택하고 있다. 다행히(?)도 4개의 API는 모두 같은 request payload를 가지기 때문에 하나의 모듈 형태로 만들어 사용하기로 하였다. // useCreateVector..
[Next.js 13] Hydration failed because the initial UI does not match what was rendered on the server. 프로젝트에서 테이블을 만들던 중 다음과 같은 에러가 발생했다. Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server. 문제가 되는 코드는 아래와 같은 코드였다. export const Td = ({ content }: TdProps) => { if (typeof window === "undefined") return null; return ( {content && ( )} ); }; Td 컴포넌트는 클라이언트에서 content라는 값을 받아와 처리하기 위해 서버 컴포넌트에서 렌더링이 되면 null을 리턴 시켰다. if (typeof window ==..
Hydration 이해하기 들어가기 React v18이 릴리즈 된지도 시간이 꽤나 지났고, Next.js 13버전(App Router)에서는 React 18버전을 정식으로 채택하여 RSC를 사용하고 있다. 우리의 PO 프로젝트로 Next.js로 마이그레이션 하기로 결정 되었는데 Next.js에서 중요한 개념 중 하나인 Hydration에 대해 정리하는 시간을 갖고자 한다. Hydration - 수화 한국어로 "수분 공급"이란 뜻을 가지고 있는 이 Hydration이라는 의미는 무엇일까? CSR - Client-Side-Rendering 먼저 create-react-app과 같은 React 프로젝트를 생성하면 모든 렌더링이 브라우저에서 발생하게 된다. 이는 빌드된 react 프로젝트의 index.html을 확인해보면 되는데, HTM..

티스토리툴바