3-1 프론트엔드 이론
컴포넌트 (Component) : 레고 블록
- 웹사이트를 레고 블록처럼 작은 부품 단위로 쪼개서 만듭니다.
- 예를 들어, 유튜브 페이지는 [검색창], [사이드바], [동영상 카드], [댓글] 같은 여러 개의 컴포넌트로 이루어져 있죠.
- 한 번 만든 [동영상 카드] 컴포넌트를 여기저기 재사용할 수 있고, 수정이 필요할 때 해당 부품만 고치면 되니 관리가 매우 쉬워집니다.
App.tsx 실행 그리고 레이아웃 조합 설명
터미널에서 npm run dev 실행하면 ( 서버(dev) 실행(run) )
로컬호스트:5173 주소로 연결. 실행 시
이 된다.
컴포넌트의 장점은 재사용이 된다.
예) Component 폴더에서 가져옴(블럭 사용)
rootLayout은 해당 화면의 구조를 의미한다. 때문에 그 안에 있는 구조
그러니까 WishlistSection를 하나 더 붙이면
body 부분이 하나 더 생긴다.(스크롤 내려감)
재사용이 된다는 것은 이런 의미.
3-1. 프론트엔드 실습
프론트엔드와 가짜 서버(mock server) 연결 실습
- API 사용법과 실제 화면이 어떻게 연동 되는지 확인해보자
1. API 연결을 할 거니, api 폴더로 이동
(../web-basic-frontend-version/typescript/src/api)
2. 서버 주소를 의미하는 endpoint로 이동
(../api/endpoints/ts)
3. Postman의 mock server URL 복사
4. 이러면, 이제 wishlist.ts에 빨간 밑줄 오류가 있음
-> 각각 목록 조회(GET), 추가(POST), 삭제(DELETE)에 대한 내용이므로 각각 채워넣자.
이러면 오류가 사라짐
이렇게 하고, 다시 로컬호스트로 이동하면
5. 새로고침
mock server에서 작성한 새우깡과 고래밥이 출력됨
6. 개발자모드(F12) -> 콘솔
서버에서 찜 목록 불러오는 중... 확인하면
API 요청(Request)에서 매소드를 GET 사용 ...
API 응답(Response)에서 data 2개(새우깡, 고래밥), 상태 200 등...
이런 것들이 자바스크립트를 사용했기에 보임
7. 삭제(DELETE) 기능을 사용해보자.
고래밥을 지우면, 모달창에서 물어보고. 확인
그러면 매소드 delete 확인. 상태가 설정한대로 204인 것을 확인할 수 있다.
url : "/items/2" 가 고래밥이다.
8. 추가(POST) 기능을 사용해보자
임의로
상품명 : 양파링 | 가격 : 2000 | 카테고리 : 기타 | 상품 설명 : 양파링~
구매 링크 : https://sample.test | 이미지 URL : https://sample.test/images
그리고 상품 추가하기 누르면
추가 됐다?
아님
조회(GET) 해보니, https://sample.test/images란 것이 없대.
왜 에러가 날까?
그건 새로고침 누르면 초기화 되는 것으로 알 수 있다.
그야 이건 mock server이니까. 추가된 것이 아니다.
실질적인 데이터가 전혀 건들여진 것이 아니다.
But, 그럼에도 이정도면 프론트엔드에서 개발하는대는 전혀 지장이 없다.
