Archive

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/..

01. 집합과 상호배타적 집합의 개념집합순서와 중복이 없는 원소들을 갖는 자료구조상호배타적 집합: 교집합이 없는 집합 관계ex. A = {1,2,3} 과 B = {4,5,6,7}활용 알고리즘이미지 분할이미지를 서로 다른 부분으로 나누는 데 사용ex. 사람과 배경을 겹치지 않게 분할도로 네트워크 구성도로 구축시 각 도로를 서로 교차하지 않도록 설계하는 데 사용최소 신장 트리 알고리즘 구현간선을 추가할 때마다 사이클을 형성하는지 여부를 체크할 때 사용게임 개발캐릭터의 동작 자연스럽게 구현 가능ex. 플레이어와 적군 충돌 시 두 캐릭터가 겹치지 않도록 함클러스터링 작업각 작업이 서로 겹치지 않도록 구성 가능작업 간의 의존 관계가 없으면 동시에 여러 작업 진행 가능02. 집합의 연산보통 집합은 트리로 표현대표적..

24-1학기 캡스톤 프로젝트를 마치고 여름방학이 되며 프로젝트를 완성도 있게 다듬기 위하여 리팩토링과 성능 향상 작업에 돌입하였습니다.마주한 문제들을 목차로 정리하면 다음과 같습니다. ⏱️ 초기 로딩 개선을 위한 Code Splitting 적용초기 로딩 속도가 느려 빈 화면이 장시간 노출되는 문제를 인식하였습니다. 초기 로딩이 지연되는 주요 원인 중 하나인 bundle.js에 모든 컴포넌트와 의존성 파일이 묶여 다운로드되다 보니,브라우저가 초기 렌더링을 시작하기까지 시간이 오래 소요되고 있었습니다.이를 해결하기 위해서 초기 렌더링에 불필요한 컴포넌트는 최초 번들에 포함하지 않고, 사용자가 해당 컴포넌트를 실제로 필요로 할 때 비동기적으로 로드하도록 하는 코드 분할(Code Splitting) 기법을 도입..

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

01. 배열인덱스와 값을 일대일 대응해 관리하는 자료구조데이터를 저장할 수 있는 모든 공간은 인덱스와 일대일 대응하므로 어떤 위치에 있는 데이터든 한 번에 접근 가능배열 선언int[] arr = { 0, 0, 0, 0, 0, 0 };int[] arr = new int[6];// 둘 실행 결과 같음배열은 인덱스가 0부터 시작배열과 유사한 기능을 가진 ArrayList와 차이배열: 처음 선언할 때 배열의 크기 결정정확한 데이터의 개수를 알고 있는 경우 (속도 더 빠름)ArrayList: 크기 동적임저장해야 할 데이터의 개수를 정확히 알 수 없는 경우배열과 차원컴퓨터 메모리의 구조는 1차원이므로 2차원, 3차원 배열도 실제로는 1차원 공간에 저장배열은 차원과는 무관하게 메모리에 연속 할당1차원 배열배열의 각 ..

공통 컴포넌트에 관하여 공부하던 중 이 글을 보고 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. 캐싱캐싱 단계에서는 해당 요청의 캐싱 가능 여부를 파악합니다.캐싱이 이미 된 요청이라면 캐싱된 값을 반환하며, 캐싱이 되지 않은 새로운 요청이라면 그 다음 단계로 넘어갑니다.캐싱: 요청된 값의 결과..

16장 프로퍼티 어트리뷰트 (1) 내부 슬롯과 내부 메서드 프로퍼티 어트리뷰트 이해하기 위해 필요한 개념 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMA 사양에서 사용하느 의사 프로퍼티와 의사 메서드 ECMAScript 사양에 등장하는 이중 대괄호로 감싼 이름들 [[ . . . ]] ECMAScript 사양에 정의된 대로 구현 → 자바스크립트 엔진에서 실제로 동작 🔔 개발자가 직접 접근할 수 있도록 공개된 객체의 프로퍼티 ❌ 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직 ⇒ 원칙적으로 직접 접근 · 호출 방법 제공 ❌ 일부 내부 슬롯과 내부 메서드에 한하여 간접적 접근 수단 제공 (ex) 모든 객체는 [[Prototype]]이라는 내부 슬롯 가짐 내부 슬롯은 자바스크립트 엔진의 내부..