Archive

약속 프로젝트에서는 Tailwind CSS를 활용해 공통 컴포넌트를 스타일링하며, twMerge, clsx, 그리고 cva를 조합하여 variant 기반 스타일링과 클래스 중복 제거를 효율적으로 관리하고 있다. 이 중 twMerge는 Tailwind 클래스 간 충돌을 감지하고, 우선순위에 따라 가장 마지막에 정의된 클래스를 병합해주는 유틸리티로, 다크모드 및 반응형 클래스 등 다양한 변형이 많은 Tailwind 환경에서 유용하게 활용된다. 해당 프로젝트에서는 디자인 시스템에 기반해 다음과 같이 text-head1, text-head2 등의 커스텀 타이포그래피 유틸 클래스를 정의하여 사용하고 있다. --text-head1--line-height: 52px; --text-head1--letter-spac..

zero-runtime css-in-ts인 vanilla-extract는 런타임에 실행되는 css-in-js 방식( styled-components, emotion )과 달리 빌드타임에 실행되어 Next.js의 SSR에서 Hydration을 거치기 전에도 스타일시트를 가져올 수 있다.TailwindCSS 역시 빌드 타임에 스타일시트를 가져올 수 있지만 가독성이 좋지 않아 새롭게 시작하게 된 프로젝트에 vanilla-extract를 도입하기로 하였다. 1. vanilla-extract 설치// npm npm install @vanilla-extract/cssnpm install --save-dev @vanilla-extract/next-plugin// pnpmpnpm add @vanilla-extract/..

집합 순서와 중복이 없는 원소들을 갖는 자료구조  상호배타적 집합 : 교집합이 없는 집합 관계그래프 알고리즘에서 많이 활용된다.활용 분야이미지 분할 / 도로 네트워크 구성 / 최소 신장 트리 알고리즘 구현 / 게임 개발 / 클러스터링 작업 앞으로 글의 내용에서 집합을 상호배타적 집합이라 가정한다. 집합의 연산집합의 표현 방법 : 배열을 활용한 트리로 구현집합의 대표적인 연산합치기 (유니온)탐색 (파인드)배열을 활용하여 트리로 집합 표현각 집합 에는 대표 원소가 있어야 한다.집합의 원소 중 집합을 대표하는 역할집합의 형태를 트리로 표현할 것이므로 대표 원소를 루트 노드라 가정한다.하나의 배열로 상호배타적 관계를 가지는 집합을 모두 표현한다.배열의 인덱스는 자신을, 배열값은 부모 노드를 의미한다.disjoi..

큐뜻 줄을 서다자료구조 먼저 들어간 데이터가 먼저 나오는 자료구조 (FIFO, 선입선출)ADT연산 isFull 큐에 들어 있는 데이터가 maxsize인지 확인isEmpty 큐에 들어있는 데이터가 하나도 없는지 확인해 boolean 값을 반환front === rear인 경우push 큐에 데이터를 푸시pop 큐에서 처음에 푸시한 데이터를 팝하고, 그 데이터를 반환상태front 큐에서 가장 처음에 팝한 위치를 기록rear 큐에서 최근에 푸시한 데이터의 위치를 기록data[maxsize] 큐의 데이터 배열 구현1. shift 메서드 이용const queue = [];queue.push(1); // 큐에 데이터 추가let firstItem = queue.shift(); // 큐의 맨 앞 데이터 제거2. 배열 이용..

토큰이 만료되었을 경우, 토큰을 재발급하는 기능을 추가 중 아래와 같이 reissue api를 연속적으로 호출하는 오류 상황을 마주하였다.   내가 작성한 기존 로직은 다음과 같다.1. axios의 interceptors를 통하여 토큰 만료 오류를 감지한다.2. accessToken을 헤더에, refreshToken을 body에 넣어 reissue api를 호출한다.    a. 요청이 성공적으로 처리된 경우, 재발급된 토큰을 localStorage에 저장한다.    b. 그렇지 않은 경우, 다시 로그인하라는 모달을 표시하며, 로그인 페이지로 이동하게 한다.   문제원인 파악네트워크 탭에 들어가 요청을 자세히 살펴봤다. 가장 먼저 메인 페이지에서 토큰이 필요한 API인 user/ticket 요청에서 에러가..

1. 스택 개념스택 : 먼저 입력한 데이터를 제일 나중에 꺼낼 수 있는 자료구조LIFO (Last In First Out) : 먼저 들어간 것이 마지막에 나오는 규칙push : 스택에 삽입하는 연산pop : 스택에서 꺼내는 연산최근에 삽입한 데이터를 대상으로 연산해야 한다면 스택을 떠올리는 것이 좋음 2. 스택의 정의스택의 ADTADT란 ?Abstract Data Type의 약자추상 자료형 (인터페이스만 있고 실제로 구현은 되지 않는 자료형)일종의 자료형의 설계도정의해야 할 연산 : push , pop ,  isFull , isEmpty 정의해야 할 상태 : top , data[maxsize]  데이터가 없으면 top = -1 스택 세부 동작1. push(3) 호출2. isFull()을 수행하여 data..

공통 컴포넌트에 관하여 공부하던 중 이 글을 보고 forwardRef를 알아보게 되었다. 2-3. forwardRefform 요소를 공통컴포넌트로 만들다 보면 놓치기 쉬운 것이 ref일 것입니다. 리액트에서 요소 참조를 위해 사용되는 ref는 일반적으로 prop으로 전달할 수 없으므로 forwardRef를 사용해야 합니다. 만약 forwardRef로 감싸지 않는다면 내부적으로 ref를 사용해야 하는 react-hook-form 같은 일부 라이브러리 사용에 제약이 있을 수 있습니다.import { InputHTMLAttributes, forwardRef } from 'react';interface Props extends InputHTMLAttributes {}export default forwardRef..

안녕하세요.이번에 소프트웨어학과 4-1학기 캡스톤 프로젝트를 마치며 회고록을 남기고자 합니다.이 글을 통하여 뿌듯하기도 하지만 아쉬웠던 프로젝트를 회고해보겠습니다. 서비스 소개단통은 학우들의 학생회 행사 참여를 증진하고, 학생회의 폼 가공 업무를 간편화해주는 서비스입니다.학생회는 단통을 통하여 학생회 행사를 효과적으로 홍보하고, 학우는 행사 참여 정보, 진행 상황, 행사 일정 등을 편리하게 확인할 수 있습니다.단통은 학우들이 행사 폼을 제출할 때 번거로웠던 재학 인증 정보 (단국대학교 웹정보 화면 캡쳐, 전공과 학번 입력 등) 기입 절차를 회원가입시 단 한 번의 학교 이메일 인증으로 대체하고, 폼 응답 리스트를 엑셀로 추출하는 기능을 통하여 학생회의 업무 절차를 간소화합니다!이 프로젝트는 학생회의 도움..

프로토타입 기반 언어인 자바스크립트는 상속 개념이 존재하지 않습니다. 그러나 ES6에 추가된 클래스 문법은 프로토타입을 일정부분 활용하고 있으므로, 프로토타입을 활용하여 클래스를 직접 구현해보며 클래스를 이해하는 시간을 가져봅시다! 01. 클래스와 인스턴스계층, 집단, 집합의 의미를 가진 클래스(class)는 어떤 실존하는 개체들의 공통 속성을 모아 정의한 추상적인 개념을 뜻합니다.그리고 인스턴스(instance)는 어떤 클래스의 속성을 지니는 실존하는 개체를 말합니다.과일로 예를 들자면 음식, 과일, 귤류는 각각 공통 속성을 모아 정의한 클래스이고, 감귤, 자몽, 오렌지 등은 귤류의 속성을 지니는 인스턴스입니다.여기서 상하관계를 엿볼 수 있는데, 상위 개념은 superclass, 하위 개념은 subcl..

IT 개발자 필수 상식인 주소창에 www.naver.com을 쳤을 때 무슨 일이 일어나는지에 대하여 정리해보겠습니다.  과정1. 리다이렉트 →  2. 캐싱  →  3. DNS  →  4. IP 라우팅  →  5. TCP 연결 구축  →  6. TTFB (Time to First Byte) 시작  →  7. 컨텐츠 다운로드  →  8. 브라우저 렌더링  →  9. 네이버 화면 표시 🥳 단계별 설명1. 리다이렉트먼저 리다이렉트가 있다면 리다이렉트를 진행하고 없다면 그대로 해당 요청에 대한 과정이 진행됩니다.2. 캐싱캐싱 단계에서는 해당 요청의 캐싱 가능 여부를 파악합니다.캐싱이 이미 된 요청이라면 캐싱된 값을 반환하며, 캐싱이 되지 않은 새로운 요청이라면 그 다음 단계로 넘어갑니다.캐싱: 요청된 값의 결과..