[추가] Admin Page의 모습

정운·2026년 4월 17일

ItsMe

목록 보기
10/10
post-thumbnail

ItsMe! 프로젝트는 회고 까지 작성 했지만 추가 단계로, 제 웹페이지를 보시는 분들은 볼 수 없었던 하지만, 포트폴리오를 관리해야하는 입장에서 반드시 필요하다고 생각되어 추가했던 Admin(관리자)페이지를 기록해보려고 합니다.

보통 포트폴리오는 정적 페이지로 만드는 경우가 많지만, 저는 포트폴리오가 추가 되면 웹페이지에서 바로 업데이트 하고 싶다 라는 생각을 가져서 관리 기능을 구현했습니다.


1. Admin 페이지를 만든 이유

  • 데이터 무결성: 새로 포트폴리오를 시작하거나 완성 했을 때 마다 새로 마크다운 파일을 만든다면 앞의 포트폴리오는 어떻게 만들었는가를 일일히 확인해야 하고 양식도 맞춰야 해서 데이터의 무결성을 유지하고 싶었습니다.

  • 운영 효율: 위와 마찬가지로 새로 마크다운 파일을 만들었을때 그러면 다시 github에 업데이트 해야하는 측면이 번거롭다고 생각해서 만들었습니다.

2. 주요 기능 및 화면 구성

2-0. Admin 페이지

  • 로그인 하면 바로 리다이렉트 되도록 설정 하여 관리 기능을 바로 이용할 수 있습니다.

2-1. 레주메 수정

  • 기능: 사진 수정, 자기 소개, 기술 스택, ResumePdf 수정, 추가 가능

2-2. 자기소개서 추가, 수정

  • 메타섹션 영역과 마크다운 본문 영역을 분리 했습니다. 각각 모두 수정, 추가 가능합니다.

3. 기술적 고민

  • 인가 보안
    일반 유저는 접근할 수 없도록 로그인시에만 Admin 메뉴가 활성화 되도록 했습니다. middleware 를 두어서 loginStatus를 조회한 뒤 아니라면 로그인 화면으로 돌려보내도록 설계했습니다.

  • UX/UI 편의성
    저혼자 쓰는 도구 이지만 번거로움을 최대한 예방하고자 했으며 유효성 검사 로직을 배치했습니다.


4. 최종 회고

Admin 페이지를 구현하면서는 단순한 포트폴리오 보다는 서비스라는 기분이 들었습니다. 특히 github 레포지토리를 조작해야 했기에 실무 서비스 에서 했던것이라면 예비용 개발 서버를 두고 했었겠구나 하는 그런 동작들과 사용자 화면에 어떻게 반영 시켜야 할지 등등 을 많이 생각하면서 코드를 작성 하는 고민을 많이 했습니다.

▶︎Live Service
✓GitHub

profile
Git: https://github.com/JeongUn1028

0개의 댓글