들어가며 얼마 전 사파리 브라우저에서 레이어 팝업 창을 닫을 때 바닥화면의 스크롤이 예상치 못하게 튕기는 현상을 발견하여 이게 무슨 일인가 싶어 원인 파악을 해봤습니다. 원인은 레이어 팝업이 닫힐 때 클릭했던 요소에 포커스를 옮겨주는 기능으로 인해 발행하였던 문제였는데요. 사파리 브라우저에서는 이 포커스가 클릭했던 요소가 아닌 부모의 요소에 포커스가 되고 있어 스크롤이 상단으로 튕겨지는 문제였는데요. 이 과정에서의 원인 파악과 문제를 해결한 내용에 대해 작성하였습니다. 포커스를 옮겨주는 기능이 꼭 필요한가? 우선 포커스를 클릭했던 요소에 옮겨주는 기능은 웹 접근성 및 사용자 경험 향상에 있어 중요한 요소입니다. 포커스를 옮겨줘야 하는 이유 또한 매우 명확하고 납득이 가능한데, 다음과 같습니다. 사용자 경..

들어가며 현재 업무가 블록체인 기술과 관련되어 있는데, 생각보다 블록체인 기술에 대해 아는 게 많이 없는 거 같아 개인적으로 공부를 시작하게 되었습니다. 블록체인 공부를 시작하다 보면 필연적으로 드는 의문이 있는데, 첫 번째가 블록체인이라는 기술이 정말 필요한가? 두 번째가 그래서 “미래가치가 있나?”였습니다. 그래서 이 의문을 해소하고자 들었던 강의 및 간단히 찾아보았던 내용들을 간단히 정리해 보았습니다. 블록체인? 블록체인은 비트코인 논문에서 처음 등장했다고 합니다. 그렇다 보니 블록체인 = 비트코인이라고 생각하는 분들도 많은 것 같습니다. 비트코인을 만들 때 블록체인이라는 기술이 필요해 만들어진 게 블록체인이라고 합니다. 그러니깐 비트코인이라는 탈중앙화된 화폐를 만들기 위해서는 탈중앙화된 장부가 필..

들어가며 최근 블로그 작업을 진행하며 알게된 NodeJS에서 HTML을 파싱하여 웹을 스크래핑 할수있는 NodeJS 모듈을 알게되었는데요 사용법 또한 쉽고 간단한 편이라 웹스크래핑을 해야할 작업이 생긴다면 상당히 요긴하게 쓰일것 같아 오늘 해당 모듈에 대해서 소개해 보려고 합니다. 사전준비 npm install cheerio // or yarn add cheerio npm install axios// or yarn add axios 우선 npm 또는 yarn 을 이용해 cheerio와 axios(axios는 편의상 같이 사용하였고 필수는X)를 설치해 줍니다. import * as cheerio from 'cheerio'; import axios from 'axios'; 그다음 두 모듈을 사용할곳에 imp..

들어가며 약관 자동화 코드 적용 부분을 보다 Resize Observer API라는 존재를 처음 알게 되었습니다. (약관 자동화 코드가 궁금하신 분은 링크 참고해 주세요). 이 API 또한 굉장히 유용할 것 같다고 생각되어 Intersection Observer API 연장선으로 WEB APIs인 Resize Observer API를 소개하려 합니다. Resize Observer API 란? Resize Observer API는 요소의 크기를 감시하는 API입니다. 예를 들면 보통 width가 100%인 div의 넓이를 화면이 리사이즈 될 때마다 알고 싶다면 어떻게 구하시나요? React 코드로 예시를 들어보면 필자는 글에서 소개하고 있는 API를 알기 전에는 아래와 같이 resize 이벤트를 통해서 구..

들어가며 React form API에서 가장 많이 사용하고 있는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 프로젝트 진행하면서 해당 라이브러리가 채택된 이유는 React Hook Form이 종속성이 없는 가벼운 라이브러리이고, 재 렌더링 횟수를 최소화하여 성능에 안정적이고 타입스크립트를 기본으로 제공해 작업 환경에 큰 어려움 없이 적용하기 좋아 선정하게 되었습니다. React-hook-form 시작하기 react-hook-form 설치는 자바스크립트 패키지 매니저인 npm을 이용하여 간편하게 설정이 가능합니다. npm install react-hook-form useForm Hook 이용하기 우리가 일반적으로 작업해야 하는 Form 요소 요건 사항은 아래와 같습니다. 입력 필수 ..

들어가며 자주 사용되지만 화면에 표현되는 것에 비해 손이 많이 가는 UI를 하나만 꼽아보라고 한다면 개인적으로 테이블을 꼽을 수 있을 거 같습니다. 최근 진행했던 한 프로젝트에도 어김없이 테이블 UI가 필요했는데요, 처음 계획은 작업을 쉽게 하기 위해 무료 라이선스의 패키지를 설치하려고 했으나 기획 상 요구되는 기능에 비해서 너무 무거운 것은 아닐까 하는 생각이 들었습니다. 그래서 마치 라이브러리처럼 사용할 수 있으면서 필요한 기능만 가진 테이블 컴포넌트를 직접 만들어보기로 했습니다. 사전 준비 먼저 기능 구현을 위해서 필요한 최소한의 기능을 정리해 보았습니다. 테이블 목록과 칼럼 sorting, 페이징 처리는 API 호출하고 결과를 바인딩 할 예정이어서 UI 적으로 풀어낼 기능만 구현하면 되었으므로 상..

들어가며 올해 XE 그룹에서는 사내 시스템 신규 구축 및 개선 관련한 몇 가지 내부 프로젝트를 진행하고 있습니다. 그중 하나인 사내 회의실 예약 시스템인 ‘The0’ 프로젝트의 PM을 맡아 진행하며 배우고 느낀 점, 진행 과정 등을 공유하고자 합니다. The0 프로젝트 pxd 회의실 예약 시스템이 만들어지기 전까지 사내에선 구글 캘린더를 사용하여 회의실을 예약해 왔습니다. 그동안 구글 캘린더를 회의실 예약관리 툴로 활용함에 있어 여러 가지 불편함을 느끼게 되었고, 이러한 불편함을 개선해 효율적으로 회의실들을 예약관리할 수 있는 플랫폼을 만들어보자 라는 목표로 ‘The0’ 프로젝트가 시작되었습니다. 프로젝트를 시작하기에 앞서 해당 프로젝트(플랫폼) 이름을 정하는 것 또한 중요하기에 팀원들의 다양한 아이디어..

들어가며 프론트 작업을 하다 보면 사용자에 대한 정보를 이용한 작업이나 확인 여부를 가지고 작업을 하는 경우가 필요한데 클라이언트가 서버를 통해 인증을 확인받는 방법들과 JSON Web Token(이하 JWT) 토큰 인증에 대해서 알아보려 합니다. 인증과 인가 인증과 인가는 각각 인증(Authentication) - 사용자의 신원을 검증하는 행위 ( 비밀번호, 일회용 핀, 인증 앱, 생체인식 등) 인가(Authorization) - 사용자에게 특정 리소스나 기능에 액세스할 수 있는 권한을 부여하는 프로세스 이며, 둘을 간단히 비교하면 다음과 같습니다. 비교인증(Authentication)인가(Authorization) 기능 자격 증명 확인 권한 허가/여부 진행방식 비밀번호, 생체인식, 핀, 앱 보안팀에서..

들어가며 타이포그래피를 더욱 풍부하게 해주는 font-feature-settings 속성에 대해서 알아보겠습니다. font-feature-settings 이 속성은 오픈 타입 글꼴의 고급 설정을 제어합니다. 기본적으로 font-variant의 속성과 값을 축약 형태로 연결하여 중첩 선언하여 사용할 수 있는 형태입니다. 자세한 내용은 font-variant 속성과 함께 알아보겠습니다. 참고로 당연한 얘기지만 각 속성들은 해당 글꼴에서 지원해야 사용할 수 있습니다. font-variant-ligatures ligature라는 글꼴 속성을 제어합니다. ligature란 합자 기능으로 두 개의 글자를 하나로 합쳐서 간결하게 표현하는 것을 말합니다. 문자를 이용하여 화살표를 표현할 때 ”-” 와 ”>“를 연달아 ..

들어가며 요즘 서비스를 만들 때 SEO도 당연히 생각하고 만들다 보니 robot, sitemap 파일 등록이 필수가 되었습니다. 그룹 내에서도 해당 부분 프로젝트 구축 시 누락되지 않게 체크할 수 있는 체크 리스트와 가이드를 만들어 놓고 작업을 하고 있는데요, 이번에 Next.js에서 자동으로 sitemap을 생성해 주는 패키지가 업데이트되었다고 해서 현재 운영 중인 사이트에 적용해 보는 겸 가이드를 정리해 보았습니다. sitemap이 필요한가요? 구글에서는 아래와 같이 사이트맵의 필요성을 정의하고 있습니다. 사이트맵은 사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일입니다. Google과 같은 검색엔진은 이 파일을 읽고 사이트를 더 효율적으로 크롤링합니다. 사이트맵은 ..

들어가며 운영 중인 서비스 NILE은 오픈한 이래로 NFT 출시와 DAO 출범 등 활발한 활동이 이어지고 있습니다. 사용자가 점차 늘어가면서 이에 따른 성능 개선 작업의 중요성 또한 커지게 되었습니다. NFT 상품 이미지의 경우 크기 규격이 화면에 노출되는 디자인 대비 크며, 이미지 하나당 용량이 1MB~4MB 입니다. 요청 이미지 수만 300개가 넘는 메인 페이지의 초기 로딩 시간이 상당히 소요되었습니다. 지난 1달 동안 이미지 성능 개선을 위해 수정한 내용을 소개합니다. 이미지 전략 이미지 유형에 따라 적절한 이미지 포맷을 이용하기 정적인 이미지이자 픽셀 베이스의 그래픽이나 이미지 포맷 형식 중 흔히 사용하는 것은 jpg, png입니다. 흔히 퍼블리싱 작업 시 투명한 배경 사용 여부에 따라서 jpg,..

들어가며 최근 오픈한 서비스들에 대해 성능이슈가 꾸준하게 제기되고 있는 상태입니다. 물론 서비스 구축을 할 때에 이런 부분들을 신경 써서 진행을 하였다면 문제가 되지 않겠으나 대한민국 프로젝트 특성상 이런 부분까지 챙겨가며 서비스 구축을 하는 건 쉽지 않습니다. 더불어 성능적인 부분은 개발영역만이 아닌 UI와 GUI에서도 신경써주고, 관심을 가져가며 함께해야 하는 부분이지만 촉박한 일정과 계속해서 살아 숨 쉬는 프로젝트의 상황상 쉽지 않은 게 사실입니다. 그렇다고 우리마저 이 부분을 제쳐둔다면 성능 관련 이슈적인 수준이 아닌 서비스 자체에 문제가 될 수 있으니 작업 진행을 하면서 최대한 신경써주면 좋지 않을까 싶습니다. 그래서 본론으로 들어가면 React와 Next.js는 성능과 사용자 경험을 개선하기 ..