홈페이지 메인화면 꾸미기(with SpringBoot) - (6.5) (extra)

1. 홈페이지 BootStrap 기능을 활용하여 꾸미기(with. Carousel)

 

https://www.w3schools.com/bootstrap5/bootstrap_carousel.php

W3Schools.com

 

https://react-bootstrap.github.io/docs/components/carousel/

Carousels | React Bootstrap

 

HomePage.js에 수정한 부분(with. VSCode)

import { Carousel, Container } from "react-bootstrap";

function App({ user, handleLogout }) {

    return (

        <Container className="mt-4">

            <Carousel>

                <Carousel.Item>

                    <img

                        className="d-block w-100"

                        src="http://localhost:9000/images/고양이.jpg"

                        alt="대체글자"

                    />

                    <Carousel.Caption>

                        <h3>큰제목</h3>

                        <p>짧은 설명</p>

                    </Carousel.Caption>

                </Carousel.Item>

                <Carousel.Item>

                    <img

                        className="d-block w-100"

                        src="http://localhost:9000/images/고양이.jpg"

                        alt="대체글자"

                    />

                    <Carousel.Caption>

                        <h3>큰제목</h3>

                        <p>짧은 설명</p>

                    </Carousel.Caption>

                </Carousel.Item>

                <Carousel.Item>

                    <img

                        className="d-block w-100"

                        src="http://localhost:9000/images/고양이.jpg"

                        alt="대체글자"

                    />

                    <Carousel.Caption>

                        <h3>큰제목</h3>

                        <p>짧은 설명</p>

                    </Carousel.Caption>

                </Carousel.Item>

            </Carousel>

        </Container>

    );

}

export default App;

 

<적용결과>

현재는 이미지 파일이 없어서 대체글자로 표시되며, 주기적으로 슬라이드 처리됩니다.

 

 

https://www.w3schools.com/html/html_blocks.asp

W3Schools.com

 

<block 요소들>

블록 수준 요소는 항상 새 줄에서 시작하며 브라우저는 자동으로 요소 앞뒤에 공백(여백)을 추가합니다.

 

<inline 요소들>

인라인 요소는 새 줄에서 시작되지 않습니다. 동일한 줄에 사용 가능한 요소들입니다.

 

 

WebConfig.java에 추가 (with. IntelliJ)

package com.coffee.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration // 해당 클래스는 자바에서 설정 파일로 인식합니다.
public class WebConfig implements WebMvcConfigurer {
    // WebMvcConfigurer : 웹 애플리케이션 설정용으로 사용하는 인터페이스

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 모든 요청에 CORS 적용
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        // "/images"로 시작하는 요청을 받으면 c:\\boot\\images\\ 폴더 아래에서 이미지를 찾겠습니다.
        registry.addResourceHandler("/images/**") // url 패턴(React HomePage.js 파일과 연관)
                .addResourceLocations("file:///D:/boot/images/"); // 파일이 있는 실제 위치
    }
}

 

 

HomePage.js에 수정한 부분(with. VSCode)

import { Carousel, Container } from "react-bootstrap";

function App() {

    return (

        <Container className="mt-4">

            <Carousel>

                <Carousel.Item>

                    <img

                        className="d-block w-100"

                        src="http://localhost:9000/images/chicago.jpg"

                        alt="시카고"

                    />

                    <Carousel.Caption>

                        <h3>시카고</h3>

                        <p>미국 중서부의 경제 중심지로, 건축과 재즈 음악의 도시</p>

                    </Carousel.Caption>

                </Carousel.Item>

                <Carousel.Item>

                    <img

                        className="d-block w-100"

                        src="http://localhost:9000/images/la.jpg"

                        alt="LA"

                    />

                    <Carousel.Caption>

                        <h3>LA</h3>

                        <p>할리우드가 있는 엔터테이먼트 도시이자, 따뜻한 기후와 해변이 매력</p>

                    </Carousel.Caption>

                </Carousel.Item>

                <Carousel.Item>

                    <img

                        className="d-block w-100"

                        src="http://localhost:9000/images/ny.jpg"

                        alt="뉴욕"

                    />

                    <Carousel.Caption>

                        <h3>뉴욕</h3>

                        <p>세계 금융과 문화의 중심지로, 타임스퀘어와 브로드웨이가 유명</p>

                    </Carousel.Caption>

                </Carousel.Item>

            </Carousel>

        </Container>

    );

}

export default App;

 

<적용결과>