올리브영 잡 챌린지! 프론트엔드 개발자로의 전환
올리브영 잡 챌린지를 통해 프론트엔드 직무로 전환한 경험과 W CARE 스쿼드에서의 실무 적응 과정을 공유했습니다. 구조도 작성, React 훅 활용, 컴포넌트 분리로 서비스 이해와 유지보수성을 높인 점이 핵심입니다.
#React#Next.js
2600
국내 IT 기업 기술 블로그 최신 글
새로운 기술 블로그가 추가되었어요
필터 1
사파리, 모바일 환경에서의 트러블슈팅
Safari와 iOS에서 발생하는 스크롤, 레이어, 터치 이벤트 차이를 사례별로 분석했습니다. 브라우저 식별보다 실제 동작 조건을 기준으로 보정하는 방법을 제안합니다.
#Safari#iOS
000
사파리, 모바일 환경에서의 트러블슈팅
사파리, 모바일 환경에서의 트러블슈팅
사파리와 iOS에서만 나타나는 스크롤·회전 관련 동작 차이를 사례별로 설명했습니다. 브라우저 감지보다 실제 동작 기준으로 보정하는 접근을 권장했습니다.
#Safari#mobile
4700
화면 성능 저하, 어떻게 개선할까?
배포 후 화면 성능 저하의 주요 원인과 개선 방법을 정리한 글입니다. 네트워크 속도, 정적 리소스 캐시, 이미지 최적화로 렌더링 속도를 높이는 방안을 소개했습니다.
#성능#cache
2700
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
Next.js의 컴포넌트 내부 CSS 임포트와 브라우저 캐시 재사용이 CORS 오류를 일으킨 과정을 분석했습니다. 전역 CSS 임포트 또는 crossorigin 설정으로 문제를 해결했습니다.
#Next.js#CORS
000
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
문제 해결을 넘어 - 문제의 근본적인 원인 찾아가기 Part 2
Next.js에서 컴포넌트 내부 CSS 임포트와 브라우저 캐시가 겹치며 CORS 에러가 발생했습니다. 전역 임포트 또는 `crossOrigin` 설정으로 문제를 해결했습니다.
#Next.js#React
2500
쿠팡 파트너스
개발자를 위한 서적을 확인해 보세요
이 게시물은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
#개발서적#프로그래밍
View Transitions API
View Transitions API로 React 상태 변경 전후 화면을 캡처해 복잡한 화면 전환을 단순화했습니다. 가상 요소와 CSS·Web Animations API로 요소별 슬라이드와 썸네일 이동 효과를 구현했습니다.
#View Transitions API#React
000
View Transitions API
View Transitions API
View Transitions API로 웹 화면 전환을 외부 라이브러리 없이 쉽게 구현하는 방법을 소개했습니다. 상태 변경과 트랜지션 제어를 단순화하고, 세부 애니메이션 확장 예시까지 함께 설명했습니다.
#React#CSS
3100
Vue 기능을 활용한 Transition 적용기
Vue Transition으로 버튼과 입력 영역의 등장·퇴장 애니메이션을 자연스럽게 구현한 경험을 소개했습니다. `v-if` 전환, `opacity` 조정, `mode="out-in"` 적용 과정을 정리했습니다.
#Vue.js#JavaScript
2900
iOS 환경에서 비디오 최적화 및 성능 개선 사례
iOS 환경에서 비디오 최적화 및 성능 개선 사례
iOS 15 이후 비디오 전환 시 발생한 깜박임과 사이즈 튐 문제를 분석하고 해결한 사례입니다. 썸네일, 로딩 상태, object-fit, 버전별 분기를 조정해 자연스러운 전환을 구현했습니다.
#iOS#object-fit
3500
Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll Snap API로 이미지 캐러셀의 스크롤 종료 위치를 제어하는 방법을 설명했습니다. JavaScript 없이 축, 스냅 강도, 정렬 기준을 조합해 슬라이드 UX를 구현합니다.
#CSS#Scroll Snap API
000
Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll Snap API를 통해 이미지 캐러셀 완성하기
Scroll Snap API로 이미지 캐러셀을 만드는 방법을 정리했습니다. 스크롤 컨테이너와 자식 요소에 필요한 속성을 설정해 자연스러운 스냅 동작을 구현했습니다.
#CSS#web
3000
!프론트엔드 개발자의 next.js 개발기
!프론트엔드 개발자의 next.js 개발기
Next.js와 MUI로 프론트엔드를 개발한 경험과 시행착오를 정리한 글입니다. SSR, API Routes 활용과 컴포넌트 분리의 중요성을 함께 소개했습니다.
#Next.js#React
3700
섬세한 ISFP의 코드 가독성 개선 경험 / if(kakao)2022
정확한 명명과 시각적 코드 구조화를 통해 유지보수성과 협업 가독성을 높인 사례를 소개했습니다. 표·목차·용어·각주 형태의 비유로 조건문과 로그 처리 코드를 개선했습니다.
#JavaScript#CSS
000