현장실습 회사에서 내준 과제를 하며 일어난 일들을 기록했습니다.

과제 내용

프론트엔드는 과제가 둘 중에 하나를 택해서 하는 것이였다.
나는 IR? 자료 공개용 사이트라는게 무엇인지 잘 모르겠어서 샌드버그 홈페이지 리뉴얼을 택했다.

과제 내용을 읽으며 React랑 Styled-Components써서 만들어야지 했는데, 아래에 tailwind.css를 사용하는 선택사항이 있어서 tailwind를 사용을 하고 싶어졌다.

첫 번째 난관

styled-components 대신에 tailwind를 사용해서 개발을 하려고 하였지만, 생각보다 너무 익숙하지 않은 코드와 외워야하는 부분이 방대하여 tailwind사용을 포기하였다. ( tailwind를 사용하였다가는 하루종일 공식문서만 보고 있을 것 같았다 )

그래서 깔끔하게 기술스택은 React + Ts + Vite, Styled-Components 정도로 정하였다.

디자인 생각

일단 기술스택을 정했으니..한 번 개발을 시작해보려고 했는데, 홈페이지 리뉴얼이기에 내가 디자인을 생각해야되는 상황이 발생하였다.

일단 샌드버그 공식 홈페이지를 보니 일단 너무 인터렉티브한 요소가 없다고 생각하여서 내가 만드는 홈페이지에는 좀 더 시각적으로 즐거운 사이트를 만들자는 생각을 하였다.

시각적으로 즐거운 사이트를 만들자는 생각을 하면서 저번에 공부했던 Framer-Motion이라는 라이브러리가 생각났고, 기술 스택에 Framer-Motion도 추가를 하였다.

개발 시작

일단 이렇게 디자인만 생각하고 있다가는 개발을 시작하지를 못할 것 같아서, 일단 개발을 시작하였다.

개발을 시작하고 처음으로 어떤 형식으로 만들까 하다가 문득 스크롤에 따라 반응해서 움직이는 홈페이지를 만들자는 생각이 들었고, 해본적이 없었기에 바로 검색에 들어갔다. ( 잘 못된 선택 )

그렇게 토요일 하루는 삽질하다가 넘겼다..

급해진 마음

일요일 일어나자마자 개발을 시작했다.
어제 스크롤 이벤트를 만드려고 했는데 Framer-Motion 이해도 부족으로 인해 처참하게 실패를 해버렸다. 그래서 어떤 홈페이지를 만들지..계속 생각을 해보았는데, FullPage라는 형식의 랜딩 페이지가 존재하는 것이다.

그래서 바로 서치에 들어가서 어떤식으로 구성되었는지 보고 내가 원했던 느낌과 비슷하여서 FullPage를 채택하기로 하였다.

FullPage형식을 CSS의 scroll-snap이라는 속성으로 느낌을 내주었다.

페이지 개발

페이지 개발은 처음에는 순조로웠다.
TItle Page는 어느 웹사이트에서 본 느낌을 내고 싶어서 Framer-Motion을 이용해 이쁘게 만들었다.

설명 페이지까지도 수월하였다.

하지만 솔루션 페이지에서부터 삐걱하기 시작하였다.
분명 난 제대로 코드를 작성했는데 Framer-Motion이 말을 안듣기 시작하였고..(물론 잘 못 작성한 것 때문이였다) 점점 속도가 느려지며 시간적 압박갑에 시달리기 시작했다.

하지만, 침착만하면 뭐든 할 수 있다고 하였는가?
침착하게 코드를 다시 보며 잘 못된 부분을 찾았고 빠르게 개발을 하기 시작했다.
점점 시간이 옥죄었지만 다행히도 완성하였다!

배포

vercel로 처음 배포를 해보았는데 정말 빠르고 편리하게 배포를 하였다.

제출!

그리고 README를 정리하고 메일로 과제를 제출했다!!
1시간 남은 상태로 아슬아슬 하였지만 좋은 경험이였다!

느낀점

이번에 느낀점이 생각보다 내가 많이 부족하다는 것이였다.
프론트엔드를 시작한지 3개월밖에 안된게 체감이 되었다.
그래도 내가 할 수 있는건 최선을 다해서 열심히 공부하는 것 밖에 없다고 본다.

주말에 과제 한다고 제로베이스를 못했는데, 이번주는 제로베이스에 힘을 써야 할 것 같다.