블로그

React router에서 제공하는 useParams(), useSearchParams(), useNavigate() 훅 useParams() 특징: URL의 동적 경로 세그먼트(path parameter)에 접근할 수 있게 해줌. 사용 사례: 동적 라우팅이 필요한 경우, 예를 들어 /users/:id 경로에서 id 값을 가져올 때 사용. 상세 페이지 구현에 유용 예시: const { id } = useParams(); 스프링부트에서 사용 시 @GetMapping("{id}") public ResponseEntity get(@PathVariable Integer id) { // {id} 경로에서 id값을 가져올 수 있다. Member member = service.getById(id); if (membe..

HTTP 상태 코드는 클라이언트의 요청에 대한 서버의 응답 상태를 나타내는 숫자 코드이다.   1xx (Informational): 요청이 수신되어 처리 중임을 나타냄. 주로 클라이언트에게 추가 작업이 필요한지 알려줌. 100 Continue 101 Switching Protocols 2xx (Successful): 요청이 성공적으로 수신, 이해, 수락되었음을 나타냄. 200 OK 201 Created 204 No Content 3xx (Redirection): 요청 완료를 위해 추가 조치가 필요함을 나타냄. 301 Moved Permanently 302 Found 304 Not Modified 4xx (Client Error): 클라이언트 오류로 인해 요청을 처리할 수 없음을 나타냄. 400 Bad R..

빌더 패턴 (Builder Pattern)  빌더 패턴은 객체 생성 과정을 단순화하고 가독성을 높이는 디자인 패턴복잡한 객체를 생성할 때 생성자 매개변수가 많아지는 문제를 해결하기 위해 사용별도의 빌더 클래스를 통해 객체 생성 과정을 단계적으로 수행할 수 있다. 예: ResponseEntity.BodyBuilder 클래스는 빌더 패턴을 사용하여 HTTP 응답을 생성한다.  프로미스(Promise)  프로미스는 자바스크립트의 비동기 처리를 위한 객체비동기 작업의 최종 완료 또는 실패를 나타내며, 콜백 함수 대신 사용프로미스는 pending, fulfilled, rejected 상태를 가지며, 상태 변화에 따라 후속 작업을 처리할 수 있다.예: axios.get() 메서드는 프로미스를 반환하여 비동기 HTT..

콜백 함수(Callback Function)란? 다른 함수의 인자로 넘겨지는 함수.그 함수의 내부에서 호출되어 특정 작업을 수행하게 된다.비동기 작업을 할 때 주로 활용되는 개념이다 특정 시점에 원하는 작업을 수행할 수 있게 해주는 핵심 개념  React에서 콜백 함수 사용  1. 이벤트 핸들러const handleClick = () => { console.log('Button clicked!');}return ( 클릭)여기서 onClick 이벤트에 전달된 handleClick 함수가 콜백 함수. 버튼 클릭 시 React에 의해 호출된다.   2. 상태 업데이트const [count, setCount] = useState(0);const incrementCount = () => { setCount(..

props를 분해할당으로 받기 import React from "react";function MyElem(props) { console.log(props); // {name: "son", age: 33} const { name, age } = props; console.log("name", name); // son console.log("age", age); // 33 return ;}function MyComp({ city, country, price }) { // props : {city: "seoul", country:"korea", price: 500} console.log("city", city); console.log("country", country); console.log(..