개발 메모장 개발 메모장

분류 전체보기

• 결국 해내는 사람들의 원칙 - 앨런 피즈, 바바라 피즈

  서평 2024. 4. 5. 13:57

  인생에서 원하는 것을 얻는 사람은 드물다. 왜냐하면 대부분이 '무엇을' 이룰지보다 '어떻게' 이룰지에 초점을 맞추기 때문이다. "결국 해내는 사람들의 원칙"은 이러한 문제에 대한 통찰과 해결책을 제공한다. 이 책은 목표 설정과 달성에 대한 깊이 있는 접근 방식을 탐구하며, 진정한 성공을 위한 구체적인 전략을 제시한다. 1. 목표 설정의 중요성 이 책은 목표를 설정하는 과정이 단순히 원하는 것을 리스트업 하는 것 이상임을 강조한다. 목표는 우리의 망상 활성계(RAS)를 활성화시켜, 우리가 주목해야 할 정보를 선별하고, 긍정적인 결과로 이끄는 행동을 유도한다. 목표 설정은 성공의 첫걸음이며, 이 과정에서 우리의 내면과 뇌는 자연스럽게 해당 목표를 실현하는 방향으로 작동하기 시작한다. 2. 실천의 중요성과 구..

  Read More
• react-virtuoso를 사용한 렌더링 최적화

  React 2024. 3. 30. 20:04

  React-Virtuoso란? React-Virtuoso는 React 애플리케이션을 위한 최첨단 가상 리스트 라이브러리입니다. 가상 스크롤링을 사용하여 대규모 데이터 세트를 효율적으로 렌더링 하고, 사용자 경험을 향상하며, 애플리케이션의 성능을 최적화합니다. React-Virtuoso는 동적 높이, 그룹화, 맨 위로 스크롤, 무한 로딩 등 고급 기능을 지원하여 개발자가 복잡한 목록 및 테이블을 쉽게 구현할 수 있게 해 줍니다. React-Virtuoso와 React-Window 및 React-Virtualized 비교 장점 동적 높이 지원: React-Virtuoso는 항목의 높이가 동적으로 변할 수 있음을 자동으로 감지하고 최적화합니다. 이는 React-Window와 비교했을 때 두드러진 차이점이며, ..

  Read More
• 대화의 정석 - 정흥수(흥버튼)

  서평 2024. 3. 22. 12:47

  대화의 정석은 사람들 사이의 의사소통 기술을 향상하는 방법을 제공하는 책입니다. 저자 정흥수는 대화의 중요성과 이를 통한 관계 개선 방법에 대해 심도 깊게 탐구합니다. 이 책은 다음과 같은 핵심 포인트를 다룹니다. 관심의 중요성: 진정한 대화는 상대방에 대한 진실된 관심에서 시작됩니다. 사람들은 자신의 이야기를 하길 원하며, 이를 통해 공감대를 형성할 수 있습니다. 적절한 질문: 상대방에게 관심을 보이는 것이 대화를 유지하는 열쇠입니다. 감정에 초점을 맞추고 상대방의 생각과 느낌에 귀 기울이는 질문을 통해 대화를 더 깊고 의미 있게 만듭니다. 경청의 중요성: 자신만의 경험과 생각을 공유하는 것도 중요하지만, 상대방의 말에 귀를 기울이고 이를 존중하는 태도가 더욱 중요합니다. 경청은 관계를 강화하고 상호 ..

  Read More
• vh 버그 해결 방법(feat. safari)

  Tip 2024. 3. 19. 13:45

  웹 디자인의 세계에서 요소의 크기와 크기 조정은 웹 사이트가 다양한 장치에서 반응하고 시각적으로 매력적 이도록 하는 데 중추적인 역할을 합니다. 반응형 디자인에서 중요한 역할을 하는 두 가지 측정 단위는 vh(뷰포트 높이)와 vw(뷰포트 너비)입니다. 이러한 단위는 디스플레이 장치에서 웹 페이지의 표시 영역인 뷰포트의 크기에 따라 조정되는 동적입니다. 하지만 언제나 그렇듯이 모바일 safari에서 문제가 있습니다. 요소의 높이를 100vh로 설정하면 브라우저의 vh 계산에서는 주소 표시줄과 같이 동적으로 크기 조정이 가능한 UI 요소를 고려하지 않습니다. 결과적으로 vh로 설정된 높이가 실제 표시되는 뷰포트 높이를 초과하는 콘텐츠 오버플로가 발생할 수 있습니다. 1. 동적 vh 계산을 위한 JavaScr..

  Read More
• px vs rem

  CSS 2024. 3. 1. 12:24

  웹 개발의 끊임없이 변화하는 환경에서 스타일링을 위해 px와 rem 중 어느 것을 사용할지 선택하는 것은 웹사이트의 접근성과 반응성에 큰 영향을 미칠 수 있습니다. 1. px와 rem은 무엇인가요? px: px는 디지털 디스플레이에서 단일 광점을 나타내며, 디지털 그래픽에서 기본 측정 단위입니다. 절대 단위로, 설정된 정확한 크기로 표시됩니다, 사용자의 화면 해상도나 크기에 관계없이 말이죠. rem: rem 단위는 루트 요소()의 글꼴 크기에 상대적입니다. 루트 요소의 글꼴 크기가 16px(일반적인 기본값)이라면, 1 rem은 16px와 같습니다. 이를 통해 다양한 장치에서 확장 가능하고 접근 가능한 디자인을 가능하게 합니다. 2. 언제 px 또는 rem을 선택해야 할까 2.1 px이 더 나은 경우는? ..

  Read More
• 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