three.js in Next.js
WebGL을 추상화한 three.js의 핵심 구성과 애니메이션 루프를 설명했습니다. Next.js에서 useRef·useEffect로 바닐라 three.js 도넛을 렌더링하는 패턴을 제시했습니다.
#three.js#Next.js
2600
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
E2E Test를 Cypress로 해보자.
React 카운터를 대상으로 Cypress 설치부터 data-cy 기반 요소 선택과 클릭 검증까지 소개했습니다.\n브라우저 E2E 테스트와 Jest 단위 테스트를 분리하는 전략을 검토했습니다.
#Cypress#React
2600
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
Babel·Terser의 트랜스파일링과 코드 경량화 역할, Rust 기반 SWC의 동작 원리를 설명했습니다. Next.js 실험으로 SWC의 빌드 시간 단축 효과와 플러그인 호환성 제약을 확인했습니다.
#JavaScript#Next.js
000
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
초보 웹 개발자를 위한 자바스크립트 빌드 툴과 SWC
Babel과 Terser의 트랜스파일링·코드 경량화 역할을 초보자 관점에서 설명했습니다. Next.js의 SWC가 반복 빌드 시간을 줄일 수 있는 배경을 소개했습니다.
#JavaScript#Next.js
2400
댓글 모듈 레거시 걷어내기 with TDD
댓글 모듈 레거시 걷어내기 with TDD
JavaScript와 jQuery 기반의 댓글 모듈을 Vue와 TypeScript로 재구성했습니다. TDD와 컴포넌트 분리를 통해 SPA에 맞는 사내 라이브러리로 배포했습니다.
#JavaScript#Vue.js
800
웹에서 다크모드 지원하기
웹 다크모드는 body 클래스와 CSS variable로 제어하는 방식을 제안했습니다. SSR·CSR 환경의 깜빡임과 웹뷰·구버전 OS 호환성도 함께 고려했습니다.
#CSS#JavaScript
000
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
웹에서 다크모드 지원하기
웹에서 다크모드 지원하기
웹 다크모드는 body 클래스와 JavaScript로 제어해 다양한 정책을 지원할 수 있습니다. 렌더링 전 판별과 CSS 변수로 깜빡임 및 스타일 중복을 줄였습니다.
#CSS#JavaScript
1100
setSelectionRange로 검색창 커서 옮기기
검색창 재포커스 시 커서를 텍스트 끝으로 옮기는 구현 문제를 다뤘습니다. `setSelectionRange`와 `setTimeout(0)`으로 브라우저 기본 동작 이후 처리했습니다.
#JavaScript#HTML
000
setSelectionRange로 검색창 커서 옮기기
setSelectionRange로 검색창 커서 옮기기
검색창 포커스 시 커서를 끝으로 옮기는 과정에서 발생한 이벤트 순서 문제를 분석했습니다. `setSelectionRange`와 0ms `setTimeout`으로 커서·스크롤 위치를 함께 제어했습니다.
#JavaScript#setSelectionRange
3700
5개월차 뉴비의 코드 리뷰
5개월차 뉴비의 코드 리뷰
신입 백엔드 개발자가 코드 리뷰에서 받은 비동기 처리·불변성·예외 처리 개선 사례를 공유했습니다.\n검증 로직 분리와 명확한 명명·주석으로 유지보수성을 높이는 방법을 정리했습니다.
#JavaScript#TypeScript
2000
![[TokTokHan.dev]ES6 문법정리](https://tech.toktokhan.dev/assets/images/default_blog_cover.png)
[TokTokHan.dev]ES6 문법정리
ES5와 비교하며 자주 쓰이는 ES6 문법의 간결한 표현 방식을 정리했습니다. 변수 선언, 화살표 함수, 비구조화 할당 등을 React 활용 사례와 함께 소개합니다.
#JavaScript#TypeScript
2400
[TokTokHan.dev]Execution Context(실행 컨텍스트)
자바스크립트 실행 컨텍스트를 콜 스택, 환경 정보, 스코프 체인 관점에서 설명했습니다. 내부 변수 선언이 외부 변수를 가리는 변수 은닉화 사례를 함께 다뤘습니다.
#JavaScript#실행 컨텍스트
2400
주니어 프론트엔드 개발자의 채용 프로세스 참여 후기
주니어 프론트엔드 개발자의 채용 프로세스 참여 후기
채용 과정에서 프론트엔드 신입을 평가하기 위해 과제, 채점표, 코드리뷰를 도입한 사례를 정리했습니다. 지원자에게 객관적 피드백을 주며 원리 이해와 구현 역량을 확인한 과정입니다.
#채용#채용 과제
700
왜 폴 그레이엄은 회사 이름을 Y Combinator라고 지었을까
Clojure와 JavaScript 예제로 Combinator와 이름 없는 재귀를 단계적으로 설명했습니다.\nY Combinator가 자기 참조 없이 재귀를 만드는 고정점 조합자임을 보여줍니다.
#Clojure#JavaScript
000