본문 바로가기
728x90

전체 글202

Spring Controller required 속성 bind.MissingServletRequestParameterException: Required request parameter 위 에러를 해결하며 알아본 스프링 Spring Controller required 속성 정리 ✅ Spring Controller required 속성 [ required=false 예제] public String hello(@RequestParam("name") String name, // required 조건이 없으면 기본값은 true, 필수 파라미터. // 파라미터 pageNo가 존재하지 않으면 Exception 발생. @RequestParam(value="pageNo", required=false) String pageNo){ // 파라미터 pageNo가 존재하지 않으면.. 2022. 3. 10.
리액트 useCallback, useCallback 쓰는 이유 리액트 useCallback, useCallback 쓰는 이유 1. useCallback useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. React 공식 문서에서는 useCallback을 '메모제이션된 함수를 반한하는 하는 함수' 라고 한다. useMemo와의 차이는, useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용한다는 점. 2. 왜 useCallback을 사용해야 할까? 현재 하위 컴포넌트에 전달하는 콜백 함수가 inline 함수로 사용되거나, 컴포넌트 내에서 함수를 생성하고 있다면 새로운 함수가 만들어지게 된다. 예를들어, Counter안에 increament 함수들은 컴.. 2022. 3. 10.
컨트롤러 @RequestParam 기본값 설정하기@RequestParam(required = false) 컨트롤러 @RequestParam 기본값 설정하기 @RequestParam(required = false) @Controller에서 파라미터를 하나 받아보자. @GetMapping("/test/{cnt}") public String methodName(@RequestParam int cnt){ // TODO.. return "test"; } 위와 같이 코드를 작성하면 "localhost:8080/test/3"과 같이 호출했을 때 cnt 값이 3이 된다. 여기서 만약 "localhost:8080/test"와 같이 변수를 넣어주지 않으면 에러가 발생한다. Resolved [org.springframework.web.bind.MissingPathVariableException: Missing URI templ.. 2022. 3. 7.
일드 ‘당신차례입니다’ 짤들 정말 재밌게 정주행 한 일본 드라마 중 하나, ‘당신차례입니다’. 스릴러 추리물이지만 웃긴 포인트도 많았고 끝까지! 긴장감을 끌고 가는 각본에 결말도 깔끔했어요ㅋ-ㅋ 주말에 치킨&콜라 먹으면서 보기 딱 좋은😖 글구 펩시 라임맛도 짱입니다욧 .. 치킨이나 도리토스가 찰떡궁합이에요! 2022. 3. 5.
React input radio default checked 설정(리액트 radio 기본값) [문제] 리액트(React)에서 체크박스(Checkbox) 사용 시 에러가 발생. input type으로 checkbox를 쓸 때(radio 타입 포함) onClick 핸들러를 제공하고 checked 값을 설정하는 식으로 하면 에러가 발생한다. [ 해결방법 ] 1) onClick 핸들러를 없애고 onChange 핸들러를 사용한다. 2) onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다. 2022. 3. 4.
고양이발 수면양말 🐾 생일선물로 받은 고양이발 수면양말 🧦 받은거라 가격은 잘 모르겠지만 귀여운 생일선물로 완전 제격인것 같아요! 보들보들하고 따듯.. 받았을 때 기분 좋았어요ㅎㅎ 종류는 몇가지 더 있지만 이게☝🏻제일 귀엽습니다 착샷은 아래에 2022. 3. 4.
리액트 button 태그 자동 클릭되는 현상 막는 법 [ 리액트 button 태그 자동으로 클릭되는 현상 막는 법 ] (이벤트가 두번 실행되는 오류 해결하기) console.log("test")} > 1) type="button" 설정 2) onClick={() => console.log("test")} [ 이유 ] onClick 이벤트에 함수를 전달하는게 아니라 바로 호출했기 때문에 리액트의 onclick은 렌더링 때 실행된다. (1) 렌더링 될때 (버튼 클릭 전) 이벤트 발생함. alert("hi")} /> 정상적으로 버튼을 클릭할 때 이벤트 발생함. (2) 혹은 index.js 파일의 StrictMode 때문일 수 있으니, 위 방법으로 안되면 StrictMode 코드도 지워봐야한다. https://ko.reactjs.org/docs/handling-e.. 2022. 3. 3.
리액트 useEffect() 사용법 useEffect() 사용법 useEffect()는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다. 기본 형태 : useEffect( function, deps ) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 or 빈 배열 useEffect 함수 불러오기 import React, { useEffect } from 'react'; 1. Component가 mount 됐을 때 (처음 나타났을 때) 컴포넌트가 화면에 가장 처음 렌더링 될 때 한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣는다. useEffect(() => { console.log('마운트 될 때만 실행된다'); }, []); .. 2022. 3. 3.
리액트 검색기능 구현 (스프링부트, 리액트 연동 쇼핑몰 검색 기능 구현) 스프링부트, 리액트 연동 쇼핑몰 검색 기능 구현 Header 페이지에서 검색 하면 -> ProductSearch 라는 새 페이지에서 검색 결과가 출력되는 검색 기능 구현. 백엔드 구현 부분은 이전 글을 참고해 주세요. 이전글 : 스프링부트 검색기능 구현 1_ Header.js function Header() { const [word, setWord] = useState(""); const onSubmit = async () => { window.location.href = "/search/" + word; }; return ( { setWord(e.target.value); console.log(word); }}> { onSubmit(); }}> ); } input 으로 검색어를 입력하면 변경된 값을 감.. 2022. 3. 3.
728x90