본문 바로가기
개발/React

[네이버 클론4] 테마 기능, 더보기 버튼 토글 기능 제작 완료

by p_human 2022. 2. 3.

조금씩이라도 하니까 뭔가가 나오긴 합니다.

네이버 클론 이미지

여태까지 계속 손을 안대다가 다시 시작해보려고 합니다.

거의 3개월을 공부도 안하고 알바만 했는데, 역시 개발이 답인 것 같아서 지금도 한참 부족하지만 다시 꾸준히는 못하더라도 할 수 있을 만큼 열심히 노력하겠습니다.

 

툴바 기능 이후에 만든 것들은 헤더 메뉴 목록, 더보기 토글 버튼, 테마 기능, 날씨 API 받아와서 출력이 있습니다.

1. 날씨 API는 직접 백엔드 서버를 만들어서 헤로쿠에 deploy 해놓은 상태이고, deno로 프로젝트를 진행하다보니 deploy할 때 생기는 문제점들이 몇몇 있어서 골치 아팠지만 전부 해결해서 일단은 안정적으로 날씨 데이터를 받아오고 있습니다.

2. 더보기 토글 버튼은 이틀 정도 곰곰히 생각하면서 최대한 귀찮은 짓을 피할려고 여러가지 방법을 찾아봤습니다.

- 네이버의 쿠키 정보를 직접 가져와서 가공(실패 - 보안상의 이유로 네이버 서버가 내 프론트 서버의 요청을 허락하지 않는 이상 불가능)

- 크롤링을 해서 정보를 가져온 후에 가공(보류 - 그 프로그램을 만들 시간에 쿠키에 있는 정보를 가져와서 가공하는 게 더 빠름)

- 직접 쿠키 데이터 복사 후 노가다 작업(성공 - 실제 네이버에 있는 쿠키 정보를 이용해서 각 카테코리의 링크와 이름 등을 링크해서 성공적으로 모든 링크가 작동하도록 구현)

 

네이버 클론 동영상(기능 동작 확인)

 

계속 기능을 추가하면서 점점 늘어나는 중복되는 코드와 구조적으로 잘못되는 부분은 빨리 고쳐야겠다.

사실 네이버 메인페이지만을 클론할 목적으로 프로젝트를 진행했으면 리액트로 만들기보다는 순수 JS로 만들었을텐데, 그렇게 하기는 싫어서 이것저것 건드려보면서 진행하고 있다. 우리나라 개발자들은 거의 사용하지 않는 것 같은 deno라던지.. 굳이 지금 필요하지도 않는 SSR 적용해서 매번 서버로 요청해서 새로 빌드해서 다시 프론트로 보내주고(이 시간 때문에 5~ 10초 정도 날아간다.) 하는 시간이 아깝긴 하지만 재밌다.

지루하게 사이트의 큰 구조만 파악해서 html 구조 대충 끼워맞추고... 클론하고자 하는 사이트의 동적 기능은 하나도 구현하지 않은 채 html, css만 하느니 좀 시간이 걸리더라도 js로 구현해보고 싶은 기능을 구현해보는게 옳다고 본다.

물론 내가 잘하는 건 아니지만 이런식으로 혼자 이상한 방식으로 복잡하게 구현해 본 경험이 있다면 나중에라도 도움이 되지 않을까 싶다.

 

오늘 알바 가는데.. 안가고 프로젝트나 계속 했으면 하는 마음이 요즘 계속 생긴다.

개발이든 뭐든 정점에 섰으면 좋겠다.