전체 글 (4) 썸네일형 리스트형 [동물 정보 사이트] 3. 동물 이름으로 검색기능 만들기 & 검색 결과 페이지 생성하기 1. 검색 및 결과를 보여주는 Search 컴포넌트 생성하기export default function Search() { // inputValue: 입력 필드의 현재 값을 저장하는 상태 변수 const [inputValue, setInputValue] = useState(""); const handleSearch = (e) => { e.preventDefault(); }; return ( setInputValue(e.target.value)} value={inputValue} placeholder="동물 이름 검색" /> 검색 );} 사용자가 입력한 값을 onChange 이벤트를 통.. [동물 정보 사이트] 2. 동물 상세 정보 페이지 만들기 이전 단계에서 메인 페이지에서 동물 카드를 클릭시 상세 페이지로 이동할 수 있도록 ①라우팅 설정과 ②Link 컴포넌트의 to 속성을 통해 `id`를 동적으로 반영하여 `/detail/:id`형식으로 경로를 설정하였었다. 해당 경로로 이동시 동물 `id` 값에 따른 Detail 컴포넌트가 화면에 렌더링된다. 특정 id 값에 대한 데이터를 받아오는 방법URL 파라미터란 주소의 경로에 유동적인 값을 넣는 형태로 id나 이름을 사용하여 특정 데이터를 조회할 때 사용한다. `useParams`는 URL 쿼리 파라미터의 키-값 쌍을 담고 있는 객체를 반환하기 때문에 동물 `id` 값에 따라 동적으로 변경되는 파라미터(`:params`)에 접근할 수 있다. 동물 상세 정보 페이지를 구현하는 Detail 컴포넌트에서.. [동물 정보 사이트] 1. 메인 페이지에서 동물 목록 화면에 표시하기 1. 라우팅 정의 및 라우팅 생성 방법사용자가 요청한 URL에 따라 알맞는 페이지를 화면에 보여주는 것을 `라우팅`이라고 한다. 오늘 과제는 컴포넌트 기반 라우팅 라이브러리인 React Router을 사용하여 동물 정보 사이트 화면을 구현하였다. 구현할 페이지가 많지 않아서 보다 직관적으로 라우트를 정의할 수 있는 `BrowserRouter`을 이용하였다.(+ 스타일 컴포넌트를 이용한 CSS 컴포넌트들은 생략하였다.)React Router에서 라우팅 생성 방법1. JSX 문법으로 라우트를 설정하는 `BrowserRouter` 컴포넌트를 사용하는 방법2. `createBrowserRouter`함수를 사용하여 Javascript 객체로 라우트를 설정하는 방법 (v6+) 2. 페이지 별 라우팅 과정1. ind.. 오즈코딩스쿨 프론트엔드 초격차캠프(feat. 웰컴키트) 사실 나는 국비 기회를 야무지게 쓰고 싶어서 나름 이바닥(?)에서 유명한 부캠들을 지원했었다.몇 일 시스템을 살펴보고 아니다 싶어서 런을 한 게 벌써 2번째...이제는 정.말.로 이 부트캠프 망령생활을 끝내야 했다. 부트캠프를 몇 번 찍먹해보니 어떤 커리큘럼이 좋은 커리큘럼인지 감별하는 능력이 조금은 생긴 것 같다.(jQuery까지 끌어모아) 일단 닥치는 대로 구겨넣는 물량파 부트캠프나,6개월만에 풀스택 개발자로 만들어준다는 허언증 부트캠프나,취업 연계해준다며 희망고문하는 블러핑 부트캠프나유명한 인기강사를 앞세운 간판류 부트캠프등 (심지어 그 강사 얼굴도 본적 없던 적도 있었다..^^)그럴듯한 마케팅 용어와 함께 현혹시키는 부트캠프가 저~엉말 많다. 그때 눈에 띈 오즈코딩스쿨!다른 OOO 부트캠프와 계.. 이전 1 다음
