오늘은 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에서 배열에서 원소들을 추출하여 개별 변수로 할당하는 문법적인 기능이며, 이를 통해 배열의 각 원소에 접근하고 값을 할당하거나 읽을 수 있다. 기본적인 배열 ..
MYSQL workbench를 설치하고 테이블에 데이터가 잘 쌓였는지 확인해 보기 위해 테이블 조회만 시도하면 워크벤치가 꺼지는 현상이 일어났다. 설마 워크벤치 자체 문제인줄은 모르고 이것저것 해결해 보려고 나름 까불어보다가 몇 시간을 삽질했다.. 지쳐서 그냥 db 사용안하고 진행할까 라는 극단적인 생각까지 하던 차에 https://www.codeit.kr/community/questions/UXVlc3Rpb246NjAwZmZiMzg2NDFjMmYzOGJlNjEzYTJh 열기 누르면 계속 예기치않게 종료되었다고 뜨는데요. ㅠㅠ www.codeit.kr 같은 문제를 겪는 사람들이 있는듯해 보였다. 결론은 워크벤치 버전문제 인듯 싶었는데 현재 나와있는 최신 버전은 8.0.31이다. 설치할때 당연히 최신버전..
여태 노트북 새로 사고 귀찮아서 안 했던 깃허브 ssh설정을 하게 되었다. 생각보다 간단하지만 시간지나면 까먹기 좋을 것 같아서 나중에 다시 하게 되면 참고할 목적으로 포스팅을 하게 되었고, 해당 포스팅은 mac 기준으로 작성했다. 1. SSH key 를 생성한다. $ cd ~/.ssh $ ssh-keygen -t rsa -b 4096 -C '본인이메일(test@gmail.com)' 2. SSH key를 저장할 파일 입력을 묻는 말과 key 암호설정을 할 것인지 묻는 문구 2개가 나온다. Generating public/private rsa key pair. Enter file in which to save the key (/Users/user/.ssh/id_rsa): [Press enter] Enter..
