본문 바로가기

Next 11

[Docker] Next 프로젝트 도커 배포 삽질기 들어가며 기존에서는 Amplify 또는 vercel로만 배포, 빌드해서 도메인과 관련된 이슈만 해결하면 별다른 이상 없이 배포를 할 수가 있었습니다. (이게 바로 툴이지!!) 근데 이번에 도커이미지를 직접 생성하여 배포를 해야 하는 상황이라 해당 업무를 진행하면서 삽질했던 간단 경험을 적어보겠습니다. Next Docker 배포 next 프로젝트를 배포하는 가장 쉬운 방법은 vercel를 이용하는 겁니다. 거의 제로 config에 걸맞는 조합을 자랑하고 (실은 같은 회사인) 공식 문서상에서도 vercel을 이용하라고 조언해줍니다. Deployment | Next.js Learn how to deploy your Next.js app to production, either managed or self-hos.. 2022. 8. 28.
[UX/UI] 유저 행동 데이터를 티끌모아태산으로 (hotjar, google analytics) 들어가며 바야흐로 빅데이터의 시대에 살고 있는 우리들은 유저님들의 행동 하나하나에 의미를 담아 판단하고 또 개발해야합니다. 그런데 쉬우면서도 어려운 것이 바로 리뷰를 받는 것입니다. 배달앱에서는 서비스를 줘 가면서 리뷰전쟁을 하고 있는데, 우리는 서비스 음식을 주는대신 우리의 서비스(프로덕트)가 가치있음을 내세우고 리뷰를 받기를 원합니다. 그러니 더더욱 힘들고 안해줍니다. 오늘 소개해드린 hotjar는 이러한 어려움을 조금 쉽게 해결하고자 하는 툴이며, 간단하지만 강력하고 직관적은 기능을 제공하고 있습니다. 우리에게 익숙하게 알려진 유저 행동 추적 도구는 Google Analytics(이하 GA)입니다. 홈페이지 head에 코드만 넣어두면 알아서 정보를 뽑아다가 깔끔하게 시각화를 해줍니다. 이와 비슷하.. 2022. 7. 12.
[리액트] 글로벌한 웹을 향하여 (react-i18next, 다국어지원) 들어가며 이번 글에서는 글로벌한 웹을 위해서 react i18n를 적용하는 방법과 나름의 best practice에 대해 적어보겠습니다. 이 글은 아직 이제 막 프로젝트에 i18n을 던지려는 용기 있는 개발자를 위한 글이며, 더욱 위대한 웹을 위한 글이기도 합니다. 이직이 어느정도 마무리되었고, 사이드 프로젝트도 마무리하고 새로운 아이템을 찾는 피벗 중이어서 갑자기 시간이 붕 떴습니다. 그래서 이래저래 책을 읽으며 여유있는 시간을 즐기고 있는데 기존 프로젝트를 정리도 하면서 문서화를 하다 i18n에 대해 정리해보려고 이렇게 글을 작성하게 되었습니다. best practice는 아니지만 better practice이기를 바라며 react- i18n 적용하는 방법을 시작해보겠습니다. i18n 이란? i18n.. 2022. 5. 29.
[Next] localstorage를 사용하는 방법 #1 localStorage 란? 웹 스토리지 객체(web storage object)의 한 종류로 sessionStorage와 함께 브라우내 내에 key-vale 쌍을 저장할 수 있도록 해주는 Web API입니다. Window.localStorage - Web API | MDN localStorage 읽기 전용 속성을 사용하면 Document 출처의 Storage 객체에 접근할 수 있습니다. 저장한 데이터는 브라우저 세션 간에 공유됩니다. developer.mozilla.org Why web storage | 영속성 web storage를 쓰는 가장 큰 이유는 영속성에 있습니다. localStorage는 브라우저가 다시 실행되어도 데이터가 사리지지 않고 남아있습니다. sessionStorage는 어떻냐구요?.. 2022. 1. 28.