들어가며 프론트 작업을 하다 보면 사용자에 대한 정보를 이용한 작업이나 확인 여부를 가지고 작업을 하는 경우가 필요한데 클라이언트가 서버를 통해 인증을 확인받는 방법들과 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는 성능과 사용자 경험을 개선하기 ..

FED로 UX하기는 총 2편의 시리즈로 구성되어 있습니다. FED로 UX하기 FED로 UX하기 : 실전편 (현재글) 들어가며 조직별, 개인별, 프로젝트별 구성원들의 실시간 근무량을 쉽게 파악할 수 있다. 매니저들이 팀원 근무 피로도 관리에 있어 유용한 도움이 될 수 있어야 한다. 이러한 목표를 가지고 프로젝트가 시작되었습니다. 그동안 일반적인 프로젝트의 진행 방식은 기획/디자인이 선행되고 그 후에 프런트엔드 개발을 진행하였지만, 이번 프로젝트는 기획/디자인 없이 개발을 시작하게 되었습니다. 이를 통해 새로운 경험과 함께 난항이 있을 것으로 예상되었습니다. 이 과정에서 얻은 경험을 공유하고자 합니다. 진행 과정 우선적으로 근무량을 파악하기 위한 데이터 수집이 필요했습니다. 이미 주간보고를 매일 인트라넷에 ..

들어가며 알고리즘은 개발자들에게 보통 대기업 입사를 위한 코딩테스트, 혹은 AI와 같은 어나더 레벨의 개발에 쓰인다고 인식되고 있습니다. 하지만 알고리즘은 개발자에게 뗄 수 없는 굉장히 중요한 요소라고 생각합니다. 그 이유는 기업이 구인 시 코딩테스트를 보는 이유에 대해 생각해 보면 나옵니다. 코딩테스트는 넓게 보면 굉장히 단순한 구조입니다. 문제를 읽는다 → 문제가 요구하는 대로 구현한다. 여기서 더 자세히 들여다보면 우선 문제의 요구 사항을 명확하게 파악해야 합니다. 어떤 범위의 입력을 받고 그것을 통해 어떤 결과물을 내야 하는지 한 치의 오차도 없이 파악해야 정확성, 효율성 모두 만족하는 결과를 낼 수 있습니다. 문제의 조건에 맞춰서 어떤 알고리즘을 써야 하는지 생각해야 하기도 합니다. 가장 중요한..

들어가며 실무에서 스크롤을 내리다 특정 시점에 실행되어야 하는 이벤트를 구현하는 일이 있었습니다. 자연스럽게 window scroll 이벤트를 이용해서 작업을 했는데, 더 나은 방법인 Intersection Observer API라는 걸 알게 되면서 적용해 보고 느낀 점을 적어보려 합니다. Intersection Observer API 란? 구글 번역기로 Intersection Observer를 직역해 보면 ‘교차로 관찰자’라고 합니다. ‘교차로 관찰자’, 너무 직역된 것 같죠? 이해하기 쉽게 의역해 보자면 브라우저의 뷰포트와 타깃 엘리먼트의 교차점을 관찰하는 API라고 합니다. 더 쉽게 말해보면 브라우저에 우리가 지정한 요소가 지금 보이는지 구별하는 기능을 제공한다고 생각하면 됩니다. 앞서 이 API가..

들어가며 React는 사용자 인터페이스를 구축하기 위해 많이 사용되는 JavaScript 라이브러리입니다. 그러나 React 애플리케이션을 개발할 때, 복잡한 상태 관리 문제를 다루어야 하는 경우가 종종 발생합니다. 예를 들면 최상위 부모 컴포넌트에서 보내주는 데이터가 몇단계의 자식 컴포넌트로 전달되어야 하며 전달받은 데이터로 인해서 상위의 상태값이 업데이트되어야 할 때… 쉽진 않겠죠? 이러한 문제를 해결하기 위해 상태 관리 라이브러리를 사용할 수 있습니다. 이번 글에서는 Jotai라는 React 상태 관리 라이브러리에 대해 간단히 살펴보겠습니다. Jotai란? React의 상태관리 라이브러리중 하나입니다. Jotai란 뜻은 일본어로 “상태”라는 의미인데요 Jotai를 사용했을때 리액트 애플리케이션에서 ..

들어가며 최근 모바일 애플리케이션과 연계되는 웹사이트를 오픈하면서 딥링크(Deeplink)를 사용하게 되었어요. 자주 사용되지는 않지만 알아두어야 하는 것이어서 짧게 포스트로 남겨놓아요. 딥링크(Deeplink)란? 딥링크는 특정 주소 혹은 값을 입력하면 앱이 실행되거나 앱 내 특정 화면으로 이동시키는 기능을 수행해요. 딥링크는 3가지 방식으로 구분돼요. URI 스킴 방식 : 앱에 URI 스킴(scheme) 값을 등록하여 딥링크 사용 앱링크(App Link) : Android 제공 - 도메인 주소를 이용한 딥링크 사용 유니버설 링크 (Universal Link) : iOS 제공 - 도메인 주소를 이용한 딥링크 사용 그중에서도 URI Scheme 방식을 사용했어요. URI Scheme 방식의 딥링크 URI..

들어가며 요즘 여기저기서 심심치 않게 들려오는 CHAT GPT 관심이 없는 사람도 한 번쯤은 들어볼 수밖에 없을 만큼 미디어에서 뜨거운 감자입니다. 그럼 CHAT GPT가 무엇일까요? ChatGPT란? ChatGPT는 Generative Pre-trained Transformer(GPT)와 Chat의 합성어로 OpenAI가 개발한 프로토타입 대화형 인공지능 챗봇이다. 대화형 인공지능 챗봇. ChatGPT는 챗봇 기술과 GPT-3 기술을 결합한 기술로, 인공지능 분야에서 많은 주목을 받고 있습니다. 자연어 처리 기술을 이용하여 자연스러운 대화가 가능한 AI 챗봇 정도로 정리하면 가장 이해가 쉬울 것 같습니다. ChatGPT를 프론트엔드 개발에 어떻게 활용할 수 있을까? 저는 Chat GPT에 다음과 같은 ..

들어가며 요즘 대부분의 사이트, 콘텐츠를 URL로 공유하고 있는데, 이때 해당 경로에 대한 썸네일과 함께 전달이 될 텐데요. 이 부분을 설정하는 것이 OG입니다. 프로젝트를 진행하면서 알고는 있었지만 직접 등록을 하지는 않아 넘겨두었다가 이번에 작업을 진행하면서 생각보다 쉽게 내가 작업한 사이트에 대한 정보를 제공함으로써 사용자에게는 더 나은 UX를 제공할 수 있고, 코드적으로는 적용하기 쉬운 것 같지만 알아두어야 할 부분들도 경험하게 되어 공유하면 좋을 것 같아 몇 자 적게 되었습니다. OG란? 풀 명칭은 Open Graph Protocol이라고 합니다. 오픈 그래프 프로토콜은 어떠한 인터넷 웹사이트의 HTML 문서에서 head -> meta 태그 중 “og:XXX”가 있는 태그들을 찾아내어 보여주는 ..