프로젝트

프로젝트

Next.js에서 server&client 토큰관리 기록

오늘은 Nextjs에서 SSR기능을 사용해 보며 토큰관리의 불편함을 나름의 고민 끝에 나온 방법으로 완화했던 방법에 대해 아주 간략히 기록해보려고 한다. 정답은 없다~  때는 Next.js를 쓰면서 SSR을 어떻게 쓰는지 알게 되고 난 후에 본격적으로 이곳저곳에 적용하던 평범한 날이었다.(백엔드에서 넘겨준 토큰으로 인증처리를 진행하고 있었던 상황) Next.js 에서 서버사이드로 데이터패칭을 할때 인증이 필요한 API일 경우엔 당연히 토큰을 담아야 했지만 그 이전까지 모든 코드가 토큰을 localStorage에 담아서 관리하고 있던 터라 클라이언트에서 쓰는 토큰을 서버에서 쓰지 못하는 문제가 발견되었다. 이걸 조금 늦게 알게 된 이유는 그전까지 딱히 SSR이 제대로 활용되는 구간이 없었던 것이 아닐까 싶..

프로젝트

[Toy Project] 이커머스 개발일지(D+fin?)

토이프로젝트를 개발한 지 시간이 꽤 흘렀다. 하루하루 진행방식이나 느낀 점을 작성하려고 Day-?? 형식으로 포스팅을 시작했지만 어쩌다 보니 두 번째 포스팅이 마지막 포스팅 같은 느낌으로 작성하는 중이다. 프로젝트 진행상태는 당장 넣으려했던 기능들은 다 구현하고 퍼블리싱 쪽은 반응형 일부 빼먹은 것 말고는 끝이 났다. 기능 먼저 만들고나서 스타일을 넣었는데 넣다 보니 좀 아쉽거나 있어야 할 것 같은 기능들이 보이기 시작했지만.. 그건 추후에 나머지 숙제 느낌으로 개발 해볼 예정이다. 우선 전반적으로 개발을 끝낸 현재 시점으로 느꼈던 점이 한두 가지 있는데 풀어보자면, 첫째로 API 부분이다. next에서 제공하는 api 기능으로 진짜 완전 기본적인 예외처리만 있는 유치원생 수준의 api들을 만들어서 해보..

프로젝트

[Toy Project] 이커머스 사이트 개발일지(Day1)

정말 오랜만에 쓰는 블로그 포스팅이다. 이전에도 몇 번 포스팅해야지 포스팅해야지.. 맘을 먹은 적은 많지만 기존에 포스팅 한번 할 때마다 항상 너무 각 잡고 해 버려서 막연한 부담감 때문에 티스토리 화면 로그인까지만 하고 멈추는 일이 다반사였다. 때문에 이번부터는 좀 light 하게 토이프로젝트 개발 일지에 대해 간략히 적을 예정..! 그래서 본론은 모든 웹서비스의 근간(?)이 되는 이커머스 사이트를 토이프로젝트로 구현하려한다. 메인 기술스택은 React, Typescript, Next.js 정도로 일단 잡고 개발예정... (은 아니고 사실 이미 며칠 전부터 진행 중이지만 첫 포스팅이기 때문에 오늘을 Day 1으로 정한다!) 하루하루 진행상황이나 트러블 슈팅 혹은 배운 점에 대해 적기 위함이며, 트러블슈..

프로젝트

적정수면시간 제공 서비스 "Sleepwell"

프로젝트 소개 : 그날 수면한 시간과 컨디션, 수면에 영향을 미치는 태그 등을 기록함으로써 개개인에 맞는 적정 수면시간을 제공합니다. 개발기간 : 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 느낀 점 실제 배포하여 사용자들의 피드백을 받고 개선하..

프로젝트

Hobbygram(미니프로젝트)

프로젝트 설명 관심사에 대한 짧은 이야기와 이미지를 올리고 댓글과 좋아요를 통해 소통하는 공간 구현한 카테고리 : 음악 / 여행 / 맛집 / 반려동물 프로젝트 기간 2021.04.12 - 22 (10일) 팀 구성 / Tool Front-End(2) : React Back-End(2) : Node.js 와이어프레임 Figma 활용 노션을 이용한 협업 기획부터 API 설계, 임무분장, 진행상황 등을 노션을 통해 공유하며 프로젝트를 진행하였다. 소스트리(GUI)를 활용한 깃 협업 여태껏 깃을 협업할 때 사용하는 것에 대한 개념이 아예 없었기 때문에 프로젝트 진행 때마다 막연한 부담감이 있었다. 그래서인지 이번만큼은 확실하게 깃의 활용법에 대해 개념 정립을 한 상태로 프로젝트를 진행해보고 싶었고, 그래서 개발단..

프로젝트

velog 클론코딩

팀 구성 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..

프로젝트

Week 01 : [미니프로젝트(S.A) - 1일차(22조)]

항해99(W1) : 22조 S.A 1일차 *제출할 것(1일차) 1. 우리 조 프로젝트 제목/간단 설명 2. 와이어프레임 사진 3. 개발해야 하는 기능들 4. public github repo 주소 1. 우리 조 프로젝트 제목 / 간단 설명 제목 : 후보1 : 누구나 영화 평론가 후보2 : 모두의 리뷰 후보3 : 아무 영화나 일단 틀어 설명 : 현재 상영중인 영화들의 정보를 확인할 수 있고 로그인을 통해 좋아요와 리뷰작성을 할 수 있는 웹페이지입니다. 2. 와이어프레임 3. 개발해야 하는 기능들 기능 Method URL request response 로그인 POST /sign_in find_one{"username":username_receive, "password":pw_hash} 입력된 유저 ID,PW..

개발늦둥이
'프로젝트' 카테고리의 글 목록