[1주차] [2일차] 나만의 스토리 설계 웹 페이지 설계 (3)

Postman 

- Postman은 개발한 API를 테스트하고 배달하는 "배달부 같은 플랫폼 " 이다.

 

Mock Server (가짜 서버)

- Mock Server는 실제 서버가 존재하지 않을 때 API 명세서에 정의된 대로만 응답해 주는 '가짜' 서버

 

● 클라이언트

○ GET / items 

챕터 3-1 : 프론트엔드 코드 맛보기

학습목표

● 프론트엔드 프레임워크를 경험해본다.
● 클라이언트와 Mock 서버 연동을 실습해 본다.

 

프레임워크 (Framework) : 코드 관리 도구의 모음

● React(리액트) 

 

흐름 > HTML 뼈대 , CSS 디자인 , JavaScript 동적 행동 

프레임 워크 중요한 2가지

● 컴포넌트 (Component) : 레고블럭

검색창, 사이드바, 동영상 카드, 댓글 같은 여러개의 컴포넌트로 이루어짐

 

● 상태관리 (State ManageMent ) : 데이터와 화면을 자동으로 동기화

 

어떤 프레임 워크가 있나?

 

React ( 리액트 ) Vue.js (뷰) Svelte (스벨트 )

● src

프로젝트 코드가 위치하는 소스(source, src) 폴더 입니다.

 

● main

프로젝트가 시작하는 메인(main) 파일 입니다.

 

● App

프로젝트의 진입 페이지를 뜻하는 컴포넌트 입니다.

 

● Api 

서버와의 연동을 위한 API 함수들이 모여 있는 곳입니다.

 

○api/client

> axios 인스턴스가 존재하는 파일 입니다. axios는 서버와의 연동을 도와주는 라이브러리입니다.

해당 인스턴스를 사용해 서버로 요청을 보내고 응답을 받습니다.

 

○ api/endpoint

>  서버에는 주소가 존재한다. 이러한 주소를 엔드포인트(endpoint) 라고 한다.

서버 주소가 모여 있는 파일이라고 보면 됩니다.

 

○ api/wishlist

> 찜하기 기능의 API가 모여 있는 파일 입니다. 

여기서 조회, 생성, 삭제 함수가 선언 됩니다.

 

● COMPONENTS

UI를 구성하는 컴퍼넌트가 모여 있는 파일입니다. 여기 있는 컴포넌트를 가져다가 UI를 레고처럼 조립 할 수 있습니다. 

○ components/wishlist

찜하기 기능과 관련된 UI 컴포넌트가 위치하는 곳입니다. 전체를 포함하는 wishlist과, 개별 찜 아이템을 보여주는 wishlist-item, 찜 아이템리스트를 보여주는 wishlist-display, 찜 아이템을 추가하는 add-item-form이 존재 합니다.

 

○ components/layout

화면 레이아웃과 관련된 파일들이 존재합니다.

 

○ components/ui

공통으로 사용되는 UI 디자인 컴포넌트를 가지고 있는 폴더 입니다. 예쁜 디자인은 주로 이 폴더의 컴포넌트들이 담당 합니다.

---

챕터 3-2 : 백엔드 코드 맛보기

학습 목표
● 백엔드 프레임워크를 경험해 본다.
●  Postman과 서버 연동을 실습해 본다.

 

주방 매니저 - Controller 컨트롤러

 

메인 셰프 - Service 서비스

 

음식 - Entity (엔티티)

- 서비스가 처리하는 상품 (서버 자원)을 의미하는 것

 

Repsitory -  냉장고 / 데이터 저장소

 

 

스프링 프로젝트 한눈으로 보기 쉬운 구조 !

wishlist/
└── src/main/java/com/sparta/wishlist/
    ├── controller/                       # 🤵 API 진입점
    │   └── ItemController.java
    │
    ├── service/                          # 🧑‍🍳 비즈니스 로직 (핵심 요리)
    │   ├── ItemService.java              
    │   └── ItemServiceImpl.java          
    │
    ├── repository/                       # 🧊 데이터 저장소
    │   ├── ItemRepository.java            
    │   ├── InMemoryItemRepository.java   
    │   └── DatabaseItemRepository.java   
    │
    ├── dto/                              # 📝 데이터 전송 객체
    │   ├── ItemRequestDto.java           
    │   └── ItemResponseDto.java          
    │
    ├── entity/                           # 🍱 서버 자원
    │   └── Item.java
    │
    ├── exception/                        # ⚠️ 예외 처리
    │   ├── CustomException.java          
    │   ├── ErrorCode.java                
    │   ├── ErrorResponse.java            
    │   └── GlobalExceptionHandler.java   
    │
    ├── config/                           # ⚙️ 설정
    │   └── DatabaseConfig.java           
    │
    └── WishlistApplication.java          # 🚀 서버 실행 파일