다음웹툰의 UX (New tab : Top) / if(kakao)2019
다음웹툰 앱의 메인 TOP 메뉴 UX와 디자인 철학을 소개합니다. 구현과 튜닝 과정, 다음웹툰의 NEXT 방향을 함께 다룹니다.
#UI/UX#mobile
100
프론트엔드 기술 블로그 최신 글
필터 0
리액트: 그것마저 결정해주마 / if(kakao)2019
React 개발 중 자주 마주치는 구현 방식과 기술 선택의 고민을 다룹니다. Hook 전환, SSR, Redux, TypeScript 도입 여부를 살펴봅니다.
#React#Redux
200
Webpack Dev Server를 이용한 개발 환경 구성 Part1
Webpack Dev Server를 이용한 개발 환경 구성 Part1
Webpack Dev Server로 프론트엔드 단독 개발 모드를 구성하는 방법을 설명했습니다. Axios와 stub 파일, before 훅을 활용해 백엔드 없이도 API 응답을 모사했습니다.
#Webpack#Webpack Dev Server
700
알람 서비스 - 파일럿 프로젝트
알람 서비스 - 파일럿 프로젝트
4주 파일럿 프로젝트로 알림 서비스를 구현한 경험을 정리했습니다. Vue.js, Spring Boot, SSE, Vuex 등을 활용한 구성과 시행착오를 공유했습니다.
#Vue.js#Spring Boot
300
타다 클라이언트 개발기
짧은 출시 일정에 맞춰 Android·iOS 통합 팀이 RIBs 기반의 모바일 앱을 구축했습니다. ProtoBuf 자동화와 공통 아키텍처로 개발 효율을 높이고 후속 개선 과제를 정리했습니다.
#Android#iOS
2400
(HTML/CSS) Vertical-Align(1) - Line Box
인라인·블록 요소의 수평 정렬과 달리 수직 정렬이 어려운 맥락을 짚었습니다. `vertical-align`의 동작 원리와 Line Box를 설명할 주제를 소개합니다.
#CSS#vertical-align
2600
개발 컨텐츠 공유 서비스 - 파일럿 프로젝트
개발 컨텐츠 공유 서비스 - 파일럿 프로젝트
6주 동안 개발 컨텐츠 공유 서비스를 만든 신입 개발자의 파일럿 프로젝트 경험을 정리한 글입니다. JPA, Vue.js, QueryDSL, 무한 스크롤과 랭킹 집계를 구현하며 설계와 일정 관리의 중요성을 배웠습니다.
#Java#Spring Boot
600
카페 형식 게시판 구현 - 파일럿 프로젝트
카페 형식 게시판 구현 - 파일럿 프로젝트
Spring Boot와 Vue.js로 카페 형식 게시판을 구현한 파일럿 프로젝트를 정리했습니다. Vuex, Spring Security, OAuth2로 상태 관리와 인증·권한 제어 구조를 다뤘습니다.
#Spring Boot#Vue.js
400
페이지 주소가 바뀌어도 자연스럽게 이어지는 애니메이션 만들기
GatsbyJS의 History API와 Link를 활용해 페이지 전환 중 실행 컨텍스트를 유지했습니다. react-transition-group과 전역 Layout으로 진입·퇴장 애니메이션을 구현했습니다.
#GatsbyJS#React
3100
쪼그라드는 웹페이지
다양한 모바일 화면의 디자인 버그를 줄이기 위해 vw 기반 선형 축소 방식을 적용했습니다. Sass mixin과 CSSO로 스타일 작성 및 미디어쿼리 최적화 방법을 정리했습니다.
#CSS#Sass
1700
HTML Canvas로 기가 픽셀 데이터 시각화하기
기가픽셀 병리 슬라이드의 AI 예측 결과를 Canvas 기반으로 시각화한 방식을 소개했습니다. Tissue 사전 렌더링과 Structure·Cell 공간 인덱싱으로 렌더링 성능을 확보했습니다.
#React#OpenSeadragon
3400
Context API가 Redux를 대체할 수 있을까요?
Context API와 Redux의 역할 및 상태 관리 방식의 차이를 비교했습니다. 고급 상태 추적·재현 기능이 없다면 Context API 활용을 권장합니다.
#React#Redux
1600
Google Fonts + 한국어 알아보기
Google Fonts가 한글 글리프를 분할하고 unicode-range로 필요한 파일만 내려받도록 최적화했습니다. 23종의 OFL 한글 폰트를 제공해 웹 타이포그래피 활용성을 높였습니다.
#Google Fonts#웹 폰트
1500
Redux가 필요하다는 것을 언제 알 수 있나요?
React 앱의 상태 흐름과 props 전달이 복잡해지는 시점의 Redux 도입 기준을 설명했습니다. 액션·리듀서·스토어 구조로 관심사를 분리하고 디버깅을 단순화합니다.
#React#Redux
3100