[동아리 소개 페이지 만들기] 3. 페이지들 만들고 동적 기능 추가하기2 - About US

1. 페이지 구현

1) 초안

About Us 페이지는 이름 그대로 우리에 대해 소개하는 페이지이다. 대표 이미지, 소개 사진, 임원진들, 동아리 활동 사진 등을 넣기로 했다. 다음 사진은 회의에서 나온 초안이다.

2) content 구현

기본 content들의 구성은 About Us 페이지를 맡은 팀원이 해주었다.

 

3) 동적 기능 추가하기

이미지 슬라이드

개인적으로 우리동아리를 소개하는 페이지에서는

"무엇을 하는 동아리인지 간단명로하고 기억에 남도록 보여주는 것"

이 가장 중요하다고 생각했다. 그래서 내가 About Us 페이지에 동아리 활동 사진들을 slide의 형태로 넣을 것을 제안했고 내가 갑작스럽게 제안한 것이기  때문에 내가 맡는게 맞다고 생각했다. 그래서 내가 직접 구현해서 넣기로 했다. 

처음에는 javascript와 css애니메이션으로 간단하게나마 직접 구현했다. 하루종일 노가다하여 밤을 새며 구현했지만 디자인도 너무 투박하고 예쁘지가 않았다.

그래서 더 구글링해본 결과 결국 React의 slide slick 라이브러리를 이용하기로 했다.

이미지들을 객체 형태로 저장하고 entries함수를 이용하여 list로 변환한 뒤 map함수를 이용한 반복문을 이용하여 { }안에 데이터 바인딩을 사용하여 넣어 주었다. 

개인적으로 이 부분을 구현하면서 javascript를 어떻게 효율적으로 실무에서 코딩하는지 좀 더 자세히 배운 것 같다.

고생끝에 구현한 동아리 활동 Slide Box

2. 문제를 해결하며 배운 것들

• React slide slick
• javascript 이미지 삽입 경로

https://react-slick.neostack.com/

Home | React Slick

3. 느낀 점

한두 번 같은 구조들이 반복되다 보니 일의효율성이 점점 올라갔다. 무엇보다 javascript의 기능들과 동작 원리에 대해 조금 더 체화할 수 있었다. 점점 페이지가 깔끔해지는 것 같아서 뿌듯했다.

또한 갑작스럽게 제안해서 일을 만들어서 슬라이드를 구현하는 과정에서 slide의 화살표랑 다른 div들을 커스텀하려고 했지만 실패했다. 그렇지만 시도하는 과정에서 styled component에 대해 공부하는 계기가 되었다. 다음에 기회가 되면 styped component도 사용해보고 싶다.