📅 2024-03-20, 69일차
구현 하기 전:
통합 검색 기능을 구현하려면 다양한 검색 키워드에 대해 처리해야 합니다. 주어진 Cafe 클래스의 필드를 기반으로 검색 기능을 구현할 수 있습니다. 여기에는 카페이름, 지역, 해시태그 등이 포함됩니다. 아래는 각각의 검색 조건에 대한 구현 방법에 대한 예시입니다.
카페이름으로 검색하기:
사용자가 입력한 카페이름을 기준으로 Cafe 객체의 name 필드를 검색합니다.
예를 들어, 사용자가 "스타벅스"라고 입력했다면, 모든 Cafe 객체 중에서 name이 "스타벅스"인 항목을 찾습니다.
지역으로 검색하기:
사용자가 입력한 지역 정보를 기준으로 Cafe 객체의 address 필드를 검색합니다.
예를 들어, 사용자가 "서울"이라고 입력했다면, 모든 Cafe 객체 중에서 address에 "서울"이 포함된 항목을 찾습니다.
해시태그로 검색하기:
사용자가 입력한 해시태그를 기준으로 Cafe 객체의 hashtag 필드를 검색합니다.
예를 들어, 사용자가 "#디저트"라고 입력했다면, 모든 Cafe 객체 중에서 hashtag에 "#디저트"가 포함된 항목을 찾습니다.
이러한 검색 기능을 구현하려면 검색어를 받아들이고, 각 검색 조건에 따라 Cafe 객체 목록을 필터링하여 결과를 반환하는 메서드가 필요합니다. 이러한 메서드를 검색 서비스 클래스에 구현하고, 이를 호출하여 사용자의 검색 요청에 대한 결과를 제공할 수 있습니다.리액트
왜?
웹 페이지는 이동시 특유의 깜빡거림이 있다.
그런데 모바일 앱은 그렇지 않다.
- 이동시 부드럽고 빠르다.
리액트는 모바일 앱 같은 웹을 만들 수 있다.
고품질의 웹 사이트 제작 가능.
- 가능한 이유는, 많이 복잡한 UI를 가진 앱도 보다 깔끔하게 제작 가능
모바일 앱도 제작 가능
기업입장에서는 비용절감
리액트를 쓸 수 있는 환경 세팅
코드펜
Setting -> JavaScript Preprocessor -> Babel 선택 -> Save & Close
HTML
<div id="root"></div>JS(Babel)
console.clear();
// 리액트를 쓸 수 있는 환경
import React from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
// function App(){}
const App = () => {
return "배고팡";
};
ReactDOM.render(<App />, document.getElementById("root"));리액트 기초문법
1. 리액트는 class대신 className을 사용한다
- 리액트는 HTML이 아닌 JSX문법을 사용하기 때문이다.
2. 리액트는 감싸는 태그가 없으면 에러가 발생한다.
return (
<>
<div>현재 숫자 : {num}</div>
<button onClick={() => {
setNum(num + 1);
}}>버튼</button>
</>
);3. 리액트에서 변수 바인딩은 중괄호 { } 를 사용한다.
return (
<>
<div>숫자 : {num}</div>
</>
);4. html에 인라인 스타일 속성을 넣을 때는 style = {} 로 작성하고 중괄호 안에는 오브젝트 자료형 형태로 작성한다.
return (
<div style={{ color: 'skyblue' }}>안녕</div>
</div>
);인라인 안에 작성
const Square = () => {
return (
<div style={{
width: "200px",
height: "200px",
backgroundColor: "red",
display: "flex",
alignItems: "center",
fontWeight: "bold",
color: "white"
}}
>
정사각형!
</div>
);
};변수 오브젝트 형태로 작성
// 화살표 함수 구문을 사용하여 myStyle이라는 함수를 정의합니다.
const myStyle = () => {
// 이 함수는 CSS 속성이 담긴 객체를 반환합니다.
return {
// 텍스트 색상을 'pink'로 지정합니다.
color: 'pink',
// 글꼴 크기를 '20px'로 지정합니다.
fontSize: '20px'
};
};
// 화살표 함수 구문을 사용하여 App이라는 함수형 컴포넌트를 정의합니다.
const App = () => {
// 이 컴포넌트는 JSX 요소를 반환합니다.
return (
// 클래스 이름이 'App'인 div 요소의 시작입니다.
<div className="App">
{/* myStyle 함수를 호출하여 반환된 객체를 사용하여 인라인 스타일을 적용한 div 요소의 시작입니다. */}
<div style={myStyle()}>안녕</div>
{/* div 요소의 끝입니다. */}
{/* 클래스 이름이 'App'인 div 요소의 끝입니다. */}
</div>
);
};
리액트에서 없는 태그 만들어서 사용하는 방법
HTML
<div id="root"></div>JS(Babel)
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
//컴포넌트화 : 리액트 컴포넌트를 만들었다
const Hi = () => {
return <div>Hi</div>;
};
const Hello = () => {
return <div>Hello</div>;
};
const App = () => {
//jsx -> jsx는 하다보면 익혀질거야 / 쉽게 말해 자바스크립트안에서 html 쓸 수 있음
return (
<div>
<Hi /> {/* Hi */}
<Hello /> {/* Hello */}
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));리액트에서 글자가 아닌 모양을 보여주기
HTML
<div id="root"></div>JS(Babel)
console.clear();
import React, { useState } from "https://cdn.skypack.dev/react@18";
import ReactDOM from "https://cdn.skypack.dev/react-dom@18";
const Square = () => {
return (
<div
style={{
//기존 style 속성 사용하는 방법과는 다르다
width: "200px",
height: "200px",
backgroundColor: "red",
display: "flex",
alignItems: "center",
fontWeight: "bold",
color: "white"
}}
>
정사각형!
</div>
);
};
const Circle = () => {
return (
<div
style={{
width: "200px",
height: "200px",
backgroundColor: "blue",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "white",
fontWeight: "bold",
borderRadius: "50%"
}}
>
원!
</div>
);
};
const App = () => {
//jsx -> jsx는 하다보면 익혀질거야 / 쉽게 말해 자바스크립트안에서 html 쓸 수 있음
return (
<div>
<Square />
<Circle />
</div>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
리액트의 갱신 원리
index.jsp
클라이언트 어쩌구 방식
만드는건 쉽고, 고치는건 어렵다
백엔드에서 뷰를 고치는 방법?
자바스크립트에서는
null == 0 == false
null이면 거짓취급
리액트는 불변성을 지켜줘야해
hello world