9. 리액트로 포트폴리오 사이트 만들기 (마무리)

배포된 사이트 인트로

사실상 이미 저번 리액트 문법으로 모든 빌딩은 끝난 셈이다. 다만, 전체적인 스무스 효과와 가로 모드, 배포 정도가 남았기에.. 이런 저런 부분을 마무리하고자 한다.

참고하고 싶다면 다음 사이트를 참고하자.

https://webstoryboy.co.kr/1943

20. 포트폴리오 사이트 만들기 : React-Site : 마무리 영역

전체적인 코드는 다음과 같다.

https://github.com/kss2002/PortfolioWebsite-beta

GitHub - kss2002/PortfolioWebsite-beta

코드적인 부분은 다음과 같이 설명이 가능하다.

데이터 통합

---

 

constants라는 폴더에 모든 핵심 데이터를 다 집합해주었다.

데이터를 주고받고 싶다면,

export

와

import

가 필요하다.

쉽게 말해서 export는 내보내는 구문이고, import는 가져오는 구문이다.

예를 들어 설명하자면..

이건 해더 영역을 담당하는 부분이다. import를 하지만, 중간에 내가 가져오고 싶은 데이터의 "이름"을 중괄호로 묶어주어서 가져와야 한다. (jsx 문법) 이런 식으로 데이터를 주고받는다. 데이터를 수정하고 싶으면 index.js의 데이터를 수정해 주면 된다. (재사용성 증가)

스무스 효과

헤더에서 해당 섹션을 클릭하면 그 부분으로 이동이 되는데, 이때의 이동을 부드럽게 만드는 것을 스무스 효과라고 생각하면 될 거 같다. (효과 이름이 그렇다는 것. 헤더뿐 아니라 다른 영역에서도 충분히 적용 가능하다.)

스무스효과는 전체 소스에 넣어야 하기에... scr 폴더 안에 존재하는 App.js에 작업해 준다.

이때 useEffect를 사용해서 특정 작업을 도와주게 된다.

---

그리고 lenis와 link으로 컨트롤하게 된다.

(디테일한 설명은 사이트 ㄱㄱ)

가로 모드 구현

가로로 움직이는 "것처럼" 보이게 만드는 부분이다. 적용은 "포트폴리오" 섹션이다.

gsap에서의 스크롤 트리거 플러그인을 사용한다. 

디테일한 코드는 다음을 참고하자.

import React, { useEffect, useRef } from "react";

import { portText } from "../constants";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

const Port = () => {
    const horizontalRef = useRef(null);
    const sectionsRef = useRef([]);

    useEffect(() => {
        gsap.registerPlugin(ScrollTrigger);
    
        const horizontal = horizontalRef.current;
        const sections = sectionsRef.current;
    
        let scrollTween = gsap.to(sections, {
            xPercent: -120 * (sections.length - 1),
            ease: "none",
            scrollTrigger: {
            trigger: horizontal,
            start: "top 56px",
            end: () => "+=" + horizontal.offsetWidth,
            pin: true,
            scrub: 1,
            invalidateOnRefresh: true,
            anticipatePin: 1,
            },
        });
    
        return () => {
            scrollTween.kill();
        };
    }, []);

    return (
        <section id="port" ref={horizontalRef}>
            <div className="port__inner">
                <div className="port__title">
                    portfolio <em>포폴 작업물</em>
                </div>
                <div className="port__wrap">
                    {portText.map((port, key) => (
                        <article 
                            className={`port__item p${key + 1}`} 
                            key={key} 
                            ref={(el) => (sectionsRef.current[key] = el)
                        }>
                            <span className="num">{port.num}.</span>
                            <a href={port.code} target="_blank" className="img" rel="noreferrer">
                                <img src={port.img} alt={port.name} />
                            </a>
                            <h3 className="title">{port.title}</h3>
                            <p className="desc">{port.desc}</p>
                            <a href={port.view} target="_blank" className="site" rel="noreferrer">사이트 보기</a>
                        </article>
                    ))}
                </div>
            </div>
        </section>
    );
};

export default Port;

---

---

빌드 만들기, 깃허브 올리기, netlify에 배포하기

다 끝났다.

npm run build

명령어로 빌드를 하나 만들어주자. 이 빌드화를 통해서 브라우저가 소스를 읽기 쉽게 만들어주자.

이후 깃허브에 배포하면 끝.

---

 이후 netlify을 이용해서 배포하면 된다.

(사이트 들어가서 깃허브 아이디로 가입. 이후 올려주고 도메인 바꿔주면 된다.)

https://kss-portfolio-react.netlify.app/

포트폴리오 사이트 만들기 😜 React-Site

(1차로 완성된 사이트 👆)

이로서 리액트로 사이트를 만들어보는 시간을 마친다.

앞으로 더 많은 프로덕트를 만들고 협업도 해보면서 성장하고자 한다. 😊😊