고양이 사진첩 어플리케이션

UihyunLee·2023년 1월 3일
0

js

목록 보기
6/6
post-thumbnail

고양이 사진첩

고양이 사진첩 어플리케이션의 리뷰를 작성해보려한다.

프로그래머스에 있는 Vanila Js만을 이용한 과제 테스트이다.

총 3시간 안에 요구사항을 만들면 된다.

요구사항은 복잡하지 않다. 간단하게 요약을 하자면 하나의 페이지 안에서 상태관리를 통해서 폴더 경로에 따른 하위 폴더 및 파일을 보여주고, 클릭 시 이동 및 경로를 보여주고 로딩, 이미지 클릭에 따른 이미지 모달창을 보여주는 것이다.

결과적으로 로딩까지는 구현하지 못했다. 이미지를 보여주는 부분에서 생각보다 시간을 많이 소모하게 되었고, 로딩창 및 보너스 점수를 주는 부분은 만들지 못하게되었다. 다시 도전해서 부가적인 부분을 깃헙에 올려보도록 하겠다.

과제에 대해 조금 더 세부적으로 작성해보려한다. 코드가 궁금해서 들어오신 분이 있다면 맨 아래 깃허브 주소를 들어가서 확인하시길 바랍니다.

목표

이미 한 번 풀이를 해본 과제테스트이지만, 풀이를 처음 했을 당시는 블로그의 도움이 없었다고는 할 수 없다. 따라서 블로그의 도움 없이, 온전하게 스스로 문제를 풀고 순수 Javascript의 동작에 대해서 풀이 하는 것.

과정

우선 내가 구현해야하는 요구사항을 파악 후 필요한 기능들을 파악한다.
그 후 기능에 따른 컴포넌트 분리를 고려한다.
이 과제 테스트에는 편리하게도 class를 구분지어 첫 index.html에 띄워져있다. 이를 고려하여 문제를 해석한다.

우선 간단하게 Api, Breadcrumb, Nodes를 구현한 후 상세한 부분을 수정하며 구현한다.

Breadcrumb 컴포넌트 ?

이는 경로를 나타내는 컴포넌트이다. 맨 처음은 root 경로이기 때문에 root 하나만 나타날 것이다. 하지만 만약 검은고양이 라는 폴더를 클릭하게 되면 root - 검은고양이 이런식으로 사용자에게 보여줄 수 있어야 하는 컴포넌트이다.
(보너스점수를 받기 위해서는 root - 검은고양이 - 2021/4 이런식으로 경로가 되어있다면 검은고양이를 클릭 시 onClick event를 발생시켜 경로 변화 및 Nodes에서 보여주는 Node에 관한 상태변화 처리를 해야한다.)


Nodes 컴포넌트 ?

Nodes 컴포넌트 내부에는 Node 클래스명을 가진 div들로 구성된다.
만약 현재 경로가 root라면 이전 경로로 가는 div 없기 때문에 존재하지 않고, 만약 root가 아니라면 이전 경로로 가는 이벤트를 가진 div가 존재한다.
또한 현재 경로 내부에 존재하는 파일 및 폴더를 보여주는데, 파일 or 폴더의 type에 따른 이미지를 다르게 하여 보여준다.
click event를 각 node에 걸어주기 위해서 dataset을 이용하여 구현했다.


imgView 컴포넌트 ?

ImgView 컴포넌트는 폴더가 아닌 이미지(Nodes 내부에 있는)를 클릭 시에 화면에 이미지를 보여주는 컴포넌트이다. 모달창과 같이 이미지가 화면에 띄워져있는 상태에서 이미지 외부를 클릭하면 모달창이 꺼지도록 한다.
사실 이 부분은 참고를 하게 되었다. contains를 이용해서 상태관리에 관한 조건을 걸었으면 되었는데, 아쉬운 부분인 것 같다. 그래도 새롭게 하나 알게 되었으니 ..🥲


로딩창을 보여주는 컴포넌트도 분명 필요하고 로딩창을 관리할 상태도 App에 분명 존재해야할 것이다. 생각보다 라이브러리 없이 타입스크립트 없이 vanila js로만 코드를 작성한다는 것이 많은 시행착오를 겪게 되고 코드의 길이도 더 길어진다는 것을 새삼 느끼게 되는 과제 테스트였다. 시간 부족으로 인해 풀이하지 못한 부분은 다시 시작해서 완료를 해보도록 하겠다. 🙋🏼‍


++

로딩인 경우 모달창을 화면에 보여주는 기능과, Breadcrumb(상단 경로)를 클릭 시 그에 따른 경로에 맞춰 Nodes를 보여주는 기능을 추가적으로 완료 ✅

github

🚀

profile
공부 기록

0개의 댓글