- 전체보기(224)
- CSS(6)
- 객체(6)
- html(5)
- typescript(4)
- url 파라미터(3)
- 배열(3)
- useMemo(2)
- async(2)
- 비동기(2)
- node.js(2)
- this(2)
- 프로토타입(2)
- 데이터 패칭(2)
- swiper(2)
- React.memo(2)
- useCallback(2)
- 타입 추론(2)
- 서버 액션(2)
- 스프레드(2)
- Map(2)
- destructuring(2)
- 구조 분해(2)
- 인터셉팅 라우트(2)
- React(2)
- Props(2)
- 풀 라우트 캐시(2)
- State(2)
- 사용자 정의 타입 가드(1)
- 동기(1)
- link(1)
- TypeScript의 클래스(1)
- 인자(1)
- 이벤트 핸들링(1)
- 대수 타입(1)
- 인터페이스 확장(1)
- 타입 별칭(1)
- React Hooks(1)
- 스코프(1)
- catch(1)
- bind(1)
- 프로퍼티(1)
- 함수 오버로딩(1)
- 옵셔널 체이닝(1)
- 증분 정적 재생성(1)
- 타입 조작(1)
- finally(1)
- 리퀘스트 메모이제이션(1)
- 패럴렐 라우트(1)
- Web Storage(1)
- 템플릿 리터럴 타입(1)
- 제네릭 타입 별칭(1)
- try(1)
- 엄격모드(1)
- 프론트엔드(1)
- exclude(1)
- 매개변수(1)
- null(1)
- 유틸리티 타입(1)
- await(1)
- useEffect(1)
- 비교 연산자(1)
- 조건부 타입(1)
- Fetch API(1)
- 라이프 사이클(1)
- React Server Component(1)
- while(1)
- for(1)
- JavaScript(1)
- 인수(1)
- 이터러블(1)
- 콜백함수(1)
- 정적 사이트 생성(1)
- 네비게이팅(1)
- 인터페이스 클래스(1)
- 호출 시그니쳐(1)
- error(1)
- If_Else(1)
- 인스턴스(1)
- switch(1)
- json(1)
- const(1)
- let(1)
- 제네릭 클래스(1)
- 블록문(1)
- 클로저(1)
- 인터페이스 선언 합침(1)
- Mapped 타입(1)
- 프로미스와 제네릭(1)
- 필드(1)
- 일급 객체(1)
- foreach(1)
- 인터페이스(1)
- infer(1)
- context(1)
- 타입 좁히기(1)
- 제네릭(1)
- useReducer(1)
- useRef(1)
- 함수(1)
- 인덱스 시그니처(1)
- 메서드(1)
- DOM(1)
- Constructor(1)
- 프리페칭(1)
- 인덱스드 액세스 타입(1)
- 접근자 프로퍼티(1)
- SSR(1)
- 페럴랠 라우트(1)
- 생성자 함수(1)
- 제네릭 인터페이스(1)
- 주요 빌트인 객체(1)
- 클래스(1)
- meta(1)
- partial(1)
- 클라이언트 라우터 캐시(1)
- readonly(1)
- required(1)
- use strict(1)
- 문제 해결(1)
- Defer(1)
- ReturnType(1)
- API Routes(1)
- 스트리밍(1)
- 단락 평가(1)
- 상속(1)
- seo(1)
- JSX(1)
- next.js(1)
- ssg(1)
- 이미지 최적화(1)
- useNavigate(1)
- 타입 단언(1)
- keyof 연산자(1)
- 자료형(1)
- 에러 핸들링(1)
- Date(1)
- 페이지 라우팅(1)
- ISR(1)
- Suspense(1)
- extract(1)
- set(1)
- apply(1)
- call(1)
- 분산적인 조건부 타입(1)
- 데이터 캐시(1)
- pick(1)
- 서버 사이드 렌더링(1)
- undefined(1)
- object(1)
- 라우트 세그먼트 옵션(1)
- 취준생(1)
- 접근 제어자(1)
- 렉시컬(1)
- app router(1)
- 콜백(1)
- page router(1)
- promise(1)
- Omit(1)
- record(1)
CI/CD 개념 정리
1. 내가 직접 하던 일(CI 없을 때) 2. CI를 쓰면 뭐가 달라질까? CI는 이 코드가 merge 되어도 괜찮은지 자동으로 검사하는 역할 lint / test / build를 자동으로 실행 하나라도 실패하면 merge 불가 사람이 빼먹을 수 없음 merge 가능
[회고] 2025년 - 취준생에서 스타트업 직원이 되기까지
2025년을 한 줄로 요약하자면,고통 끝에 낙이 온다는 사자성어가 가장 잘 어울리는 해였다.취업 준비를 다시 시작해야겠다고 마음먹은 순간부터 불안은 자연스럽게 따라왔다.다시 취준생이 되었고, 어디로 가게 될지 알 수 없는 상태에서 하루하루를 보냈다.서류는 셀 수 없을
GitLab CI/CD
GitLab CI/CD는 GitLab에 기본으로 내장된 CI/CD 시스템이다. 별도의 CI 툴(Jenkins, CircleCI 등)을 붙이지 않아도, 저장소 하나만 있으면 바로 파이프라인을 구성할 수 있다. 별도 툴 설치 ❌ GitLab 저장소에 바로 연동 ⭕ > 파이
CI/CD란?
CI/CD는 코드를 더 자주, 더 안전하게, 더 자동으로 배포하기 위한 개발 문화이자 자동화 파이프라인이다.Continuous Integration, 지속적 통합개발자가 코드를 자주(main 브랜치에) 병합하고, 그때마다 자동으로 빌드·테스트를 실행하는 방식각자 로컬에
개발을 시작하기 전, 내가 먼저 작성했던 4가지 문서
회사를 다니기 전에는 개발이라고 하면 자연스럽게 코드를 먼저 떠올렸다. 하지만 실무에 들어와 보니, 실제 개발은 코드를 작성하기 전 단계에서 이미 절반 이상 결정되고 있었다. 입사 후 한 달 동안 나는 실제 구현에 앞서 다음 4가지 문서를 작성해보았다. - 유스케이
Tailwind v4 vs 이전 버전: 코드 짜며 느낀 변경점만 딱 정리
Tailwind 4.0으로 넘어오면서 “공식 문서에 있는 차이점”보다, 실제로 코드를 치면서 바로 체감되는 변화가 있었다. 내 경우엔 크게 두 가지였다. 파일 삽입 방식이 바뀌었다 커스텀 유틸리티를 @utility로 정의하는 흐름이 생겼다 폰트 커스텀 설정 방식이 바뀌
취업
거의 1년만의 취준 끝에 스타트업에 입사를 하게되었다.다닌지는 벌써 한 달이 다 되어가는데 사람들도 좋고 일도 할만하다내가 계속 잘 할 수 있을까?꾸준히 공부를 할 예정이다.파이팅!!!
[해결] SVG import 시 ‘모듈을 찾을 수 없습니다’ 오류 해결하기
문제 프로젝트에서 SVG 파일을 import할 때 갑자기 발생하는 에러 원인 분명 잘 되던 코드인데, 어느 날 갑자기???? 원인은 : TypeScript가 .svg 파일의 타입을 모르기 때문에 TypeScript는 JS 자산(.js, .ts) 만 타입 정보를 알고
프론트엔드 면접 질문 모음 (9)
CS분야 11. JWT(Json Web Token)는 어떻게 동작하나요? JWT는 사용자 인증 정보를 JSON형태로 인코딩한 토큰이며, 서버가 서명을 추가해 위변조를 방지합니다. 로그인 시 서버가 사용자 정보를 바탕으로 JWT를 발급하고, 클라이언트는 이 토큰을 로컬
프론트엔드 면접 질문 모음 (8)
CS분야 1. 브라우저의 렌더링 과정은 어떻게 되나요? 순서를 간단히 말하면 HTML/CSS파싱 -> 렌더 트리 생성 -> 레이아웃 -> 페인팅 -> 합성 순서로 진해됩니다. 먼저, 브라우저는 서버에서 받은 HTML을 파싱해서 DOM 트리를 만들고, CSS를 파싱해
프론트엔드 면접 질문 모음 (7)
Next.js 1. React만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해주세요. Next.js는 React에 없는 기능을 프레임워크 수준에서 제공하여 운영성과 성능이 뛰어난 웹 애플리케이션을 빠르게 구축할 수 있게 해줍니다. React는 UI
프론트엔드 면접 질문 모음 (6)
TypeScript 1. JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해주세요. TypeScript를 사용하는 이유는 정적 타입 검사를 통해 코드의 안정성과 유지보수성을 높일 수 있기 때문입니다. JavaScript는 동적
프론트엔드 면접 질문 모음 (5)
React 11. useMemo & useCallback & useContext & React.memo useMemo는 값을 메모이제이션해서 연산 비용이 큰 계산을 캐싱하는 훅입니다. 의존성 배열이 바뀌지 않으면 이전 값을 재사용해 불필요한 계산을 줄입니다. useC
프론트엔드 면접 질문 모음 (4)
React 1. React를 왜 쓸까? React는 UI를 효율적으로 만들고 관리하기 위한 라이브러리입니다. 기존에는 DOM을 직접 조작해야 해서 코드가 복잡하고 성능이 떨어졌지만, React는 Virtual DOM을 통해 변경된 부분만 효율적으로 업데이트하여 렌더링
프론트엔드 면접 질문 모음 (3)
JavaScript 13. JavaScript가 다른 언어와 다른 특징 3가지를 서술하세요. JavaScript는 먼저 인터프리터 기반 언어입니다. 실행 전에 전체 코드를 컴파일하지 않고, 브라우저나 Node.js엔진이 코드를 한줄씩 해석하며 즉시 실행합니다. 두 번
프론트엔드 면접 질문 모음 (2)
JavaScript 1. JavaScript는 어떤 언어일까? JavaScript는 웹 브라우저에서 동작하는 인터프리터 기반의 객체지향 스크립트 언어입니다. 웹 페이지에 동적인 기능과 상호작용을 추가하는 역할을 하며, 브라우저 뿐만 아니라 Node.js 환경에서도 서
[취준] 끝이 없다
프로젝트 3개 완성 + 이력서 완성 해서20군데 넘게 지원해도 답이 오질 않는다...내가 이력서를 잘 못 쓴 탓일까이쪽 길에 소질이 없는걸까취준 10개월째.... 지친다
[개념정리] Next.js에서 searchParams를 사용하는 이유 (useSearchParams와의 차이)
문제 useSearchParams()는 클라이언트 훅이라 SSR 단계에서는 실행되지 않음 서버는 브라우저의 URL을 직접 알 수 없기 때문에 검색어(query)를 모르면 API 요청 자체를 할 수 없음 따라서 검색 결과를 SSR로 미리 렌더링할 수 없고, 초기 진입 시
[기능] TanStack Query로 서버 상태 관리 : useInfiniteQuery + IntersectionObserver로 무한 스크롤 구현
useInfiniteQuery - 무한 스크롤/페이지네이션을 위한 데이터 패칭 훅 다음 페이지를 이어 붙이며 데이터를 가져오기 위한 훅 커서 기반 API(cursorId)와 함께 사용할 때 가장 깔끔함 주요 특징 pageParam: 다음 요청에 전달될 커서/페이지 ge