📌 지난 포스트 [React] Create-React-App (CRA)으로 리액트 프로젝트 시작하기 ① [React] Create-React-App (CRA)으로 리액트 프로젝트 시작하기 ②

🧩 useEffect()로 최초 렌더링 시 한 번만 실행되는 코드 만들기

🪄 리액트에서는 상태(state)가 변경될 때마다 컴포넌트가 다시 렌더링된다. 그런데 만약 API를 통해 데이터를 가져오는 작업이 렌더링 때마다 반복된다면 비효율적일 것이다. 화면을 새로고침하면 컴포넌트가 최초로 렌더링되며 데이터를 불러온다. 그런데 딱 여기까지. 데이터 요청 등 특수한 작업은 최초 렌더링 될 때 한 번만 되길 원할 것이다. 그래서 이번 포스트에서는 최초 렌더링 시 한 번만 실행하는 방법을 배우고자 한다.

📌 create-react-app을 사용하면 React.useState() 대신 useState()만 써도 된다. 다만, 이렇게 사용하려면 react에서 useState를 미리 불러와야 한다! import {useState} from 'react'; 이렇게!

1️⃣ 상태가 변경될 때마다 실행되는 코드 (비효율적)

🔹 아래 코드의 경우 상태가 변경될 때 App 함수 전체 코드가 렌더링되기 때문에 console.log('I run all the time');는 여러번 실행 될 것이다. 말이 console.log이지, 다른 코드였으면 정말 비효율적이고 성능도 많이 떨어질 것이다.

<script>
import {useState} from 'react';

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev+1);
  console.log('I run all the time'); // 상태 변화될 때마다 실행될 것 (비효율적!!!)
  return (
    <div>
      <h2>Total Click : {counter}</h2>
      <button onClick={onClick}>Click me!!!</button>
    </div>
  );
}
</script>

🌟 그래서 배우는 것이 useEffect 함수!

🔹 useEffect(실행할 함수, [의존성 배열(dependencyList)]) 처럼 두개의 인수를 받고, dependency가 존재하면 해당 배열 상태가 변경될 때마다 함수가 실행되는 것이다. 배열을 비워두면 최초 한 번만 실행된다. 이게 전부다. 진짜 쉽다.

1️⃣ 초기 렌더링 1회만 실행되는 코드

🔹 배열을 비워두면 최초 한 번만 실행된다.

<script>
    import {useState, useEffect} from 'react';
    // 코드 중략...
    useEffect(() => {
        console.log('I run only once');
    }, []);
</script>

1️⃣ 특정 값이 바뀔 때마다 실행되는 코드

🔹 상태 변화를 감시 받아야하는 dependency를 명시하면, 상태가 변경될 때마다 실행된다.

<script>
    useEffect(() => {
        console.log('SEARCH FOR', keyword);
      }, [keyword]); 
</script>

2️⃣ 특정 값이 바뀔 때마다 실행되는 코드 (조건부)

🔹 예시로 영화 검색 API를 활용한다고 했을 때, input 요소에 텍스트를 한글자 한글자 입력할 때마다 API를 호출한다면 정말 끔찍할 것이다. 물론 특정 값이 바뀔 때마다 실행되도록 할 수 있지만, 더 디테일한 조건부를 추가해야한다면..? 값이 바뀔 때마다 실행되긴 해야하지만, 공백이 아니어야하고, 글자 수가 5자 이상일 때의 조건을 덧붙여야 한다면..! 이렇게 if문으로 작성해볼 수 있다.

<script>
    useEffect(() => {
        if(keyword !== "", keyword.length > 5){
          console.log('SEARCH FOR', keyword);
        }
      }, [keyword]);
</script>

3️⃣ 특정 값이 바뀔 때마다 실행되는 코드 (다수의 컴포넌트?!)

🔹 만약 버튼 컴포넌트와 input 컴포넌트가 있다. 버튼을 클릭할 때는 input 관련 함수가 실행되어서는 안되고, 버튼 관련 함수만 실행되어야한다. input 동작때도 마찬가지. 이럴 때는 위에서 본 것처럼 dependency만 각각 설정해주면 된다. 🔹 그런데, 버튼 클릭과 input 동작 시 공통적으로 실행시키고자하는 함수가 있다면? 복잡하게 생각할 것 없이 dependenty를 나란히 적어주면 된다. [counter, keyword]처럼!!

<script>
    // 1회만 최초 실행
    useEffect(() => {
        console.log('I run only once.');
     }, []);

    // counter 상태 값이 변경될 때마다 실행
    useEffect(() => {
        console.log('I run when "counter" changes');
      }, [counter]);

    // keyword 상태 값이 변경될 때마다 실행
     useEffect(() => {
        console.log('I run when "keyword" changes')
      }, [keyword]);    

    // counter, keyword 상태 값이 변경될 때마다 실행
    useEffect(() => {
        console.log('I run when "keyword & counter" changes');
      },[keyword, counter]);
</script>

🌟 잠깐만요, 진짜 마지막이에요. cleanup함수!

🪄 useEffect 안에서 이벤트 리스너나 타이머 같은 작업을 설정했다면, 컴포넌트가 사라지거나(destroy) 다시 실행될 때(create) 이전 작업을 정리해 주어야 한다. 이때 사용하는 것이 바로 cleanup 함수이다.

🔹 cleanup 함수라고 해서 복잡하거나 어려운 문법은 절대 아니다. function에서 return의 원리만 알고 있으면 충분히 사용할 수 있다.

🔹 "특정 조건일 때 실행, 조건에서 벗어나면 종료" 이 원리를 바탕으로 useEffect 안에서는 return 뒤에 오는 함수가 cleanup 함수가 되며, 컴포넌트가 사라질 때(destroy) 호출된다.

🔹 사용방법은 다양하다. destroy 함수, create 함수를 각각 선언한 후 호출하는 방법도 있고, 화살표 함수 표기로 한 번에 작성하는 방법도 있다. 코드가 간결하다면 한 번에 작성하는게 편할텐데, 이건 정말 기초 중의 기초라 화살표 함수 표기법이 쉬워보이는 거겠지..ㅎ

<script>
    // 화살표 함수 표기법
      useEffect(() => {
        console.log("hi");
          return () => console.log('bye');
      }, []);

    // 함수 선언 후 실행법
    function Hello(){
          function byFn(){
            console.log('bye :(');
         }
        function hiFn(){
            console.log('create :)');
            return byFn; //destroy될 때
         }
    }
</script>

🪄 지금까지의 포스트를 통해 리액트 기초를 다져보았다. 다음 포스트부터는 기초를 바탕으로 프로젝트를 시작할텐데, 당황하지 않고 천천히 차근차근 배워나가며 리액트를 부셔버리겠다...후하 아디오스!

📌 지난 포스트 [React] Create-React-App (CRA)으로 리액트 프로젝트 시작하기 ①

🧩 리액트 컴포넌트 분리와 모듈 스타일링

🪄 이번 포스트에서는 그동안 배워왔던 컴포넌트 분리에 각각의 컴포넌트 스타일을 입히는 방법을 배워보기로 한다. 진짜 어메이징하고 클래스 명을 기억하거나 고민하지 않아도 되어서 최고였음

1️⃣ Button.js 컴포넌트 파일 만들기

🔹 src 폴더 안에 Button.js 파일을 새로 만들어 컴포넌트를 작성 🔹 export default는 다른 파일에서 해당 컴포넌트를 불러올 수 있게 해주는 역할을 한다. 예를 들어, 렌더링을 할 App.js파일에서 Button 컴포넌트를 정상적으로 가져올 수 있게 하기 위해 export와 import는 필수이다. 🔹 Button 함수의 props로 text={"continue"}를 써주면 이런 버튼이 생성된다.

<script>
// Button 컴포넌트
function Button({text}){
    return <button>{text}</button>
}
export default Button; // App.js에서 Button을 가져올 수 있게 하기 위해 내보내기


// App 컴포넌트
import Button from './Button';

function App() {
  return (
    <div>
      <h1>Welcome back!</h1>
      <Button text={"Continue"}/>  // text props로 버튼에 text 삽입
    </div>
  );
}

export default App;

</script>

2️⃣ 컴포넌트에 스타일 적용하는 법

✅ 방법 1 : 인라인 스타일 (비추천)

🔹 코드와 스타일을 한 번에 관리할 수 있어 간단하지만, style 속성이 길어지면 코드가 지저분해지고 재사용이 어렵다는 큰 단점이 있어 비추천한다.

<script>
function Button({text}){
    return <button
                style={{
                backgroundColor:"skyblue",
                padding:"10px"
                }}
            >{text}</button>
}
</script>

✅ 방법 2 : 전역 CSS 파일

🔹 index.js 또는 App.js 등에서 css파일을 import하여 적용할 수 있다. 하지만 이 방식은 모든 컴포넌트 스타일에 영향을 줄 수 있어 충돌의 위험이 있다.

<script>
    import './styles.css';
</script>

✅ 방법 3 : CSS 모듈 사용 (추천!)

🔹 예시로 Button.module.css라는 모듈 파일을 생성해서, 해당 컴포넌트 전용 스타일을 작성할 수 있다. 🔹 Button.module.css을 import로 불러오고, 컴포넌트에 className 속성을 설정한다. 🔹 styles.btn처럼 표기하는 이유는 Button.module.css를 import styles from "./Button.module.css"처럼 불러오면, CSS 클래스들이 자바스크립트 객체 형태로 변환되어 styles 안에 담긴다. {btn: "Button_btn__1a2b3"} 이런식으로. 그래서 컴포넌트에서 사용할 때는 <button className={styles.btn}>Click</button> 이렇게 적어 객체 안에 있는 속성을 꺼내 쓰는 것이다. 🔹 이 방법은 CSS 모듈의 고유한 클래스명이 자동으로 생성되기 때문에 클래스명이 충돌하지 않는다.

<style>
    /* Button.module.css */
    .btn{
        background-color:skyblue;
        padding:10px;
    }
</style>

// Button.js 컴포넌트 파일
<script>
    import styles from './Button.module.css';

    function Button({text}){
        return <button className={styles.btn}>{text}</button>
    }
    export default Button;
</script>

🪄 이전 포스트에서도 언급했듯,, 지금까지 배운 건 현재 실무에서 사용되지 않는 cdn 작성법이라 기본 개념만 익히기로 하고, 오늘 포스트에서는 본격적으로 실무에서도 활용되고 가장 간편하며 효과적으로 작업할 수 있는 Create-React-App(CRA) 환경에 대해 배워보기로 한다.

🪄 CRA는 복잡한 설정 없이 빠르게 리액트 개발 환경을 구성할 수 있도록 도와주는 도구로, 다양한 사전설정과 편리한 기능을 제공한다.

👍🏻 React, ReactDOM, Webpack, Babel 등 필수 패키지 자동 설치

🔹 리액트 컴포넌트와 렌더링, 최신 자바스크립트 변환을 위한 Babel 같은 필수 도구들을 따로 설치하거나 CDN으로 연결하지 않아도 알아서 세팅해준다.

👍🏻 개발 서버 실행 및 코드 변경 시, 자동 새로고침 지원

🔹 코드를 수정하면 별도 새로고침 없이 바로 브라우저에 변경 사항이 반영되어 개발 속도가 빨라진다.

🌟 Create-React-App (CRA) 시작하기

📍Create React App Github 바로가기

1️⃣ Node.js 설치

📍Node.js 공식 사이트에서 운영체제에 맞는 버전 설치 🔹 설치 후, 명령 프롬프트(cmd)를 열고 node -v 명령어로 설치 여부와 버전 확인 🔹 npx 입력을 통해 npx가 정상적으로 동작하는지 확인 🔸 npx : 필요한 패키지를 따로 설치하지 않고도 바로 실행할 수 있게 도와주는 도구로, 제대로 작동하면 CRA 프로젝트 생성도 문제없이 할 수 있다.

2️⃣ 프로젝트 생성

🔹 명령 프롬프트(cmd)를 열고 npx create-react-app my-app 명령어를 입력하여 my-app 이라는 프로젝트를 생성 (my-app은 본인이 설정할 프로젝트명으로 설정하면 됨) 🔹 프로젝트 생성이 완료되면 React, ReactDOM 등 필수 패키지가 자동 설치되고, 프로젝트 폴더가 만들어진다. 🔹 VS Code로 바로 열고 싶다면 code my-app 명령어를 입력

나는 react-for-beginners라는 프로젝트 명으로 시작하지롱~

3️⃣ 개발 서버 실행

🔹 VS Code 내 터미널에서 npm start 명령어를 실행하면 개발용 서버가 실행되며, 자동으로 브라우저가 열린다.

4️⃣ 프로젝트 구조 및 초기 정리

🔹 src 폴더 : 애플리케이션 소스 코드가 위치하는 곳으로 프로젝트의 모든 파일을 관리할 폴더 🔹 기본 생성되는 파일 중 필요 없는 파일들은 삭제해도 무방 ex) App.test.js, App.css, index.css, logo.svg, reportWebVitals.js, setupTests.js 🔹 index.js와 App.js 파일을 중심으로 깔끔하게 코드 작성이 가능

📌 지난 포스트 [React] 이것만 알아도 반은 성공 ① [React] 이것만 알아도 반은 성공 ②

🧩 React로 재사용 가능한 버튼 컴포넌트 만들기

🪄 보통 버튼은 1-2가지 유형으로 만들어놓고 프로젝트 전반에 걸쳐 재사용하게 된다. 이렇게 UI 요소를 더욱 효율적으로 재사용하기 위해 사용하는 것이 React.js인 점을 기억하고 있을 것이다. 그래서 React를 배우고 있는 것이고! 오늘은 React 학습 목표에 조금 더 가까워지기 위한 예제를 만들어 볼 것이다. 핵심은 primary 용도로 사용할 공통 버튼 컴포넌트를 하나 만들고, props라는 것을 통해 버튼마다 텍스트, 크기 등의 차이를 유연하게 줄 수 있게 구성해보는 것이다.

🔸 React.js 🔸

👍🏻 공통 버튼 컴포넌트(Btn()) 작성

🔹 click 이벤트나, style, id, class 등 html 속성을 작성할 수 있다. style의 경우에는 object 형식으로 나열한다. 🔹 인수로 text, changeValue를 받는 것은 버튼 안에서 어떤 글자를 보여줄 것인지 또는 어떤 동작을 해야하는지 알기 위해서이다. 예를들어, 주문 받은 피자의 토핑(text)과 굽는 방식(changeValue)을 주방(컴포넌트)에 알려주는 것과 같다. 🔹 그런데 이때, 인수를 props 자체로 받아도 되고, 구조분해할당으로 바로 받는 방법이 있다. props는 object라 {props.text} 처럼 써야한다. 하지만 구조분해할당({text, changeValue})으로 바로 받는다면 {text} 처럼 간결하고 직관적인 사용이 가능해서 이 방법을 권장한다.

👍🏻 React.memo()

🔹 const MemorizedBtn = React.memo(Btn); : Btn 컴포넌트를 기억하고 있다가 props가 이전과 동일하다면, re-render하지 않겠다는 코드 🔹 요소 상태의 변경이 있을 때마다, re-render 되는데 이것은 상당히 비효율적이다. React가 변경된 부분만 빠르게 업데이트 시켜서 효율성을 증대시킨다는 장점이 있으니 배우고 있는 것이 아니겠는가? 따라서 우리는 props가 변경되지 않는다면 re-render 시키지 않을 것이라는 memo 속성을 사용해줄 것이다. 🔹 즉, text나 changeValue가 변하지 않으면 은 re-render 되지 않음.

👍🏻 렌더링 함수 (+props란?)

🔹 const [value, setValue] = React.useState("Save Changes"); : value(상태 관리), setValue(변경 될 값), value의 초기값으로 Save Changes 설정 🔹 const changeValue = () => { setValue("Revert Changes") }; : 버튼 클릭 시, Revert Changes로 변경 🔹 <MemorizedBtn text={value} big={true} changeValue={changeValue} /> : text와 changeValue를 MemorizedBtn 컴포넌트에 props로 전달 🔹 여기서 props란, 컴포넌트에서 직접 실행되지 않고, function에서 props를 전달받아 실행되는 것! 즉, changeValue라는 props는 Btn컴포넌트에서 onClick 이벤트에 연결되어 실행되고, 이로 인해 상태가 변경되며 value 값이 Revert Change로 바뀐다. 상태가 변경되면 컴포넌트가 다시 렌더링 되고, 버튼 내부에 표시되는 {text} 값도 변경된 Revert Change로 업데이트 되어 나타난다.

<script type="text/babel">
    const root = document.querySelector('#root');

    // primary btn 컴포넌트
    function Btn({ text, changeValue }){
        return (
            <button
                onClick={changeValue}
                style={{
                    //object 형식으로 씀
                    backgroundColor: "tomato",
                    color: "white",
                    padding: "10px 20px",
                    borderRadius: 10
                }}>
                {text}
            </button>
        )
    }

    const MemorizedBtn = React.memo(Btn);

    // 컴포넌트 렌더링
    function App() {
        const [value, setValue] = React.useState("Save Changes");
        const changeValue = () => { setValue("Revert Changes") };
        return (
            <div>
                // Continue 버튼 1개 + Save Changes -> Revert Changes 변경되는 버튼 1개
                <MemorizedBtn text={value} big={true} changeValue={changeValue} />
                <MemorizedBtn text="Continue" />
            </div>
        );
    }

    ReactDOM.render(<App />, root);
</script>

🪄 와.. 갑자기 머리가 새하얘지기 시작한 것 같다. 근데 너무 재밌어...!! 근데 어려워!!!! 혼란스럽다.

📌 지난 포스트 [React] 이것만 알아도 반은 성공 ①

🧩 예제로 알아보는 React

🪄 지난 포스트에서 미리 본 '클릭이벤트를 통한 숫자 카운팅' 예제를 분석하며 React 속성을 빠르게 알아보겠다.

🔸 HTML5 🔸

🔹 HTML에서 React root 영역 지정 (렌더링 영역)

<body>
    <div id="root"></div>
</body>

🔸 React.js 🔸

👍🏻 React 필수 스크립트

🔹 react.production.min.js : 컴포넌트 생성, 상태관리(useState) 등 기능을 활용할 수 있는 리액트 핵심 라이브러리 🔹 react-dom.production.min.js : 리액트로 만든 UI를 실제 HTML에 그려주는 라이브러리로 render() 기능을 활용할 수 있다. 🔹 babel.min.js : JSX 문법을 브라우저가 이해할 수 있도록 실시간으로 변환해주는 도구. 본문에 반드시 type="text/babel"을 같이 써주어야 한다.

// React 필수 스크립트
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

👍🏻 React.useState()

🔹 useState는 컴포넌트 안에서 상태(state)를 관리하기 위해 사용하는 함수이다. 🔹 (현재 상태 값(state), 상태를 바꿔주는 함수(modifier))라는 두 개의 인수를 갖고, 배열구조분해할당을 통해 const [state, setState] = useState(초기값); 이렇게 꺼내 쓸 수 있다. state : 현재 상태 값, setState : 상태를 바꿔주는 함수 이렇게 되는 것.. 이건 React 쓰면서 정말 자주 보게 될 거니까 매우 중요바리한 개념이겠쥬? 🔹 아래 코드에서는 const [counter, setCounter] = React.useState(0); counter라는 상태 변수와 상태를 변경할 수 있는 setCounter 함수를 선언했고, counter의 초기값을 0으로 설정한 것이다. 🔹 상태를 바꿔주는 함수(modifier)는 상태가 변경될 때, 새로운 값을 갖고 컴포넌트가 재생성된다. 즉, 여러번 render을 하지 않고도 효율적인 코드 작성이 가능하다는 뜻!

👍🏻 컴포넌트 함수는 반드시 대문자!

🔹 <App /> 처럼 컴포넌트 함수는 반드시 대문자로 시작한다. 그 이유는 React가 JSX 코드 내에서 태그가 대문자로 시작하는 경우, 이를 HTML 태그가 아닌 사용자 정의 컴포넌트로 인식하기 때문이다. 즉, <app/>처럼 소문자로 작성하면 React는 이것을 HTML 태그로 읽어버린다. 따라서 <App />, App() 대문자로 작성하는 것이 규칙!

👍🏻 이벤트 함수 선언

🔹 click, change 등 이벤트 발생 시, 상태를 변경하는 함수를 실행 🔹 setCounter((current) => current + 1); 그런데 여기서 current를 인수로 받는 이유는 이전 상태값을 기준으로 새로운 상태값을 정확하게 계산하기 위해서이다. 앞으로도 이런 업데이트 함수 방식을 사용할 것이다.

👍🏻 JSX 작성 팁

🔹 <h3>Total clicks : {counter}</h3> : 카운팅 될 숫자 data를 받기 위해 { }를 활용하여 변수 값을 출력한다. 🔹 <button onClick={onClick}>Click me!</button> : onClick은 클릭 이벤트를 호출하는 것이고, {onClick}은 onClick 이름을 가진 함수를 불러오는 것이다.

👍🏻 ReactDOM.render()

🔹 리액트 요소(컴포넌트)를 실제 화면에 출력해주는 함수 🔹 ReactDOM.render(<App />, root); : (컴포넌트, 요소를 보여줄 HTML 요소) 형태로 사용

<script type="text/babel">
    const root = document.querySelector('#root');

    // App() : 컴포넌트 함수 (재사용 가능한 UI 조각)
    function App(){
        // 컴포넌트 상태 관리
        const [counter, setCounter] = React.useState(0);
        // click 이벤트 정의
        const onClick = () => setCounter((current) => current + 1);
         return (
            // JSX 문법 : 상태가 변경되면 자동으로 렌더링됨
             <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick={onClick}>Click me!</button>
            </div>
         );
     }

     ReactDOM.render(<App />, root); // App 컴포넌트를 root 요소에 렌더링(그리기)
</script>

🪄 React 입문 시, 배운다는 이 내용은 cdn방식 또는 vanilla 방식이라고 하는데, 요즘엔 진짜 거의 안쓴다고 합니다..ㅎ 대신 대부분 Create React App(CRA) 또는 Vite, Next.js 같은 모던 개발 환경을 쓴다고 하네요? 그럼 이걸 도대체 왜 배운건가 싶겠지만, 뭐든 기초가 탄탄해야 써먹을 수 있지 않겠습니까..ㅎ_ㅎ 눈에서 왜 땀이 나지 증말 cdn방식을 활용해서 저는 단위를 변환하는 Convert 토이 프로젝트도 진행을 해보았는데요! 이건 다음..? 다다음..? 포스팅에서 작성해보겠습니다요.

요즘 웹 개발 세계에서 React는 빠지질 않는다. 도대체 React가 뭐길래 다들 배우라고 난리일까?

그리고 "퍼블리셔가 이걸 꼭 알아야 해?"라는 생각은 이제 옛말이 되었다.

나도 한 2년 전쯤? 회사 다닐 때 틈틈이 공부해보려고 했는데, 퇴근하고 공부한다는 게 말처럼 쉽진 않았다. 진짜 웬만한 의지랑 광기가 없으면 꾸준히 하기 힘든 것이었음!! 그래서 그땐 그냥 '포트폴리오부터 만들고, 이직 후 천천히 배우자'하고 React는 잠깐 미뤄뒀었는데… 지금 생각하면, 그때 바로 시작할 걸 그랬다. 진작에 익혀뒀으면 더 효율적으로 웹사이트 만들고 운영할 수 있었을 텐데 말이지... (그리고 취업도 더 빨랐겠지..🤦🏻‍♀️)

여기까진 그냥 나의 넋두리였고, 이제 본격적으로 React가 뭔지 알아가보자

🌟 React란?

🪄 React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리로, HTML요소들을 조립하듯 구성하여 동적인 웹 화면을 만들 수 있게 도와주는 도구라고 생각하면 된다. 즉, 기존에는 HTML, CSS, JS 파일단위로 나눠 작업하던 반면, React는 컴포넌트(Component) 단위로 화면을 조각조각 나눠 코드를 작성한다. 그래서 유지보수나 재사용이 훨씬 쉬워지고, 복잡한 UI도 깔끔하게 구현이 가능하다는 장점이 있다.

👍🏻 컴포넌트(Component) 기반 구조

🔹 화면을 button, card, list 같은 작은 조각(=컴포넌트)으로 나눠서 만들어 유지보수나 재사용이 쉬워진다.

👍🏻 빠른 화면 업데이트 (Virtual DOM)

🔹 React는 가상 DOM을 먼저 바꾼 다음 실제 DOM과 비교해서 변경된 부분만 업데이트하여 빠르고 부드러운 성능을 보장한다.

👍🏻 재사용성 좋은 코드

🔹 한 번 만든 컴포넌트를 props(속성)만 변경하여 여기저기서 쉽게 사용할 수 있다.

🌟 JSX! 리액트를 위한 필수 문법

🪄 React를 공부하다보면 꼭 듣게 되는 것이 바로 JSX이다. JSX는 쉽게 말해서 JS안에서 HTML처럼 보이는 코드를 쓸 수 있게 해주는 문법이다.

👍🏻 직관적인 UI + 쉬운 유지보수

🔹 HTML 구조가 한눈에 보이고, 화면구성 + 동작 코드를 한 곳에서 작성할 수 있어서 유지보수가 쉽다.

👍🏻 조건부/반복 렌더링도 문제없음

🔹 JSX는 JS문법을 그대로 쓸 수 있어서, 삼항 연산자, &&, if문 등을 사용해 조건에 따라 다른 UI를 보여줄 수 있다. 또, map() 같은 배열 메서드를 활용해서 리스트나 카드 UI를 구성할 때 반복 렌더링하는 것도 가능하다.

*🔻 JSX 예시 🔻 *

<script>
    function App(){
        // JSX 문법
        return <h1>안녕, 리액트!</h1>;
    }
</script>

🧩 JSX문법은 이렇게!

👍🏻 태그는 꼭 하나의 부모 요소로 감싸기!

🔹 여러 개의 태그를 그냥 나열하면 오류가 발생하게 된다. 따라서 <div> 태그로 감싸주거나 <> </> 같은 Fragment 문법을 써야한다.

👍🏻 JS스타일의 HTML 속성 사용하기!

🔹 <script type="text/babel"> : 브라우저에서 JSX 문법을 사용 가능하게 만들어주는 설정이다. JSX는 브라우저가 직접 이해할 수 없기 때문에, Babel이 중간에서 JSX를 일반 JS 코드로 변환해주어야 한다. 🔹 class -> className, for -> htmlFor 🔹 JSX는 자바스크립트 기반이기 때문에 HTML 속성도 위처럼 JS 스타일로 작성해야한다.

🧩 바닐라JS VS JSX(React)

👍🏻 바닐라JS

🔹 HTML 작성 -> JS에서 요소 가져오기 -> 이벤트 감지 -> 데이터 업데이트 및 이벤트 실행

🔻 클릭이벤트를 통한 숫자 카운팅 스크립트 (바닐라) 🔻

<body>
    <span>Total clicks : 0</span>
    <button id="btn">Click me!</button>
</body>

<script>
    let counter = 0;
    const span = document.querySelector('span');
    const button = document.querySelector('#btn');
    button.addEventListener('click', handleClick);

    function handleClick() {
        counter = counter + 1;
        span.innerText = `Total clicks : ${counter}`;
    }
</script>

👍🏻 JSX(React)

🔹 컴포넌트 생성 -> 상태 정의 -> 렌더링

🔻 클릭이벤트를 통한 숫자 카운팅 스크립트 (JSX(React)) 🔻

<body>
    <div id="root"></div>
</body>

<script type="text/babel">
    const root = document.querySelector('#root');

    // App() : 컴포넌트 함수 (재사용 가능한 UI 조각)
    function App(){
        // 컴포넌트 상태 관리
        const [counter, setCounter] = React.useState(0);
        // click 이벤트 정의
        const onClick = () => setCounter((current) => current + 1);
         return (
            // JSX 문법 : 상태가 변경되면 자동으로 렌더링됨
             <div>
                <h3>Total clicks : {counter}</h3>
                <button onClick={onClick}>Click me!</button>
            </div>
         );
     }

     ReactDOM.render(<App />, root); // App 컴포넌트를 root 요소에 렌더링(그리기)
</script>

🪄 정확하게 React 속성에 대해 몰라도, 코드만 보았을 때 HTML 구조와 동적 코드가 한눈에 보여 유지보수가 쉬울 것으로 예상되지 않는가?! 다음 포스팅 때는 조금 더 디테일한 설명으로 돌아오겠읍니다!!

📌 Key point

✅ mousemove 이벤트 속성을 통해 clientX, clientY 마우스 좌표 가져오기 ✅ 기준점으로부터 마우스 위치에 따른 이동 거리 계산 -> 요소의 움직임 각도로 사용 ✅ GSAP 라이브러리를 활용하여 움직임 모션 적용 ✅ 정육각형을 입체감 있게 구현하기

👉🏻 마크업은 이렇게! (HTML5)

🩵 정육각형 구현

<body>
<div class="wrapper">
    <div class="box js-3dbox">
        Back
        <div class="right"><span class="label">Right</span></div>
        <div class="left"><span class="label">Left</span></div>
        <div class="top"><span class="label">Top</span></div>
        <div class="bottom"><span class="label">Bottom</span></div>
        <div class="front"><span class="label">Front</span></div>
    </div>
</div>
</body>

👉🏻 스타일은 이렇게! (SCSS)

🩵 정육각형을 입체감 있게 스타일 구현

🩵 transform-style: preserve-3d; 🔹 3D 변환 🔹 기본값은 flat으로, 이는 자식 요소의 3D 변환이 부모 요소에 영향을 주지 않는 성격을 가짐 🔹 preserve-3d를 사용하면, 부모가 3D로 회전하거나 기울어질 때 자식도 함께 3D로 영향을 받음

🩵 transform : perspective(40rem); 🔹 원근감을 설정 🔹 값은 거리를 나타내는 단위(px, rem, em)로 지정 🔹 값이 작을수록 깊이감이 강해지고, 값이 클수록 깊이감이 약해진다.

🩵 transform-origin : x y z; 🔹 요소 변환(회전, 크기 변경 등)의 기준점을 지정하는 속성 🔹 기본값은 50% 50% (가로 중앙(x), 세로 중앙(y))으로, 요소의 중앙에서 변환이 적용 🔹 ($size / 2) : Z축 기준을 설정, 3D 변환에서 깊은 곳(back)의 중앙을 중심으로 회전하는 깊이감을 줌 🔹 Z축 (깊이): 화면에서 앞뒤 방향 🔹 Z축 기준이 0일 경우: 요소가 평면 중앙에서 회전 (front) 🔹 Z축 기준이 ($size / 2)일 경우: 요소가 back 부분 중앙에서 회전하는 것처럼 보임

<style>
/* BACKGROUND */
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(30deg, #224, #001);
  overflow: hidden;
}

/* VAR */
$size: 300px;
$m-size: 40vmin;

.box {
  width: $size;
  height: $size;
  transform-style: preserve-3d;  /* 요소의 3D 변환 */
  transform: perspective(40rem); /* 원근법 */
  transform-origin: 50% 50% ($size / 2); /* 요소의 회전 기준점 */
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 90, 0, 0.4);
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(255, 5, 5, 0.3));
  color: #2ab7ca;
  pointer-events: none;
  box-shadow: 0 0 50px 5px rgba(255, 5, 5, 0.3);
  text-shadow: 0 0 20px #000;
  font-size: 2rem;
  transition: transform 0.5s ease-out, font-size 0.3s ease-in-out;

  /* 면 */
  .top,
  .left,
  .right,
  .bottom,
  .front {
      width: $size;
    height: $size;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 90, 0, 0.4);
    transform-style: preserve-3d; /* 요소의 3D 변환 (텍스트 노출을 위해) */
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.3), rgba(255, 5, 5, 0.3));
    box-shadow: 0 0 50px 5px rgba(255, 5, 5, 0.3);
  }

  .right {
    transform: rotateY(90deg);
    transform-origin: right;
    .label {
      transform: rotateY(-90deg);
    }
  }

  .left {
    transform: rotateY(-90deg);
    transform-origin: left;
    .label {
      transform: rotateY(90deg);
    }
  }

  .bottom {
    transform: rotateX(-90deg);
    transform-origin: bottom;
    .label {
      transform: rotateX(90deg);
    }
  }

  .top {
    transform: rotateX(90deg);
    transform-origin: top;
    .label {
      transform: rotateX(-90deg);
    }
  }

  .front {
    transform: translateZ($size); 
    /* Z축 방향 (깊이 방향)으로 이동 : 사용자에게 가까워짐 (앞으로 나옴) */
    transform-origin: top;
  }
}
</style>

👉🏻 스크립트는 이렇게! (JS ES6, GSAP)

🩵 객체 구조 분해 할당 : 이벤트 객체에서 필요한 속성만 빠르고 간결하게 가져올 수 있다. 🔹 e는 전체 마우스 이벤트 객체를 나타내며, 여기에는 다양한 속성이 포함 🔹 마우스 이벤트 객체에서 clientX와 clientY라는 두 가지 속성만 꺼내어 사용 const clientX = e.clientX; const clientY = e.clientY; 이렇게 따로따로 변수에 저장할 수 있지만, 코드 효율성과 가독성을 향상시키기 위해 구조 분해 할당을 사용하여 const { clientX, clientY } = e; 이렇게 한 번에 작성할 수 있다.

🩵 마우스 위치에 따른 이동 거리 계산 const rotateY = ((clientX - centerX) / centerX) * movementFactor; const rotateX = ((centerY - clientY) / centerY) * movementFactor; 🔹 clientX - centerX : 마우스 현재 위치와 중앙의 차이(거리) 🔹 (clientX - centerX) / centerX : 중앙을 기준으로 좌/우/중앙을 -1/+1/0 비율로 변환. 만약 centerX로 나누지 않고 절대값을 사용한다면, 화면 크기가 바뀌면 회전 강도도 달라진다. 따라서 화면 크기에 상관없이 동일한 비율로 동작하기 위한 계산식. 🔹 movementFactor를 통해 회전 강도를 쉽게 조정

🩵 GSAP을 사용하여 요소의 회전값, 원근값, 기준점, ease 효과 등을 설정하여 부드럽게 움직일 수 있도록 구현

🩵 마우스가 document에서 벗어나면 요소를 초기상태로 돌려놓음

<script>
document.addEventListener("DOMContentLoaded", () => {
    const wrapper = document.querySelector(".wrapper"); 
    const box = document.querySelector(".js-3dbox");
    const movementFactor = 40; // 회전 강도 (값이 클수록 더 많이 회전)

    //마우스움직임 이벤트
    wrapper.addEventListener("mousemove", (e) => {
    //   const { clientX, clientY } = e; // 마우스 좌표 가져오기(이 값은 마우스를 움직일 때마다 실시간으로 업데이트)
    const clientX = e.clientX;
    const clientY = e.clientY;
      const centerX = window.innerWidth / 2; // 화면 가로 중앙
      const centerY = window.innerHeight / 2; // 화면 세로 중앙

      // 마우스 위치에 따른 이동 거리 계산
      const rotateY = ((clientX - centerX) / centerX) * movementFactor;
      const rotateX = ((centerY - clientY) / centerY) * movementFactor;

      // GSAP을 사용하여 부드럽게 이동
      gsap.to(box, {
        rotationY: rotateY,
        rotationX: rotateX,
        transformPerspective: 800,
        transformOrigin: "center",
        duration: 0.3,
        ease: "power3.out"
      });
    });

    // 마우스가 영역을 벗어날 때 요소 원위치로 복귀
    wrapper.addEventListener("mouseleave", () => {
      gsap.to(box, {
        rotationY: 0,
        rotationX: 0,
        duration: 0.3,
        ease: "power3.out"
      });
    });
  });
</script>

➕ 마우스 움직임에 따른 단순한 요소 움직임 (rotate 효과 적용x)

금융사이트에서 많이 보이고, 개인적으로 포트폴리오에서도 많이 사용되는 효과 중 하나라고 생각한다. 첫 번째 예제가 마우스 움직임에 따라 요소가 따라 움직이며 회전도 했던 모션이었다면, 두 번째 예제는 마우스 움직임에 따라 요소가 따라 움직이기만 하는 단순한 모션이다.

기존 스크립트에서 회전값을 설정해주던 코드만 제거하면 된다. 아주 깔끔하고 쉽다.

👉🏻 스크립트는 이렇게! (JS ES6, GSAP)

🩵 x: deltaX / y: deltaY 🔹 rotate가 아닌 x값을 변경 / rotate가 아닌 y값을 변경

<script>
document.addEventListener("DOMContentLoaded", () => {
    const wrapper = document.querySelector(".wrapper");
    const box = document.querySelector(".js-3dbox");
    const movementFactor = 50; // 이동 강도 설정 (값이 클수록 더 많이 움직임)

    wrapper.addEventListener("mousemove", (e) => {
      const { clientX, clientY } = e;
      const centerX = window.innerWidth / 2;
      const centerY = window.innerHeight / 2;

      const deltaX = ((clientX - centerX) / centerX) * movementFactor;
      const deltaY = ((clientY - centerY) / centerY) * movementFactor;

      gsap.to(box, {
        x: deltaX,  // rotate가 아닌 x값을 변경
        y: deltaY,  // rotate가 아닌 y값을 변경
        duration: 0.3,
        ease: "power3.out"
      });
    });

    wrapper.addEventListener("mouseleave", () => {
      gsap.to(box, {
        x: 0,
        y: 0,
        duration: 0.3,
        ease: "power3.out"
      });
    });
  });
</script>

자료 참고 : https://wsss.tistory.com/1148 참고한 스크립트는 이해하기 어려워서, GSAP을 활용한 요소 움직임을 구현하는 스크립트로 개선

🩵 canvas는 HTML5에서 도입된 요소로, 픽셀 기반의 그래픽을 동적으로 그릴 수 있는 영역을 제공한다. 2D와 3D 그래픽을 그리기 위한 API를 지원하고, JavaScript를 사용해 그림을 그리거나 애니메이션을 구현할 수 있다. 📍canvas mdn 바로가기

📌 canvas 특성

🩵 canvas는 각 픽셀을 개별적으로 제어하며 복잡한 도형, 애니메이션, 이미지 등 다양한 시각적 요소를 렌더링 할 수 있다.

🩵 JavaScript의 2d(context)나 3d(WebGL) 을 이용해 그래픽을 그리거나 조작할 수 있다.

🩵 캔버스에서 그려지는 그래픽은 화면 해상도와 관계없이 독립적으로 동작하여 고해상도의 그래픽을 구현할 수 있으며, canvas.width/canvas.height 속성으로 크기를 조정할 수 있다.

🩵 그림을 그리는 도구들(선, 원, 사각형 등)을 사용하여 복잡한 도형을 그릴 수 있다. 또한, 이미지를 캔버스에 그린 후 필터 효과(예: 회전, 크기 조정, 색상 변경 등)를 적용할 수 있다.

🩵 주로, 2d 게임에서의 캐릭터 및 배경을 그릴 때, 차트 및 그래프를 구현할 때, 인터랙션을 구현할 때 등 사용된다.

📌 canvas 기본 사용법

🩵 HTML5

🔹 <canvas id="myCanvas" width="500" height="500"></canvas> 🔸 HTML 문서에 canvas 태그를 추가하고, 기본 크기(width/height)를 지정하여 그래픽을 그릴 수 있는 공간을 설정한다. (코드 가독성을 위해 인라인으로 명시하는 편)

🩵 JS ES6 (canvas에 접근하기!)

🔹 const canvas = document.querySelector('canvas'); 🔹 const ctx = canvas.getContext('2d'); 🔸 ctx(=context) : canvas에서 그리기 작업을 처리할 수 있는 객체, 일종의 브러쉬라고 생각하면 이해가 쉽다. 🔸 getContext() : 캔버스의 context를 얻고 2d와 3d(WebGL) 옵션이 있다. (대문자 D아니고 소문자 d!) 🔹 canvas.width=800; 🔹 canvas.height=800; 🔸 css로 설정해준 canvas 크기와 별개로 JS에서 한 번더 설정해야한다.

즉, 아래와 같이 작성하는 것이 기초 셋팅!

<script>
    const canvas = document.querySelector('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width=800;
    canvas.height=800;
</script>

📌 canvas로 그림 그리기

🩵 사각형 그리기 (rect/fillRect)

🔸 rect(x, y, width, height) : 그림을 그릴 좌표(x, y)와 도형 크기(width, height)를 설정 🔹 rect()는 단순히 허공에 그리는 셈. 도형, 선을 그릴 때 항상 stroke 또는 fill로 선 그리기, 채우기를 해주어야 도형이 정상적으로 그려진다.

🔸 fillRect(x, y, width, height) : rect()와 fill() 함수를 동시에 동작! 즉, 도형을 그림과 동시에 색을 채움.

🔸 strokeRect(x, y, width, height) : rect()와 stroke() 함수를 동시에 동작! 즉, 도형을 그림과 동시에 선을 그림.

🔸 context는 순서를 가지기 때문에 style을 먼저 설정 후, 그리기를 진행해야한다. 🔹 ctx.lineWidth=2; : 선 굵기 🔹 ctx.strokeColor="#ddd"; : 선 색상 ** 🔹 ctx.fillStyle="pink"; : **채우기 색상

🔸 예제) rect 속성으로 사각형 그리기

<script>
// canvas 기본세팅
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
ctx.fillStyle = "skyblue";

ctx.rect(50,50,100,100); // 첫 번째 도형
ctx.rect(150,150,100,100); // 두 번째 도형
ctx.rect(250,250,100,100); // 세 번째 도형
ctx.fill(); // 배경색 채우기
// ctx.stroke(); // 선으로 그리기
</script>

🩵 직선 그리기 (moveTo/lineTo/stroke)

🔸 moveTo(), lineTo(), stroke() 메서드를 사용하여 직선을 그린다. 🔹 ctx.moveTo(x, y); : 그리기를 시작할 지점으로 좌표 이동(x축, y축). 즉, 브러쉬를 이동하는 개념이라고 생각하면 이해하기 쉽다. 🔹 ctx.lineTo(x, y); : 선을 그으면서 좌표 이동(x축, y축) 🔹 ctx.stroke(); : 경로를 따라 선 그리기. 해당코드를 반드시 써줘야 선을 그릴 수 있음! 🔹 ctx.fill(); : 직선으로 그린 도형을 채우고 싶다면 fill 속성으로 배경색을 채울 수 있다. 🔹 ctx.lineCap="round"; : 선 끝 모양을 설정 (butt, round, square)

🔸 context는 순서를 가지기 때문에 style을 먼저 설정 후, 그리기를 진행해야한다. 🔹 ctx.lineWidth=2; : 선 굵기 🔹 ctx.strokeColor="#ddd"; : 선 색상 🔹 ctx.fillStyle="pink"; : 채우기 색상

🔸 예제) 직선으로 사각형 그리기 (stroke)

<script>
// canvas 기본세팅
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;


function onDrawLine(){
    // 선 굵기, 색상 등 style 먼저 설정하기
    ctx.lineWidth=3;
    ctx.strokeStyle="red";

    ctx.moveTo(50,50); // (50, 50) 좌표로 이동 (출발점 설정)
    ctx.lineTo(150, 50); // (50,50) → (150,50) 좌표 이동하면서 선 그리기(윗변)
    ctx.lineTo(150, 150); // (150,50) → (150,150) 좌표 이동하면서 선 그리기(우변)
    ctx.lineTo(50, 150); // (150,150) → (50,150) 좌표 이동하면서 선 그리기(밑변)
    ctx.lineTo(50, 50);  // (50,150) → (50,50) 좌표 이동하면서 선 그리기 (시작점으로 돌아옴)
    ctx.stroke(); //선 그리기
}

canvas.addEventListener("click", onDrawLine);
</script>

🔸 예제) 직선으로 사각형 그리기 + 색상 채우기 (fill)

<script>
// canvas 기본세팅
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;


function onDrawLine(){
    // 선 굵기, 색상 등 style 먼저 설정하기
    ctx.lineWidth=3;
    ctx.fillStyle="pink";

    ctx.moveTo(50,50); // (50, 50) 좌표로 이동 (출발점 설정)
    ctx.lineTo(150, 50); // (50,50) → (150,50) 좌표 이동하면서 선 그리기(윗변)
    ctx.lineTo(150, 150); // (150,50) → (150,150) 좌표 이동하면서 선 그리기(우변)
    ctx.lineTo(50, 150); // (150,150) → (50,150) 좌표 이동하면서 선 그리기(밑변)
    ctx.lineTo(50, 50);  // (50,150) → (50,50) 좌표 이동하면서 선 그리기 (시작점으로 돌아옴)
    ctx.fill(); //선 채우기
}

canvas.addEventListener("click", onDrawLine);
</script>

🔸 예제) 도형 그리기(stroke) + 도형 색 채우기(fill) 🔹 ctx.beginPath(); : 하나의 context에서 그려지는 path를 분리시키기 위한 속성. 서로 다른 style을 지정하거나 독립시킬 때 사용! 이전 경로(path)가 초기화 되기 때문에 moveTo()를 먼저 사용해야 한다. 그렇지 않으면 새로운 경로의 시작점이 설정되지 않아서 lineTo()가 정상적으로 작동하지 않는다. 🔹 beginPath()를 쓰지 않았다면, 모든 도형이 빨간색으로 채워진다. 이유는 그림 모두가 같은 경로의 일부이기 때문!

<script>
// canvas 기본세팅
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;

// 1, 2, 3 stroke 도형
ctx.rect(50,50,100,100);
ctx.rect(150,150,100,100);
ctx.rect(250,250,100,100);
ctx.stroke(); //위 그림에 선으로 채우기

// 빨간색 fill 도형
ctx.beginPath(); // path를 분리하여 새 그림을 그림
ctx.rect(350,350,100,100);
ctx.fillStyle="red"; 
ctx.fill();
</script>

🔸 예제) 원 그리기 ** 🔹 ctx.arc(x, y, radius(반지름), starting angle, ending angle); 🔹 2Math.PI : 완벽한 원을 만드는 공식 🔸 ctx.arc(x, y, radius(반지름), 0, 2Math.PI); : *시작점 0, 끝점 2Math.PI이 가장 완벽한 원을 만드는 공식! 🔸 ctx.arc(260, 80, 8, 1Math.PI, 2Math.PI); : 반원을 만드는 공식!

📌 canvas 속성

🩵 ctx.font = "48px serif"; : 폰트 관련 style 설정 (fontWeight, fontSize, fontFamily)

🩵 ctx.save() : ctx의 기존 상태, 색상, 스타일 등 모든 것을 저장 🩵 ctx.restore() : save()와 restore() 사이에 일시적으로 변경할 코드를 쓰고 restore()을 호출하면 수정이 완료된다. 즉, 기존 설정된 스타일과 다른 스타일을 주고 싶을 때 save()와 restore() 사이에서 설정해줌

<script>
 if(text !== ""){
    ctx.save(); // ctx의 현재 상태, 색상, 스타일 등 모든 것을 저장
    ctx.lineWidth=1;
    ctx.font = "48px serif"; // weight, size, font-family를 지정
    ctx.restore(); // 수정 완료. save와 restore사이의 코드는 변수에 저장되지 않음(임시적이라는..)
}
</script>

📌 KEY POINT

💚 리스트 등록 시, 입력한 input value값을 그대로 리스트에 추가 💚 리스트 삭제 시, 선택한 리스트를 찾아 삭제해야하는 로직 💚 createElement()와 append() 메서드를 활용하여 스크립트로 DOM 요소 생성 💚 선택한 리스트를 매칭 시키기 위해 id값으로 구분이 필요 (Date.now()라는 생성자 함수 사용) 💚 filter 속성을 사용하여 id 값이 매칭되는 리스트 구분 💚 localStorage에 텍스트 타입으로 저장시키기 위해 JSON.stringify() 속성 사용 💚 텍스트 타입으로 저장된 localStorage 데이터 값을 다시 배열로 저장시키기 위해 JSON.parse() 속성 사용

👉🏻 마크업은 이렇게! (HTML5)

🩵 텍스트를 입력할 input 폼 생성

🩵 저장된 list를 노출 시킬 리스트 영역 생성

<body>
 <form id="todo-form">
    <input type="text" placeholder="Write a To Do and Press Enter" required>
 </form>
 <ul id="todo-list"></ul>
</body>

👉🏻 스크립트는 이렇게! (JS ES6)

1️⃣ paintTodo() 함수 실행

🩵 To-do list에 새로운 항목을 추가 🔹 등록된 리스트는 li > span + button 구조로 마크업되도록 createElement 메서드를 사용

<script>
function paintTodo(newTodo){
    // 전달받을 newTodo는 handleTodoSubmit함수에서 실행시킨 todoInput.value값을 의미

    const li = document.createElement("li");
    li.id = newTodo.id;

    const span = document.createElement("span");
    span.innerText = newTodo.text;

    const deleteBtn = document.createElement("button");
    deleteBtn.innerText = "❌";
    deleteBtn.addEventListener("click", deleteTodo);

    li.append(span);
    li.append(deleteBtn);
    todoList.append(li);
}
</script>

2️⃣ handleTodoSubmit() 함수 실행

🩵 input이 submit되면 handleTodoSubmit() 함수 실행 🔹 입력한 value 값을 newTodo 변수에 저장 (리스트에 value 값을 노출시켜야하기 때문) 🔹 input이 submit되면 value 값을 공백으로 리셋 🔹 등록한 리스트(text)를 newTodoObj 객체로 변환하여 todos 배열에 추가 🔹 id는 리스트 삭제 시, 클릭한 리스트와 매칭 시켜야 하기 때문에 임의로 Date.now(등록시간) 값을 부여 🔹 paintTodo()함수 실행 시, 인수로 newTodoObj를 추가 (=새로운 할 일 추가) 🔹 saveTodos()를 호출하여 localStorage에 저장

<script>
function handleTodoSubmit(event){
    event.preventDefault();

    const newTodo = todoInput.value;
    todoInput.value = ""; // 입력 후 공백으로 업데이트

    //newTodo를 todos에 배열(array)로 저장
    const newTodoObj = {
        text:newTodo,
        id:Date.now(),
    }
    todos.push(newTodoObj);

    paintTodo(newTodoObj);  // todos 배열을 list로 생성
    saveTodos();
}

todoForm.addEventListener("submit", handleTodoSubmit);
</script>

3️⃣ deleteTodo() 함수 실행

🩵 삭제 버튼을 클릭하면 deleteTodo() 함수 실행 (=리스트 삭제) 🔹 handleTodoSubmit()함수에서는 id는 리스트 삭제 시, 클릭한 리스트와 매칭 시켜야 하기 때문에 임의로 Date.now(등록시간) 값을 부여했었다. 🔹 클릭한 리스트의 부모요소를 li라는 변수에 저장 🔹 todos 배열 중 filter 속성을 사용하여 todo.id값과 li.id값이 다른 리스트만 todos에 저장 (즉, 삭제버튼을 클릭한 해당 li의 id와 일치하는 항목을 제외하고 나머지 할 일만 남김) 🔹 saveTodos()를 호출하여 변경된 목록을 저장

<script>
function deleteTodo(event){
    // console.log("delete click!");
    const li = event.target.parentElement;
    // event(클릭)대상의 부모요소

    todos = todos.filter(function(todo){
        return todo.id !== parseInt(li.id);
    })
    li.remove();
    // console.log(li.id);
    saveTodos();
};
</script>

4️⃣ saveTodos() 함수 실행

🩵 리스트를 영구적으로 localStorage에 저장시키기 위한 함수 🔹 localStorage.setItem()을 사용하여 todos 배열을 문자열로 변환한 후 저장. (배열은 JSON.stringify()를 사용해 텍스트로 변환)

<script>
function saveTodos(){
    localStorage.setItem(TODOS_KEY, JSON.stringify(todos)); 
    //["a", "b", "c"]처럼 텍스트 타입으로 저장됨
}
</script>

5️⃣ 페이지 로드 시, 기존 할 일 목록 가져오기

🩵 페이지가 로드될 때, localStorage.getItem(todos)을 사용하여 저장된 데이터를 가져오고, JSON.parse()로 다시 객체 배열로 변환 🔹 JSON.stringify() : 배열/객체데이터를 "텍스트"타입으로 변환 🔹 JSON.parse() : 텍스트를 "배열"로 변환

🩵 localStorage에 저장된 값이 존재한다면 🔹 변환된 데이터를 todos 배열에 할당하고, paintTodo()로 목록을 다시 그립니다. 🔹 forEach()**는 배열의 모든 항목에 대해 반복 작업을 수행할 때 사용. localStorage에서 가져온 할 일 목록을 화면에 표시할 때 사용

<script>
const savedTodos = localStorage.getItem(TODOS_KEY);
// console.log(savedTodos);

if(savedTodos !== null){
    const parsedTodos = JSON.parse(savedTodos); 
    // console.log(parsedTodos);
    todos = parsedTodos;
    parsedTodos.forEach(paintTodo);
}
</script>

📌 KEY POINT

💚 navigator.geolocation.getCurrentPosition() : 현재 위치(위도, 경도)를 가져오기 💚 OpenWeather API를 통해 해당 위치의 날씨 정보를 가져오기

👉🏻 마크업은 이렇게! (HTML5)

🩵 온도와 지역위치를 노출시킬 요소 생성 🔹 자세한 데이터 값은 weather API를 통해 불러올 것!

<body>
    <div id="weather">
        <span></span>
        <span></span>
    </div>
</body>

👉🏻 스크립트는 이렇게! (JS ES6)

🩵 navigator.geolocation.getCurrentPosition(성공 함수, 실패 함수) 🔹 브라우저에서 제공하는 위치 정보를 가져오는 메서드 🔹 position.coords.latitude : 위도 🔹 position.coords.longitude : 경도

🩵 onGeoOk(position) 함수 설명 : 위치를 성공적으로 가져오면 해당 함수 실행 🔹 position은 위치 정보를 담고 있는 객체 🔹 사용자의 위도(latitude), 경도(longitude) 등 위치 관련 정보를 불러와 변수에 저장 🔹 OpenWeather API를 사용하기 위한 API 키 값을 가져와 변수에 저장 🔹 OpenWeather API의 날씨 정보 요청 URL을 만듦 🔹 lat=${lat}&lon=${lng} : 사용자 위치(위도, 경도)를 기반으로 날씨 데이터 요청 🔹 appid=${API_KEY} : API 키 추가 🔹 units=metric : 섭씨 온도로 데이터 요청 🔹 fetch(url) : 해당 URL로 API 요청을 보냄 (실제로 URL 이동할 필요 없이 스크립트가 대신 URL을 부름) 🔹 API 요청에 따른 데이터를 받으면, .name (지역명)과 .main.temp (온도) 값을 출력하여 text요소로서 HTML에 반환

🩵 onGeoError() 함수 설명 : 위치 가져오는 것을 실패했을 때, 해당 함수 실행

<script>
// navigator.geolocation.getCurrentPosition(성공 함수, 실패 함수);

const API_KEY = "OpenWeather에서 부여받은 API 키 값";

// 성공 함수
function onGeoOk(position){
    // console.log(position);

    const lat = position.coords.latitude; // 위도
    const lng = position.coords.longitude; // 경도

    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`;

    fetch(url)
    .then(function(response){
        return response.json()
    })
    .then(function(data){
        const weather = document.querySelector("#weather span:first-child");
        const city = document.querySelector("#weather span:last-child");

        city.innerText = data.name;
        weather.innerText =  `${Math.round(data.main.temp)} / ${data.weather[0].main}`;

    }); 
}

function onGeoError(){
    alert("Can't find you. No weather for you.");
}

navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
</script>

이렇게 API를 통해 위치와 날씨 정보를 가져오면 아래와 같이 데이터 값이 노출된다.

📌 fetch란?

💚 fetch는 브라우저에서 기본 제공하는 메서드로, 웹 서버와 비동기적으로 데이터를 주고받기 위해 사용된다. 🔸 비동기란? : 데이터를 요청한 후, 결과를 기다리지 않고 다른 작업을 먼저 처리할 수 있다는 의미이며,이를 통해 사용자 경험이 더 부드럽고, 앱이 더 빠르게 동작할 수 있다.

💚 fetch 기본 문법 🔹 url: 데이터를 요청할 서버의 URL 🔹 options: 요청을 더 구체적으로 설정할 수 있는 선택 사항 (예: HTTP 메서드, 헤더 등)

fetch(url, [options])
  .then(response => response.json())  // 응답 처리
  .then(data => console.log(data))    // 실제 데이터 처리
  .catch(error => console.log(error)); // 오류 처리

✅ fetch() 동작 방식

1️⃣ fetch(url): URL로 요청을 보냄. 이때 fetch()는 데이터를 바로 반환하지 않고, "나중에 결과를 줄게!"라는 약속(Promise)을 먼저 반환한다. 그래서 데이터를 비동기적으로 처리할 수 있는 것!

2️⃣ response.json() : 응답이 JSON 형식이라면, JSON 형태로 파싱해서 반환

3️⃣ then(data) : 요청이 성공적으로 완료되면 응답(response)이 then(data)을 통해 실제 데이터를 처리!

4️⃣ catch(error) : 오류가 발생했을 때, 오류를 처리하는 부분. 예를 들어, 서버 연결이 안 됐거나, 잘못된 URL을 요청했을 때 실행된다.

📌 KEY POINT

💚 다수의 명언을 랜덤 출력할 것 💚 Math.random()을 활용하여 인덱스를 랜덤으로 추출

👉🏻 마크업은 이렇게! (HTML5)

🩵 명언과 작가의 정보를 받아올 span 태그 준비! 실질적인 텍스트는 스크립트로 받아올 것임.

<body>
 <div id="quote">
        <span></span>
        <span></span>
    </div>
</body>

👉🏻 스크립트는 이렇게! (JS ES6)

🩵 quotes 라는 배열에 10개의 명언 객체를 저장

🩵 quotes 배열에서 랜덤한 명언을 선택 (랜덤한 배열 인덱스 만들기) 🔹 Math.random() : 0 이상 1 미만 범위에서 실수를 랜덤으로 반환 🔹 quotes.length를 곱하는 이유 : Math.random()이 반환하는 값에 quotes.length를 곱하면, 0 이상 quotes.length 미만의 랜덤한 실수가 반환 🔹 여기서 Math.floor() 를 써주면 내림 처리가 되어 0, 1, 2로 반환되어 변수에 저장된다. 🔹 최종적으로, 랜덤한 텍스트가 todaysQuote에 저장

📌 Math 속성 한 번에 주워가기

💚 Math.random() : 0 이상 1 미만 사이의 랜덤 숫자를 반환 (소수점 단위) 🔸 Math.random() * 10 : 10 미만의 숫자를 반환하기 위해 곱하기 10

💚 Math.round(1.8) : 2로 반올림하여 반환 💚 Math.ceil(1.1) : 2로 올림하여 반환 💚 Math.floor(1.6) : 1로 내림하여 반환

<script>
const quotes = [
    {
        quote : "The only way to do great work is to love what you do.",
        author : "Steve Jobs"
    },
    {
        quote : "Do what you can, with what you have, where you are.",
        author : "Theodore Roosevelt"
    },
    {
        quote : "It always seems impossible until it’s done.",
        author : "Nelson Mandela"
    },
    {
        quote : "Happiness depends upon ourselves.",
        author : "Aristotle"
    },
    {
        quote : "Success is not final, failure is not fatal: it is the courage to continue that counts.",
        author : "Winston Churchill"
    },
    {
        quote : "If you want to go fast, go alone. If you want to go far, go together.",
        author : "African Proverb"
    },
    {
        quote : "In the middle of every difficulty lies opportunity.",
        author : "Albert Einstein"
    },
    {
        quote : "Life is really simple, but we insist on making it complicated.",
        author : "Confucius"
    },
    {
        quote : "Do what you feel in your heart to be right – for you’ll be criticized anyway.",
        author : "Eleanor Roosevelt"
    },
    {
        quote : "The best way to predict the future is to create it.",
        author : "Peter Drucker"
    }
]
const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");


const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = todaysQuote.quote;
author.innerText = `- ${todaysQuote.author} -`;
</script>

📌 KEY POINT

💚 Math.random()을 활용하여 인덱스를 랜덤으로 추출하기 💚 createElement()를 통해 스크립트로 요소를 생성하고 .append()를 활용하여 문서에 삽입하기

👉🏻 스크립트는 이렇게! (JS ES6)

🩵 배경으로 사용할 이미지 3장을 준비하고, 파일명을 배열로 나열한다. (src 속성 연결을 해야하기 때문에 파일명으로 나열)

🩵 이미지 요소를 랜덤으로 추출하기 위해 인덱스 활용 🔹 Math.random() : 0 이상 1 미만 범위에서 실수를 랜덤으로 반환 🔹 images.length를 곱하는 이유 : Math.random()이 반환하는 값에 images.length를 곱하면, 0 이상 images.length 미만의 랜덤한 실수가 반환 🔹 여기서 Math.floor() 를 써주면 내림 처리가 되어 0, 1, 2로 반환되어 변수에 저장된다. 🔹 최종적으로, 랜덤한 이미지가 krImage에 저장

🩵 createElement() : 새로운 요소를 생성

🩵 bgImage.src : 생성한 img요소의 src(이미지 경로)를 설정하는 속성

🩵 .append() : 스크립트로 생성한 img 요소를 대상요소 뒤에 생성시키기 🔹 .pretend() : 대상요소 앞에 생성

<script>
const images = ['img01.jpg', 'img02.jpg', 'img03.jpg'];

const krImage = images[Math.floor(Math.random() * images.length)];

// .createElement() : 태그 생성
const bgImage = document.createElement("img");

bgImage.classList.add("bgimg");

// console.log(bgImage);
bgImage.src = `img/${krImage}`;

document.body.append(bgImage);
</script>

📌 KEY POINT

💚 input 속성 : required(필수입력), maxlength="15"(최대 글자수) 💚 input으로 입력한 이름/아이디 값을 키-값 구조로 localStorage에 저장하여 새로고침하여도 유지될 수 있도록 저장값 활용

👉🏻 마크업은 이렇게! (HTML5)

🩵 이름/아이디를 입력할 input 생성 🔹 login 버튼은 button 태그로 생성해도 된다. 참고로 form 태그 안에서 button 태그는 기본 타입속성이 submit이다.

🩵 그리고 이름/아이디를 입력하고 'Welcome, ~' 문구를 대신 띄울 것이기 때문에 텍스트를 노출시킬 요소도 생성한다.

<script>
<form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?">
        <input type="submit" value="Log In" class="btn--login">
</form>
<h1 id="greeting" class="hidden"></h1>
</script>

👉🏻 스타일은 이렇게! (CSS3)

🩵 이름/아이디 입력 전과 후를 나누어 입력폼과 텍스트를 각각 노출시켜야 하는데, hidden 이라는 클래스를 스크립트로 컨트롤 할 것이고 따라서 hidden 클래스에 대한 style만 설정해주면 된다.

<style>
.hidden{
    display: none !important;
}
</style>

👉🏻 스크립트는 이렇게! (JS ES6)

🩵 onLoginSubmit() 함수 설명

🔹 이름/아이디가 입력된 후 submit 상태가 되었을 때, form 영역을 감추고 'Welcome, ~' 문구를 노출시켜야 한다. 따라서 form 태그에 hidden 클래스를 추가한다.

🔹 form에 submit이라는 이벤트가 실행되었을 때, 입력한 이름/아이디 값 (=input.value)을 변수와 localStorage에 저장한다.

🩵 paintGreetings() 함수 설명

🔹 입력한 이름/아이디 값을 'Welcome, ~'라는 텍스트로 노출시키기 위한 함수 🔹 localStorage.getItem()를 통해 localStorage에 저장된 값을 불러오는 로직 🔹 기존에 설정되어있던 hidden 클래스를 제거

🩵 localStorage란?

🔸 localStorage는 웹 브라우저에서 제공하는 저장소로, 키-값(Key-Value) 쌍 형식으로 데이터를 브라우저에 영구적으로 저장할 수 있는 기능 🔸 localStorage에 저장된 데이터는 세션을 종료해도 계속해서 브라우저를 닫고 다시 열어도 유지된다! 🔹 localStorage.getItem(USERNAME_KEY) : 주어진 key에 해당하는 값을 localStorage에서 가져옴 🔹 localStorage.setItem(USERNAME_KEY, username) : 주어진 key에 value 값을 localStorage에 저장

🩵 localStorage에 저장된 데이터가 없다면(null) form 노출, 있다면 text 노출

const loginForm = document.querySelector("#login-form");
const loginInput = loginForm.querySelector("input");
const greeting = document.querySelector("#greeting");

//동일한 텍스트를 입력할 일이 많다면 이렇게 KEY 변수로 설정하면 오타 방지, 효율성 짱짱
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
  // preventDefault : 브라우저가 기본 동작을 실행하지 못하게 막아줌
  event.preventDefault();

  loginForm.classList.add(HIDDEN_CLASSNAME);

  const username = loginInput.value; // input에 입력한 이름/아이디(=value)값을 변수에 저장

  // username 값을 username_key와 함께 local storage에 저장
  localStorage.setItem(USERNAME_KEY, username);

  paintGrettings();
}

function paintGreetings(
  // local storage에 저장된 데이터를 username 변수에 저장
  const username = localStorage.getItem(USERNAME_KEY);

  greeting.innerText = `Welcome, ${username}!`; // 데이터보간법을 활용하여 요소의 텍스트로 반환
  greeting.classList.remove(HIDDEN_CLASSNAME); // 앞서 설정되어있던 hidden 클래스 제거
)


// localStorage에 저장된 데이터가 없다면(null) form 노출, 있다면 text 노출
const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);

  // input 요소는 텍스트 입력 필드일 뿐, 폼 제출 이벤트를 처리하는 역할을 하지 않기 때문에 submit 이벤트를 input에 바인딩하는 것보다는 폼 자체인 loginForm에 바인딩하는 것이 일반적인 방식
  loginForm.addEventListener('submit', onLoginSubmit);

} else {
  // hide the form
  paintGreetings();
}

📌 KEY POINT

💚 new Date() 생성자 함수와 .getHours() 등 시간관련 메서드를 활용하여 시계 셋팅 💚 setInterval() 함수를 통해 1초마다 시간이 흐르는 동작 셋팅

👉🏻 마크업은 이렇게! (HTML5)

🩵 디지털 시계를 노출시킬 요소 생성 후, 00:00:00 (시:분:초) 단위를 맞춰 셋팅한다.

<body>
    <h2 id="clock">00:00:00</h2>
</body>

👉🏻 스크립트는 이렇게! (JS ES6)

🩵 new Date() : 오늘의 날짜를 불러오는 생성자 함수 호출 🩵 .getHours() : 시간을 반환하는 메서드 🩵 .getMinutes() : 분을 반환하는 메서드 🩵 .getSeconds() : 초를 반환하는 메서드

🩵 .padStart(길이, 추가할 문자) : 문자열의 길이를 지정하고, 부족한 부분을 앞쪽에서부터 지정한 문자로 채운다. 🩵 .padEnd(길이, 추가할 문자) : 문자열의 길이를 지정하고, 부족한 부분을 뒤쪽에서부터 지정한 문자로 채운다.

🩵 이렇게 시, 분, 초 데이터를 각 변수에 담은 후, 백틱 기호를 사용한 데이터 보간처리를 하여 innerText로 화면에 출력

🩵 setInterval(실행 함수, intervalTime) : 일정 시간마다 함수를 무한 반복 실행 🔹 1초동안 시간이 바뀌어야하기 때문에 intervalTime을 1000ms로 설정

<script>
const clock = document.querySelector("#clock");

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");
    const minutes = String(date.getMinutes()).padStart(2,"0");
    const seconds = String(date.getSeconds()).padStart(2,"0");

    clock.innerText = `${hours}:${minutes}:${seconds}` 
}
getClock(); // 페이지가 로드되었을 때 바로 현재 시간을 표시하기 위해서 미리 로드!!
setInterval(getClock, 1000);

</script>

👩🏻‍💻 : 디지털시계 이렇게 쉽게 만드는 것이었다니! 다음엔 D-day 기능 만들어봐야지!!

대표적으로 엔터프라이즈블록체인 프로젝트에서 position:sticky; 를 사용하여 스크롤 시, 특정 요소를 고정시키는 인터랙션을 구현한 방법이있다. 해당 모션에 대해 pin 속성을 사용할 수도 있었는데 사용하지 않은 이유에 대해 여쭤보셨다. 그때의 동공지진이란...🥲 (쫄지말자 초이야.. * 100번 외친듯) 이미 html과 css로 마크업을 다 해둔 상태였긴 했지만, 사실 pin 속성이 정확히 어떤 성질을 갖고 있는 것인지는 숙지하지 못했었다. (괜찮아 이제부터 알면 되지. 원래 극한의 상황에서 배운 것이 더 기억에 잘 남잖아..🥲)

📌 pin이 도대체 뭔데?

🩵 디자인 시안이나 인터랙션 구현에 있어서 "이 요소는 고정시키고 싶다!" 하는 순간이 있다면, 이런 순간을 위해 딱 맞는 기능이 바로 pin 속성이다.

🩵 pin 속성은 단어 그대로 특정 요소를 화면에 고정하는 역할을 한다. 즉, position:sticky;처럼 스크롤을 내리더라도 해당 요소가 정해진 영역에서 고정되어있는 것처럼 계속 머무르는 효과를 보여준다.

🩵 gsap에서는 position:sticky;보다 더 유연하게 조정할 수 있다.

💫 pin 이럴 때 사용해요!

🔸 섹션 강조 : 특정 영역에서 콘텐츠를 고정하면서 강조할 때 🔸 스크롤 인터랙션 : 스크롤 시, 특정 요소가 변하는 효과를 줄 때 🔸 sticky UI : 페이지 네비게이션이나 특정 이미지 등을 고정할 때

📌 pin 도대체 어떻게 사용하는건데?

🛠️ 기본 사용법

🩵 기본적으로 pin:true의 설정만으로도 고정이 가능하다.

🩵 아래 코드를 보면 .box는 고정시킬 대상요소가 되고 .container는 고정의 기준이 되는 trigger를 의미한다. 즉, .box 요소는 .container 요소 안에서 스크롤 시 특정 위치에 고정이 되는 것이다. (특정위치는 start & end로 언제부터 언제까지 고정시킬지 설정한 값에 따라 달라진다.) 🔸 trigger: 어느 요소를 기준으로 할지 설정 (=.container) 🔸 start & end: 언제부터 언제까지 고정할지 🔸 pin: true: 해당 요소를 고정시키는 옵션

// 요소 고정하기
gsap.to(".box", {
  scrollTrigger: {
    trigger: ".container", // 고정할 기준 요소
    start: "top top", 
    end: "bottom top",
    pin: true, // 요소 고정!
    markers: true
  }
});

🛠️ 추가 옵션 & 유용한 기능

🩵 pinSpacing: false -> 고정될 때 원래 공간만큼 여백이 생기는데, 그걸 없애고 싶다면?! 이 옵션을 추가하여 불필요한 공간을 제거한다.

🩵 pinReparent: true -> 부모 요소의 레이아웃이 깨질 때 해결하는 방법! 이 옵션을 추가하면 특정 레이아웃에서 문제가 생길 때 해결할 수 있다. 하지만 자주 사용되는 옵션은 아니다.

🩵 anticipatePin : 1 -> 스크롤 성능이 느려지는 게 느껴질 때 살짝 미리 고정하는 옵션! 기본값은 0이고 숫자를 올리면 미리 고정된다. 이 옵션을 조절하면 부드러운 스크롤링을 유지할 수 있다.

📌 이제 sticky 들어가시고, pin 나와!

🩵 비주얼 영상/이미지는 고정된 채로 스크롤할 때 텍스트가 바뀌는 효과로 웹 사이트에서 많이 쓰이는 인터랙션이다. (ex-Apple에서 제품 홍보 시, 정말 많이 볼 수 있는 효과이다.)

🥨 기존 sticky 활용 코드

🩵 [HTML] 🔸 .sticky-wrap 요소가 고정이 될 대상 요소이다.

<body>
<section class="sc-intro">
    <div class="sticky-wrap">
        <!-- intro bg video -->
        <div class="intro__bg">
            <video id="video" loop autoplay muted playsinline poster="./assets/images/intro-poster.jpg">
                <source src="./assets/video/Archivo-VariableFont_Medium_C_PC.mp4" type="video/mp4">
            </video>
        </div>
        <!-- // intro bg video -->

        <!-- intro text -->
        <div class="group-intro-text">
            <!-- text 중략 -->
        </div>
        <!-- // intro text -->
    </div>
</section>
</body>

🩵 [CSS] 🔸 고정의 기준이 되는 .sc-intro 요소에 position:relative;를 설정해주고 대략적인 높이도 설정했다.

🔸 고정이 되는 .sticky-wrap 요소에 position:sticky;를 설정했다.

<style>
.sc-intro{
    position: relative;
    width: 100%;
    height: calc(100vh * 8);
}

.sticky-wrap{
    position: sticky;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
}
</style>

🩵 [script (GSAP)] 🔸 text 애니메이션을 제외한 scrollTrigger만 작성한 스크립트이다. .sc-intro 영역의 시작점과 끝점을 설정했다.

<script>
const intro = gsap.timeline({
  scrollTrigger: {
    trigger: '.sc-intro',
    start: '0% 0%',
    end: '100%, 100%',
    // markers: true,
    scrub: true
  }
});
</script>

🥨 pin 속성으로 적용한 코드

🩵 [css] 🔸 position:sticky;를 사용했던 style은 pin 속성으로 대체할 것이기 때문에 relative;로 바꿔준다.

<style>
.sticky-wrap {
  position: relative; /* position: sticky를 사용하지 않음 */
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
</style>

🩵 [script (GSAP)] 🔸 고정시킬 .sticky-wrap 요소에 대한 스크립트를 추가 작성한다.

🔸 다른 모션과 달리 css 속성을 별도로 설정할 필요 없이, scrollTrigger만 설정해주면(특히 pin:true) 스크롤의 기준이 되는 시작점과 끝점에 맞춰 해당 요소를 고정시켜준다.

gsap.to(".sticky-wrap", {
  scrollTrigger: {
    trigger: ".sc-intro",  // .sc-intro 영역을 기준으로 고정
    start: "0% 0%",         // 시작점
    end: "100% 100%",       // 끝점
    pin: true,              // .sticky-wrap 고정
    scrub: true,            // 스크롤에 따라 부드럽게 애니메이션
    markers: true           // 마커 추가 (디버깅 용)
  }
});

👩🏻‍💻 : 이제 완벽하게 알아버렸다. ㅎㅎ 반응형 제작할 때에도 유용하고 효율적으로 컨트롤 가능하다고 알려주신 점도 꼭 기억하고 있다가 반응형 테스트 해봐야지!!!!

🩵 SCSS란?

🩵 Sass의 한 문법 형식으로, 기존 CSS의 단점을 보완한 CSS 전처리기이다. 🩵 CSS 문법을 그대로 사용할 수 있으면서도, 변수, 중첩(Nesting), Mixin 등의 강력한 기능을 제공해 유지보수성과 생산성을 높여준다는 장점이 있다.

🩵 SCSS 장점 한 눈에 보기

1. 변수 사용 가능

🩵 동일한 색상이나 값을 반복적으로 사용할 때, 변수를 활용할 수 있다. 🔹 $primary-color: #3498db; 처럼 $변수명에 값을 할당 🔹 특정 요소에 background-color: $primary-color; 처럼 변수를 불러와 설정해준다. 🔹 변수 하나만 변경하면 공통 스타일을 쉽게 수정할 수 있다는 장점!

2. 중첩(Nesting) 문법 지원

🩵 CSS 선택자를 계층 구조 그대로 중첩해서 작성 가능해 가독성이 좋아지는 장점이 있다! 🔹 CSS 구조를 한눈에 파악하기 쉬워지고, 스타일을 그룹화할 수 있다. 🔹 가상요소(before, after), hover 등 선택자는 &를 붙여서 사용한다.

<style>
.navbar {
  background: #333;
  .menu {
    display: flex;
    li {
      list-style: none;
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}
</style>

이렇게 작성 후, 컴파일 하면 아래처럼 변환된다.

<style>
.navbar {
  background: #333;
}
.navbar .menu {
  display: flex;
}
.navbar .menu li {
  list-style: none;
}
.navbar .menu li a {
  color: white;
  text-decoration: none;
}
</style>

3. 재사용 가능한 Mixin 기능

🩵 반복되는 스타일을 한 번만 정의하고 여러 곳에서 재사용할 수 있다. 🔹 @mixin 스타일 이름 {} 처럼 정의하고, 요소의 style에서 @include 스타일 이름 처럼 불러와서 여러 곳에서 편하게 재사용할 수 있다. 🔹 반응형 작업할 때, 아주 편하다.

<style>
/* 일반 스타일 */
/* _mixin.scss 파일에서 정리해주면 더욱 좋다. */
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}


/* 반응형 스타일 */
@mixin mobile-l{
    @media (max-width:767px){
        @content;
    }
}

#cursor {
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
  @include mobile-l {
    display: none;
  }
}
</style>

4. 모듈화(import, use)로 코드 관리

🩵 CSS는 모든 스타일을 하나의 파일에 작성해야 하지만, SCSS는 여러 개의 파일로 분리하여 관리할 수 있다. 아래 SCSS 기본 사용법을 참고하자.

5. 연산(Operators) 기능 지원

🩵 SCSS에서는 +, -, *, / 등의 연산을 지원한다.

🩵 SCSS 기본 사용법 (국룰은 아님..)

🩵 scss라는 디렉토리 생성 -> base / layout / pages / utils 라는 디렉토리를 생성하여 각 성격을 가지는 파일들을 관리해줄 것이다. 🔹 base : reset이나 common, typo(font) 관련 style을 설정해줄 .scss파일을 생성/관리 🔹 layout : header,footer style을 설정해줄 .scss파일을 생성/관리 🔹 pages : 메인, 서브페이지의 style을 설정해줄 .scss파일을 생성/관리 🔹 utils : var(css 변수), 반응형(mixin) 등을 정의해줄 .scss 파일을 생성/관리

🩵 아래 이미지처럼 _파일명.scss 처럼 앞에 언더스코어를 붙여줘야한다. 🔹 왜냐하면 위처럼 생성해준 파일은 다른 SCSS 파일에서 @import나 @use를 통해 불러와서 사용되는 파일이기 때문에 컴파일할 때 단독 CSS 파일로 변환하지 않는다. 즉, _reset.scss 같은 파일을 만들고 main.scss에서 가져다 쓰면, _reset.scss 자체는 변환되지 않고 main.css에 포함된다. = 필요할 때만 불러와서 사용 가능! 🔹 만약 buttons.scss처럼 언더스코어없이 만들면, SCSS는 이를 독립적인 SCSS 파일로 인식하고, CSS로 변환할 때 buttons.css 파일을 별도로 생성한다.

🩵 scss 디렉토리 하위에 style.scss라는 파일을 생성한다. 🔹 이 파일은 언더스코어가 없으니 css파일로 변환이 된다!

🩵 생성된 style.scss에서 필요한 scss 파일을 import 해준다. 🔹 이때 파일 확장자(.scss)는 안써도 무방하다.

🩵 그리고 Live Sass Compiler 라는 확장기능을 설치한다. 🔹 톱니바퀴 클릭 -> 설정 -> Autoprefix 편집 🔹 "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"] 추가 (크로스 브라우징 처리를 해주는 코드)

🔹 톱니바퀴 클릭 -> 설정 -> Formats 편집 🔹 "savePath": "~/../css/", 경로를 왼쪽과 동일하게 편집 (css파일로 변환된 것을 왼쪽 경로에 저장됨)

🔹 톱니바퀴 클릭 -> 설정 -> Generate Map 편집 🔹 false이면 true로 변경하기 (SCSS는 컴파일 후 CSS로 변환되지만, 이 과정에서 원본 SCSS 파일의 구조를 잃게 된다. source map은 컴파일된 CSS 파일과 원본 SCSS 파일의 매핑 정보를 포함하는 파일로, 개발자가 크롬 개발자 도구(DevTools)에서 스타일을 디버깅할 때 원본 SCSS 파일을 그대로 볼 수 있도록 도와준다.) 🔹 즉, SCSS 원본을 유지하면서 CSS를 확인할 수 있어 디버깅이 훨씬 쉬워진다. ✅ 특히 여러 개의 SCSS 파일을 모듈화해서 관리할 때 필수적 ✅ 프로덕션 환경에서는 성능 최적화를 위해 비활성화할 수도 있음 👉 개발할 때는 true로 설정하고, 배포 시에는 false로 설정하는 것이 일반적인 방법이라고 한다.

🩵 설정이 끝나면 style.scss 파일로 돌아와서 하단의 Watch Sass를 클릭한다. 그리고 저장을 하면 css 디렉토리에 style.css라는 변환 파일이 생성된다.

💡카페24 시작하기

🔹 로그인, 작업을 진행할 디자인도 추가를 완료했다면 FTP에 연결할 차례! 🔹 코딩을 배운 사람이니까 FTP 연결해서 하드코딩으로 뿌셔줘야지! 솔루션 상에서 클릭클릭한다는 것은 아주.. 가오 상하는 일이잖아요...?

🩵 FTP 연결하기

🩵 카페24 -> 디자인 -> 디자인 FTP -> 디자인FTP 권한 신청 🔹 만료시간은 최대 7일이므로 연장 필요!

🩵 VSCODE -> 확장기능 -> FTP-SIMPLE 설치 -> F1 -> FTP-SIMPLE : CONFIG ~ 클릭 🔹 계정, FTP주소, SFTP 접속포트를 적어줌 (디자인FTP 권한신청정보는 카페24 -> 디자인FTP에서 확인) 🔹 VSCODE가 너무 최근 버전이면 호환을 못해서 열리지 않아 다운그레이드 해주어야함

{
    "name": "localhost",  // 사용자 이름
    "host": "",  // FTP 주소
    "port": 21,  
    "type": "ftp",
    "username": "",  // FTP ID
    "password": "",  // FTP PW
    "path": "/skin7/",  // 나는 스킨 7번이라는 곳에서 작업을 해서 /skin7/를 적었다.
    "autosave": true,
    "confirm": false
}

🩵 VSCODE (F1) -> FTP-SIMPLE : REMOTE ~ 클릭 🔹 접속 할 host, path에서 지정한 디자인경로를 클릭하면 스킨과 관련된 작업 스페이스가 열림

🩵 index.html 이란?

🔹 메인 container에 대한 코드를 작성 (header, footer를 제외한 순수 container) 🔹 <!--@layout(/layout/basic/main.html)--> 해당 코드 이후로 적힌 모든 내용은 불필요하여 지웠다. 🔹 위 경로는 main에서만 사용하는 header, footer 등을 다루는 layout이다. 하지만 메인과 서브의 layout이 동일하다면 layout.html 파일로 통일해도 무방하다. 내가 진행했던 프로젝트는 메인과 서브의 layout이 동일하여 layout.html 파일로 통일시켜 작업했다.

🔹 메인페이지에서만 사용할 css와 js, 라이브러리 cdn 등을 연결해준다. <!--@css(/layout/basic/css/main.css)--> <!--@js(/layout/basic/js/main.js)-->

🔹 하나의 html 파일에서 메인페이지의 모든 콘텐츠를 유지관리한다는 것은 매우 비효율적이다. 따라서 각 section 마다 레고처럼 각각의 조각처럼 쪼개어 작성해주는 것이 가장 효율적인 방법! 나는 main이라는 디렉토리를 하나 생성하고 그 안에 section1.html 이라는 규칙을 만들어 영역에 관련된 파일을 생성했다. 🔹 이렇게 만들어진 각각의 html 파일은 어떻게 불러오냐고? 아주 쉽다.(import 방식) 🔸 메인비주얼 : <!--@import(/main/_section1.html)--> 🔸 인기꾸끼아 : <!--@import(/main/_section2.html)-->

🔹 이렇게 불러온 파일은 layout.html에서 include 방식으로 불러오기 때문에 메인페이지에서도 정상적으로 잘 나타나게 되는 것이었다. 그러기 위해서는 index.html 하단에 이와 같은 코드가 있어야 하는 것 같다. <!--@define(cmc_log)-->

🩵 layout.html 이란?

🔹 서브페이지에서 사용되는 header, footer 구조를 다룬다. 🔹 @contents란, include 방식으로 *필요한 페이지를 불러오는 개념이다. * 🔹 불필요한 sidebar, quick 영역 등을 지워주고 사용할 필수코드만 남겨둔다.

🔽 layout.html을 리셋하여 정리한 코드

<body>
<!-- 본문 영역 --!>
<header id="header">header</header>

<div id="wrap">
    <div id="container">
        <div id="contents">
            <!-- 아래 코드는 본문 내용을 인크루드 하는 코드 (불러오는 개념) --!>
            <!--@contents-->
        </div>
    </div>
</div>

<footer id="footer">footer</footer>
</body>

🩵 layout/basic/~.css (공통 css 한 눈에 보기)

🔹 common.css : reset style을 내가 자주 쓰는 코드로 덮어주었고, font style도 해당 파일에서 적용시켰다. 🔹 layout.css : 기본으로 꾸며져있던 코드가 작성되어 있다. 불필요한 태그는 삭제한다.

🩵 파일 업로드하기 (파일 경로 설정)

🔹 font, 이미지 등 파일 경로를 직접 설정해주어야하는 경우가 있다. 이때, 카페24 - 디자인 - 파일업로드를 통해 파일을 업로드 후, 경로(주소)복사하여 html, css 등에서 활용하면 파일이 깨지는 현상없이 정상적으로 잘 노출 될 것이다.

💡카페24 모듈 활용하기

🩵 배너 슬라이드 (앱 배너매니저)

📍 배너매니저 설치매뉴얼 바로가기 🔹 swiper, fade-in/out 등 메인페이지에는 단순하고도 다양한 배너가 노출되고는 한다. 이때 카페24에서 친히 제공하고 있는 '배너 매니저'라는 앱을 사용해보자. 🔹 카페24 - 앱 - 앱스토어 바로가기 - '배너 매니저' 설치 🔹 아래 스크립트 코드를 layout.html 하단에 적어주었다. (전 페이지에 걸쳐서 사용할 수 있어 효율적이다.) 해당 스크립트는 배너매니저 - 프로젝트 코드에서 확인할 수 있다.

<!-- 배너매니저 스크립트 코드 -->
<style>[df-banner-code][hidden] { display:none !important }</style>
<script>
if (!document.getElementById('dfbm-script-46798')){
  var dfbm_src = 'https://ecimg.cafe24img.com/pg1484b56993108007/choii9901/web/upload/appfiles/ZaReJam3QiELznoZeGGkMG/b2abba405e67784eb3a6d7ba38c3e391.js';
  document.write('<script id="dfbm-script-46798" src="' + dfbm_src + '?v=' + Date.now() + '"><\/script>');
}
</script>

🔹 그리고 다시 카페24 - 배너매니저로 돌아와서 배너 그룹을 추가한다. 🔸 그룹 코드는 영문으로 작성하되, 배너 그룹명은 쇼핑몰관리자 등 누구나 알아볼 수 있도록 쉽게 작성해주어야 한다.

🔹 이미지, 링크, target 방법 모두 '배너매니저'를 통해 등록할 수 있고, br태그나 클래스 등을 부여해야할 설명 또한 html 문법으로 작성해주면 된다.

🔹 사용할 배너의 추가가 완료되었다면, 설치매뉴얼에 명시되어있는 대로 클래스와 구조를 맞게 작성해주면 된다. 여기서 그룹코드는 배너 그룹 등록 시, 작성했던 배너 코드명이고 복제될 슬라이드 코드에 df-banner-clone 를 적어주면 된다. 그리고 등록한 정보들은 변수를 통해 불러올 수 있다. (더 많은 변수는 배너매니저 설치매뉴얼 참고) 🔸 df-banner-code="그룹코드" 🔸 {#href} : 배너 클릭 시, 이동 링크 🔸 {#item} : 등록한 배너 이미지 🔸 {#target} : 설정한 target 방법 🔸 {#html} : 등록한 배너 설명

<body>
<div df-banner-code="그룹코드" hidden>
    <div df-banner-clone>
        <a href="{#href}">{#item}</a>
    </div>
</div>
</body>

🔹 swiper 구조와 접목 시킨 최종 코드는 아래와 같다.

<body>
<div df-banner-code="kukka-main-vis" hidden>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide" df-banner-clone>
                <a href="{#href}" target="{#target}">
                    {#item}
                    <span class="banner-title">
                        {#html}
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
</body>

👩🏻‍💻 : 배너매니저 사용법 숙지 완료!

💡 쇼핑몰 모듈 꿀팁!

📍 카페24 모듈 리스트 바로가기 🩵 카페24 모듈 리스트에서 header(nav), footer, 상품리스트 등 기본 구조와 사용가능한 변수명을 활용하여 구조를 작성할 수 있다.

🩵 상품 리스트 (기초)

🩵 상품 리스트를 가져올 때에도 카페24에서 제공하는 모듈을 활용하여 불러올 수 있다. 모듈 코드를 가져오면, 기본상태의 상품목록이 노출된다.

🩵 이때 쇼핑몰마다 보여주는 상품 정보들이 다르기 때문에 정보 리스트를 세팅해 주어야 한다. (카페24 -> 쇼핑몰 설정 -> 상품설정 -> 상품정보표시설정) 🩵 상품정보표시설정에서 설정해줄 상세분류 항목을 선택하고 내가 노출시킬 리스트만 체크하여 저장한다. 꾸까 프로젝트에서는 상품명, 판매가, 할인판매가와 추가옵션항목이 노출되는 구조였다.

🩵 기본 css로 굉장히 못생긴 스타일로 노출이 될텐데, 이건 퍼블리싱 고수답게 클래스를 활용해서 스타일을 적용해주면된다. 요소 검사를 해보면 아래 이미지처럼 각 항목마다 클래스가 부여되어있는 것을 볼 수 있다. 이때 font-size, font-weight, color는 기본으로 셋팅되어있기 때문에 적용해도 바뀌지 않을 때가 있다. 그럴 땐 !important 속성을 써서 강제로 우선순위가 되도록 하면 설정한대로 바뀐다.

🩵 할인상품vs정가상품

🩵 할인상품과 정가상품이 있을 때, 노출되는 소비자가의 스타일은 어떻게 다르게 설정할 수 있을까?

🩵 할인상품일 때, 할인판매가를 보여주는 .prd_price_sale이라는 항목이 생성된다. 이 항목과 :has, :not 선택자 속성을 활용해서 스타일의 차별을 설정해주면 된다. 🔹 .prdList:not(.prd_price_sale) : .prdList 자체가 .prd_price_sale 클래스를 가지지 않는 경우를 의미 🔹 .prdList:not(:has(.prd_price_sale)) : .prdList 내부에 .prd_price_sale을 가진 요소가 없는 경우를 의미 따라서 단순히 :not이 아닌 :not(:has(.prd_price_sale)) 이렇게 써주어야 내부 자식 요소의 조건을 확인한 후 스타일을 적용할 수 있어 정확한 스타일 적용이 가능!

<style>
/* 할인 상품일 때 (.prd_price_sale이 있을 때), 소비자가(.product_price) 스타일 */
.prdList:has(.prd_price_sale) .product_price span {
  line-height: 16px;
  color: #d1d1d1 !important;
  font-weight: normal !important;
}

/* 정가 상품일 때 (.prd_price_sale이 없을 때), 소비자가(.product_price) 스타일 */
.prdList:not(:has(.prd_price_sale)) .product_price span {
  font-size: 16px !important;
  line-height: 24px;
  color: rgb(0, 0, 0) !important;
  font-weight: 600;
}
</style>

🩵 상품 추가옵션 설정하기

🩵 간혹 상품마다 재입고, 신상품 등 처럼 노출되는 추가옵션이 있다. 이런 추가옵션은 어떻게 설정할 수 있을까?

🩵 카페24 -> 쇼핑몰 설정 -> 상품설정 -> 상품정보표시설정에서 '항목추가'를 누르면 어떤 항목을 추가할 것인지 리스트 양식이 나온다. 항목을 구분할 수 있도록 이름을 설정하고, 추가옵션을 등록할 상품 등록페이지로 가면 아래 이미지처럼 추가한 항목이 노출된다.

🩵 이렇게 옵션을 저장하면 정상적으로 옵션 항목 리스트가 노출된다. style을 설정하고 싶다면 역시 항목 리스트에 붙은 클래스명(.custom_option1)을 활용하여 설정하면된다. 꾸까 프로젝트의 경우 이미지 안에 position으로 위치시켜야 하기 때문에 따로 span 태그를 활용하여 마크업을 해주었다.

<body>
    <span class="opt">{$custom_option2}</span>
</body>

🩵 아래 이미지처럼 옵션이 잘 뜨는 것을 확인할 수 있다. 그런데 옵션이 없는 상품에서는 노출이 되면 안된다.텍스트 따라서 스크립트를 작성해주었다. 🔹 :not(:has(요소)) 선택자를 통해서 display:none;처리를 하는 방법도 있겠지만, 효율적인 관리를 위해 스크립트로 작성했다. 🔹 .text().trim() === '' : .text() 메서드를 활용하여 옵션의 텍스트를 가져오고, .trim() 메서드를 통해 텍스트의 앞뒤 공백을 제거한다. 공백까지 제거했을 때의 요소의 텍스트가 완전히 비어있을 때 해당 요소(옵션)을 .hide() 처리한다.

<script>
// 공통) 상품 옵션(캡션) 없을 때, hide 처리
$('.prdList .opt').each(function () {
  if ($(this).text().trim() === '') {
    $(this).hide();
  }
});
</script>

** 🔵 꾸까 메인페이지 클론코딩 (반응형)**

🔸작업기간 : 2025.02.04 - 2025.02.06 (3일 + 유지보수 1일) 🔹기술스택 : HTML, CSS, jQuery, Gsap·Swiper라이브러리 🔸URL : https://choii9901.cafe24.com/

📌 Key point ✅ 특정 슬라이드에서 이벤트 실행 (swiper on 메서드) ✅ 숫자 카운팅 스크립트 작성법

👀 꾸까 한 눈에 보기!

👉🏻 숫자 카운팅 효과

💡 숫자 카운팅 실행 원리 🔸 시작 숫자와 목표 숫자를 설정 🔸 일정한 간격으로 숫자를 업데이트하고, 목표 숫자에 도달하면 애니메이션 중지 🔸 최종적으로 .counter 클래스를 가진 요소의 숫자가 279,000 → 2,396,445로 2초 동안 증가하는 애니메이션이 실행

📍 자세한 코드 설명은 이 포스팅에서 확인하기!

👉🏻 특정 slide에서 이벤트 실행 (swiper)

🔸 Swiper의 on 메서드 : 특정 이벤트가 발생했을 때 실행할 콜백 함수를 등록 🔹 slideChange : 슬라이드가 변경될 때 실행

🔸 카운팅이 실행되는 슬라이드는 index 2번째 슬라이드 🔸 realIndex 속성을 통해 슬라이드의 index를 변수에 저장하고, 2와 매칭 시 startCounting() 함수 실행

<script>
const mainVis = new Swiper('.sc-mainvis .swiper', {
  // 중략
  on: {
    slideChange: function () {
      activeSlideIndex = this.realIndex;
      //   console.log(activeSlideIndex);

      // 슬라이드 인덱스(2) 매칭 시, 카운팅 실행
      if (activeSlideIndex === 2) {
        startCounting(); 
      }

      // 슬라이드 인덱스 업데이트 실행
      updateHeaderClass(activeSlideIndex);      
    }
  }
});

mediaQuery.addEventListener('change', function () {
  updateHeaderClass(mainVis.realIndex);
});

</script>

👉🏻 header bg 스타일 충돌 방지

💡 모션 분석 🔸 일정 스크롤에 도달할 때, header요소의 bg 스타일이 변경 (white-theme라는 클래스로 컨트롤) 🔸 메인비주얼의 슬라이드 인덱스가 2일 때, header 요소의 색상이 #fff로 변경되고 있음 (white라는 클래스로 컨트롤) 🔸 따라서 두 스타일이 충돌해서는 안되기 때문에 white-theme 클래스가 추가될 때, white클래스를 제거하는 섬세한 스크립트 작성이 필요

🩵 1. 슬라이드 인덱스가 2일 때, white 클래스 추가/제거 🔸 updateHeaderClass() 함수는 위 swiper on 이벤트에서 실행한다.

🔸 index 인수를 사용하는 이유는 activeSlideIndex 변수가 Swiper 내부에서 할당되기 때문에, Swiper 코드 외부에서 직접 접근하면 오류가 발생할 수 있기 때문이다. 따라서, let activeSlideIndex = 0;을 선언하여 현재 슬라이드 인덱스를 저장하는 전역 변수를 만들었다. 이후, Swiper 내부에서는 activeSlideIndex = this.realIndex; 코드를 통해 슬라이드 인덱스를 업데이트한다. 즉, index라는 인수를 사용하여 함수 호출 시, Swiper의 현재 슬라이드 인덱스를 전달하면, 올바르게 동작할 수 있다.

🔸 theme-white 클래스와의 충돌을 방지하기 위해 조건문을 활용하여 스크립트를 작성했다. 🔹조건 1) 슬라이드 인덱스가 2와 매칭될 때 🔹true : theme-white 클래스가 없다면, white 클래스 추가 🔹false : white 클래스 무조건 제거

🔹조건 2) 1070px 이상에서는 white 클래스 무조건 제거

<script>
let activeSlideIndex = 0;

function updateHeaderClass(index) {
  if (mediaQuery.matches) {
      // 슬라이드 인덱스(2) 매칭 시
      if (index === 2) {
      // theme-white가 없을 때, white 추가
      if (!$('#header').hasClass('theme-white')) {
        $('#header').addClass('white');
      }
    } else {
      // 1070px 이상일 때, 무조건 white 제거
      $('#header').removeClass('white');
    }
  } else{
      // 1070px 이상일 때, 무조건 white 제거
      $('#header').removeClass('white');
  }
}
</script>

🩵 2. scrollTrigger + theme-white 클래스 추가/제거 🔸 PC에서는 ScrollTrigger를 사용하지 않음 🔹모바일 전용으로 적용되며, mediaQuery.matches 조건을 통해 1070px 이상일 때 kill()로 이벤트 제거 🔹혹시 모를 충돌을 방지하기 위해 기존 ScrollTrigger가 존재하면 먼저 kill()로 초기화

🔸 ScrollTrigger 이벤트 설정 🔹.sc-mainvis 요소를 기준으로 스크롤이 90% 지점에 도달하면 theme-white 클래스를 추가하고, white 클래스를 제거 🔹반대로 스크롤이 되돌아가면(onLeaveBack), theme-white를 제거하고, 현재 슬라이드 인덱스(activeSlideIndex)가 2라면, white 클래스를 다시 추가

<script>
let headerTrigger = null;

function setupScrollTrigger() {
    if (mediaQuery.matches) {  
        // 기존 scrollTrigger 제거 (pc와 모바일 충돌 방지)
        if (headerTrigger) {
            headerTrigger.kill();
          }

        headerTrigger = ScrollTrigger.create({
          trigger: ".sc-mainvis",
          start: "90% 0%",
          end: "100% 0%",
          toggleActions: "play none play reverse",
        //   markers: true,
          onEnter: function () {
            // theme-white 추가 시, white 클래스 제거
              $("#header").addClass('theme-white').removeClass('white');
          },
          onLeaveBack: function () {
            $("#header").removeClass('theme-white');
            if (activeSlideIndex === 2) {
            //    console.log(activeSlideIndex);
               $('#header').addClass('white');
              }
          }
        });
      } else {
        // 1070px 이상일 때 ScrollTrigger 비활성화
        if (headerTrigger) {
          headerTrigger.kill();
        }
      }
  }
  setupScrollTrigger();
</script>

💚 해당 슬라이드에 도달 시, 숫자 카운팅 스크립트 동작 💚 숫자 증가 과정을 steps로 나누어, 주어진 duration 내에서 자연스럽고 일정한 속도로 숫자가 증가하도록 세분화 💚 숫자가 점진적으로 증가하는 애니메이션을 구현할 때 setInterval()을 활용하면 쉽게 구현 가능!

👉🏻 마크업은 이렇게! (HTML5)

🩵 마크업 시, 시작값으로 써주는 것이 일반적 🩵 초기 로딩 시 자연스러운 상태를 유지하기 위함

<body>
<h2 class="main-vis__maintitle yellow counter">279,000</h2>
</body>

👉🏻 스크립트는 이렇게! (jQuery)

🩵 코드 미리보기

<script>
function startCounting() {
    startCounter('#counter', 279000, 2396445, 2000);
}

function startCounter(selector, start, end, duration) {
    const counterEl = document.querySelector(selector);

    const totalCount = end - start; // 증가해야 할 숫자의 범위
    const interval = 30; // 숫자가 변경될 간격 (밀리초 단위)
    const steps = Math.floor(duration / interval); // 전체 애니메이션 진행 횟수
    let currentStep = 0; // 현재 진행 중인 스텝 수

    // 선택한 모든 요소에 대해 카운팅 애니메이션 실행
    const counter = setInterval(function() {
        currentStep++;
        const currentCount = start + Math.round(totalCount * (currentStep / steps));  

        counterEl.innerHTML = currentCount.toLocaleString();

        if (currentStep >= steps) {
            clearInterval(counter);
        }
    }, interval);
}
</script>

🩵 startCounting() 함수

<script>
function startCounting() {
    startCounter('#counter', 279000, 2396445, 3000);
    // startCounter('요소', '시작값', '종료값', '지속시간');
}
</script>

🩵 startCounter() 함수에 전달할 인수를 정의 🔹 .counter 클래스를 가진 모든 요소에서 카운팅 애니메이션을 시작 🔹 숫자가 279,000부터 2,396,445까지 증가하며, 애니메이션 지속 시간은 2초(2000ms)

🩵 startCounter() 함수 선언 (카운트 증가 방식)

🩵 totalCount = end - start : 증가해야 할 숫자의 범위 🔹 2,396,445 - 279,000 = 2,117,445

🩵 interval = 30 : 숫자가 변경될 간격을 30ms(0.03초)로 설정 🔹 너무 짧은 간격이면 부드럽지 않고, 너무 길면 끊기는 느낌이 들 수 있다.

🩵 steps = Math.ceil(duration / interval) : 전체 애니메이션을 몇 단계로 나눌 것인지 계산 🔹 3000ms / 50ms = 60번 🔹 Math.ceil() : 소수점을 올림하여 가장 가까운 정수를 반환 🔹 남은 간격을 고려하여 더 많은 단계를 생성할 수 있기 때문에, 카운팅이 종료될 때 더 정확한 값에 도달할 수 있다고 한다. (소수점이하 자리가 발생할 경우를 대비하여 올림처리)

🚫 숫자가 무조건 1씩 증가하면 너무 느리고, 너무 크게 증가하면 부자연

🚫 Math.floor()를 사용하여 내림을 하면 소수점 반올림이 일관되지 않게 적용되어 목표 값을 정확히 찍지 못할 수 있어, 남는 시간이 버려지게 되거나 부족하게 계산될 수 있다. 따라서 end값에 더 정확하게 도달할 수 있는 ceil을 사용하여 올림을 했습니다.

🩵 currentStep = 0 : 현재 진행 중인 단계

🩵 setInterval()을 이용한 숫자 증가

🩵 currentStep++ : 1씩 증가

🩵 currentCount = start + Math.round(totalCount * currentStep / steps) 🔹 처음에는 279000 + (2117445 * 1 / 60) = 314907 🔹 두 번째는 279000 + (2117445 * 2 / 60) = 350815 🔹 이렇게 종료값(2,396,445)까지 점점 증가 🔹 Math.round() : 반올림하여 오차가 조금씩 발생할 수 있지만, 일반적으로 end 값에 거의 정확히 도달

🚫 duration만으로 카운팅을 조절하면, 정확한 증가 단위, 간격 유지가 어렵고, 설정한 2초보다 긴 시간동안 카운팅이 되었다. 따라서 애니메이션을 진행시킬 단계를 계산한 후, 증가해야 할 범위(totalCount)를 steps로 나눠서 일정한 속도로 증가하도록 계산식을 작성

💡 프레임 단위(interval)로 나누어 숫자가 부드럽게 증가하도록 최적화한 코드!

🩵 counterEl.innerHTML = currentCount.toLocaleString(); 🔹 .innerHTML : HTML 요소의 내용을 변경 🔹 .toLocaleString() : 숫자를 1,234,567과 같은 형식으로 표시해 가독성 향상

🩵clearInterval()을 이용한 카운트 종료

🩵 currentStep이 steps 값에 도달하면 clearInterval(counter)를 호출하여 애니메이션을 중지

🥨 한 줄 기록

만약 속도를 더 빠르게 설정하고 싶다면, duration을 낮추고, interval 값을 줄여 결과적으로 steps을 줄이면 된다. interval 값은 작아질수록 더 자주 숫자가 변경되므로 속도가 체감상 빨라진다.

📌 KEY POINT

💚 input 박스를 통해 텍스트 입력 후 전송 버튼 클릭 시, '할일' 목록 추가 💚 끝/보류 버튼 클릭 시, 각 항목에 추가되며 기존 리스트에서는 사라짐 💚 데이터 보간법을 활용하여 리스트를 추가하는 방법 💚 동적생성태그의 이벤트 위임

👉🏻 마크업은 이렇게! (HTML5)

🩵 리스트 입력 박스 / 할 일 · 끝낸 일 · 보류된 일 리스트 마크업 🩵 끝 · 보류 · 삭제 버튼 마크업

<body>
<!-- 리스트 입력 박스 --!>
<input type="text" class="text">
<button class="submit">전송</button>

<!-- 할 일 --!>
<h2>할 일</h2>
<ul class="list1">
    <li>
        <span class="work">빨래</span>
        <button class="end">끝</button>
        <button class="wait">보류</button>
        <button class="del">삭제</button>
    </li>
</ul>

<!-- 끝낸 일 --!>
<h2>끝낸 일</h2>
<ul class="list2">
    <li>
        <span class="work">창고정리</span>
        <button class="del">삭제</button>
    </li>
</ul>

<!-- 보류된 일 --!>
<h2>보류된 일</h2>
<ul class="list3">
    <li>
        <span class="work">설거지</span>
        <button class="end">끝</button>
        <button class="del">삭제</button>
    </li>
</ul>
</body>

👉🏻 스크립트는 이렇게! (jQuery)

🩵 공통 스크립트 설명

🩵 .click() : 클릭 이벤트 작성 🔹 $('.submit').click(function(){});

🩵 동적으로 HTML 생성 (백틱을 이용한 문자열 보간 처리) 🔹 템플릿 리터럴(`)을 사용하여 HTML 문자열을 생성 🔹 keyword 변수를 ${} 안에 넣어, '사용자가 입력한 텍스트'를 태그 안에 삽입

🩵 .append() : 특정 요소 뒤에 새로운 요소를 추가하는 메서드 🔹 $('.list1').append(html); 🔹 전송 · 보류 · 끝 버튼 클릭 시, 각 항목의 리스트 뒤에 요소가 추가됨

🩵 input 입력 후, '전송' 버튼 클릭 이벤트

🩵 .val() : input을 통해 입력한 value 값 가져오기 🔹 keyword = $('.text').val(); 🔹 내가 입력한 내용을 keyword 변수에 저장 (데이터 보간을 위해 변수에 저장) 🔹 일반 텍스트일 경우 .text() 를 통해 가져옴

🩵 if 조건문 : 입력값이 있을 때만 실행 (빈 값 방지) 🔹 입력값(keyword)이 비어 있지 않은 경우(true)에만 코드를 실행 🔹 만약 사용자가 아무것도 입력하지 않았다면(false), if문 내부의 코드는 실행되지 않음

🩵 입력 필드 초기화 & 포커스 이동 🔹 $('.text').val("").focus(); 🔹 .val("") : 입력창을 비워서 초기화 🔹 .focus() : 입력창에 자동으로 포커스 이동

<script>
// 전송 버튼 클릭 -> 할 일 리스트 추가
$('.submit').click(function(){
    keyword=$('.text').val();

    if(keyword){
        html =`<li>
        <span class="work">${keyword}</span>
        <button class="end">끝</button>
        <button class="wait">보류</button>
        <button class="del">삭제</button>
    </li>`

    $('.list1').append(html);

    $('.text').val("").focus()
    }   
});
</script>

🩵 동적생성태그의 이벤트 위임

🚫 위 클릭 이벤트처럼 직접 이벤트를 걸면 초기의 document에 존재하는 요소에만 이벤트가 적용되어 동적으로 생성된 태그의 버튼 클릭 시, 이벤트가 적용되지 않는다.

🩵 따라서 부모 요소(혹은 document)에 이벤트를 걸어 하위 요소에서 발생하는 이벤트를 감지해야하는데, 이것을 이벤트 위임이라고 한다.

🩵 '삭제' 버튼 클릭 이벤트

🩵 삭제('del') 버튼 클릭 시, 해당 리스트를 삭제 🔹 $(this).parent().remove() 🔹 삭제('del') 버튼의 부모인 li(리스트)를 찾아 remove(요소 삭제) 함

<script>
$(document).on("click", ".del", function(){
    $(this).parent().remove()
    //remove : 요소 삭제
});
</script>

🩵 '끝' 버튼 클릭 이벤트

🩵 끝('end') 버튼 클릭 시, 끝난 일 리스트에 추가하는 방법도 동일하게 이벤트 위임과 템플릿 리터럴을 통해 동적으로 태그를 생성한다. 🔹 단, 끝난 일로 리스트에 추가할 때에는 클릭한 버튼 리스트 명을 가져와 추가해야하기 때문에 .siblings() 메서드와 .text() 메서드를 활용해야한다.

<script>
$(document).on("click", ".end", function(){
    // 끝 버튼을 클릭한 요소의 텍스트를 가져옴
    keyword=$(this).siblings('.work').text();
    html =`<li>
            <span class="work">${keyword}</span>
         <button class="del">삭제</button>
        </li>`

$('.list2').append(html);
    $(this).parent().remove();
});
</script>

🩵 '보관' 버튼 클릭 이벤트

🩵 이하 동일

<script>
$(document).on("click", ".wait", function(){
    keyword=$(this).siblings('.work').text();
    html =`<li>
        <span class="work">${keyword}</span>
            <button class="end">끝</button>
        <button class="del">삭제</button>
    </li>`

$('.list3').append(html);
    $(this).parent().remove();
});
</script>