프론트엔드 기술 블로그 최신 글

파수 AI 2026년 3차 신입 공개 채용, 접수 기간 10월 12일~25일

필터 0

선택된 필터 없음

React Children 과 친해지기

2021년 11월 4일

프론트엔드

React Children 과 친해지기

React.Children.toArray()의 평탄화와 key 부여 동작을 예제로 설명했습니다. Fragment 내부를 펼치지 못하는 한계와 보완 라이브러리도 소개합니다.

#React#React.Children

2200

2021년 10월 28일

프론트엔드

타입스크립트 꿀팁

타입스크립트에서 enum·index signature 대신 union type과 mapped type 활용을 권장했습니다. 외부 타입 보강과 타입 가드로 반복을 줄이고 안전한 타입 좁히기를 소개합니다.

타입스크립트 꿀팁

TypeScript에서 union type·mapped type으로 런타임 영향과 값 누락 위험을 줄이는 방법을 소개했습니다. 외부 패키지 타입 확장과 다양한 타입 가드 활용법도 정리했습니다.

#TypeScript#React

3300

Vue SSR 제대로 적용하기 (feat. Vanilla SSR)

2021년 10월 1일

프론트엔드

Vue SSR 제대로 적용하기 (feat. Vanilla SSR)

SSR의 개념부터 Vanilla JS와 Vue를 이용한 적용 흐름까지 단계적으로 설명했습니다. 또한 Hydration, state 동기화, 선택적 SSR과 실패 시 CSR 대체 방법까지 정리했습니다.

Redux Toolkit (리덕스 툴킷)은 정말 천덕꾸러기일까?

Redux Toolkit이 Redux의 설정 복잡성과 보일러플레이트를 줄이는 주요 API를 정리했습니다. 상태 관리는 createSlice, 비동기는 createAsyncThunk, 데이터 패칭은 RTK Query를 제안합니다.

Finite state machine & statecharts – XState

XState로 React의 복잡한 상태를 FSM과 Statecharts로 모델링하는 방법을 설명했습니다. boolean 조합 문제를 context, guards, 계층·병렬 상태와 비동기 전이로 개선했습니다.

#React#XState

000

마이스터고 출신 신입 .NET 개발자가 비브로스에서 일하는 방법

2021년 9월 6일

프론트엔드

마이스터고 출신 신입 .NET 개발자가 비브로스에서 일하는 방법

마이스터고 출신 신입 .NET 개발자가 입사 후 과제와 WPF 토이 프로젝트로 적응한 과정을 소개했습니다. CSV 추출 시 UI 멈춤 문제를 비동기 처리와 진행률 표시로 개선했습니다.

[TokTokHan.dev]ES6 문법정리

ES5와 비교하며 자주 쓰이는 ES6 문법의 간결한 표현 방식을 정리했습니다. 변수 선언, 화살표 함수, 비구조화 할당 등을 React 활용 사례와 함께 소개합니다.

#JavaScript#TypeScript

2400

2021년 8월 9일

프론트엔드

이미지 리사이징을 통해 웹 성능 개선하기

반응형 이미지의 srcSet·sizes 속성으로 기기와 레이아웃에 맞는 해상도를 제공합니다. 압축과 리사이징을 결합해 리소스 용량과 웹 성능을 개선했습니다.

cypress를 이용하여 components test 작성하기

Cypress로 Next.js 컴포넌트 테스트 환경을 구성하고 Todo List 렌더링을 검증했습니다. 관심사 분리, fixtures, stub을 활용한 컴포넌트 리팩터링 과정을 소개합니다.

#Cypress#Next.js

2600

INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)

2021년 7월 21일

프론트엔드

INVESTING.COM 클론 코딩(feat. Vue JS SSR, CANVAS API)

Vue.js SSR과 Canvas API로 INVESTING.COM 클론 코딩 파일럿 프로젝트를 진행한 경험을 정리했습니다. 실시간 시세, 차트, 검색, 댓글 기능과 함께 협업 방식과 기술적 고민을 공유했습니다.

Chart.js 시작하기

React에서 Chart.js와 react-chartjs-2로 선·막대 혼합 차트를 구성하는 방법을 소개했습니다. 데이터 형식과 범례·툴팁·축 옵션을 중심으로 커스텀 방법을 설명합니다.

[TokTokHan.dev]Execution Context(실행 컨텍스트)

자바스크립트 실행 컨텍스트를 콜 스택, 환경 정보, 스코프 체인 관점에서 설명했습니다. 내부 변수 선언이 외부 변수를 가리는 변수 은닉화 사례를 함께 다뤘습니다.

Unit Test 시작하기

Android 테스트 피라미드를 바탕으로 단위·통합·UI 테스트의 역할과 비용을 설명했습니다. 단위 테스트부터 도입하고 CI로 지속 관리하는 방식을 제안합니다.

#Android#unit test

000