현재 회사에서 런칭준비중인 신규 프로젝트에서 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이 제대로 활용되는 구간이 없었던 것이 아닐까 싶..
토이프로젝트를 개발한 지 시간이 꽤 흘렀다. 하루하루 진행방식이나 느낀 점을 작성하려고 Day-?? 형식으로 포스팅을 시작했지만 어쩌다 보니 두 번째 포스팅이 마지막 포스팅 같은 느낌으로 작성하는 중이다. 프로젝트 진행상태는 당장 넣으려했던 기능들은 다 구현하고 퍼블리싱 쪽은 반응형 일부 빼먹은 것 말고는 끝이 났다. 기능 먼저 만들고나서 스타일을 넣었는데 넣다 보니 좀 아쉽거나 있어야 할 것 같은 기능들이 보이기 시작했지만.. 그건 추후에 나머지 숙제 느낌으로 개발 해볼 예정이다. 우선 전반적으로 개발을 끝낸 현재 시점으로 느꼈던 점이 한두 가지 있는데 풀어보자면, 첫째로 API 부분이다. next에서 제공하는 api 기능으로 진짜 완전 기본적인 예외처리만 있는 유치원생 수준의 api들을 만들어서 해보..
정말 오랜만에 쓰는 블로그 포스팅이다. 이전에도 몇 번 포스팅해야지 포스팅해야지.. 맘을 먹은 적은 많지만 기존에 포스팅 한번 할 때마다 항상 너무 각 잡고 해 버려서 막연한 부담감 때문에 티스토리 화면 로그인까지만 하고 멈추는 일이 다반사였다. 때문에 이번부터는 좀 light 하게 토이프로젝트 개발 일지에 대해 간략히 적을 예정..! 그래서 본론은 모든 웹서비스의 근간(?)이 되는 이커머스 사이트를 토이프로젝트로 구현하려한다. 메인 기술스택은 React, Typescript, Next.js 정도로 일단 잡고 개발예정... (은 아니고 사실 이미 며칠 전부터 진행 중이지만 첫 포스팅이기 때문에 오늘을 Day 1으로 정한다!) 하루하루 진행상황이나 트러블 슈팅 혹은 배운 점에 대해 적기 위함이며, 트러블슈..
프로젝트 소개 : 그날 수면한 시간과 컨디션, 수면에 영향을 미치는 태그 등을 기록함으로써 개개인에 맞는 적정 수면시간을 제공합니다. 개발기간 : 21.04.23 - 21.05.28 팀구성 : Front-end 3명, Back-end 2명, Designer 2명 페이지 구성 인트로 페이지 로그인/회원가입/비밀번호 찾기 메인 페이지 글 작성 수정, 삭제 날짜 검색, 오늘 날짜 이동 가이드 페이지 분석 페이지 모바일 기술 소개 React JWT token(Access + Refresh) setTimeout 활용 토큰 자동 연장 카카오 소셜 로그인(REST-API) Chart.js, nivo 캘린더 & 카드 구현(CRUD) Route Axios Redux 느낀 점 실제 배포하여 사용자들의 피드백을 받고 개선하..
프로젝트 설명 관심사에 대한 짧은 이야기와 이미지를 올리고 댓글과 좋아요를 통해 소통하는 공간 구현한 카테고리 : 음악 / 여행 / 맛집 / 반려동물 프로젝트 기간 2021.04.12 - 22 (10일) 팀 구성 / Tool Front-End(2) : React Back-End(2) : Node.js 와이어프레임 Figma 활용 노션을 이용한 협업 기획부터 API 설계, 임무분장, 진행상황 등을 노션을 통해 공유하며 프로젝트를 진행하였다. 소스트리(GUI)를 활용한 깃 협업 여태껏 깃을 협업할 때 사용하는 것에 대한 개념이 아예 없었기 때문에 프로젝트 진행 때마다 막연한 부담감이 있었다. 그래서인지 이번만큼은 확실하게 깃의 활용법에 대해 개념 정립을 한 상태로 프로젝트를 진행해보고 싶었고, 그래서 개발단..
팀 구성 Front-End 2명 Back-End 2명 프로젝트 기간 7일 : (21.04.01 - 08) 구현한 기능 메인 페이지 게시글 불러오기 게시글 작성(로그인 없이) 게시글 상세페이지 조회 게시글 수정(30%) 제한사항으로 클론하지 못하고 직접 만든 페이지 새 글 작성 페이지 : 마크다운 형식의 velog 작성형식을 시간내에 구현하지 못해 새로작업 게시글 상세 페이지 Git-hub 프론트엔드 https://github.com/Hanghae-clone-16/front Hanghae-clone-16/front [velog 클론코딩] Front-End 작업 Repository 입니다. Contribute to Hanghae-clone-16/front development by creating an ac..
