이야기 정리

위 사진처럼 웹 사이트에서는 메인 페이지면 메인 페이지에 색상이 들어오고, 테마찾기를 클릭하면 테마찾기에 불이 들어온다. 만약 App 하나에서 작업했다면 클릭 이벤트로 처리할 수 있겠지만, 보통은 여러 컴포넌트 파일이 있고, 그걸 App에서 합치는 방식으로 작업할 것이다. 나의 경우 location을 사용했다. Home 삼항연산자를 사용해 경로가 지정한 문자열과 일치할 시 active라는 클래스를 갖게 하고, 아닐 시 null을 출력했다. 아래는 전체 코드다. import './App.css'; import { BrowserRouter as Router, Routes, Route, Link, Outlet, useParams } from "react-router-dom" import { useLocatio..

제주관상 사이트, 오늘의 제주 사이트 바로가기 : https://todays-jeju.netlify.app/ 코드 보기 : https://github.com/beren-105/jeju_tourism_web 개발동기 '오늘의 제주'는 사용자가 제주도의 날씨를 확인하고 원하는 관광지를 찾을 수 있는 플랫폼이다. "제주도에 여행왔는데 오늘은 어디를 갈까?" 여행에 있어 목적지를 정하는 것은 선택이 아닌 필수다. 목적지를 정하려면 많은 정보가 필요하다. 어디에 무엇이 있는지, 그게 어떤 것인지도 알아야하고 또, 그 장소에 어울리는 날씨인지도 중요하다. 오늘의 제주는 사용자가 제주도의 정보를 사이트 하나로 알 수 있는 편의성을 제공하기 위해 개발되었다. 제주도에서 오늘의 일정을 계획하려는 관광객을 주 타겟으로 삼..

클론 코딩은 도움이 되지 않는다는 이야기가 있다. 그저 강의만 보고 따라한다면 크게 도움이 되지 않는다. 그러나 이미 잘 만들어진 사이트를 분석해 내 방식으로 코드를 짜보는 건 색다른 경험이며, 추후 실제 사이트를 제작할 때 도움이 된다. 첫 클론 코딩으로는 가장 유명한 사이트 중 하나인 유튜브를 선택했다. 만들어진 페이지 보기 https://clone-coding-youtube.netlify.app/ 전체 코드는 아래에서 확인할 수 있다. https://github.com/beren-105/Mini-Project/tree/main/4_youtube 제작기간 7일 사용할 것 React Tailwind 유튜브 API Git & GitHub 목표 깃을 사용하여 작성한 코드를 깃허브에 올린다. 리액트에서 테일..

이번에는 useNavigate의 사용법과, 이를 이용해 값을 가져오는 방법, 그리고 리액트에서 페이지 뒤로가기 버튼을 만드는 간단한 방법에 대해 설명할 것이다. useNavigate란? 조건을 만족했을 시(로그인, 양식 제출 등), 혹은 특정 이벤트 발생 시 url을 조작할 수 있는 Hook 특정 조건을 달 수 있다는 점에서 Link와 차이점이 있다. Link는 a태그라고 생각하면 편하다. react v6부터 useHistory의 대체제로 등장했다. useHistory에서 사용했던 기능을 useNavigate에서도 사용할 수 있는 것이다. 기본 사용법 react router dom을 설치한 후 다음과 같이 코드를 작성한다. 설치 코드 : npm install react-router-dom import {..