(※ 이 내용은 아직 정확하게 구현되는지 검증되지 않았습니다! 백엔드와 소통없이 프론트에서 독단적으로 작성한 것이니 참고만 해주세요!!!) 로그인을 구현할 때, 1. 단순히 백엔드한테 구글로부터 받은 인가코드를 보내면 2. 받은 토큰을 localStorage에 저장하는 방식으로 구현했었다. 하지만 이 방식은 보안을 고려했을 때 좋은 방법이 아니다. localStorage에 토큰을 저장하는 것은 권장되는 방법이 아니다. 따라서 아래와 같은 방법으로 수정하려 한다. 로그인을 하면 서버는 클라이언트한테 Access Token과 Refresh Token을 받음 Access Token은 전역 변수로 관리(Zustand 활용), RefreshToken은 httpOnly 쿠키로 서버로 부터 받음(이 때 서버와 클라이..
지금까지 헤더는 왼쪽에 제목, 가운데에 검색바, 오른쪽에 로그인(로그인 되있으면 마이페이지 버튼)이 있었다. 그런데 사실 헤더에 버튼들을 더 추가할까 생각 중이었는데, 그렇게 되면 모바일 화면에서는 공간이 좁아서 도저히 보여줄 수 없는 문제가 있었다. 그래서 사이드바를 만들고 싶었다. 사이드바를 만들려면 어떻게 할지 머리가 지끈했다. ‘바 버튼을 누르면 오른쪽으로 쫙 나오는 애니메이션은 어떻게 구현하지?’ 그리고 ‘원래 화면은 살짝 흐릿해져야하는 건 어떻게 만들어야하지?’ 같은 생각들이 머릿 속을 스쳐지나갔다. 그러다 깨달았다. 그냥 라이브러리를 쓰면 되는구나. 분명히 사이드바를 쉽게 구현할 수 있는 라이브러리가 있겠지. 가장 대표적인 라이브러리가 뭐지? → Material UI를 써보자! 옛날에 부트스..
2024년 1학기 현재, 3학년 2학기를 다니고 있다.(즉, 엇학기로 다니고 있다.) 내가 다니는 학교에서 컴퓨터공학부는 졸업프로젝트를 1년 단위로 진행한다. 사실 4학년부터 시작하는 것이 일반적이지만, 운이 좋게도 아는 사람들끼리 팀을 구성할 수 있어서 이번 학기부터 졸업프로젝트를 시작하기로 했다. 주제 팀원분들과 상의한 결과, ‘공공 데이터와 AI를 활용하여 개인 맞춤형 코스를 제공하는 웹 애플리케이션’ 을 개발하기로 했다. 크게 구현할 기능은 3가지로 나눌 수 있는데, AI를 활용한 사용자 정보 기반 코스 추천 실시간으로 공공데이터에 기반한 추천 제공 유저 간 코스 기록 및 공유 이렇게 기능을 개발할 예정이다. 초기 세팅 팀에서 프론트엔드는 나랑 다른 팀원, 총 두 명이다. 어제 만나서 같이 개발 ..
1. 인트로 수정 저번에도 언급했듯이 카카오로 소셜로그인을 하는 대신 이메일로 로그인과 구글로 로그인을 구현하기로 해서 인트로 화면을 변경해야 했다. 카카오 로그인 버튼을 빼고 이메일과 비밀번호 입력란, 회원가입(이메일) 버튼, 구글로 로그인 버튼을 새로 만들었다. 이메일로 회원가입도 진행해야 되니 회원가입 화면도 새로 구현했다. 비밀번호 확인은 비밀번호 코드를 복붙해서 만들었는데 비밀번호에 input을 입력하면 비밀번호 확인에서도 똑같은 input이 입력되는 오류가 생겼다. 아무래도 수정이 필요할 것 같다. 2. Quill 에디터 도입 전에는 글 작성을 그냥 textarea로 구현했었는데, 생각해보니 게시물에는 사진도 첨부되는 것이 맞는 것 같아 어떻게 하면 좋을까 생각하다가 에디터 라이브러리를 도입하..
1. 백엔드를 전공하는 친구에게 연락이 왔다. 이번 겨울방학 동안 동아리에서 진행했던 프로젝트가 끝이 났다. https://www.behance.net/gallery/192520373/-MOCU 모두의 쿠폰, MOCU 모두의 쿠폰, MOCU 게시: 2024년 2월 27일 www.behance.net (저번 겨울방학 동안 개발한 프로젝트의 포트폴리오는 위 링크를 통해 참고할 수 있다.) 프로젝트가 끝나기 하루 전 날, 갑자기 친구한테 카톡이 왔다. 백엔드를 공부하고 있는 친구였다. 지금 하고 있는 프로젝트가 끝나면 같이 프로젝트를 할 생각이 없냐고. 프로젝트를 하면서 프론트엔드 실력을 더 기르고 싶었기에 바로 수락했다. 프로젝트가 끝나고 며칠 뒤, 우리는 프로젝트에 대한 회의를 했다. 만들고자 하는 프로젝..
https://nomadcoders.co/nwitter 트위터 클론코딩 – 노마드 코더 Nomad Coders React Firebase for Beginners nomadcoders.co 파이어베이스의 사용법을 익히고자 노마드코더의 ‘트위터 클론코딩’ 강의를 수강했다.(위 링크로 접속할 수 있다.) Firebase란 Firebase는 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼으로, 직접 구현하기에는 복잡하고 어려운 기능들을 사용하기 쉽게 제공해준다. Authentication API를 통하여 계정 기능을 쉽게 만들 수 있다.(구글, 깃허브 로그인) Cloud FireStore로 데이터베이스를 사용할 수 있다. Hosting으로 웹 사이트를 배포할 수 있다. Cloud Storage로 사용자가..
링크 깃허브: https://github.com/crohasang/React-Practice GitHub - crohasang/React-Practice: 별점이 8.5점 이상인 영화들을 정렬해서 보여주는 사이트를 React를 활 별점이 8.5점 이상인 영화들을 정렬해서 보여주는 사이트를 React를 활용하여 구현하였습니다. - GitHub - crohasang/React-Practice: 별점이 8.5점 이상인 영화들을 정렬해서 보여주는 사이트를 React를 활용 github.com 사이트 접속: https://crohasang.github.io/React-Practice/ React App crohasang.github.io 만들게 된 계기와 과정 노마드코더의 'ReactJS로 영화 웹 사이트 만들기..
링크 깃허브: https://github.com/crohasang/momentum_js GitHub - crohasang/momentum_js: 구글 크롬 확장 프로그램 모멘텀(Momentum)을 Javascript로 구현하였습니다. 구글 크롬 확장 프로그램 모멘텀(Momentum)을 Javascript로 구현하였습니다. Contribute to crohasang/momentum_js development by creating an account on GitHub. github.com 사이트 접속: https://crohasang.github.io/momentum_js/ Momentum crohasang.github.io 모멘텀(Momentum)이란 무엇인가? 모멘텀은 Chrome 웹스토어에서 설치가 가..
