휘의 단칸방

@Controller먼저 @Component는 Bean에 Class를 등록시키는 가장 기본적인 어노테이션이며@Component의 기능과 Controller객체가 가질 수 있는 예외처리등이 추가된 어노테이션이 바로 @Component이다 @Autowired의존성을 주입할 때 사용하는 어노테이션클래스 내에서 필요한 객체를 직접 생성하지 않고 Spring컨테이너가 관리하는 객체(Been)을 주입받아 사용할 수 있게 해줌 필드주입방식과 생성자주입방식으로 나뉜다필드주입방식: 스프링컨테이너가 객체를 생성한 후, @Autowired이 붙은 필드에 의존성을 주입생성자주입방식: 스프링컨테이너가 객체를 생성할 때 @Autowired이 붙은 생성자를 통해서 필요한 의존성을 주입Lombok의 장점: 반복적인 코드작성을 줄여주..

@RequestMapping: 클라이언트의 요청(url)에 맞는 클래스나 메서드를 연결시켜주는 @어노테이션 사용 예)@RequestMapping("list.bo")public String selectList() { //코드}list.bo가 호출 됐을 때 해당 메서드를 실행하도록 맵핑하는 것+ 해당 메서드가 @Controller로 지정되어있다면 메서드가 String을 반환했을 때 반환 값은 view이름으로 인식됨.+ @RestController로 지정되어있으면, Rest API요청에 대한 응답(JSON)을 반환한다. ex) URL 다중설정@RequestMapping("list.bo","detail.bo")public String selectList() { //코드}이렇게 URL을 여러개 설정도 가능함 그런..

@ResponseBody"ajax요청에 대한 응답을 위한 controller에는 @ResponseBody어노테이션을 작성해줘야한다. 기본적인 세팅이 jsp응답으로 되어있기 때문에 @ResponseBody를 작성해주면 반환값을 http응답 객체에 직접 작성하겠다라는 의미를 가지고 있다."  : 스프링에서 비동기 처리를 위한 어노테이션으로MVC패턴에서 클라이언트에게 응답할 때 데이터만 직접 반환할 수 있게 해준다.# 비동기 처리: 웹에서 화면전환 없이 이루어지는 동작들을 처리하기 위한 방식 비동기통신을 하기 위해서는 클라이언트에서 서버로 요청을 보낼 때, 본문에 데이터를 담아서 보내야하고, 서버에서 클라이언트로 응답을 보낼 때에도 본문에 데이터를 담아서 보내야한다.여기서 "본문"이 Body 이다. 그래서 @..

처음엔 블루투스 이어폰으로 소리가 잘 들리다가 어느새부터 연결은 됐다고 뜨는데소리는 이어폰으로 들리지 않았다..소리설정 들어가보면 출력리스트에 이어폰이 뜨지도 않고... 연결끊었다가 다시해보고 컴퓨터 껐다켜보고 드라이버 업데이트해보고 별 짓을 다 해도 안됐었는데드디어 해결했다[해결방법]설정 - Bluetooth 및 장치 - 장치 - 더 많은 장치 및 프린터 설정더 많은 장치 및 프린터 설정으로 들어가자여기서 내가 쓰려는 이어폰의 속성을 클릭 서비스 - 핸즈프리 전화 통신을 해제하면 잘 된다!!!소리출력에도 잘 뜨고 해제하자마자 소리가 잘 들린다 ㅠㅠ

useEffect컴포넌트가 랜더링 될 때 특정 작업을 실행할 수 있게 해주는 react hook클래스형 컴포넌트의 생명주기 메소드의 역할을 대신한다컴포넌트가 마운트 됐을 때 (처음 나타났을 때),언마운트 됐을 때(사라질 때)업데이트 됐을 때(특정 state, props가 바뀌었을 때)[사용법]useEffect(effect, [])첫번째 인자(effect) : 함수 => 특정 상황이 왔을 때 실행되는 함수두번째 인자 : => 의존성 배열 1. 의존성 배열이 없는 useEffectuseEffect(() => { console.log("의존성 배열이 없는 useEffect호출") })이 코드를 실행해보면 다음 2가지 경우에 실행이 됐다랜더링이 되었을 때state가 변경 될 때 이는 각각 co..

Hook: 함수형 컴포넌트에서 react state와 생명주기 메서드의 기능을 사용할 수 있게 해주는 함수이다. state : 컴포넌트의 상태값useState() : 컴포넌트의 상태(state)를 생성하고 관리할 수 있게 해주는 함수(react hook)=> 컴포넌트는 state값이 변경되면 이를 확인하고 요소를 리랜더링 해준다. [사용법]const [변수명, setState변수명] = useState(초기값);- 변수명 : 원하는 state명을 설정- set변수명 : 해당 state값을 변경할 함수const [num, setNum] = useState(0); const onClick1 = () => { // num += 1; setNum(num + 1); // 상태를 업데..

useCallBack:메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구함수를 메모이제이션해서 불필요한 재생성을 방지한다 ( 재사용한다는 뜻 )컴포넌트가 리랜더링 될 때, 의존성 배열에 있는 값이 변경되지 않으면 이전의 함수를 반환함자식컴포넌트가 불필요하게 리랜더링 되는 것을 방지하는데 유용함. useCallback 사용법useCallback(() => { 코드}, []) 예시 코드   단어 설명# 메모이제이션 기법: 동일한 작업을 반복할 때, 그 작업의 결과를 저장해 두었다가 다시 사용함으로써 불필요한 중복 연산을 피하는 최적화 기법

Class Componentstate(필드 대체)를 가지고 있고 이를 수정할 수 있다.라이프 사이클에 따른 생명주기 메서드를 사용할 수 있다. state값이 변경되면 리액트는 변화를 인식하고 그에 맞는 화면을 출력하기 위해 component를 리랜더링한다. 그래서 state값을 변경할 때는 state에 어떤 숫자를 넣어서 변경하는 게 아닌this.setStatus() 함수를 이용해서 새로운 status값을 넣어주면 된다.#여기서 랜더링이 안 되게 하려는 이유는 불필요한 리랜더링이 발생할 경우 불필요한 계산과 작업이 이루어지기 때문에 컴포넌트의 성능이 저하되기 때문 생명주기(라이프 사이클)react의 component 라이프 사이클은 생성(mount), 업데이트(Update), 제거(Unmount) 단계로..

const comments는 id, name, comment, path 를 가진 리스트임function Comment(props) { return ( {props.name} {props.comment} )}props을 통해서 부모컴포넌트로부터 name, comment, path를 전달받아서 랜더링함.const CommentList = () => { return ( { comments.map(c => { return }) } )}export default CommentList..

jsx리액트에서 사용하는 기본적인 문법체계JavaScript와 HTML을 함께 사용한다.HTML을 사용하던 중 JavaScript를 사용하고 싶을 때는 {}을 이용하면 된다ComponentReact에서 UI를 구성하는 독립적이고 재사용 가능한 코드하나의 함수형 Component는 무조건 하나의 태그를 리턴한다재사용 할 수 있는 가장 작은 단위의 Elementprops부모컴포넌트에서 자식컴포넌트에 데이터를 전달하는 방식컴포넌트의 속성=값으로 전달 할 수 있다.!! props가 변하면 자식요소는 리랜더링을 한다 !!import React from 'react'const Food = (props) => { return( 이 음식의 이름은 {props.name}입니다. ..