네번째 프로젝트: Cadre Du Monde

Cadre Du Monde: React-Hooks를 이용한 웹어플리케이션 구현
👉 깃허브 바로가기 https://github.com/SumiSeo/photo-stocker
👉 웹사이트 바로가기 https://zealous-engelbart-d1a76f.netlify.app/

📅 작업기간
2021/8/26 ~ 9/1

🕹 기술스텍
HTML/SCSS
React-Hooks
JavaScript(ES6+)

🙆🏻‍♀️ 주요구현사항
모든 페이지의 레이아웃 구현
Unsplash API를 Fetch하여 데이터 불러오기
React-Hooks를 이용한 아코디언 컴포넌트 구현
Javascript를 이용하여 슬라이드 구현

---

제가 정말 좋아하는 리액트 Hooks를 이용한 어플릴케이션을 제작하였습니다.

검색하고 싶은 사진을 입력하면 Unsplash API데이터를 fetching 한 후에 불러온 후 View로 데이터를 보여줍니다. 사진을 올린 유저 이름과 사진도 따로 불러와 사진 위에 마우스를 갖다대면 작게 정보를 나타나게 해주었습니다.

데이터를 fetching해줄 때, axios 라이브러리를 이용해보았습니다. 좋은 점은 params를 옵션으로 보내줄 수 있다는 것입니다 :)

---

이번엔 아코디언 컴포넌트 입니다. 사실, 아코디언 컴포너트할 때, 약간 애를 먹었던 것은 CSS입니다. 리액트로는 useState를 이용해 클릭된 index를 추적해주는 일만 해주면 되어 비교적 간단했습니다.

const [activeIndex, setActiveIndex] = useState(null);
const onTitleClick = (index) => {
        setActiveIndex(index);
   };

🔍 부딪혔던 문제와 해결 과정(1)
인덱스가 바뀔 때마다 아코디언의 길이를 늘려주기 위해 따로 클래스를 만들어주어야 했습니다.

 const active = (index === activeIndex) ? "active" : "";

다음은 CSS코드입니다.

.panel {
  position: relative;
  height: 0px;
  background-color: white;
  transition: all 0.2s ease-in-out;
  overflow-y: hidden;
}

.item__info p {
  font-size: 1rem;
}
.active {
  height: 35px;
}

active클래스를 추가해주기 전에는 height를 0으로 만들어 글씨를 감춘 후, 추가될 때마다 height를 길게 늘려주어 글씨를 보여줍니다 :)

---

다음은 슬라이드 컴포넌트 입니다. chevron버튼을 클릭해줄 때마다 슬라이드들을 JS로 잡은 후 각각의 포지션을 바꿔주었습니다.

slides.forEach((slide, i)=>{
            console.log(slide);
            console.log(i);
            slide.style.transform = `translateX(${i * 100}%)`;
}
            

🔍 부딪혔던 문제와 해결 과정(2)
처음에 옆으로 쭉-늘리기 위해 display flex를 이용하려고 했지만... 플렉스는 결국 한 컨테이너 안에서 늘어나는 것이기 때문에 width를 조절해준다고 하여도 원하는 슬라이드를 구현할 수 없었습니다. 그러나 각각의 컨테이너에 position:absolute로 설정해, 서로의 이미지가 덮어쓰이게 한 후에 포지션을 이동함으로써 제가 원하는 슬라이드를 구현할 수 있었습니다.

---

👁 프로젝트 후기
언스플래시 이미지를 페칭해오는 어플리케이션 프로젝트는 이전에도 혼자 만들어봤었다. 약 한달전에... 그러나 원하는 홈페이지를 완벽하게 구현할 수는 없어, 이번에 훅스식 사고방식(?)에 조금 더 익숙해지고 싶어 몇가지 기능들을 넣어서 웹 사이트를 제작해보았다 :)

나는 사실 코딩을 공부하면서 바닐라JS에 많은 시간을 투자했고, 다른 프레임워크를 쓰지 않고 바닐라JS만으로 여러가지 사항을 구현할 수 있다는 것에 뿌듯해했다. 그러나 리액트 Hooks처럼 내가 좋아하는 라이브러리를 사용할 때, 가끔 바닐라JS식 문제 해결법보다 다른 길이 있다는 것을 깨닫는다. 특히 슬라이드를 만들면서, 분명히 hooks식 사고방식을 이용할 수 있었다. 아코디언을 만들때처럼 인덱스를 추적해가면서 유저에게 보여줄 수 있었을 것이다. 그러나, 이번엔 조금 더 완성도 있는 어플리케이션을 만드는 것이 목표였기 때문에 내게 조금 더 익숙한 바닐라 JS를 이용하였다...

그러나, 이번 프로젝트를 통해 리액트적 사고방식에 조금 더 가까워질 수 있었다. 나는 이러나 저러나 리액트를 너무 좋아하기 때문에, 앞으로도 리액트에 시간을 더 투자하여 실력을 향상 시킬 것이다 🤩