잇(IT)! 가이드
EP.1 링크 단축 서비스 (4) — 사용 방법 [완성]
잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도록 설명해 드립니다.
들어가기
드디어 서버가 완성되었고, 우리는 링크 단축 서비스를 사용할 수 있게 되었다.
여기까지 따라온 자기 자신에게 박수를 치고 시작하자.
이번 글은 이 시리즈의 마지막 글로, 링크 단축 서비스의 사용 방법을 자세히 설명한다.
서비스 구조
우리가 만든 링크 단축 서비스는 다음과 같은 구조를 갖는다.
여기서 관리자 인증을 통해 접속해야 하는 페이지는 🔒 아이콘을 이용해 표시하겠다.
인증창 🔒
관리자 인증을 하는 창이다.
별도로 직접 구현한 창은 아니며, 운영체제와 브라우저에 따라 다르게 나타날 수 있다.
인증 정보는 일반적으로 저장되며, 한 번 로그인해 두면 일정 기간동안은 같은 브라우저에서 다시 비밀번호를 치지 않아도 된다.
/ (index.html) 🔒
포탈과 같은 페이지로, 링크와 로그 관리를 할 수 있는 메인 페이지이다.
/create 🔒
링크를 생성하는 페이지이다.
여기서 공개 여부는 다음 3가지로 구분된다.
예를 들어, domain.com이 vercel과 연결되어 있고, alias가 test이며, 연결된 URL이 https://example.com/이라고 하자.
- public: 누구나 domain.com/test에 접속하면 https://example.com/으로 리디렉션된다.
- protected: domain.com/test에 접속하면 인증 오류가 뜨며, domain.com/test?pw=[패스워드]를 입력하면 리디렉션된다.
- private: domain.com/test에 접속하면 인증창을 통해 인증하거나, 이미 로그인된 경우에만 리디렉션된다. 이외에는 인증 오류가 반환된다.
iOS URL와 Android URL은 스키마 또한 지원한다.
예를 들어 domain.com/test를 입력하면,
iOS에서는 ios-app://test1이 열리게 할 수 있으며, Android에서는 android-app://test2가 열리도록 할 수 있다. 물론 Play 스토어나 앱 스토어로도 링크되게 할 수 있다.
/list 🔒
전체 링크 리스트를 확인할 수 있는 대시보드이며, 각 링크를 직접 관리할 수 있다.
연필 버튼을 누르면 /edit/:alias로, 삭제 버튼을 누르면 /delete/:alias로 연결된다.
/edit, /delete 🔒
말 그대로 링크를 수정하거나 삭제하는 페이지이다. 삭제 전에는 확인이 필요하다.
/logs 🔒
링크 클릭이 언제 일어났는지, 어떤 브라우저나 ip주소에서 클릭했는지 확인할 수 있는 페이지이다.
/logs/:alias로 들어가면 각 링크별로 클릭된 정보를 확인할 수도 있다.
404.html (혹은 접속 불가 페이지 모두)
링크가 존재하지 않을 경우 표시되는 페이지이다.
맺음말
이렇게 우리는 첫 번째 프로젝트인 링크 단축 서비스를 성공적으로 구축해볼 수 있게 되었습니다.
필자는 원래 MySQL을 이용하여 구축해 사용 중이었는데, Postgres로 옮기며 일부 코드를 수정하게 되어 작동하지 않는 기능이 일부 있을 수 있습니다. 만약 이를 발견한다면 댓글 혹은 메일로 제보해 주시면 감사드리겠습니다. 또한, 보안이나 오류에 대해서도 편하게 제보해 주시면 정말 감사드리겠습니다.
모두 긴 글 읽어 주셔서 감사하며, 앞으로도 다양한 프로젝트 예제가 올라올 예정이니 공감과 구독 부탁드리며, 많은 관심 가져주시기 바랍니다.
감사합니다 :)
링크 단축 서비스 프로젝트 모아보기
2024.05.13 - [잇(IT)! 가이드] - EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)
EP.0 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)
잇(IT)! 가이드EP.0 — 웹사이트 무료로 호스팅하기 (feat. Vercel & GitHub)잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게
scian.xyz
2024.05.14 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (1) — 시작하기
EP.1 링크 단축 서비스 (1) — 시작하기
잇(IT)! 가이드EP.1 링크 단축 서비스 (1) — 시작하기잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할 수 있도
scian.xyz
2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축
EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축
잇(IT)! 가이드EP.1 링크 단축 서비스 (2) — Vercel 연결 및 데이터베이스 구축잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구
scian.xyz
2024.05.16 - [잇(IT)! 가이드] - EP.1 링크 단축 서비스 (3) — 서버측 코드 작성
EP.1 링크 단축 서비스 (3) — 서버측 코드 작성
잇(IT)! 가이드EP.1 링크 단축 서비스 (3) — 서버측 코드 작성잇(IT)! 가이드는 IT 프로젝트를 따라해보실 수 있도록 하는 가이드입니다. 여러 프로젝트를 단계별로 설명드리며, 누구나 쉽게 따라할
scian.xyz