패스트캠퍼스 FE 부트캠프 | JS 프로젝트 사진 관리 앱 만들기 과제 후기

패스트캠퍼스 과정으로 자바스크립트 과제하는 시간을 2주정도 가졌다. 

주제는 사진 관리 앱 만들기인데, 조금 특별하게 꾸며보고 싶어 즐겨하던 동물의 숲 게임을 바탕으로 주민 관리 시스템을 만들어 보기로 했다.

---

프로젝트 소개

https://animal-crossing-project.web.app/index.html

동물의 숲

이번 프로젝트의 배포 링크이다.

 

사용한 기술 : 파이어베이스, HTML/CSS/JavaScipt/JQuery

메인 주민 관리 페이지

주민 목록을 확인할 수 있다.

등록하기(upload) 페이지로 이동할 수 있으며, 주민 정보 수정, 삭제가 가능하다.

 

업로드 페이지

등록하기 페이지로 주민 정보를 입력하고 등록할 수 있다.

 

수정 페이지

주민 정보를 수정할 수 있다. 사진도 변경할 수 있으며 저장 버튼을 누르면 주민 정보가 반영되고 X버튼을 누르면 취소할 수 있다.

게임 페이지

동숲 주민 카드 뒤집기 게임으로 클릭해서 짝 맞추기 게임을 즐길 수 있다.

유저플로우

---

과제에 구현한 요구 사항

- Firebase 서비스를 이용하여 사진을 관리할 수 있는 페이지 구현

- 프로필 페이지 개발

- 스크롤이 가능한 형태의 리스팅 페이지를 개발

- 전체 페이지 반응형 페이지 개발 ( 주민 목록은 w: 750px까지만 구현 )

- 사진, 주민 정보를 등록/수정/삭제 가능

- 유저 플로우를 제작하여 리드미에 추가

- 사진 관리 페이지와 관련된 기타 기능: 동숲 주민 카드 뒤집기 게임

- 주민 관리 페이지에서 토용을 클릭하면 페이지 상단으로 이동

---

느낀 점과 아쉬운 점

- JS 활용을 많이 못 한 것 같아서 바닐라 자바스크립트 실력을 더 길러야겠다고 생각했다. 

- 주민 관리 페이지에서 가로 750px 이하의 반응형을 구현하지 못했다. 모바일에서 봤을 때, 게임 화면과 메인 페이지, 업로드는 괜찮은데 중요한 관리 페이지의 반응형 구현이 미흡했다.

- 파이어베이스 삽질하는데 시간과 정신을 많이 쏟아서 JS에 집중하지 못했다. 

- JS 과제인데 DB, CRUD 위주의 과제라는 생각이 들었다. API를 활용해서 JS를 더 잘 활용할 수 있는 과제였으면 했다. firebase와 AWS 사용법이나 이게 뭔지 조차도 알려주지 않은 상태에서 인터넷에 있는 내용으로 따라하다 보니 내가 코드를 구현한게 별로 없는 느낌이었다.

---

멘토님 코드 조언

우리 조 담당 멘토님께서 이번에 만든 프로젝트에 코멘트를 달아주시는게 너무 도움이 되었다. 내가 막 만든 프로젝트를 전문가의 시선에서 잘못된 것을 집어주고, 고쳐야할 부분을 알 수 있다는게 좋다.

---

target="_blank"를 사용할 때 rel="noopener noreferrer" 같이 사용하기

target="_blank"는 a 링크를 사용할 때 새 창으로 열리게 하는 HTML 속성이다.

하지만 문제가 발생할 수 있어 rel="noopener noreferrer"와 같이 사용해주는게 좋다고 한다.

 

1. 보안상 취약점이 생길 수 있다.

noreferrer를 지정하면 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer: HTTP 헤더로 리퍼러(referer 또는 referrer)로서 송신하지 않는다.

 

2. 퍼포먼스가 떨어질 수 있다.

noopener를 지정하면, 링크된 페이지에서 window.opener를 사용해서 링크를 건 페이지를 참조할 수 없게 된다.

따라서 링크된 페이지와 링크를 건 페이지는 별개의 프로세스로 취급되기 때문에 서로 연결되어 퍼포먼스가 떨어지는 일도 없게 된다.