개발/React5 [네이버 클론 5] 배경색 테마 적용 3일 정도 틈틈히 생각을 하다가 해결방법을 생각해냈다. 지금 개발을 하고 있는 프로젝트는 SSR을 적용했다. 그래서 기존에 styled-component에서 사용하는 ThemeProvider로 body를 감싸지 못한다(App 컴포넌트는 theme 적용가능). 이를 해결하기 위해서 기존 방식인 클래스에 light, dark를 추가하는 방식을 사용했다. 아래 body의 스타일 부분은 간단하게 구성을 했고, 테마가 토글되는 기능도 되게 간단하게 구현을 했다. 이 코드는 테마를 변경하기 위한 버튼을 누르면 실행되는 부분이다. theme의 값은 useThemeContext에서 결정되서 나오게 되고, theme_str은 theme의 반대이다. 예를들어 theme_str은 theme이 light일 때 light의 반.. 2022. 2. 9. [네이버 클론4] 테마 기능, 더보기 버튼 토글 기능 제작 완료 조금씩이라도 하니까 뭔가가 나오긴 합니다. 여태까지 계속 손을 안대다가 다시 시작해보려고 합니다. 거의 3개월을 공부도 안하고 알바만 했는데, 역시 개발이 답인 것 같아서 지금도 한참 부족하지만 다시 꾸준히는 못하더라도 할 수 있을 만큼 열심히 노력하겠습니다. 툴바 기능 이후에 만든 것들은 헤더 메뉴 목록, 더보기 토글 버튼, 테마 기능, 날씨 API 받아와서 출력이 있습니다. 1. 날씨 API는 직접 백엔드 서버를 만들어서 헤로쿠에 deploy 해놓은 상태이고, deno로 프로젝트를 진행하다보니 deploy할 때 생기는 문제점들이 몇몇 있어서 골치 아팠지만 전부 해결해서 일단은 안정적으로 날씨 데이터를 받아오고 있습니다. 2. 더보기 토글 버튼은 이틀 정도 곰곰히 생각하면서 최대한 귀찮은 짓을 피할려고.. 2022. 2. 3. [네이버 클론3] 콘텐츠 메뉴 제작, 기타 기능 업데이트 어제는 하는둥 마는둥 열심히 하지 못해서 후회가 됩니다. 오늘은 머리가 좀 아프긴 한데 참으면서 헤더에 있는 콘텐츠 메뉴를 절반 정도 완성했습니다. 왜 절반이냐면, 네이버 사이트를 보면 더보기 버튼과 맨 오른쪽에는 날씨 정보 컴포넌트가 있습니다. 그 기능을 완성하려면 제가 생각할 때는 먼저 프론트쪽에서 네이버의 날씨 API에 접근해서 통신할 수 있는지 확인해보고, 된다 싶으면 보류해놓고 나중에 백엔드 쪽을 구성하면서 추가할 예정입니다. 아래는 각각의 아이템들이 필요로 하는 값을 배열에 담아둔 것과 콘텐츠 메뉴를 구성하는 핵심 코드입니다. menuObjects배열의 map을 이용해서 내부의 값들(name, className, href)을 MenuItem 컴포넌트에 넘겨줍니다. 콘텐츠 메뉴를 적용하기 전의 .. 2021. 10. 17. [네이버 클론2] Footer, 메인 버튼 추가 및 오류 수정 서론 글 쓰기 전 오늘은 어제 계획한 대로 아래쪽 화살표 버튼, 네이버를 시작페이지로 설정하는 링크 수정, 헤더 컴포넌트 아래에 있는 메뉴들 추가, 아래 맨 밑 메뉴 제작 등을 하겠습니다. 글 쓴 후 아 오늘은 더 많이 할 줄 알았는데 딱히 못했습니다. 그 이유는 안되는 걸 잡고 고민하다가 거의 3 ~ 4시간을 날려먹었으니 내일부터는 안되면 딱 30분에서 엄청 많으면 1시간만 투자를 하는 습관을 들여야겠습니다. 오늘 못한 작업들 | 네이버를 시작페이지로 설정하는 링크 수정 | 헤더 컴포넌트 아래에 있는 메뉴들 추가 | 아래 맨 밑 메뉴 제작을 내일 무조건 하겠습니다. 본론 1. 키보드 색깔 변화 위의 코드를 해석해보면 부모 요소인 div에 마우스를 올렸을 때 자식 요소인 svg의 색깔을 #b2babb로 .. 2021. 10. 15. [네이버 클론 1] 헤더 제작 과정 간단 설명 서론 오랜만에 만들어보니 좀 힘드네요.. 이제 취업을 준비해야 될 것 같아서 뭐라도 만들어 보려고 합니다. 그래서 가장 만만해 보이는 네이버로 정했습니다. 프로젝트를 생성한 날짜는 10월 7일인데, 본격적으로 만들기 시작한 날은 오늘이네요. 이제부터 매일 공부하면서 네이버 사이트를 만들건대, 그 과정을 포스팅할 예정입니다. 아직 README에 아무것도 적어놓지 않아서 코드만 보면 됩니다. 그리고 클론을 하는 목적은 취업도 맞지만 기존에 대형 기업에서 만든 사이트는 구조가 어떻게 되어있고, 그렇게 많은 데이터를 불러와서 화면에 어떻게 단기간에 뿌려줄까를 생각하게 되는 등 저에게 많은 도움이 될 것 같아서 시작했습니다. 흔히 클론 한다고 하면 웹에서 사용자에게 보이는 프런트만 구성해서 끝을 낸다고 알고 있습.. 2021. 10. 14. 이전 1 다음
