전체 글 (28) 썸네일형 리스트형 Prefetching을 활용한 웹뷰 서비스 설계 및 회고 이번 포스트는 Next.js로 SPA 웹뷰 서비스를 설계해본 경험을 정리하는 포스트이다. 설계한 서비스 플로우 설계한 웹뷰 서비스는 위 예시처럼 페이지를 순차적으로 이동한다. 많은 웹뷰 서비스가 이런 형태로 설계되는데 매우 단순해보이지만 높은 사용자 경험을 주기 위해선 고려할 것이 많다. 특히, 뒤로가기가 단순하지 않을 경우 설계가 복잡해진다. 위 플로우를 보면 페이지 4에서 뒤로가기를 하면 페이지 2를 가야하고, 페이지 3에서는 페이지 1로 가야 한다. 뒤로가기도 경우의 수가 있다. 뒤로가기 버튼을 클릭하여 클릭 이벤트를 통해 넘어가는 경우도 있고 스마트폰 화면에서 스위핑하여 브라우저 이벤트가 발생하여 뒤로가는 경우도 있다. 또한, 웹뷰에서 처리가 불가능하고 네이티브 앱에서 처리가 필요한 경우도 고민해.. [Next.js] 브라우저 뒤로가기 막기 beforePopState 문제점 최근 웹뷰 서비스를 개발 중에 뒤로가기 처리를 고민하게 되었다. 버튼을 통한 뒤로가기는 자바스크립트 코드로 막으면 그만이지만 브라우저 자체에서 발생하는 이벤트가 문제였다. 웹뷰에서는 사용자가 손가락으로 옆으로 스위핑(뒤로가기) 를 하게 되면 popstate 이벤트가 발생한다. popstate 이벤트의 문제점은 새로고침이나 닫기 이벤트와 다르게 취소가 불가능한 것이다. preventDefault 같은 것도 먹히지 않는다. next.js에서는 popstate 이벤트를 제어하기 위한 메서드로 beforePopState를 제공한다. 뒤로가기 이벤트가 발생하면 실행되는 콜백을 전달하는 메서드이다. import { useEffect } from 'react' import { useRouter } from 'next.. Edge Side Rendering (SSR vs CSR vs ESR) 용어 정리 CSR CSR은 Client Side Rendering의 약자로 말 그대로 브라우저(Client)에서 렌더링하는 것이다. SSR SSR은 Server Side Rendering의 약자로 서버에서 렌더링(html 파일 생성)하여 브라우저에 보내주는 것이다. SSG SSG는 Static Site Generation의 약자로 SSR과 다르게 빌드 시에 html을 미리 생성해놓는 것이다. ESR Edge Side Rendering의 약자로 Edge Computing을 이용해 사용자와 가까운 곳에 위치한 Edge 노드에서 렌더링에 필요한 데이터를 브라우저에 제공하는 역할을 한다. 흔히 서버리스 개념으로 보면 편하다. 아래 설명을 보면 이해되겠지만 Edge node에서 렌더링을 하는 것은 아니기 때문에 .. [next.js] useRouter vs Router 차이 next.js의 next/router 패키지에서 useRouter와 Router를 제공한다. 두 가지 사용법과 차이에 대해서 알아봤다. useRouter import { useEffect } from 'react' import { useRouter } from 'next/router' // Here you would fetch and return the user const useUser = () => ({ user: null, loading: false }) export default function Page() { const { user, loading } = useUser() const router = useRouter() useEffect(() => { if (!(user || loading)) {.. 모두의파티 서비스 인증 서버 설계(JWT) 최근 카카오에 다니는 친구와 모두의파티 이름으로 토이프로젝트를 설계하고 있다. 가장 먼저 모든 페이지에 공유되는 토큰을 설계하기 위해 논의하였는데 시작부터 토론 주제가 많았다. 우리 서비스는 회원가입이 필요한가? 사용자의 접근성을 위해 카카오 로그인 API를 이용하자. 따로 정보를 더 받을 수도 있지만 우선 카카오 로그인만으로 충분해 보인다. 어떤 방식으로 인증할 것인가? JWT 방식을 사용하기로 하자. 매번 DB를 조회하지 않아도 되니 서버 부담도 줄고 인증도 빨라서 우리 서비스에 적합하다. 카카오 로그인 API 문서에서도 지원하고 있다. JWT는 무엇인가? Json Web Token의 약자로 JSON으로 인증 정보를 나타내는 문자열이다. header, payload, signature로 구성되어 있는.. 커밋시 eslint 속도 개선 (lint-staged, husky) 우리팀 git 시스템은 커밋 한 번 할 때마다 10~20초씩 걸린다. 그렇다 보니 커밋을 최대한 나중에 하려는 습관이 생기는 것 같다. (다른 팀원들도 그렇다고 한다) 그리고 갈수록 더 느려진다. 처음엔 코드베이스에 익숙하지 않아서 그냥 별로 문제로 여기지 않았지만 문득 내가 왜 이 시간을 기다려야 하지? 라는 생각이 들었다. 그래서 우리 커밋 시스템을 살펴보니 매 커밋마다 전체 프로젝트를 eslint 하고 있는 것이다. 이러니 느릴 수 밖에 없던 것이다. 아마도 우리팀 규모가 처음엔 이렇게 크지 않아서 이런 방식을 사용했던 것 같다. 매 커밋마다 전체 파일을 eslint 해야 할까? 그냥 커밋에 올라가는 변경된 파일만 eslint 하면 되는 것 아닌가? 생각했고 문제 없다고 팀원들과 얘기했다. 그래서 .. 배포 자동화 도구 개발 회고 내가 핀다에 입사하자마자 내가 나서서 제안하고 주도한 프로젝트가 배포 자동화 도구 개발이다. 업무도 하면서 틈틈이 하느라 두 달 정도 개발 기간이 걸린 것 같다. 핀다에 입사했을 때 배포 과정은 파이프라인 자동화는 되어있지만 (빈스톡에 배포) 파이프라인 전까지의 브랜치 병합, 버전 업데이트, 변경사항 기록을 개발자가 직접해야했다. 이게 개선해야 할지 되게 애매한 부분이었다. 이 배포 자동화 도구를 개발하면서 줄인 시간이 1배포당 길어야 10분 정도다. 일주일에 3번 정도 배포하니까 일주일에 30분, 한 달에 2시간, 1년에 24시간 정도의 시간을 절약하는 것인데 저 정도의 시간을 절약해야 할까? 고민을 많이 했다. 그럼에도 개선하기로 제안한 이유는 생각보다 저 10분의 시간이 꽤 귀찮았다. 그리고 변경사.. Edge Computing (FeConf 2022) 최근 FeConf 2022 내용을 보면서 발표 챕터 중에 당근마켓 김혜성님이 발표하실 엣지 컴퓨팅에 관한 내용을 보게 되었다. 최근에 올린 Next.js 12 버전의 Edge Functions를 소개하면서 살펴봤던 개념이라 어떤 내용으로 발표하게 될지 자연스럽게 관심이 갔다. Edge Computing? 쉽게 말하면 서비스를 사용하는 사용자와 최대한 가까운 곳에 서버가 있는 것이다. 대한민국에 있는 사용자라면 대한민국에 있는 서버에서, 미국에 있다면 미국 서버에서 이런 식이다. 여기까지 생각하면 자연스럽게 기존 람다 같은 서버리스와 무슨 차이가 있을까 생각할 수 있다. 차이가 없다. 엄밀히 말하면 약간 다른 개념이지만 같은 개념으로 이해해도 된다. 다만 Next.js의 행보에서 유추해보자면 프론트엔드만을.. Next.js Middleware 업무에 활용하기 소개 Next.js의 12버전에서 Middleware 기능이 공개되었다. 12.2부터는 정식 기능이 되었다. (사용법도 12.2부터 많이 다르다.) 공개 시점부터 관심을 가진 기술이다. 기존에 알고 있던 미들웨어의 개념과 전혀 다른 개념이 아니다. 단지 Next.js에서 미들웨어 개념이 생긴 것이다. 이 개념이 없었어도 Node.js를 이용해 충분히 미들웨어 기능이 구현 가능했다. Next.js의 Middleware가 뭐냐면 간단히 말하면 '사용자의 요청을 처리하여 응답을 반환하기 전에 뭔가 조작하여 응답할 수 있는 기능'이다. 여기서 조작할 수 있는 뭔가의 개념은 상당히 제한적이다. 기본적으로 요청 헤더, 응답 헤더, 쿠키, 경로 등을 수정할 수 있다. (난 이 기본적인 기능만으로 당장 업무에 해볼 수.. 리액트 리소스 로딩 속도 개선하기 최근 나는 회사 업무로 약관 동의를 구하는 화면을 개발하고 있다. 사용자가 약관 동의하기를 누르면 약관서를 서버로 부터 다운받아서 PDF로 보여주는데 우리 PO가 이 PDF 로딩이 너무 느리다는 QA를 남겼다. 처음엔 당황스러웠다. 로딩 속도는 네트워크 속도에 달려있는데 프론트엔드 개발자가 개선이 가능한가? 생각난 방법은 흔히 next.js의 image 컴포넌트에서 priority를 설정하듯이 html 첫 부분에서 리소스를 다운받게 하는 방법도 있지만 PO가 원하는 수준의 개선은 어려워 보였다. 고민하고 삽질한 시간은 길었지만 결론을 말하자면 브라우저의 캐시 정책을 이용하기로 했다. 브라우저는 리소스를 네트워크에서 다운로드 받으면 메모리 캐시 또는 디스크 캐시에 보관하는데 크기가 큰 pdf 파일 같은 경.. 이전 1 2 3 다음