티몬

RSS

게시글: 153
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
[알쓸신팁-부록] Javascript 성능 저하 방지법
본 글은 JavaScript 성능 저하를 방지하기 위한 다양한 팁을 제공합니다. 주요 내용으로는 불필요한 렌더링을 줄이기 위한 React의 useCallback, useMemo 활용법, 이벤트 핸들러 최적화, 메모리 누수 방지를 위한 이벤트 리스너 해제, Web Workers를 활용한 백그라운드 작업 처리, 그리고 브라우저 렌더링 과정을 이해하고 최적화하는 방법 등을 다룹니다. 또한, 코드 스플리팅, 번들링 최적화, 이미지 최적화 등 전반적인 웹 성능 개선 전략도 함께 소개하며, 개발자가 JavaScript 애플리케이션의 성능을 효과적으로 관리하고 사용자 경험을 향상시킬 수 있도록 돕는 실질적인 가이드라인을 제시합니다.
JavaScriptPerformance Optimization웹 성능
티몬·2017년 8월 11일
Frontend
[알쓸신팁-부록] Javascript 성능 저하 방지법
본 글은 JavaScript 성능 저하의 주요 원인을 분석하고, 이를 방지하기 위한 실질적인 팁을 제공합니다. 특히, 불필요한 렌더링을 줄이는 방법, 메모리 누수를 방지하는 기법, 효율적인 DOM 조작 방법 등을 다룹니다. 웹 성능 최적화는 사용자 경험 향상과 직결되므로, 개발자는 이러한 성능 저하 요인을 인지하고 적극적으로 개선하려는 노력이 필요합니다. 본 글에서 제시하는 다양한 기법들을 통해 더욱 빠르고 안정적인 웹 애플리케이션을 구축하는 데 기여하고자 합니다.
JavascriptPerformance Optimization웹 성능
티몬·2017년 8월 11일
Frontend
[알쓸신팁-부록] Javascript 성능 저하 방지법
본 글은 Javascript 성능 저하의 주요 원인과 이를 방지하기 위한 실질적인 방법들을 제시합니다. 특히, 무분별한 DOM 조작, 비효율적인 이벤트 핸들링, 메모리 누수 발생 가능성 등을 지적하며, 각 문제에 대한 구체적인 해결책을 제공합니다. 예를 들어, DOM 조작을 최소화하는 방법, 이벤트 위임 활용, 불필요한 참조 제거를 통한 메모리 관리 등을 설명합니다. 또한, 브라우저 렌더링 과정에서의 병목 현상을 이해하고 이를 개선하기 위한 기법들을 소개합니다. 궁극적으로 개발자가 작성하는 Javascript 코드의 효율성을 높여 사용자 경험을 향상시키는 것을 목표로 합니다.
JavascriptPerformance Optimization웹 성능
티몬·2017년 8월 10일
Frontend
[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!
이 글은 서버 개발자를 대상으로 프론트엔드 개발자가 알아두면 유용할 만한 팁들을 소개합니다. 특히 웹 성능 최적화와 브라우저 동작 방식에 대한 이해를 돕는 내용을 다룹니다. HTTP 캐싱 전략, 브라우저 렌더링 과정, 이미지 최적화 기법 등을 설명하며, 서버 개발자가 프론트엔드 관점에서 고려해야 할 사항들을 제시합니다. 이를 통해 서버 개발자는 프론트엔드 개발자와의 협업을 더욱 원활하게 하고, 전반적인 서비스 성능을 향상시키는 데 기여할 수 있습니다. 궁극적으로는 사용자 경험 개선으로 이어질 수 있는 실질적인 정보들을 제공합니다.
서버 개발자Frontend웹 성능
티몬·2017년 8월 10일
Frontend
[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!
이 글은 서버 개발자가 프론트엔드 개발에 대한 이해를 높이고 실무에 적용할 수 있는 유용한 팁들을 공유합니다. 프론트엔드 개발의 기본 개념부터 시작하여, 웹 성능 최적화, 사용자 경험 개선, 그리고 최신 프론트엔드 기술 트렌드까지 폭넓게 다룹니다. 특히 서버 개발자의 관점에서 프론트엔드 개발 시 고려해야 할 사항들을 중점적으로 설명하며, 이를 통해 서버 개발자가 프론트엔드 개발자와의 협업을 더욱 원활하게 하고, 전체 시스템의 완성도를 높이는 데 기여할 수 있도록 돕는 것을 목표로 합니다. 궁극적으로는 풀스택 개발 역량을 강화하고 더 나은 서비스를 만드는 데 필요한 실질적인 인사이트를 제공합니다.
서버 개발자Frontend팁
티몬·2017년 8월 10일
Frontend
[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!
이 글은 서버 개발자가 프론트엔드 개발에 대한 기본적인 이해를 높여 협업을 원활하게 하고, 더 나은 서비스를 만드는 데 도움을 주기 위한 '알쓸신팁' 시리즈의 첫 번째 글입니다. 프론트엔드 개발의 핵심 개념과 서버 개발자가 알아두면 유용한 정보들을 다룹니다. 특히, 브라우저 렌더링 과정, 웹 성능 최적화 기법, 그리고 프론트엔드 개발 시 고려해야 할 사항들에 초점을 맞춥니다. 서버 개발자가 프론트엔드 개발자의 입장을 이해하고, 개발 과정에서 발생하는 문제들을 함께 해결해나가기 위한 실질적인 팁들을 제공하여 생산성 향상과 팀워크 증진에 기여하고자 합니다.
서버 개발자FrontendWeb Development
티몬·2017년 8월 10일
Frontend
티몬 안드로이드 앱 RxAndroid 적용 사례
티몬 안드로이드 앱에서 RxAndroid를 적용한 사례를 공유합니다. RxAndroid는 RxJava를 안드로이드에 최적화한 라이브러리로, 비동기 이벤트 스트림 처리를 통해 복잡한 비동기 로직을 간결하고 선언적으로 작성할 수 있게 돕습니다. 특히 네트워크 요청, UI 이벤트 처리, 데이터 변경 감지 등 다양한 상황에서 유용하게 활용될 수 있습니다. 본 글에서는 RxAndroid 도입 배경, 적용 과정에서의 주요 고려사항 및 해결했던 문제점들을 상세히 설명하며, 이를 통해 얻을 수 있는 성능 개선 및 코드 가독성 향상 효과를 강조합니다. RxAndroid를 통해 안드로이드 앱 개발의 생산성을 높이고 유지보수성을 개선하는 방법을 배울 수 있습니다.
RxAndroidAndroidReactive Programming
티몬·2017년 6월 14일
Frontend
티몬 안드로이드 앱 RxAndroid 적용 사례
티몬 안드로이드 앱에서 RxAndroid를 적용한 사례를 공유합니다. RxAndroid는 RxJava를 안드로이드에 최적화한 라이브러리로, 비동기 스트림 처리를 통해 복잡한 콜백 구조를 개선하고 코드의 가독성과 유지보수성을 높이는 데 기여했습니다. 특히 네트워크 요청, UI 이벤트 처리 등에서 발생하던 콜백 지옥 문제를 효과적으로 해결했으며, 데이터 흐름을 선언적으로 관리할 수 있게 되었습니다. 적용 과정에서 발생했던 몇 가지 어려움과 이를 극복한 경험을 바탕으로, RxAndroid가 안드로이드 개발 생산성 향상에 어떻게 도움이 되는지 설명합니다. RxJava의 기본 개념과 함께 안드로이드 환경에서의 실제 적용 방안을 제시하며, 비동기 프로그래밍의 효율성을 극대화하는 방법을 탐구합니다.
RxAndroidAndroidReactive Programming
티몬·2017년 6월 14일
Frontend
티몬 안드로이드 앱 RxAndroid 적용 사례
티몬 안드로이드 앱에서 RxAndroid를 적용한 사례를 공유합니다. RxAndroid는 ReactiveX 라이브러리의 안드로이드 버전으로, 비동기 프로그래밍을 더욱 쉽고 효율적으로 관리할 수 있게 해줍니다. 복잡한 비동기 로직을 스트림 형태로 처리하여 가독성을 높이고, 콜백 지옥 문제를 해결하는 데 중점을 두었습니다. 특히 네트워크 요청, UI 업데이트 등 다양한 상황에서 RxAndroid를 활용하여 코드의 유지보수성과 안정성을 향상시킨 경험을 설명합니다. RxJava의 기본 개념과 함께 실제 적용 과정에서 겪었던 어려움과 해결 방안을 제시하며, 안드로이드 개발자들에게 RxAndroid 도입을 고려해볼 만한 가치가 있음을 강조합니다.
RxAndroidReactiveXAndroid
티몬·2017년 6월 14일
Frontend
자바스크립트의 비동기 처리과정
이 글은 자바스크립트의 비동기 처리 과정을 이벤트 루프, 콜 스택, 태스크 큐, 웹 API를 중심으로 설명합니다. 자바스크립트는 싱글 스레드 언어이지만, 비동기 처리를 통해 여러 작업을 동시에 수행하는 것처럼 보이게 합니다. 이벤트 루프는 콜 스택이 비어있을 때 태스크 큐에 있는 콜백 함수를 콜 스택으로 옮겨 실행하는 역할을 합니다. setTimeout, DOM 이벤트, Promise 등이 비동기 작업의 예시이며, 이러한 메커니즘을 이해하는 것은 효율적인 자바스크립트 코드 작성에 필수적입니다. 특히, 비동기 작업의 순서와 실행 방식을 정확히 파악하는 것이 중요합니다.
JavaScript비동기 처리이벤트 루프
티몬·2017년 2월 16일
Frontend
자바스크립트의 비동기 처리과정
자바스크립트의 비동기 처리 과정을 이벤트 루프, 콜백 큐, 마이크로태스크 큐를 중심으로 설명합니다. 자바스크립트는 싱글 스레드 언어이지만, 이벤트 루프 메커니즘을 통해 비동기 작업을 효율적으로 처리합니다. 비동기 함수 호출 시 콜백 함수는 콜백 큐에 쌓이고, 이벤트 루프는 콜백 큐를 주기적으로 확인하여 실행할 콜백 함수가 있으면 호출 스택으로 옮겨 실행합니다. 또한, Promise와 같은 마이크로태스크는 콜백 큐보다 우선적으로 처리되어 비동기 작업의 응답성을 높이는 데 기여합니다. 이를 통해 자바스크립트 엔진은 UI 렌더링과 같은 동기 작업의 블로킹을 최소화하면서도 다양한 비동기 작업을 원활하게 수행할 수 있습니다.
JavaScript비동기 처리이벤트 루프
티몬·2017년 2월 15일
Frontend
응답없는 페이지가 되지 않게 하는 법 (feat. setTimeout)
이 글은 웹 페이지의 응답성을 개선하기 위한 방법으로 `setTimeout`을 활용하는 방법을 소개합니다. `setTimeout`은 특정 시간 후에 함수를 실행하도록 예약하는 JavaScript의 내장 함수로, 이를 통해 무거운 작업을 백그라운드에서 처리하거나 UI 업데이트를 지연시켜 페이지가 멈추는 현상을 방지할 수 있습니다. 특히, `setTimeout`을 사용하여 긴 작업을 여러 작은 단위로 분할하여 실행하면 브라우저의 메인 스레드 부담을 줄여 사용자가 페이지와 상호작용하는 동안에도 부드러운 경험을 제공할 수 있습니다. 이를 통해 '응답 없는 페이지' 문제를 효과적으로 해결하고 사용자 경험을 향상시키는 방법을 구체적인 코드 예시와 함께 설명합니다.
setTimeout웹 성능응답성
티몬·2017년 2월 6일
Frontend
응답없는 페이지가 되지 않게 하는 법 (feat. setTimeout)
이 글은 웹 페이지의 응답성 문제를 해결하기 위한 방법으로 `setTimeout`을 활용하는 방법을 소개합니다. 페이지 로딩 중 또는 특정 작업 수행 중에 발생할 수 있는 '응답 없음' 현상은 사용자 경험을 크게 저해합니다. `setTimeout`을 사용하면 긴 작업을 분할하여 브라우저의 메인 스레드를 차단하지 않고 점진적으로 실행할 수 있습니다. 예를 들어, 복잡한 DOM 조작이나 데이터 처리와 같이 시간이 오래 걸리는 작업을 여러 개의 작은 단위로 나누어 `setTimeout`을 통해 비동기적으로 처리하면, 브라우저가 다른 이벤트(예: 사용자 입력)에 응답할 시간을 확보할 수 있습니다. 이를 통해 페이지가 멈추거나 느려지는 현상을 방지하고 사용자에게 부드러운 인터페이스를 제공할 수 있습니다. 글에서는 `setTimeout`을 이용한 실제 코드 예시와 함께, 이러한 기법이 어떻게 웹 성능을 개선하고 사용자 만족도를 높이는지에 대해 설명합니다.
setTimeout웹 성능응답성
티몬·2017년 2월 5일
Frontend
ES6, Webpack으로 트렌디한 웹 개발환경 만들기
이 글은 ES6와 Webpack을 활용하여 최신 트렌드에 맞는 웹 개발 환경을 구축하는 방법을 다룹니다. ES6의 새로운 문법들을 소개하고, 이를 효율적으로 사용하기 위한 번들러인 Webpack의 설정 및 활용법을 설명합니다. 특히, Babel과 같은 트랜스파일러를 연동하여 구형 브라우저에서도 ES6 코드가 동작하도록 하는 과정을 상세히 안내합니다. 또한, 개발 서버 설정, 코드 스플리팅, 코드 최적화 등 생산성을 높이는 Webpack의 다양한 기능을 소개하며, 이를 통해 개발자들이 더욱 빠르고 효율적으로 현대적인 웹 애플리케이션을 개발할 수 있도록 돕는 것을 목표로 합니다.
ES6WebpackJavaScript
티몬·2016년 8월 2일
Frontend
모바일웹 터치 제스쳐 적용기 - [2] Hammer.js로 쉽게 구현하기
이 글은 모바일 웹 환경에서 터치 제스쳐를 구현하는 방법에 대한 두 번째 이야기로, Hammer.js 라이브러리를 활용하여 이를 쉽게 구현하는 과정을 다룹니다. Hammer.js는 다양한 터치 이벤트를 추상화하여 개발자가 복잡한 제스쳐 로직을 직접 구현할 필요 없이 편리하게 사용할 수 있도록 돕습니다. 글에서는 Hammer.js의 기본적인 사용법과 함께, 드래그, 스와이프, 핀치 등 자주 사용되는 제스쳐들을 어떻게 적용할 수 있는지 구체적인 코드 예시와 함께 설명합니다. 이를 통해 모바일 웹 애플리케이션의 사용자 경험(UX)을 향상시키는 데 기여할 수 있음을 보여줍니다. 특히, 복잡한 터치 이벤트를 효과적으로 처리해야 하는 프론트엔드 개발자에게 유용한 정보를 제공합니다.
모바일웹터치 제스쳐Hammer.js
티몬·2016년 4월 10일
Frontend
모바일웹 터치 제스쳐 적용기 - [1] 터치 제스쳐 이해하기
이 글은 모바일 웹 환경에서 터치 제스쳐를 적용하는 첫 번째 이야기로, 터치 제스쳐의 기본적인 이해를 돕는 데 초점을 맞춥니다. 모바일 웹 애플리케이션에서 사용자 경험을 향상시키기 위해 필수적인 터치 이벤트(touchstart, touchmove, touchend)의 동작 방식과 각 이벤트에서 제공하는 정보(identifier, target, clientX/Y, pageX/Y 등)를 상세히 설명합니다. 또한, 여러 손가락을 사용하는 멀티터치 제스쳐를 구현하기 위한 기초 지식으로, 각 터치 포인트의 좌표와 이동 거리를 추적하는 방법론을 제시합니다. 이를 통해 개발자는 터치 제스쳐의 원리를 명확히 파악하고, 향후 복잡한 제스쳐 기능을 구현하기 위한 탄탄한 기반을 마련할 수 있습니다.
모바일웹터치 제스쳐이벤트 처리
티몬·2016년 4월 7일
Frontend
객체들의 연결고리, 자바스크립트 프로토타입 체이닝
이 글은 자바스크립트의 핵심 개념 중 하나인 프로토타입 체이닝에 대해 설명합니다. 프로토타입 체이닝은 자바스크립트 객체가 다른 객체로부터 속성과 메서드를 상속받는 메커니즘입니다. 각 객체는 자신의 프로토타입을 가리키는 내부 링크를 가지며, 특정 속성이나 메서드를 찾을 때 해당 객체에서 먼저 찾고, 없으면 프로토타입 체인을 따라 상위 프로토타입으로 이동하며 탐색합니다. 이 과정을 통해 자바스크립트는 객체 지향 프로그래밍의 유연성을 제공합니다. 글에서는 프로토타입 체이닝의 작동 방식과 이를 통해 객체 간의 연결고리가 어떻게 형성되는지, 그리고 상속이 어떻게 이루어지는지에 대한 깊이 있는 이해를 돕습니다. 이를 통해 개발자는 자바스크립트의 동작 원리를 더 잘 이해하고 효율적인 코드를 작성할 수 있습니다.
JavaScriptPrototypeChaining
티몬·2015년 11월 10일
Frontend
Grunt, 프론트엔드를 부탁해! [2]
이 글은 프론트엔드 개발에서 빌드 도구의 중요성을 강조하며, 특히 Grunt를 중심으로 그 활용법과 이점을 소개합니다. Grunt는 JavaScript 태스크 러너로서, 코드 압축, 컴파일, 테스트 실행 등 반복적인 작업을 자동화하여 개발 생산성을 크게 향상시킵니다. 글에서는 Grunt 설치 및 기본 설정 방법, 다양한 플러그인을 활용한 구체적인 자동화 예시를 제시합니다. 이를 통해 개발자는 수동으로 처리하던 번거로운 작업에서 벗어나 더욱 효율적으로 개발에 집중할 수 있습니다. Grunt는 프론트엔드 개발 워크플로우를 간소화하고 최적화하는 데 필수적인 도구임을 보여줍니다.
GruntFrontend빌드 도구
티몬·2015년 7월 29일
Frontend
Grunt, 프론트엔드를 부탁해! [1]
이 글은 프론트엔드 개발에서 빌드 도구의 중요성을 강조하며, 특히 Grunt를 중심으로 그 활용법과 장점을 소개합니다. Grunt는 JavaScript 태스크 자동화 도구로, 반복적인 개발 작업을 효율적으로 처리할 수 있게 돕습니다. 글에서는 Grunt 설치 및 설정 방법, 플러그인을 활용한 다양한 자동화 예시(예: 파일 압축, 코드 검사, 라이브 리로드)를 설명합니다. 이를 통해 개발자는 코드 작성에 더 집중할 수 있으며, 프로젝트의 품질과 생산성을 향상시킬 수 있습니다. Grunt는 프론트엔드 개발 워크플로우를 간소화하고 최적화하는 데 유용한 도구임을 보여줍니다.
GruntFrontend빌드 도구
티몬·2015년 7월 23일
Frontend
프론트와 UI서버를 같은 템플릿으로 관리하는 법, Handlebars.java
이 글은 프론트엔드와 UI 서버의 템플릿을 Handlebars.java를 사용하여 통합 관리하는 방법을 소개합니다. Handlebars.java는 Java 기반의 템플릿 엔진으로, HTML 템플릿을 동적으로 생성하는 데 유용합니다. 이를 통해 프론트엔드 개발과 UI 서버 개발에서 동일한 템플릿을 공유하고 관리함으로써 코드 중복을 줄이고 개발 효율성을 높일 수 있습니다. 특히, 프론트엔드에서 사용되는 템플릿 로직을 서버에서도 재사용할 수 있게 되어 일관성 있는 UI 개발이 가능해집니다. 글에서는 Handlebars.java의 기본적인 사용법과 함께, 이를 활용하여 프론트엔드와 UI 서버 간의 템플릿 관리 효율성을 높이는 구체적인 방안을 제시합니다.
Handlebars.java템플릿 엔진Frontend
티몬·2015년 6월 25일

티몬

[알쓸신팁-부록] Javascript 성능 저하 방지법

[알쓸신팁-부록] Javascript 성능 저하 방지법

[알쓸신팁-부록] Javascript 성능 저하 방지법

[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!

[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!

[알쓸신팁] 서버 개발자가 알아두면 쓸데 있는 신비한 Front팁!

티몬 안드로이드 앱 RxAndroid 적용 사례

티몬 안드로이드 앱 RxAndroid 적용 사례

티몬 안드로이드 앱 RxAndroid 적용 사례

자바스크립트의 비동기 처리과정

자바스크립트의 비동기 처리과정

응답없는 페이지가 되지 않게 하는 법 (feat. setTimeout)

응답없는 페이지가 되지 않게 하는 법 (feat. setTimeout)

ES6, Webpack으로 트렌디한 웹 개발환경 만들기

모바일웹 터치 제스쳐 적용기 - [2] Hammer.js로 쉽게 구현하기

모바일웹 터치 제스쳐 적용기 - [1] 터치 제스쳐 이해하기

객체들의 연결고리, 자바스크립트 프로토타입 체이닝

Grunt, 프론트엔드를 부탁해! [2]

Grunt, 프론트엔드를 부탁해! [1]

프론트와 UI서버를 같은 템플릿으로 관리하는 법, Handlebars.java