8.React/1)개념_React

React_개념_Day_09_스프링부트+리엑트

구이제이 2024. 5. 16. 19:14






ㅡㅡㅡ





한 화면에서 2개의 프로젝트를 키는 것





#

상품관련 : react-router 설정

목록 화면 : 새로운 상품을 등록할 수 있게

조회 화면 : 수정/삭제 화면으로 이동이 가능하도록 구성

상품 등록 : 상품들의 이미지를 함께 추가해서 등록

상품 목록 : 상품들의 이미지를 같이 보여주고, 페이지 처리가 가능하게

특정 상품 선택 : 상품 조회 페이지가 출력, 해당 상품의 모든 이미지가 출력되어야 함







frontend - shop - pages - IndexPage.js 

템플릿 역할 : 끌어다가 사용되는 페이지



router - productRouter.js

router - productRouter.js



const productRouter = () => }

return ();

}

 

export default productsRouter;

 




#

리엑트 자료는 2년 이전의 자료 위주로 보는 것이 좋습니다.

리엑트는 버전의 영향을 많이 받는다고 합니다.




#아울렛 컴포넌트 

아울렛 컴포너는트 이용해서 세밀하게 레이아웃 지정합니다.



#

doto 인덱스페이지, 첫번페이지, 리스트로 이동하는 것만 바꾸면 됩니다.



ListPage.js 

라우팅처리해줘야합니다.

 

listpage

addpage

등등 추가해줘야합니다.

 




 

 

useRef이라는 훅으로 쓰여졌다.

도큐먼트

 












content-Type : “multipart/form-data : 바이너리 파일떄문에, 이렇게 처리했습니다.



넘어가있는 데이터를 확인할수있습니다.



연동된것도 서버에서 확인





#로딩 시간 설정

#프로덕트컨트롤러 - 이런 처리를 뷰에서 하는것이 아니라 서버에서 한다는 포인트