고정 헤더 영역
상세 컨텐츠
본문 제목
90일 - Layout 컴포넌트 분리, 內 List, Detail 컴포넌트 조건 처리, Spring에서 Rest API로 데이터 불러오기 (@CrossOrigin)
본문
728x90
Q. 스프링(서블릿/JSP)을 이용한 백엔드 개발이란?
-> 서버쪽에서 웹 문서를 만들어주는 사람
- 옛날에는 백엔드 개발자라는 말이 없었음
'서버 개발자'(이게 백) vs 클라이언트 개발자
cf) 게임 클라이언트 (상태 정보를 입/출력) vs 게임 서버 (상태 정보/데이터를 공유)
업무 클라이언트 (업무 데이터 입/출력) vs 업무 서버 (콘솔/윈도우 등... 업무 정보/데이터를 공유)
cf) 프론트엔드 개발자
- PC, 태블릿, 스마트폰, TV, 냉장고, 자동차... 등등이 다 프론트엔드가 됨 <----> 서버에서 문서 만드는 건 백단
- js만으로 문서를 클라이언트에서 다 만듦
- SPA를 만드는 사람 (페이지 로딩 없이)
지금은 웹사이트의 서버(백엔드) 비중이 90% + 약간의 프론트엔드 (js)
프론트엔드 개발자라고 하면, 웹문서를 프론트에서 아예 처음부터 끝까지 js로 만드는 사람이라고 봐야 함.
//
그래서 우리가 지금 배우는게 모두! '프론트'단이라고 봐야함.
이거를 넣어주면 css도 제대로 뜸
//
componet > customer > layout 바뀌게 해보자
- 지금 상태는 layout.js에 쓴 한글 '공지사항 레이아웃 페이지'만 나오는 상태임.
가운데 ㄱ 거꾸로 쓴 부분. 저기를 넣어보자~!
다운받았던 html(1) 폴더에서 list.html에서 aside 부분만 옮겨주기
리액트하는 곳에 옮겨준 후에는
- 전체를 <div>로 감싸주기
- class -> class Name
- onclick -> onClick 하고 함수 써주기
- 주석 {/* 형식으로 바꿔주기
- / 닫힌거 확인 (img 같은 곳들)
* 오류 있었던거 *
여기서 실행해야한다는 거!!!
맨 윗줄은 연습해보려고 cd ../ 해서 한 칸 앞으로 간 거
cd 하고 직접 파일명 입력은 XXXXX
-> cd 까지만 하고 파일 맨 앞의 m 그리고 tap 키만 누르면 저절로 뜸 ! 앞으로는 이렇게!
전체 태그를 감싸주는 <div>는 return 옆에 둬야 함!!
- 난 4번째줄에 뒀었는데 정말 똑같은 코드임에도 불구하고 회색으로 되서는 실행 안됐었음.
고객센터 누르면 layout 뜸 :)
//
테스트하려고 layout.js에 '고객센터'를 넣었는데 옆에 나오는게 아니라 저렇게 아래 나옴
// test 완료
근데 저 자리는 list.js 나오거나 detail.js가 나와야 하는 것
만들어보자~!
list.js
데이터 바인딩 해야해서 class로 (함수 대신)
return 옆에 <main> 붙여넣기
tr들 하나만 남기고 지우기
고객 센터를 누르면! 가운데가 main이 뜸
detail도 만들어보자.
Q. 분명! 뚜렷하게! 아래 </main> 이렇게 닫혀져 있는데 closing 태그 없다고 오류가 남. 다른 태그들도 마찬가지.
-> '내부'에 원인이 있을 때 자연스럽게 나타나는 오류 메시지로서, '다른' 오류들을 찾는게 팁 !
그래서 내리다 보면 <br> 태그에 closing 태그가 없다고 나오는데 .... 유레카!
이것만 고치면 싹~~ 해결이 된다.
//
▼
//
우리의 목표는 둘 중 하나가 나오는거니 그 구현을 알아보자.
Router는 하나만 쓰면 됨
- App.s 보면 Layout이 이미 있기 때문!
그리고 왼쪽에 switch, route 임포트 맨 위에 해줘야함~!
첫 번째줄 BrowserRouter as는 빼줘야~~ 두 개만 임포트하니까
//
url 에 cutomer/list, customer/detail 하면 각각 나옴
신기한게 header.js에서 <a> 태그 주소
// detail 에서 제목에 Link 해서 detail 나오게 하기
'목록'도 되게 하기
//
나 이거 결과 봐야 함
//
이제 db 연동해보자.
근데 db는 백단에서 하는 것
cross - site 문제를 알아보자.
stsworkspace에서 restAPI 준비해줘야.
tiles 에서 @configuration 주석 처리하고,
선생님 코드로 안해줘도 왜 나오는가
api/notice/list 요청해서 이런 데이터 모양이 나와야 함
이 주소 복사해서, fetch 옆에 둠
response는 fetch안에 있는 객체라 이렇게 사용할 수 있는게 있는데, json을 사용해보도록 하자.
24. 렌더링/ bind 하기 위해서는 초기값이 없으면 오류가 나기 때문에 초기값 설정은 fetch 밖에다가.
- 렌더링 = 코드 구현해주는 느낌 (실제 화면으로)
- bind = 붙여주는 느낌 (실제로 값 붙여주는) :)
cf) 자바 동적(dynamic) 바인딩, 정적(static) 바인딩
이거 해야함
//
Q. 데이터 온 다음에 하면 되지 않나?
-> 저러면 오류가 남
이게 당연하다!
- 무조건 밖에 있어야 함.
- 저렇게 있으면 언제 실행될지 모르니까
- 안에는 데이터 가지고 오는걸 세팅
-> CORS 오류가 남
문서 준 오리진
데이터 요청 받는 오리진
-> 같은 오리진
문서 요청은 위에거로 하고, 데이터 요청은 다른 서버에 하면
-> 크로스 오리진
// 지금 우리 서버 2개임
우리가 보고 있는 화면 (SPA 제공한 서버 = npm start로 해서 띄운 3000서버)
데이터 요청하고 있는 서버는 8080 서버 (톰캣)
-> 크로스 오리진
개발용 서버에서 신나게 개발하다가, 갑자기 데이터 요청은 8080 서버에 하니까 오류가 난 것
('쟤 뭔데 나한테 데이터를 달래!')
허락 요청을 받아야 함.
-> 신청하고, 허락 수락하는 이런 과정을 거쳐야 함!
http://localhost:8080/api/notice/list 한테 가서 '쓰게 해주세요' 해야함
1) 메소드마다 설정
2) 전체를 대상으로 설정
// 먼저 1 방법으로 해보자
-> CORS 오류 해결 (다른 오류들은 많더라도)
//
리액트는 첫 인상은 무겁지만... 익숙해지면 편한 프레임워크ㅎㅎ (갈수록 난이도 낮아짐)
vue.js나 앵귤러는 처음에는 가볍지만 뒤로 갈수록 무거워지는 프레임워크
//
저번에는 mount 안에다가 넣었었고, 오늘은 생성자 안에 넣었는데
수업의 요지는 : 이 둘을 비교해보이자는 것
cf) vue.js는 양다리 (프론트, 백단), 바닐라 js는 완전 web단
728x90
반응형
