Frontend Challenge: February Edition 참가 후기! (javascript, css) + winner 선정!!!😆

dev.to 프론트엔드 챌린지 참가후기! + Winner 선정!

메일을 확인하다 눈에 띈 Dev.to의 Frontend Challenge!!

항상 글은 자주 읽어왔지만 이렇게 챌린지가 있는 건 또 처음 알았다!

게다가 시간도 넉넉하게 남아 참을 수 없었다!!!

 

챌린지 내용은

제공되는 HTML구성은 변경 불가능하고 js, css로만 변경가능한 챌린지였다

제법 재밌을 거 같아 바로 시작!

 

전체적인 틀안에서 구조변경이나 레이아웃 변경은 불가능햇다

하지만 자바스크립트로는 가능하기때문에

하나의 html이지만 주제별로 분리하는 것이 UI/UX측면에서도 편리할 것 같아 분리하는 것으로 정했다. 

 

분리한 페이지들을 라우터로 연결하는 것이 나을까..싶다가도 그렇게까지는 큰 의미가 없을 것 같아

네비게이션 바를 만들고 display none, block을 사용해서 다른 페이지처럼 느끼게 하도록 진행했다.

 

그리고

가장! 어렵다고 할 수 있는 메인색상과 폰트정하기

Love가 메인 주제였기 때문에 분홍색 위주 + 벚꽃 느낌으로 색감을 가져가면 좋을 듯 했다.

그래서 선택한 컬러! 그리고 너무 분홍색만 가져가면 하이라이트 색감이 없는 듯 해서 

초록, 보라, 진분홍을 추가적으로 넣어주었다

파스텔 색감 굿

 

https://colorhunt.co/palette/f9f5f6f8e8eefdcedff2bed1

Color Palette: #F9F5F6 #F8E8EE #FDCEDF #F2BED1 - Color Hunt

 

폰트는 좀 귀여웠으면 해서 최대한 영어 폰트에 어울리는 것으로 찾다가 

제주돌담체를 제목폰트로 하면 좋을 것 같아 제주돌담체 선택!

본문 폰트로 쓰기에는 약간 가독성이 부족한 것 같아 

HS산토끼체를 본문폰트로 선택!

한글폰트는 좀 별로라고 생각햇는데 영문폰트에 딱이다!

 

이렇게 디자인적요소를 생각하는게 항상 시간이 오래 걸리는듯 쉽다.

뭐든 초기기획이 제일 어렵고 시간이 많이 걸려~~~!

 

그 뒤로는 뭐 이미 아이디어가 있었기 때문에 코딩속도만 내면 금방할 수 있을거라 생각!

하.지.만

 

역시 내 예상은 벗어나구요~~~

Leaflet이 렌더링이 잘 안되길래 도대체 왜 그런지 몰라서..원인을 몇시간 동안 못찾았다 ㅠㅠ

분명히 다 잘했는데 말이지

하,, 그것은 display none처리 때문이엿다.....

display가 none인 상태에서 지도를 불러오면

지도가 그려지겟어요!? 

setTimeout으로 테스트해보니까 바로 지도 잘 나오는 것으로 확인!!

setTimeout은 쓸 순 없으니 IntersectionObserver으로 해결완!!

 

이 챌린지에서는 위의 부분을 제외하면 재밌게 잘 진행했던거 같다!

오랜만에 바닐라js로만 해보는 것도 너무 좋았다!!!

 

 

그리고 발표날이되서 메일을 확인해보니 DEV++운영자가 나를 멘션했다는 것이 아닌가!!!!!!!!!!!!!!!!

오 설마~~~내가~~~???

그렇다!!!!야호~~~~생각지도 못한 선물이다

dev shop에서 선물도 준다는데.. 어떻게 줄까..???

사실 그런것 보다 tech 도메인을 1년간 무료로 사용할 수 있는게 최고다!!!!!!

포트폴리오에 써야지 ㅎㅎㅎ!!

인터뷰사이트에서 공부도 가능해서 다음달에 바로 해볼예정!!!!!

 

여러모로 시작이 좋은 3월달이다

기운 받아서 열심히 취준해보자~~~!!!!!

위너 뱃지

 

 

 

 

https://dev.to/devteam/join-us-for-the-next-frontend-challenge-february-edition-3070

Join us for the next Frontend Challenge: February Edition!

 

챌린지에 제출한 사이트

https://love-challenge-feb.netlify.app/

 

Love Language Discovery