현재 회사에서 런칭준비중인 신규 프로젝트에서 Next.js를 사용 중인데, qa기간 중에 있었던 일이다. 이슈에 대한 요청사항이 들어왔다. "피드에서 상세페이지 갔다가 돌아오면 스크롤이 맨 위로 올라가 있어요. 스크롤위치 유지시켜 주세요." 라는 요청사항이었다. 문제화면은 아래와 같았다. 잘 보일지 모르겠지만이미지가 있는 포스트를 눌러서 상세페이지로 이동을 하고,다시 돌아오면이미지가 있는 포스트는 보이지 않는다.이미 맨 위로 스크롤이 초기화되었다는 뜻이다. 당연했다. 상세페이지로 라우팅을 하고다시 돌아오면서 화면을 새로 렌더링을 하니.. 이 문제를 어떻게 해결해야 할지 고민을 좀 해보니 시도해 볼 법한 방법들이 몇 개 있었다. 1. url 파라미터에 현재 스크롤 위치를 저장해서 왕복한다.2. l..
혼자 사이드프로젝트로 만든 서비스에서 기존에 supabase를 쓰고있었는데 어느날부턴가 db가 업데이트가 안되는걸 알게되었다. 프로젝트 특성상 매일 하루 1번씩 db 내용을 싹 최신화하고 있었는데 그게 사용량을 많이 잡아먹었는지 무료요금제로는 더이상 커버가 안된다는 듯한 알림 메세지와 함께 업뎃이 멈춰버렸다. 가끔 이러긴해도 수동으로 풀어주면 됐었는데 이번엔 안되길래 그냥 서버 자체에 mysql 설치해서 운용해보는 방식으로 바꾸는걸로 마음먹고 작업을 시작했다. ORM으로 Prisma를 사용중이었는데 세팅부터 바꿔주는 일을 해주었고, 그래도 테이블은 눈으로 봐야하니까 알아보다 Sequel Ace를 알게 되어 도입하니 잘 작동하는듯 보였다. 근데 지금까지 했던작업이 모두 로컬에서 돌아가는 세팅을 해준것이었..
오늘은 Nextjs에서 SSR기능을 사용해 보며 토큰관리의 불편함을 나름의 고민 끝에 나온 방법으로 완화했던 방법에 대해 아주 간략히 기록해보려고 한다. 정답은 없다~ 때는 Next.js를 쓰면서 SSR을 어떻게 쓰는지 알게 되고 난 후에 본격적으로 이곳저곳에 적용하던 평범한 날이었다.(백엔드에서 넘겨준 토큰으로 인증처리를 진행하고 있었던 상황) Next.js 에서 서버사이드로 데이터패칭을 할때 인증이 필요한 API일 경우엔 당연히 토큰을 담아야 했지만 그 이전까지 모든 코드가 토큰을 localStorage에 담아서 관리하고 있던 터라 클라이언트에서 쓰는 토큰을 서버에서 쓰지 못하는 문제가 발견되었다. 이걸 조금 늦게 알게 된 이유는 그전까지 딱히 SSR이 제대로 활용되는 구간이 없었던 것이 아닐까 싶..
현재 회사에 다니면서 한창 크롬 익스텐션 서비스를 개발하던 당시 했던 삽질을 생각난 김에 포스팅하려 한다. 이제 와서 보면 겨우이거? 라고 볼 수 있지만 당시는 대체 뭐가 문제인지 우리의 든든한 친구 GPT에게 물어도 답이 나오질 않아 이것저것 코드 뜯어보던 시기였다. 대략적인 내용은 크롬에서는 해당 페이지가 로딩 중인지 아닌지 어떻게 판단하는가 였다. 문제를 마주했던 웹페이지는 한겨레신문 사이트였는데, 아무 기사나 찍어서 들어가 보면보기힘든(?) .html로 끝나는 형태의 url을 가지고 있다. https://www.hani.co.kr/arti/economy/economy_general/1137958.html ‘1인 가구 10평 원룸’ 살아라?…임대주택 면적 논란에 ..
프론트엔드 컨퍼런스 참석을 위해 잠실 롯데타워에 다녀왔다. FEconf 에서 주최하였고 거의 매년 열리는 컨퍼런스인데 작년에 우연히 참가후기를 읽어본 이후로, 올해는 꼭 한번 가보고 싶다 생각하고 있던 차에 컨퍼런스 개최 일정 공지가 나왔었다.(feconf 2023 공식 페이지) 일정 알림 맞춰두고 200명 선착순 티켓팅(?) 과정이 있는데, 선착순을 뚫고 참가하게 되었다. (친구랑 가려다 친구는 티켓팅 실패...) 현장 후기 1층에서 저런 목걸이를 받아 들고 31층까지 다이렉트로 쭉 올라갔다. 31층 도착하니 컨퍼런스 후원 기업들의 간단한 참여이벤트들을 곁들인 굿즈 나눔터가 바로 펼쳐져있고 복도를 따라 더 들어가면 A, B 순서대로 세션을 들을 수 있는 강의장이 나온다. 위는 B세션이 진행됐던 강연장..
링크드인에서 어떤 외국인 개발자가 올린 자바스크립트 코드스니펫 20가지를 가져와봤다. 자주쓴다니까 마냥 가져다 쓰기에는 고려해야할 사항이 몇가지 있는것 같아서 자바스크립트 공부도 할겸 짧은 코멘트와 함께 포스팅 해보려 한다. 1. 현재 시간값 구하기 const now = new Date(); 2. 배열인지 체크하기 Array.isArray(data); // true , false 3. 배열 합치기 const arr1 = [1,2]; const arr2 = [3,4]; const newArray = arr1.concat(arr2); // [1,2,3,4] 4. 배열에서 중복값 제거하기 const array = [1,1,2,3,3,3,4]; const uniqueArray = [...new Set(arra..
개인 프로젝트를 진행하면서 Next.js 를 gh-pages 로 배포를 했던 적이 있다. 당시 특정 주기로 데이터를 최신화 해주는 기능이 필요하여 Next.js에서 지원하는 getStaticProps에 revalidate 옵션을 넣어 3일에 한 번씩 데이터 패칭 및 업데이트를 시도하기 위한 코드를 짜고 배포를 하였었다. 어찌 된 영문인지 배포만하면 작동을 안 해서 결국 getStaticProps를 걷어내고 Github Actions에 cron으로 스케쥴링하여 지정한 간격마다 새로운 데이터로 배포하는 방식으로 해결을 했었는데 왜 해당 방법을 쓸 수밖에 없었는지에 대해 정리한다. GitHub Pages 훑어보기 GitHub Pages란 GitHub Pages는 GitHub에서 제공하는 정적 웹사이트 호스팅 ..
여태 React로 개발을 하면서 아마 가장 자주 쓴 hook이 뭐냐고 묻는다면 useState가 Top 3안에 무조건 든다고 장담할 수 있을 것이다. 근데 개발을 하면서 왜 useState는 배열로 묶어서 선언하는 방식으로 해야 하는 것인지에 대해 생각을 해본 적이 없다. 그래서 길진 않지만 알아본 내용을 살짝 풀어 보려고 한다. 배열 디스트럭처링(Array Destructuring) 본론으로 넘어가기 앞서 배열 디스트럭쳐링(Array Destructuring)이란 무엇일까 배열 디스트럭처링(Array Destructuring)은 JavaScript에서 배열에서 원소들을 추출하여 개별 변수로 할당하는 문법적인 기능이며, 이를 통해 배열의 각 원소에 접근하고 값을 할당하거나 읽을 수 있다. 기본적인 배열 ..
