0. 오픈소스 기여했던 프레임워크를 실제로 사용해보자오픈소스 컨트리뷰션 아카데미의 Fedify 팀에 참여해 오픈소스 기여를 진행했었다. 컨트리뷰션 아카데미를 수료한 후, 내가 기여한 Fedify 프레임워크를 제대로 사용해본적이 없는 거 같다는 생각을 하게 되었다. 이 프레임워크를 어떻게 활용해볼까 생각해보다가, 내 개인 사이트에 Fedify를 도입해서 연합우주 계정을 생성하고 다른 연합우주 SNS와 소통을 해보기로 했다.1. ActivityPub, 연합우주(Fediverse)와 FedifyActivityPub은 World Wide Web Consortium(W3C)에서 표준화한 개방형 분산 소셜 네트워크 프로토콜이다.(자세한 설명: https://hackernoon.com/lang/ko/액티비티펍에-대한..

지난 주, 나는 개인 사이트에 게시글을 올리기 위해 MySQL RDS를 생성하고 Next.js에서 라우팅을 설정했었다. 하지만 Vercel은 고정 IP를 제공하지 않아 RDS의 인바운드 규칙을 설정할 수 없는 문제가 발생했고, 결국 현재 구조로는 RDS에 접근하지 못한다는 사실을 알게 되었다. (이전 작성 글: https://quickchabun.tistory.com/191 ) 어떻게 하면 Vercel로 배포하면서 RDS에 접근할 수 있을까?Vercel의 Static IP 기능을 활성화해서 고정 IP를 생성한다. (구매 필요)AWS Lambda를 VPC 내부 DB 프록시로 두고 HTTP로 호출한다.데이터베이스를 AWS RDS에서 고정 IP 없이 접근이 가능한 데이터베이스로 마이그레이션한다.어떤 방법을 쓸..

1. 개인 웹 사이트를 다시 디자인해보자기존 웹 사이트에 접속하면 맨 처음에 내 사진과 자기소개가 뜬다. 그리고 프로젝트와 내가 좋아하는 노래들을 소개하는 페이지가 있다. 사이트를 둘러보다가, 문득 전부 갈아엎어야겠다는 다짐을 했다. 일단 무엇보다 처음에 들어가자마자 내 사진이 뜨는게 좀 부담스러웠고, 블로그에 올린 글을 개인 사이트에도 보여주고 싶었다. 그리고 데이터들을 HTML에 하드코딩해서 표시하지 않고, 데이터베이스에 저장해서 API를 통해서 보여주고 싶었다. 나는 개인 웹 사이트를 Next.js를 활용해서 구현했다. 서버 컴포넌트와 SSG를 활용하긴 했지만 Next.js의 라우팅 기능을 활용한 data fetching은 활용하지 않았기 때문에, 이번 기회에 데이터베이스를 만들어서 data fet..

(※ 이 내용은 아직 정확하게 구현되는지 검증되지 않았습니다! 백엔드와 소통없이 프론트에서 독단적으로 작성한 것이니 참고만 해주세요!!!) 로그인을 구현할 때, 1. 단순히 백엔드한테 구글로부터 받은 인가코드를 보내면 2. 받은 토큰을 localStorage에 저장하는 방식으로 구현했었다. 하지만 이 방식은 보안을 고려했을 때 좋은 방법이 아니다. localStorage에 토큰을 저장하는 것은 권장되는 방법이 아니다. 따라서 아래와 같은 방법으로 수정하려 한다. 로그인을 하면 서버는 클라이언트한테 Access Token과 Refresh Token을 받음 Access Token은 전역 변수로 관리(Zustand 활용), RefreshToken은 httpOnly 쿠키로 서버로 부터 받음(이 때 서버와 클라이..

지금까지 헤더는 왼쪽에 제목, 가운데에 검색바, 오른쪽에 로그인(로그인 되있으면 마이페이지 버튼)이 있었다. 그런데 사실 헤더에 버튼들을 더 추가할까 생각 중이었는데, 그렇게 되면 모바일 화면에서는 공간이 좁아서 도저히 보여줄 수 없는 문제가 있었다. 그래서 사이드바를 만들고 싶었다. 사이드바를 만들려면 어떻게 할지 머리가 지끈했다. ‘바 버튼을 누르면 오른쪽으로 쫙 나오는 애니메이션은 어떻게 구현하지?’ 그리고 ‘원래 화면은 살짝 흐릿해져야하는 건 어떻게 만들어야하지?’ 같은 생각들이 머릿 속을 스쳐지나갔다. 그러다 깨달았다. 그냥 라이브러리를 쓰면 되는구나. 분명히 사이드바를 쉽게 구현할 수 있는 라이브러리가 있겠지. 가장 대표적인 라이브러리가 뭐지? → Material UI를 써보자! 옛날에 부트스..

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 웹스토어에서 설치가 가..