개발 메모장 개발 메모장

분류 전체보기

• Webview를 위한 핀치 줌(pinch zoom) 구현하기

  Tip 2024. 2. 24. 12:53

  핀치 줌은 모바일 웹 또는 앱에서 자주 사용되는 기능 중 하나입니다. 사용자는 두 손가락을 화면에 대고 벌리거나 모으는 동작을 통해 화면을 확대하거나 축소할 수 있습니다. 이러한 인터랙션은 보다 세밀한 화면 조작을 가능하게 하며, 사용자 경험을 크게 향상합니다. 해당 기능은 일반적인 앱의 경우 구현하기 간단하지만 웹기반 웹뷰에서는 특정 영역(주로 이미지)을 확대 시 다른 부분들도 같이 확대되며 다른 페이지 이동 시 화면 비율이 이상해지는 등의 문제가 발생할 수 있습니다. 기본 핀치 줌 구현 핀치 줌 기능을 구현하기 위해서는 먼저 터치 이벤트를 적절히 처리할 수 있어야 합니다. 기본적인 구현 방법은 다음과 같습니다. 사용자가 화면을 터치하는 순간부터 터치가 끝나는 순간까지의 이벤트를 감지합니다. 두 손가락..

  Read More
• Cypress vs Playwright E2E 테스트 프레임워크 비교

  React 2024. 2. 13. 14:07

  웹 애플리케이션 테스팅은 개발 과정에서 중요한 부분입니다. Cypress와 Playwright는 모두 자동화된 브라우저 테스팅을 위한 현대적인 프레임워크입니다. 이 글에서는 Cypress와 Playwright를 비교하고, 어느 상황에서 각각을 사용하는 것이 더 적합한지 비교해 보겠습니다. Cypress Cypress는 개발자와 QA 엔지니어 사이에서 인기 있는 엔드투엔드 테스팅 프레임워크입니다. 사용의 용이성과 설정의 단순함으로 많은 사랑을 받고 있습니다. 장점 쉬운 설치 및 설정: Cypress는 설정이 매우 간단하며, 사용하기 쉽습니다. 실시간 리로딩: 테스트 코드를 변경하면 자동으로 테스트가 재실행됩니다. 디버깅 용이: 실패한 테스트에 대해 자세한 오류 로그와 스크린샷, 비디오 녹화 기능을 제공합니..

  Read More
• 고급 React Hooks 사용을 위한 팁과 요령

  React 2024. 2. 5. 13:36

  React Hooks는 단순히 상태와 생명주기 메서드를 함수형 컴포넌트로 가져오는 것 이상의 강력한 기능을 제공합니다. 여기서는 지난 편에 이어 useCallback, useMemo, useReducer를 더 효과적으로 사용하기 위한 실용적인 예제와 덜 알려진 방법들을 공유하고자 합니다. 1. useCallback과 useMemo, useReducer를 지혜롭게 사용하기 1.1 useCallback 예제: 이벤트 핸들러 최적화 import React, { useState, useCallback } from 'react'; function TodoList({ todos, toggleTodo }) { // useCallback을 사용하여 불필요한 렌더링 방지 const toggle = useCallback(..

  Read More
• useState와 useEffect를 넘어선 고급 React Hooks

  React 2024. 1. 29. 14:11

  React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다. useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다. 1. useCallback useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다. 특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다. 큰 리스트나 테이블의 성능 최적화. 자식 컴포넌트의 불필요한 렌더링 방지. const memoizedCallback = useCallback( () => { /..

  Read More
• Git 기초 마스터하기 - 5편 Git을 활용한 최대 협업 효율성 활용하기

  Git 2024. 1. 22. 13:49

  Git을 활용하여 협업의 효율성을 극대화하는 방법에 대해 다루겠습니다. 현대의 개발 환경에서는 팀워크와 효율적인 협업이 중요합니다. 이번 글에서는 Git의 기능을 활용하여 팀 내에서의 협업을 개선하는 여러 전략을 살펴보겠습니다. 1. 효과적인 브랜치 관리 1.1 브랜치 전략 선택 Gitflow, 피처 브랜치, 포킹 워크플로우 중에서 프로젝트에 적합한 전략을 선택합니다. 1.2 브랜치 규칙 설정 명확한 브랜치 명명 규칙을 설정하여 협업 시 혼란을 줄입니다. 2. Pull Request와 코드 리뷰 2.1 Pull Request의 중요성 코드 통합 전에 동료의 검토를 받는 과정입니다. 2.2 코드 리뷰 문화 구축 팀원 간의 상호 검토를 통해 코드 품질을 높이고, 지식 공유를 촉진합니다. 3. 협업을 위한 G..

  Read More
• Git 기초 마스터하기 - 4편 Git log로 프로젝트 히스토리 분석

  Git 2024. 1. 15. 15:42

  프로젝트의 히스토리를 효과적으로 탐색하고 분석하는 방법에 대해 알아보겠습니다. 1. Git log 기초 최근 커밋 목록을 보기 위해 기본적인 git log 명령어로 시작합니다. 그리고 출력 커스터마이징이 하기 위해서는 아래와 같은 플래그를 사용하여 로그 출력을 커스터마이징 합니다. --pretty=format:"%h - %an, %ar : %s" 2. 고급 로그 필터 2.1 시간 기반 필터 --since, --until, --after를 사용하여 날짜별로 커밋을 필터링합니다. 2.2 작성자와 커미터 필터 --author="Name"을 사용하여 작성자별로, --committer="Name"을 사용하여 커미터별로 필터링합니다. 3. 브랜치와 병합 시각화하기 3.1 그래픽 로그 --graph 플래그는 브랜치와..

  Read More
• Git 기초 마스터하기 - 3편 Alias와 Hook으로 워크플로우 최적화하기

  Git 2024. 1. 8. 15:34

  이번 편에서는 Alias와 Hook을 사용하여 Git 워크플로우를 최적화하는 방법을 알아봅시다. 위 기능들은 반복적인 작업을 자동화하고 시간을 절약해 주어, 개발 프로세스를 더 효율적이고 간소화된 방식으로 만들어 줍니다. 1. Git Aliases Git에서 Alias는 자주 사용하는 명령어에 대한 사용자 정의 단축키를 만들 수 있게 해 줍니다. 생성하는 방법은 Git 설정 파일에서 간단히 설정할 수 있습니다. git config --global alias.co checkout git config --global alias.br branch git config --global alias.ci commit 이제 git checkout대신 간단하게 git co를 사용할 수 있습니다. 2. Automating..

  Read More
• Git 기초 마스터하기 - 2편 효과적인 병합 기법과 충돌 해결

  Git 2024. 1. 2. 16:15

  효과적인 병합은 건강한 코드베이스를 유지하는 데 중요하며, 충돌을 해결하는 방법을 이해하는 것은 모든 Git 사용자에게 필수적입니다. 이 글은 고급 병합 기술과 전문가처럼 충돌을 처리하는 방법을 안내합니다. Git 병합 이해하기 병합은 한 브랜치의 변경 사항을 다른 브랜치에 통합하는 과정입니다. 협업 환경에서 흔히 발생하지만, 충돌을 일으킬 수도 있습니다. 1. 병합 전략 1.1 Fast-Forward Merge 병합되는 브랜치에 다른 커밋이 없을 때 발생합니다. git checkout main git merge feature-branch 1.2 Three-Way Merge 두 브랜치 모두에서 다른 커밋이 있을 때 사용됩니다. git merge feature-branch 2. 병합 충돌 처리하기 2.1 ..

  Read More