리액트useState&스프링 gradle

☑️ useState()함수

- 컴포넌트(객체)의 상태(state)값이 변하게 될 경우

- 해당하는 객체를 다시 새로고침하여 실행하는 하무

- 다시 새로고침 하다 = 다시 렌더링 하다 = ReRendering = 다시표현하다

- Rendering = 표현

[useState 사용예시]

const TicTapToeTwoStep = () => {
  const [numbers,setNumbers] = useState(
  배열랜덤섞기([...Array(20).keys()].map((n) => n + 1)));
const [nextNumber, setNextNumber] = useState(1);
const [message, setMessage] = useState("")

▶ nextNumber, message => 처음에 가지고 있는 변수 값, 처음에 값이 없으면 없는 상태로 있는 것
   setNextNumber,setMessage => nextNumber,message 값을 변경하기 위한 값
   useState(1), useState("") => 테스트가 처음에 가지고 있을 값

즉 const [초기값, 변동될값] = useState('처음에 들어갈 값이 무엇인지 작성');

 

[코드 해석]

배열랜덤섞기([...Array(20).keys()].map((n) => n + 1))
▶코드는 거꾸로 실행 시킨다. map((n) = > n+1 은 function(n) = {} n+1기능 값을 던져줄 것을
  key에 저장해서 Array는 배열이므로 0~19인데 n+1이 되어서 1~20이 된다.

[위 코드를 그림으로 표현하면 아래와 같다]

☑️ 틱택톡 게임 진행시 오류 발생

✓ classname을  cassname으로 잘못써서 css가 적용되지 않음

[수정 전]

 <div cassName="tictaptoe-grid">

[수정 후]

<div className="tictaptoe-grid">

 

classname 오타로 

한줄에 세개씩 보이게 설정해주는 css가 적용되지 않았다.

grid-template-columns: repeat(3, 100px);

 

[에러코드]

ERROR in ./src/component/TicTapToe.js 6:0-25
Module not found: Error: Cannot find file: 'TicTaptoe.css' does not match the corresponding name on disk: '.\src\component\TicTapToe.css'.
ERROR
▶ css가 정상적으로 import되지 않아서 생긴 오류이다

 

✓ 괄호 미적용으로 오류 발생

배열랜덤섞기([...Array(9).keys()].map(n => n +1)));  ->  배열랜덤섞기([...Array(9).keys()].map((n) => n + 1))

:map((n) n을 괄호로 감싸줘야 한다!

 

✓ 중괄호 잘못 적용

[수정전]
return {

<h1> useEffect 란 ? </h1>
    <pre>
       useEffect 함수는 컴포넌트(function, const 시작)가 렌더링(되게 하다 세워짐)
       특정 작업을 실행할 수 있도록 하는 Hook

       리액트에서 컴포넌트를 렌더링하다 = 리액트에서 oo.js 코드실행 시작한다
       </pre>
}
[수정후]
return (
   <>
<h1> useEffect 란 ? </h1>
    <pre>
       useEffect 함수는 컴포넌트(function, const 시작)가 렌더링(되게 하다 세워짐)
       특정 작업을 실행할 수 있도록 하는 Hook

       리액트에서 컴포넌트를 렌더링하다 = 리액트에서 oo.js 코드실행 시작한다
       </pre>
     </>
)

▶ 즉 return은 {} 중괄호가 아닌 소괄호 ()로 감싸야 한다. 또한 return 작성후 전체를 감싸주는 태그가 없으면

    빨간줄 발생한다.

 

☑️ 스트링부트 오류 수정

- 어노테이션 올바른 곳에 적용해야 한다.

중복확인 코드 작성 시 @ResponseBody 어노테이션을 코드 위에 써줘야 하는데 상단 public class측에 써둬서

페이지가 노출되지 않았다

- @Slf4j > 로깅을 위한 Lombok 어노테이션으로 log변수를 자동으로 생성하여 콘솔에서 확인해본다!

[오류 확인을 위한 log.info 작성
@GetMapping("/idCheck")
@ResponseBody
//public boolean getId(Model model, @RequestBody String member_id) {
public Map<String, Object> getId(@RequestParam String member_id) {
	log.info("controller-> member_id : "+member_id);
	Map<String, Object> response = new HashMap<String, Object>();
		
	boolean isCount = memberService.getId(member_id);
	log.info("controller-> i : "+member_id);
		
	response.put("isCount", isCount);
	return response;
	}

log.info("controller-> member_id : "+member_id);

log.info("controller-> i : "+member_id);

-위 코드와 같이 상단에 갖고와야 하는 변수명을 찍어보고 화면에서 콘솔화면에서 확인해본다. 해당코드가 찍히지

않았다면 오류가 발생한 부분이다. 찍혔다면 찍히기 위에 부분부터 다시 체크해본다!

 

☑️ 스프링  maven 과 gradle의 폴더 경로

maven

src/main/resource/templates/index.html

gradle

src/main/resource/static/index.html

->그래서 템플릿에다 만들어준 index.html을 static폴더로 이동한다

 

[스프링부트 매개변수 이름 인식 문제 오류]

[Request processing failed: java.lang.IllegalArgumentException: 
Name for argument of type [java.lang.String] not specified, and parameter name information not available via 
reflection. Ensure that the compiler uses the '-parameters' flag.] with root cause= Name for argument of type [java.lang.String] not specified, and parameter name information not available via reflection. Ensure that the compiler uses the '-parameters' flag.

 

해당오류 콘솔창 확인 시 컨트롤러아이템네임 쪽에서 발생하는 것으로 확인되어

@RequestParam관련해서 아래와 같이 코드를 수정 해보았다

[수정전]
public Map<String, Object> getGoods(@RequestParam String item_name)
[수정후]
public Map<String, Object> getGoods(@RequestParam("item_name") String item_name)

아직 Html에 겟메핑시 가져올 이름이 지정되지 않아 확인후 익일 해당오류 해결안에 대해 작성하도록 하겠다!