개발 메모장 개발 메모장

Tip

• 웹 접근성 개선을 위한 가이드

  Tip 2024. 6. 21. 13:25

  웹 접근성은 장애를 가진 사람들이 웹 사이트를 쉽게 사용할 수 있도록 보장합니다.여기에는 시각, 청각, 운동 및 인지 장애가 있는 사람들이 포함됩니다.윤리적 책임을 넘어, 웹 접근성은 법적 요구 사항을 충족하고 비즈니스 이점을 제공합니다.1. 웹 접근성의 중요성웹 접근성은 윤리적 이유뿐만 아니라 법적 요구 사항을 충족하고 비즈니스 기회를 확장하는 데도 중요합니다.예를 들어, 미국의 ADA(Americans with Disabilities Act)는 웹 접근성을 규제합니다.2. 웹 접근성의 주요 원칙1) 인식 가능성(Perceivable)정보는 사용자가 인식할 수 있는 방식으로 제공되어야 합니다. 예를 들어, 시각 장애인을 위해 이미지나 비디오에 텍스트 대체 설명을 제공합니다.2) 운영 가능성(Operab..

  Read More
• GraphQL vs REST API

  Tip 2024. 6. 11. 14:09

  웹 개발에서 데이터를 주고받는 방식으로 GraphQL과 REST API가 널리 사용됩니다.두 기술 모두 클라이언트와 서버 간의 효율적인 데이터 통신을 목표로 하지만, 접근 방식과 사용 사례에서 차이가 있습니다.1. REST APIREST(Representational State Transfer)는 전통적인 아키텍처 스타일로, HTTP 요청을 통해 자원을 CRUD(Create, Read, Update, Delete) 방식으로 관리합니다.장점단순성: HTTP 프로토콜을 기반으로 하여 이해하기 쉽고 사용이 간편합니다.캐싱: HTTP의 기본 캐싱 메커니즘을 활용하여 성능을 향상할 수 있습니다.단점Over-fetching 및 Under-fetching: 필요한 데이터보다 많은 데이터를 가져오거나, 필요한 데이터를..

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

  Tip 2024. 3. 19. 13:45

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

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

  Tip 2024. 2. 24. 12:53

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

  Read More
• KeystoneJS로 간단하게 Admin페이지와 Headless CMS 만들기

  Tip 2023. 9. 6. 18:09

  KeystoneJS는 GraphQL을 기반으로 하는 CMS(Content Management System) 프레임워크입니다. React, Node.js, GraphQL을 기반으로 하며, GraphQL API를 통해 데이터를 관리하고, 웹사이트와 모바일 앱을 개발할 수 있습니다. 1. KeystoneJS의 주요 특징 GraphQL 기반의 API: KeystoneJS는 GraphQL을 기반으로 하는 API를 제공합니다. GraphQL은 구조화된 데이터를 효율적으로 조회할 수 있는 API 표준입니다. React 기반의 UI: KeystoneJS는 React를 기반으로 하는 UI를 제공합니다. React는 빠르고 유연한 UI 프레임워크입니다. Node.js 기반의 백엔드: KeystoneJS는 Node.js를 ..

  Read More
• Next.js에서 사용하기 좋은 모니터링 툴 3가지

  Tip 2023. 8. 10. 18:05

  Checkly, Axiom, Sentry는 웹 프로젝트를 개발하고 유지 관리하는 데 도움이 되는 툴이다. 모두 무료로 사용할 수 있으며, 유료 플랜을 통해 더 많은 기능을 사용할 수 있다. Checkly Checkly는 성능을 모니터링하는 도구다. Checkly는 URL을 지정해 성능 지표를 그래프로 표시하고, 모니터링할 요청의 빈도와 양을 설정할 수 있으며, 성능 저하를 알림으로 보낸다. Checkly의 주요 기능 웹 애플리케이션의 성능 지표 모니터링 성능 저하 알림 API 테스트 웹 애플리케이션의 성능 테스트 Axiom Axiom은 API를 테스트하는 도구다. Axiom은 API에 요청을 보내고, API의 응답을 검증할 수 있고, API 테스트를 자동화할 수 있다. Axiom의 주요 기능 웹 애플리케..

  Read More
• JavaScript에서 바로 사용하는 Tip 4가지

  Tip 2023. 8. 1. 15:20

  1. Includes를 사용해 || 대체하기. ||는 JS를 활용한 개발을 하다 보면 정말 많이 사용하게 되는 없어서는 안 될 중요한 요소이다. 하지만 많은 것을 비교하는 상황이 된다면 오히려 코드의 가독성을 해치는 요소가 된다. 그럴 때 이 방법을 사용한다면 조금 더 가독성 좋게 사용할 수 있다. // ...other codes if ( isFirstLoading || isSecondLoading || isThirdLoading || isFourthLoading || isFifthLoading ) return 로딩 중... ; if ( [ isFirstLoading, isSecondLoading, isThirdLoading, isFourthLoading, isFifthLoading, ].includes..

  Read More
• IOS Safari WebView 화면 확대 막기

  Tip 2023. 2. 9. 15:08

  IOS10 이하 버전에서는 간단하게 user-scalble를 꺼주는 것 만으로 확대를 막을 수 있었습니다. 하지만 이후 버전부터는 해당 내용으로는 막아지지 않습니다. 이제 적용할 수 있는 방법은 css에서 확대하는 동작 자체를 막아주는 겁니다. touch-action: pan-y; 가로 터치를 막아주어 화면 확대를 못하게 막아주는 방법입니다. 이제 사용자 임의로 확대 축소를 할 수 없기 때문에 모든 게 끝이라고 생각되겠지만 또 변수가 있습니다. 사용자가 설정한 최소 폰트 이하(default 16px)의 input, select를 선택 시 자동으로 확대되는 문제가 있습니다. 이 문제의 경우 input, select의 font-size를 무조건 16px 이상으로 설정하면 되지만 사용자가 임의로 최소 폰트 크..

  Read More