이번 과제는 next.js와 typescript를 사용해서 해당 사이트의 메인 화면을 클론 코딩하는 것.
✨ 과제를 하면서 아쉬웠던 부분들은
구현한 사이트에서 아쉬웠던 부분은 개발자 도구로 해당 사이트의 스타일을 참고하였는데, 시멘틱 태그들을 쓰지 않고, div로 모두 스타일을 적용했던 것들이 조금 아쉬웠다. 나 또한 늘 div만을 써오다가 최근에는 시멘틱 태그의 중요성을 알게 되어, 시멘틱 태그를 적용하자 마음을 먹고 조금씩 천천히 적용하고, 적응을 하려고 노력하고 있는 상태여서 그런지 이러한 점들이 조금 눈에 보이니까 나도 발전하고 있구나!라는 생각이 들어서 나름 기분이 좋았다 :)
라이브러리를 사용한 점 (다행히 라이브러리를 쓰는 것은 자유였음) 사실 이 부분에 대해서는 반반이다.. 라이브러리를 사용하지 않고, 직접 만들어 보았으면 당연히 더 많이 배울 수 있는 것은 맞는데 주어진 시간이 1.5일밖에 없었거니와, 라이브러리를 적용하는 것에도 익숙하지 않은 나로서는 라이브러리 연습을 하는 것도 나쁘지 않았고, 오히려 많이 배웠다! 세상에는 정말 좋은 라이브러리가 많다... 조만간 라이브러리로 떡칠한 웹 사이트를 한번 만들어보는 것도 나쁘지 않겠다는 생각이..^^ 라이브러리 최고 또한, 직접 구현하는 방식으로 애니메이션 페이지를 만들어보는 것도 좋을 거라는 생각이 든다. js를 잘 못하는 내가 그래도 재미있게 잘 배울 수 있는 방법일 수도...!
next.js를 적용할 부분이 적었다는 것 주어진 두 개의 과제 중 하나를 선택하는 것이었는데 내가 선택당한? 과제가 api도 없고, 메인 화면 한 페이지만 구현하면 되는 거라, 개인적으로 next.js를 맛보았다고 할 수도 없을 정도의 next.js를 구현하지 않았나... 사실 next.js 한 시간짜리 강의를 들은 게 다라서... 다른 과제를 했다면 엄청 엄청 많이 헤맸을 것 같긴 한데 그래도 그만큼 많이 배울 수 있는 기회였어서 조금 아쉬움이 남는다. 그래서 조금 시간이 남을 때, 선택하지 못한 과제를 혼자서 구현해볼 생각이다!!말로만 하지 말고 꼭 해보자
내가 구현하고자 했던 것들을 만족스럽게 끝낸 점. 물론, 라이브러리의 도움을 받았지만 내가 생각해서 구현하고자 했던 부분들을 모두 끝냈고, (반응형, 애니메이션 등) 해당 결과물이 이제까지 위 코드에서 했던 과제들 중 개인적으로는 가장 만족스러웠던 점이다. 그만큼.. 쉬운 과제였어서 그럴 수도 있을 것 같다. 하지만, 가끔씩은 만족감이 생겨야 탄력을 받아서 다음번에도 열심히 하고 그러는 거 아닐까!?
오늘 강의 때 잘한 과제에 우리가 한 과제가 간택된 점..! 잘했다고 보여주신 깃 헙에 우리 팀 말고 다른 한 팀이 더 있었는데, 분하지만 그분들이 더 잘하셨다... 그렇지만 우리는 2등이라고..! 2등도 충분히 아름다워!!
✍ 사용한 라이브러리를 정리해보자
AOS 사용법이 진짜 엄청 간단해서 너무너무 맘에 드는.. 라이브러리를 발견했다. 주어진 과제의 사이트에 스크롤해서 해당 컴포넌트가 렌더 될 때 텍스트가 위로 올라오는 (fade-up) 애니메이션이 많았는데, 진짜 간단하게 적용할 수 있어서 너무 행복했던 감사한 라이브러리다. 사용법은 이게 끝이고, 밑에 깃허브를 참고하면 추가로 세팅할 수 있는 기능들이 있다. 컴포넌트를 렌더 해주는 파일에서 ( 나의 경우 next.js를 사용했고, 한 페이지뿐이라 pages > index.tsx ) 위의 코드대로, useEffect를 사용하여 aos를 페이지 전체에서 관리할 수 있도록 세팅하였다.
해당 책갈피들이 왼쪽부터 순서대로 fade-up 되어야 하는 애니메이션 부분이 있어서,
옵셔널 기능을 추가하여 가운데, 오른쪽 책갈피에 delay를 주었음!
진짜 쉽고 재미있는 라이브러리라서 위코드 온보딩 끝나고, 취업 준비할 때 해당 라이브러리로 멋진 포폴 사이트를 제작해보면 좋겠다는 생각이다!
