FrontEnd (3) 썸네일형 리스트형 [React] 검색 기능 구현 구현할 기능은 검색 기능이다. 레이아웃 요청 받은 디자인은 다음과 같다. 처음엔 div안에 돋보기 이미지와 input 태그를 사용하는 방법으로 구현했으나 검색 시 뷰의 전환과 동시에 쿼리를 넘겨야 했기에 form 태그를 이용하는 방법을 택했다. 카멜 케이스로 작성해야하는데 스네이크 케이스가 너무 보기 편하다.. 기능 구현 검색 대상은 게시물의 제목과 내용이다. 쿼리 전달 useState를 이용해 입력된 query를 받아오고 변화를 감지하기 위해 onChange를 사용했다. filter함수를 통해 입력값과 데이터를 소문자로 변환해 전달할 수 있도록 했다. const [query, setQuery] = useState(""); const keys = ["title", "content"]; // 키를 사용해 .. [React] React Router Routing이란? 사용자가 요청한 URL에 맞는 페이지 보여주는 기능 React Router 사용자 입력 주소 감지, 다양한 라우터 컴포넌트 제공 공식 페이지 종류 BrowserRouter HashRouter 설치 npm i react-router-dom yarn add react-router-dom import path 설정, Link 설정 /*BrowserRouter*/ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import {Link} from "react-router-dom" 사용예 - Navbar 구현 App BrowserRouter 사용 위해 태그로 전체 감쌈 Route 다중 사용 위해 Routes 태.. HTML 태그 정리 시맨틱 태그 태그 -헤더 영역을 의미 -검색 창, 사이트 메뉴 등 삽입 태그 -네비게이션 영역 의미 -다른 위치로 연결하는 링크 생성 태그 -메인 콘텐츠 삽입 -웹 문서마다 다르게 보여주는 내용으로 구성 -문서 당 한 번만 사용 가능 태그 -독립적 콘텐츠 삽입 -문서 안에 여러개 사용 가능 -내부에 태그 사용가능 태그 -콘텐츠 영역 -몇 개의 콘텐츠를 묶는 용도로 사용 태그 -사이드 바 영역 태그 -푸터 영역 생성 -, , 등 시맨틱 태그 모두 사용 가능 태그 -여러 소스를 묶음 -id, class 속성 사용 가능 일반태그 텍스트 입력 태그 -제목 나타냄 -n에 1~6까지의 수 삽입 가능, 숫자에 따라 크기 달라짐 태그 -텍스트 단락 태그 -줄바꿈 태그 -닫는 태그 없이 단독으로 사용됨 태그 -인용문 인.. 이전 1 다음
