전체 글
-
웹 접근성concept/HTML, CSS, DOM 2025. 3. 13. 16:32
웹 접근성이란?모든 사용자가 웹사이트의 정보와 기능을 동등하게 이용할 수 있도록 보장하는 것ex. 장애를 가진 사용자, 노령 사용자, 기술적 제약을 가진 사용자 모두가 웹 사이트의 정보를 이용하는데 문제가 되지 않도록 제공법적 요구사항이자 윤리적 책임웹 접근성을 향상시킬 수 있는 방법HTML Semantic 마크업ARIA색상 대비와 텍스트 크기 조정키보드 접근성과 포커스 관리HTML Semantic 마크업Semantic Tag의미가 있는 태그라는 뜻개발자가 의미론적으로 의도한대로 브라우저가 식별할 수 있는 요소에 대해 표준화된 이름을 사용해 웹 사이트의 일관성 향상에 도움검색 최적화에 유리검색 엔진에 풍부하고 구조화된 데이터를 제공함으로서 매력적이고 유익한 검색 결과 노출이 가능웹 접근성에 유리키보드만으..
-
웹 뷰 찍먹하기 (feat. expo CLI)concept/React, Redux, RN 2025. 3. 10. 23:30
들어가기지난 해 12월, 솔로프리너 강연프로그래밍 좀비 350개의 개인 앱을 만들어 월급의 7배 수익을 달성한 방법 (일 100만원의 수익)왜 하필 앱이지?광고 수익구독 결제웹뷰 란?프레임워크에 내장된 웹 브라우저 컴포넌트로 뷰(View)의 형태로 앱에 임베딩하는 것App에서 웹브라우저를 이용해 화면을 보여주는 방식웹뷰를 사용하는 이유?웹 기반으로 구동되는 모듈을 앱에서 사용해야 할 때, 앱 전용 모듈을 다시 개발하는 것은 시간적으로 오래 걸리고 비효율적웹뷰의 단점UX 측면에서 반응성이 약하기 때문에 페이지를 이동하거나 새로고침했을 때, 깜빡이는 현상과 앱 사용간의 부드러움이 조금 떨어짐, UI 가 제한적Native API 를 직접 쓸 수 없어 기기와 직접적인 연동이 어렵다.ex. 카메라 직접 접근, 생..
-
2024 간단 회고자기계발 2025. 1. 1. 18:00
지금은 1월 1일 오전 9시올 한해의 시작으로 개발자로서의 2024년의 나에 대한 간단한 회고를 해 보고자 한다. 배웠던 것, 아쉬웠던 것은? 지금까지 개발자로서 일을 한지는 꽉 채워 2년 정도 되어가는데, 회사에서 개발한 프로덕트를 유저가 쓰게 되는 경험이 많지 않았다.그러다보니 자연스럽게 유저 피드백을 받을 수 있는 방법이 별로 없었다. 그 이유는 1. 유저가 많지 않은 서비스였다거나 2. 하다가 (혹은 다 했는데..) 비즈니스적 이유로 빠그라진 것들이 대부분이었기 때문 ㅠㅠ 그러다가 2024년 6월에 런칭한 웹 사이트가 처음으로 유저 사용이 있었던 사이트였다. 그것도 아주 많았던! GA 에 들어가보니 요 정도로 분석이 되고 있고, 지난 달만 해도 월 8.1천명의 사용자가 사용을 하고 있는 사이..
-
Intersection Observer 에서 onIntersect 안에 있는 함수가 useState 상태를 인식하지 못하는 이유와 해결법concept/React, Redux, RN 2024. 12. 26. 17:20
무한 스크롤을 구현하기 위해서 useRef와 Intersection Observer 를 활용해,화면 하단의 Ref 가 뷰포트에 나타나면 그 때 서버로 데이터를 더 요청하는 로직으로 구현했다. React, Next.js 프로젝트로 구현한다면 커스텀 훅으로 useObserver 를 만들어 두는 것이 첫번째 할 일. useObserver hook 만들기import { useEffect } from 'react'type UseObserverProps = { target: React.RefObject // 감지할 대상 onIntersect: IntersectionObserverCallback // 감지 시 실행할 callback 함수 root?: Element | null // 교차할 부모 요소 rootM..
-
Firebase 의 상위 버전이 나왔다고? Supabase 알아보고 세팅하기concept/DataBase 2024. 12. 4. 17:35
2년 전 쯤이었나..프론트엔드 개인 프로젝트를 해 보려고 서버리스 서비스인 파이어베이스를 활용했던 적이 있었다.웹 쪽 레퍼런스가 많지는 않았어서 힘들었지만 나름대로 만족했었던 툴. Firebase 는 비관계형 데이터베이스(nosql)로 제공이 되었었고,Supabse 는 PostgreSQL을 기반으로 관계형 데이터 베이스 구축이 가능하다는 점이 가장 큰 차이점이었는데조금 더 장단점을 살펴보자. Firebase 장점- Google의 강력한 생태계와 통합되어 있어 Google Cloud 서비스와 쉽게 연동됩니다.- 실시간 데이터베이스와 NoSQL 데이터베이스 기능이 뛰어나며, 인증, 호스팅, 클라우드 함수 등 풍부한 기능을 제공합니다.- 모바일 및 웹 앱 개발에 특화되어 있고, SDK가 매우 안정적입니다.- ..
-
Headless UI 가 핫하다는데.. Radix UI vs shadcn/ui 어떤 것을 사용할까?concept/HTML, CSS, DOM 2024. 11. 24. 14:28
To. 프론트엔드 팀.비즈니스 방향성 변동으로 기획이 늦어지고 있습니다.하지만 디자인 시스템은 미리 만들어 두셨으면 좋겠어요.그런데 아직 브랜드 컬러랑 방향성 아무것도 정해져 있지는 않은 상황이에요.디자인 없이 UI 디자인 시스템 구축을요..?......하지만 우리는 K-직장인월급을 받고 있다면 무엇이든 해내야만 하지그러던 중 요즘 핫하게 떠오르는 키워드가 머릿속을 스쳤다."Headless UI"Headless UI 란?스타일이 없는 대표적인 UI 컴포넌트 라이브러리Headless UI는 스타일이 입혀지지 않은 형태의 다양한 UI 컴포넌트들을 제공하는 라이브러리Headless UI는 대표적인 스타일링 라이브러리 중 하나인 Tailwind CSS와 함께 사용할 수 있도록 개발되었습니다. 참고로 Headle..
-
Presigned url로 s3에 이미지 업로드 하기카테고리 없음 2024. 11. 5. 23:22
배경 및 정의이미지 혹은 동영상 등의 멀티미디어 파일을 업로드하는 서비스를 구현하기 위해서 요즘에는 presigned url 방식을 많이 활용하고 있다. presigned url 이란?AWS에서 제공되는 기능으로 서버와 S3가 통신해서 생성한 미리 서명된 URL을 사용하여 다른 사람이 Amazon S3 버킷에 객체를 업로드하도록 허용할 수 있다. 미리 서명된 URL을 사용하면 상대방에게 AWS 보안 자격 증명이나 권한이 없어도 업로드할 수 있다.전통적인 S3 이미지 업로드 방식방법클라이언트에서 서버에게 업로드 할 파일 전달 (multipart/form-data)서버에서 파일 저장 경로를 생성하고 S3에 접근해 파일 저장저장된 S3 경로를 서버에서 클라이언트로 전달단점클라이언트에서 서버에게 용량이 큰 파일..
-
글또를 다시 시작하며자기계발 2024. 10. 10. 12:52
올 한 해는 정말 많은 일들로 가득 찼습니다. 모든 도전과 변화를 잘 헤쳐나온 나 자신에게 진심 어린 박수를 보내고 싶습니다. 하지만 동시에, 이런 바쁜 일상 속에서 스터디 동아리 활동에 충분한 시간과 노력을 쏟지 못했다는 점은 아쉬움으로 남습니다. 특히 글또 활동이 그중 하나였는데, 9기에 처음 참여하게 되었을 때의 그 열정과 기대를 충분히 실현시키지 못한 것 같아 아쉽습니다.그럼에도 불구하고, 10기에도 신청할 수 있었던 것은 정말 감사한 일입니다. (동아리 친구들 덕분!)글또를 9기에 이어 10기까지 하게 된 이유를 좀 더 자세히 나열해보면 다음과 같습니다:1. 11월부터 개발 공부를 다시 시작하기 지난 몇 개월간 정신없이 달려온 시간들이 얼추 마무리되고, 11월부터는 비교적 안정적인 일상을 ..