heyday2024 님의 블로그

처음 배정받은 프로젝트는 하이리걸 이라는 웹 서비스였다. 하지만, 당시 해당 프로젝트의 개발 전 세팅이 지연되면서 자연스럽게 다른 프로젝트에 다시 배정되었다.다른 프로젝트에 다시 배정되기 전까지는 하이리걸에서 특별한 개발 업무를 맡지 못했으나 나름 알게된 부분이 있어서 정리하게 되었다. 하이리걸은?회생근로, 회생사업, 개인파산 사건의 법원 보정 절차를 관리하는 시스템이고, 사건보정 등록, 자료 제출, 검토, 법원 제출까지의 과정을 디지털화하는 서비스이다.이 프로젝트에서 사용중인 서드파티 API 가 여러개여서 프론트/ 백단 관리가 어려운 상황이기에 해당 API를 별도로 분리해서 API허브라는 시스템에 관리하도록할 예정이었다.이를 진행하기 위해 이전에 이미 만들어진 하이리걸 프로젝트의 기술 스택과 코드 구조..

1. Tailwind CSS groupgroup 클래스는 CSS의 가상 클래스와 자식 선택자를 활용해, 부모 요소의 상태에 따라 자식 요소의 스타일을 지정할 수 있는 기능을 제공합니다.이 기능은 자식 요소가 직접 상태를 가지지 않아도, 부모 요소의 상태(예: hover, focus, 등)에 따라 스타일링을 유연하게 적용할 수 있도록 돕습니다.사용 방법그룹화 요소에 group 클래스 추가부모 요소에 group 클래스를 추가하여 그룹화합니다.자식 요소에 상태 기반 스타일 적용자식 요소에 group-* 접두사(예: group-hover, group-focus)를 사용하여 부모의 상태에 따라 스타일을 설정합니다.2. Tailwind CSS group-hovergroup-hover 클래스는 그룹화된 요소가 호버 ..

1. Next.js error.tsx에서 "use client" 필수임.문제: Next.js에서 error.tsx가 비어 있어도 "use client"를 명시하지 않으면 yarn dev 실행 시 에러 발생.이유:error.tsx는 기본적으로 서버 컴포넌트(Server Component)로 동작.하지만 클라이언트에서 렌더링해야 하는 특정 작업(예: 상태 관리나 브라우저 API 사용)이 포함될 가능성이 있는 파일은 클라이언트 컴포넌트(Client Component)로 선언 필요.빈 파일일지라도 Next.js는 명시적 선언을 요구함으로써 코드 의도를 명확히 하고, 클라이언트-서버 간 동작을 혼동하지 않도록 방지.해결 방법: error.tsx 파일 상단에 "use client" 추가."use client";ex..

고급 타입스크립트 기법 설명조건부 타입개념조건부 타입은 extends 키워드를 사용하여 특정 조건에 따라 다른 타입을 반환하는 유연하고 강력한 타입 시스템입니다. 삼항 연산자(? :)와 비슷한 구문을 사용하며, 타입 수준에서 분기 처리를 수행합니다.기본 문법T extends U ? X : YT가 U의 하위 타입이면 X를 반환.그렇지 않으면 Y를 반환.예제type IsString = T extends string ? "string" : "not string";type A = IsString; // "string"type B = IsString; // "not string"활용 예제배열인지 확인하는 조건부 타입type IsArray = T extends any[] ? true : false;type Te..

실전 유틸리티 타입Generic을 사용해서 타입을 효율적으로 쓸 수 있게 해줌.Utility Function은 원래 "데이터를 이용해서 간단한 계산을 하는 함수"를 뜻함! 이처럼 Utility type도 간단한 계산을 수행해 주는 타입!==> 한마디로 유틸리티 타입은 타입 변환을 용이하게 하기 위해서 타입스크립트에서 지원하는 문법PickT에서 프로퍼티 K의 집합을 선택해 타입을 구성합니다.interface Todo { title: string; description: string; completed: boolean;}type TodoPreview = Pick;const todo: TodoPreview = { title: 'Clean room', completed: false,}..

타입 스크립트란? 자바 스크립트 + 정적 타입 시스템즉, 자바 스크립트의 모든 기능을 포함하지만 정적 타입 시스템이 곁들인....그렇다면 타입 시스템은 무엇일까?타입 시스템은 프로그래밍 언어에서 값들을 분류하고 각 값이 어떤 타입인지 정의하는 체계임. 이를 위해 타입 시스템은 코드 타입 검사 시기와 방법에 대한 규칙까지 설정함.nullundefinedbooleanstringnumber* 자바스크립트는 동적 타입 언어 ==> 동적 타입 언어(dynamic typed)는 프로그램을 실행한 이후에 변수, 함수의 타입이 결정됨정적 타입 시스템(static typed)은 타입 시스템 중에 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식==> 즉, 정의하자면 동적 타입 언어는 변수의 타..

.첫번째 트러블슈팅: 렌더링 방식 설정 고민1. 문제 발생 프로젝트에서 페이지 별로 다양한 렌더링 방식을 적용하는 과정에서 SSR과 ISR을 적용하는 방식에 대한 고민이 생김.렌더링 방식 종류:Incremental Static Regeneration (ISR), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Static Site Generation (SSG)1) fetch에 no-store 옵션 주기2) page.tsx 컴포넌트에 dynamic 추가하기1) fetch에 옵션 주기2) page.tsx 컴포넌트에 revalidate 추가하기각각의 방식 중에 fetch 함수에서 렌더링 방식을 미리 정의해서 사용할지, 각 페이지에서 렌더링 방식을 명시적으..

문제상황:// NewProductList.tsx{/* @ts-expect-error Async Server Component */}const NewProductList = async () => { const res = await fetch("http://localhost:4001/products", { cache: "no-store", }); const data = await res.json(); const newData = data.filter((p) => p.isNew); return ( {newData.map((product) => ( {product.title} {product...

1. 렌더링 패턴 종류1. Client-Side Rendering (CSR)설명: 리액트의 전통적인 방식으로 SPA(Single Page Application)에서 클라이언트 측에서 동적으로 페이지를 렌더링.장점:최초 로딩 후 사용자와의 상호작용이 빠르고 부드럽다.서버 부하가 적고, 서버 요청 없이도 동작 가능.MPA(Multi Page Application)에서 발생했던 깜빡거림 문제를 해결.단점:초기 로딩 시간이 길어질 수 있음.SEO 최적화가 어려움(검색 엔진이 CSR을 완전히 지원하지 않는 경우가 있음).2. Static Site Generation (SSG)설명: 정적인 페이지를 빌드 타임에 미리 생성하여 제공.장점:**TTV(Time To View)**가 짧고 SEO 최적화에 유리.CDN 캐싱..

알고리즘 코드 카타를 진행하면서 새롭게 알게된 RegExp에 대해 정리해보았습니다.function solution(s) { numberArray = [ "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" ]; numberArray.forEach((number, index) => { const regex = new RegExp(number, "g"); s = s.replace(regex, index); }) return Number(s)}console.log(solution("one4seveneight")); //1478(- 이런 식으로..