이상민 블로그 이상민 블로그

개요네이티브 앱에 WebView 형태로 연동되는 프로젝트를 진행하면서 버전 관리 자동화의 필요성을 느꼈습니다.테스트 브랜치 기준으로 QA 환경을 운영하는 상황에서, 브라우저 캐시등의 문제로 인해 배포가 실제로 적용됐는지를 파악하기 어려운 상황이 종종 발생했기 때문인데요.GitHub Actions 기반의 CI 환경을 활용해 '버전 자동 증분 및 QA 확인을 위한 워크플로우 구성'의 설계 과정을 적습니다. 개념에 대한 언급CI(Continuous Integration)는 '지속적 통합'의 줄임말.코드가 변경될 때마다 자동으로 빌드, 테스트, 배포 등을 수행해주는 일련의 자동화 프로세스를 말합니다. GitHub Actions는 깃허브 저장소에서 이벤트에 반응해 실행되는 자동화 작업 단위(액션) 를 정의할 수..

react hook form과 zod프론트엔드 개발에서 '폼'은 언제나 핵심적인 UI 컴포넌트 중 하나입니다.유효성 검사와 상태 관리를 현대적으로, 깔끔하게 해결해주는 도구 두 가지가 바로 React Hook Form과 Zod입니다. React Hook Form(이하 RHF)은 React에서 성능 중심의 폼 상태 관리를 가능하게 해주는 라이브러리입니다.주요 특징은 다음과 같습니다.- *Uncontrolled 컴포넌트 기반: 기본적으로 uncontrolled 방식(Form DOM API 중심)을 사용하여 리렌더링을 최소화.- *성능 최적화: 입력 필드의 개수가 많아져도 빠른 렌더링 속도를 유지.- 작은 번들 크기: react-hook-form의 적은 의존성.- 심플한 API: useForm, registe..

tabIndex란? 사용 이유는?tabIndex는 HTML 요소가 페이지 내에서 포커스 순서를 제어하는 데 사용되는 속성.이 속성은 요소의 포커스 가능성을 제어하고, 키보드 내비게이션의 순서를 정의하는 역할을 한다. 웹 접근성에 대한 기준을 정하는 W3C WCAG 2.1.2의 No Keyboard Trap 항목에서의 설명을 살펴보면웹 접근성의 핵심 원칙 중 하나로, 사용자가 키보드를 사용하여 웹 페이지의 특정 컴포넌트에 포커스를 이동시키는 것뿐만 아니라 그 컴포넌트에서 벗어나 포커스를 다른 곳으로 이동시킬 수 있어야 한다는 것을 말한다.이 원칙은 웹 페이지의 모든 요소가 사용자에게 명확하고 편리한 탐색을 제공해야 한다는 것을 강조한다.(표준 키나 방법으로 포커스를 이동시킬 수 없다면, 포커스를 이동시키는..

1. previous URL 필요 상황임의의 페이지에 대하여 접근하는 URI에 따라 다른 처리를 해야하는 경우가 존재할 수 있습니다.이러한 경우, 이전 페이지의 URL을 가져오는 방법과 동작원리에 대해 작성합니다. 2. 방법2.1. In JavaSciptdocument.referrer을 사용합니다. document.referrer는 현재 페이지로 이동하기 이전 페이지의 URL 주소를 문자열로 반환하는 JavaScript의 속성입니다.이전 페이지의 URL 주소가 없는 경우, 빈 문자열('')을 반환합니다. 이전 페이지의 URL은 HTTP 리퍼러 헤더(Referer 또는 Referrer)에 담겨서 현재 페이지로 전송되며,document.referrer 속성은 이 HTTP 리퍼러 헤더에서 이전 페이지의 UR..

1. json-server 란?json-server는 짧은 시간 내에 REST API를 구축할 수 있도록 해주는 JavaScript 라이브러리입니다. 단순 목데이터보다 우아한 사용성을 가지며, 후에 이루어지는 서버와의 API 통신 연결 시간을 단축시켜줄 수 있습니다.따라서 프로젝트 프로토타입의 제작이나, 소규모 프로젝트 제작 과정에서 유용하게 사용할 수 있습니다. 2. json-server 사용2.1 설치 및 시작하기npm install -g json-serveryarn -g add json-server그리고 진행하는 프로젝트 최상단에 db.json이라는 파일을 만들어 주시면 됩니다.관리되는 모든 data는 db.json 내에서만 관리됩니다. json-server --watch db.json --po..

1. SEO사람들은 모르는 것이 생기면 검색을 통해 답을 얻고 문제를 해결합니다.그러므로, 모든 비즈니스 웹 사이트 소유주들은 검색 과정에서 자신의 사이트가 찾기 쉬운 위치에 놓이길 원할 것입니다.방문자 수는 이내 수익과 직결되는 사항이기 때문입니다.SEO(Search Engin Optimization)는 웹 사이트가 검색엔진 상위에 노출될 수 있도록 최적화하는 과정을 말합니다. 본 글은 프로젝트 과정 중 SEO와 관련한 작업을 거치며 읽은 문서들과 경험한 내용을 정리한 글 입니다.사실 SEO를 이루는 데에는 기획을 포함하는 전반적인 관리가 필요합니다.그 중, FE 개발자 관점에서 SEO와 관련한 내용을 디테일하게 작성하려 노력했습니다.SEO를 이해하고 적용하는 과정에서 참고하기 좋은 글이 되었으면 좋겠..