Figma 이용하여 UI 디자인하기

openweathermap API, 날씨 정보 data 받기 [무료 API]

Current weather data API Current weather data

postman 사용하여 데이터 조회 Postman API Platform | Sign Up for Free

개발환경설정

$ npx create-react-app weather-app
$ npm i react-icons --save

//App.js

import WeatherApp from "./WeatherApp";
import WeatherProvider from "./WeatherProvider/WeatherProvider";

function App() {
    return (
        <WeatherProvider>
            <WeatherApp />
        </WeatherProvider>
    );
}

export default App;

날씨 조회 API 상태관리 [Context API]

react의 context API를 이용해서 postman으로 호출한 API들을 가지고 불러온 데이터를 context API로 전역상태관리 해주기

• useState를 이용해서 API가 비정기적으로 데이터를 불러오니까 데이터가 로드되면 그 state를 업데이트해서 Provider에 전달하는 방식으로 구현

//WeatherProvider.jsx

import React, { createContext, useEffect, useState } from "react";

export const WeatherContext = createContext({});

function WeatherProvider({ children }) {
    const [weatherInfo, setWeatherInfo] = useState({});
    const getWeatherInfo = async () => {
        try {
            const currentWeatherInfoAPI =
                "https://api.openweathermap.org/data/2.5/weather?appid=key값입력하기&q=seoul&units=metric";
            const currentWeatherInfo = await fetch(currentWeatherInfoAPI);
            const {
                name,
                coord: { lat, lon },
                main: {
                    temp,
                    humidity,
                    pressure,
                    feels_like,
                    temp_min,
                    temp_max,
                },
                sys: { sunset, sunrise },
                weather: [{ main: weatherState }],
                wind: { speed, deg },
            } = await currentWeatherInfo.json();
            const hourlyWeatherInfoAPI = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=key값입력하기&units=metric`;
            const hourlyWeatherInfo = await fetch(hourlyWeatherInfoAPI);
            const { hourly } = await hourlyWeatherInfo.json();
            setWeatherInfo({
                name,
                temp,
                humidity,
                pressure,
                weatherState,
                feels_like,
                speed,
                deg,
                hourly,
                sunset,
                sunrise,
                temp_min,
                temp_max,
            });
        } catch (error) {
            console.error(error);
        }
    };
    useEffect(() => {
        getWeatherInfo();
    }, []);

    return (
        <WeatherContext.Provider value={{ ...weatherInfo }}>
            {children}
        </WeatherContext.Provider>
    );
}

export default WeatherProvider;

날씨 앱 구조

상단과 하단을 나누기 위해 컴포넌트 2개를 만들어줬다.

• 상단 : MainWeather
  • 도시이름, 현재날씨[아이콘], 현재 온도, 최저기온, 최고기온을 useContext를 이용해서 전역상태를 가져와서 만들어준다.
  • 오늘의 요일과 시간은 day.js 라이브러리를 이용해서 가져와 만들어준다.
  • 날씨 아이콘은 상단, 하단 공통으로 쓰이기 때문에 따로 컴포넌트를 만들어 관리했다.

날씨 아이콘 관리

//MainWeatherIcon

import React from "react";
import {
  WiDayCloudy,
  WiDayRain,
  WiDaySunny,
  WiDust,
  WiDaySprinkle,
  WiDayThunderstorm,
  WiDaySnow,
  WiNa,
} from "react-icons/wi";
function MainWeatherIcon({ weatherState, ...props }) {
  switch (weatherState) {
    case "Thunderstorm":
      return <WiDayThunderstorm {...props} />;
    case "Snow":
      return <WiDaySnow {...props} />;
    case "Clouds":
      return <WiDayCloudy {...props} />;
    case "Clear":
      return <WiDaySunny {...props} />;
    case "Haze":
      return <WiDust {...props} />;
    case "Mist":
      return <WiDust {...props} />;
    case "Smoke":
      return <WiDust {...props} />;
    case "Dust":
      return <WiDust {...props} />;
    case "Fog":
      return <WiDust {...props} />;
    case "Sand":
      return <WiDust {...props} />;
    case "Ash":
      return <WiDust {...props} />;
    case "Squall":
      return <WiDust {...props} />;
    case "Tornado":
      return <WiDust {...props} />;
    case "Rain":
      return <WiDayRain {...props} />;
    case "Drizzle":
      return <WiDaySprinkle {...props} />;
    default:
      return <WiNa {...props} />;
  }
}

export default MainWeatherIcon;

상단 날씨 부분 개발하기

//MainWeather

function MainWeather() {
    const { name, temp, weatherState, temp_min, temp_max } =
        useContext(WeatherContext);
    return (
        <div className="weather">
            <div className="city">{name?.toUpperCase()}</div>
            <div className="weather-icon">
                <MainWeatherIcon
                    weatherState={weatherState}
                    viewBox="0 0 30 30"
                />
            </div>
            <div className="detail-weather">
                <div>
                    <div>{parseFloat(temp).toFixed(1)}&deg;</div>
                    <div className="detail-item">
                        <span>
                            &#9663;{parseFloat(temp_min).toFixed(1)}&deg;
                        </span>
                        <span>
                            &#9653;{parseFloat(temp_max).toFixed(1)}&deg;
                        </span>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default MainWeather;

상단 요일,시간 부분 개발하기

//MainWeather

function MainWeather() {
    .
    .
    return (
        .
        .
        <div className="today">
        <div>{dayjs().format('dddd').toUpperCase()}</div>
      <div>{dayjs().format('H:mm A')}</div>
    </div>
    )
}

• 하단 : SubWeather

일출, 풍속, 습도를 useContext 이용해서 전역상태 가져오기

const { sunrise, speed, humidity } = useContext(WeatherContext);

sunrise는 초 단위로 정보가 내려오는데 new객체를 이용해서 밀리세컨드로 변환

new Date(sunrise * 1000).toLocaleString("en-US", {
    hour: "numeric",
    minute: "numeric",
    hour12: true,
})

전체 구성

function SubWeather() {
    const { sunrise, speed, humidity } = useContext(WeatherContext);
    return (
        <div className="sub-weather">
            <div className="sub-weather-item">
                <BsSunrise
                    style={{
                        .
                          .
                    }}
                />
                <p className="sub-weather-text">
                    <span>SUNRISE</span>
                    {new Date(sunrise * 1000).toLocaleString("en-US", {
                        hour: "numeric",
                        minute: "numeric",
                        hour12: false,
                    })}
                </p>
            </div>
            <div className="sub-weather-item">
                <BsWind
                    style={{
                        .
                        .
                    }}
                />
                <p className="sub-weather-text">
                    <span>WIND</span>
                    {`${speed}m/s`}
                </p>
            </div>
            <div className="sub-weather-item">
                <WiHumidity
                    style={{
                           .
                        .
                    }}
                />
                <p className="sub-weather-text">
                    <span>HUMIDITY</span>
                    {`${humidity}%`}
                </p>
            </div>
        </div>
    );
}

export default SubWeather;

수정사항

패스트캠퍼스로 강의를 듣고 난 후 다시 앱 디자인을 하여 만들어봤는데 역시 아쉬움이 많이 남는다. 무료API 종류가 바뀌기도 해서 더욱 아쉽다.

도시 검색 기능과 날씨에 따라 배경이 자동으로 바뀌는 기능도 추가해서 새로 업데이트 해야겠다는 생각이 든다.

나중엔 Heroku를 이용해서 배포도 해봐야겠다.

Kakao 지도 API

Kakao Developers

사이트에 들어가서 앱 키를 발급받아야 API를 사용할 수 있다.

순수 JS 라이브러리를 React에 적용하기

$ yarn create react-app cacaomap --template typescript
$ yarn start

<실제 지도를 그리는 Javascript API 불러오기>
index.html에 있는 head 와 body 가 모두 로딩된 다음,
body의 <div id="root"></div> 안에 작성한 리액트 프로젝트가 들어가게 된다.
index.html에다가 script 태그를 넣으면 리액트 프로젝트가 로딩되기 전에 카카오지도가 install 된다.
-script에 발급받은 key를 넣어도 인증이 되지 않았다고 오류창이 뜨는 경우 :
브라우저에서 개발자 도구를 이용해 누구나 HTML 코드를 볼 수 있어 다른 사람의 key를 탈취해
자신의 앱에 넣을 수 있음으로 카카오맵 이용권한을 뺏는 것을 방지하기 위해 자신이 등록한 사이트에서만
카카오맵키를 사용하는 것을 허용하고 있다.
-플랫폼 설정하기에서 자신의 사이트를 등록해주면 된다. [ex) http://localhost:3000]

<!-- public/index.html -->

<script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."
></script>

브라우저에 지도띄우는 코드 작성

외부에서 CDN방식으로 <script> 태그로 가져오는 라이브러리들은 window.을 통해 접근 가능하고
타입스크립트의 경우 window에다가 declare를 통해서 interface안에 새로운 프로퍼티를 정의하여
함수들을 가져올 수 있다.

//src/App.tsx

import React, { useEffect } from "react";
import logo from "./logo.svg";

//타입스크립트에서 윈도우객체에 kakao 추가하는 방법
declare global {
    interface Window {
        kakao: any;
    }
}

function App() {
    //useEffect를 통해서 마크업들이 로딩된 이후에 실행될 수 있도록 코드 작성
    useEffect(() => {
        const container = document.getElementById("map");
        var options = {
            center: new window.kakao.maps.LatLng(33.450701, 126.570667),
            level: 3,
        };

        var map = new window.kakao.maps.Map(container, options);
    }, []);
    return (
        <div>
            <div
                id="map"
                style={{
                    width: 300,
                    height: 300,
                }}
            ></div>
        </div>
    );
}

export default App;

외부에서 정의된 함수를 가져올 때 코드 작성
-html script 함수를 먼저 작성, App.tsx 파일에서 불러온다.

<!-- public/index.html -->

<script
    type="text/javascript"
    src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다."
></script>

<script>
    function loadMap() {
        const container = document.getElementById("map");

        var options = {
            center: new window.kakao.maps.LatLng(33.450701, 126.570667),
            level: 3,
        };

        var map = new window.kakao.maps.Map(container, options);
    }
</script>

// src/App.tsx

import React, { useEffect } from "react";
import logo from "./logo.svg";

declare global {
    interface Window {
        loadMap: () => void;
    }
}

function App() {
    useEffect(() => {
        window.loadMap();
    }, []);
    return (
        <div>
            <div
                id="map"
                style={{
                    width: 300,
                    height: 300,
                }}
            ></div>
        </div>
    );
}

export default App;

함수들이 어떤 타입의 매개변수를 원하는지 미리 파악하여 응용하기

*react에서는 id 쓰는 것을 권장하지 않는다
-> getElementById 대신 useRef를 통해 엘레먼트 가져오기

// src/App.tsx

import React, { useEffect, useRef } from "react";
import logo from "./logo.svg";

declare global {
    interface Window {
        kakao: any;
    }
}

function App() {
    const mapRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        if (mapRef.current) {
            var options = {
                center: new window.kakao.maps.LatLng(33.450701, 126.570667),
                level: 3,
            };
            var map = new window.kakao.maps.Map(mapRef.current, options);
        }
    }, []);
    return (
        <div>
            <div
                ref={mapRef}
                style={{
                    width: 300,
                    height: 300,
                }}
            ></div>
        </div>
    );
}

export default App;

리액트스럽게 코드 변경하기

-index.html에 script를 넣게되면 지도를 사용하지 않을 때에도 지도 자바스크립트를 로딩해야되는
이슈가 있고, index.html에 있는 외부 함수를 window를 통해 접근하는 것이 오류의 원인이기도 한다
[디버깅 할 때 검증하기 어려움] -> 성능 저하, 앱크기 증가 등 악영향이 있을 수 있다.
-동적으로 로딩하게 되면 필요할 때 지도가 보이는 페이지에서만 로딩할 수 있다.
-반드시 script가 로딩 된 이후에 카카오지도가 로딩되는 코드가 실행되어야 한다.

// src/App.tsx

declare global {
    interface Window {
        kakao: any;
    }
}

function App() {
    const mapRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const script = document.createElement("script");
        script.src = document.head.appendChild(script);
        script.onload = () => {
            window.kakao.maps.load(() => {
                if (mapRef.current) {
                    var options = {
                        center: new window.kakao.maps.LatLng(
                            33.450701,
                            126.570667
                        ),
                        level: 3,
                    };
                    var map = new window.kakao.maps.Map(
                        mapRef.current,
                        options
                    );
                }
            });
        };
        return () => script.remove();
    }, []);

    return (
        <div>
            <div
                ref={mapRef}
                style={{
                    width: 300,
                    height: 300,
                }}
            ></div>
        </div>
    );
}

export default App;

카카오지도 응용하기

useRef를 이용하여 지역 이동 버튼 구현하기
-값이 새로 설정된다고 해도 리렌더링이 일어나지 않고 UI에 영향을 주지 않게 구현

// src/App.tsx

.
.
function App() {
    const mapRef = useRef<HTMLDivElement>(null);
    //useRef는 리액트가 리렌더링 되더라도 데이터를 계속 보관하고 있다.
    const map = useRef<any>(null);

    useEffect(() => {
        const script = document.createElement("script");

        script.src =
            "//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다&autoload=false";

        document.head.appendChild(script);

        script.onload = () => {
            window.kakao.maps.load(() => {
                if (mapRef.current) {
                    var options = {
                        center: new window.kakao.maps.LatLng(
                            33.450701,
                            126.570667
                        ),
                        level: 10,
                        draggable: false,
                    };
                    //current안에 있는 값은 리렌더링이 되어도 초기화되지 않는다.
                    map.current = new window.kakao.maps.Map(mapRef.current, options)
                }
            });
        };

        return () => script.remove();
    }, []);

    return (
        <div>
            {/* 지역이동하는 버튼만들기 */}
            <button
                onClick={() => {
                    map.current.setCenter(
                        new window.kakao.maps.LatLng(37.5665, 126.9780)
                    );
                }}
            >
                서울
            </button>
            <button
                onClick={() => {
                    map.current.setCenter(
                        new window.kakao.maps.LatLng(35.1796, 129.0756)
                    );
                }}
            >
                부산
            </button>
            <div
                ref={mapRef}
                style={{
                    width: 300,
                    height: 300,
                }}
            ></div>
        </div>
    );
}

export default App;

다른 속성 이용하기

-지도에 마커 추가하기
-마커 추가할 때 타이틀 입력 기능 추가
-여러번 추가 했을 때 리스트 생성
-마커 삭제 기능 추가

// src/App.tsx

function App() {
    const mapRef = useRef<HTMLDivElement>(null);
    //마커들의 정보를 저장해서 아래에 띄워주기
    const [markerList, setMarkerList] = useState<any[]>([]);
    const map = useRef<any>(null);

    useEffect(() => {
        const script = document.createElement("script");

        script.src =
            "//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다&autoload=false";

        document.head.appendChild(script);

        script.onload = () => {
            window.kakao.maps.load(() => {
                if (mapRef.current) {
                    var options = {
                        center: new window.kakao.maps.LatLng(
                            33.450701,
                            126.570667
                        ),
                        level: 10,
                    };
                    map.current = new window.kakao.maps.Map(
                        mapRef.current,
                        options
                    );
                    //마우스 오른쪽 버튼을 클릭하면 지도에 마크 생기게 하는 로직
                    window.kakao.maps.event.addListener(
                        map.current,
                        "rightclick",
                        (mouseEvent: any) => {
                            const latlng = mouseEvent.latLng;
                            //우클릭을 했을 때 타이틀 작성해주기
                            const title =
                                prompt("마커의 타이틀을 입력해주세요.");

                            //마커 생성하기
                            var marker = new window.kakao.maps.Marker({
                                map: map.current,
                                position: latlng,
                                title,
                            });
                            //마커가 추가될때마다 setMarkerList에 추가
                            setMarkerList((prev) => [...prev, marker]);
                        }
                    );
                }
            });
        };

        return () => script.remove();
    }, []);

    return (
        <div>
            <button
                onClick={() => {
                    map.current.setMapTypeId(
                        window.kakao.maps.MapTypeId.HYBRID
                    );
                }}
            >
                지도 타입 변경
            </button>

            <div
                ref={mapRef}
                style={{
                    width: 300,
                    height: 300,
                }}
            ></div>
            {
                // 만들어진 div가 click되었을 때 마커 제거
                markerList.map((value) => (
                    <div
                        onClick={() => {
                            value.setMap(null);
                            //state에서도 마커 제거
                            setMarkerList(
                                markerList.filter((v) => v !== value)
                            );
                        }}
                    >
                        {value.getTitle()}
                    </div>
                ))
            }
        </div>
    );
}

export default App;

// src/App.tsx

-input에 할 일 입력 후 + 버튼을 누르면 할 일이 추가되는 기능
-완료 표시, 수정 기능
-삭제 기능 추가
-필터 기능을 사용해서 전체, 해야될 것, 완료된 것을 구분
-todoList에 추가한 내용이 LocalStorage에 저장되어 그대로 내용을 불러오는 기능 구현

개발환경설정 - Rollup.js

$ npm init -y
$ npm i -D rollup
$ npm i -D rollup-plugin-scss sass
$ npm i -D rollup-plugin-generate-html-template rollup-plugin-livereload
$ npm i -D rollup-plugin-serve rollup-plugin-terser
$ npm install --save @fortawesome/fontawesome-free

공통 설정

// rollup.common.config.js

import htmlTemplate from 'rollup-plugin-generate-html-template';
import scss from 'rollup-plugin-scss';
import { nodeResolve } from '@rollup/plugin-node-resolve';
export default {
    input: 'src/js/index.js',
    output: {
        file: './dist/bundle.js',
        format: 'cjs',
        sourcemap: true,
    },
    plugins: [
        nodeResolve(),
        scss({
            insert: true,
            sourceMap: true,
        }),
        htmlTemplate({
            template: 'src/index.html',
            target: 'index.html',
        }),
    ],
};

dev server 설정

// rollup.dev.config.js

import rollupCommonConfig from './rollup.common.config';
import serve from 'rollup-plugin-serve';
//watch가 돌았을 때 dev server를 다시 리로드 시켜주는 플러그인
import livereload from 'rollup-plugin-livereload';

const config = { ...rollupCommonConfig };

config.watch = {
    inclue: 'src/**',
};

config.plugins = [
    ...config.plugins,
    serve({
        host: 'localhost',
        port: 8080,
        open: true,
        contentBase: 'dist',
    }),
    livereload('dist'),
];

export default config;

// rollup.prod.config.js

import rollupCommonConfig from './rollup.common.config';

//Uglify/Minify 설정만 넣어주면 됨
const config = { ...rollupCommonConfig };

config.plugins = [...config.plugins, terser()];

export default config;

ESLint / prettier 설정

$ npm i -D eslint
$ npm i -D --save-exact prettier
$ npm i -D eslint-config-prettier eslint-plugin-prettier

HTML 구조

<!-- index.html -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>TodoList</title>
        <link
            rel="shortcut icon"
            href="data:image/x-icon"
            type="image/x-icon"
        />
    </head>

    <body>
        <header>
            <h1>Todo List</h1>
        </header>
        <div class="input-container" id="input-container">
            <div class="input-area" id="input-area">
                <input
                    type="text"
                    class="todo-input"
                    id="todo-input"
                    maxlength="50"
                />
                <button class="todo-btn" id="add-btn" type="button">
                    <i class="fas fa-plus"></i>
                </button>
            </div>
            <div class="radio-area" id="radio-area">
                <input
                    type="radio"
                    id="filter1"
                    name="filter"
                    value="ALL"
                    checked
                />
                <label for="filter1">All</label>
                <input type="radio" id="filter2" name="filter" value="TODO" />
                <label for="filter2">Todo</label>
                <input type="radio" id="filter3" name="filter" value="DONE" />
                <label for="filter3">Done</label>
            </div>
        </div>
        <div class="todo-container" id="todo-container">
            <div class="todo-list" id="todo-list"></div>
        </div>
    </body>
</html>

할 일 생성 기능 구현

// index.js

class TodoList {
    constructor() {
        this.assignElement();
        this.addEvent();
    }
    assignElement() {
        this.inputContainerEl = document.getElementById('input-container');
        this.inputAreaEl = this.inputContainerEl.querySelector('#input-area');
        this.todoInputEl = this.inputAreaEl.querySelector('#todo-input');
        this.addBtnEl = this.inputAreaEl.querySelector('#add-btn');
        this.todoContainerEl = document.getElementById('todo-container');
        this.todoListEl = this.todoContainerEl.querySelector('#todo-list');
    }
    // 이벤트를 추가
    addEvent() {
        //할 일 입력 후 add 버튼을 누르면 그 값을 가져와서 아래에 todoEl를 생성
        this.addBtnEl.addEventListener('click', this.onClickAddBtn.bind(this));
    }
    onClickAddBtn() {
        if (this.todoInputEl.value.length === 0) {
            alert('내용을 입력해주세요.');
            return;
        }
        this.createTodoElement(this.todoInputEl.value);
    }

    createTodoElement(value) {
        const todoDiv = document.createElement('div');
        todoDiv.classList.add('todo');

        //input태그를 넣어서 수정에 용이하도록 한다.
        const todoContent = document.createElement('input');
        todoContent.value = value;

        //수정버튼을 눌렀을 때만 수정할 수 있도록 하기
        todoContent.readOnly = true;
        todoContent.classList.add('todo-item');

        //버튼들 순서대로 만들기 [완료,수정,삭제]
        const fragment = new DocumentFragment();
        fragment.appendChild(todoContent);
        fragment.appendChild(
            this.createButton('complete-btn', 'complete-btn', [
                'fas',
                'fa-check',
            ]),
        );
        fragment.appendChild(
            this.createButton('edit-btn', 'edit-btn', ['fas', 'fa-edit']),
        );
        fragment.appendChild(
            this.createButton('delete-btn', 'delete-btn', ['fas', 'fa-trash']),
        );
        fragment.appendChild(
            this.createButton('save-btn', 'save-btn', ['fas', 'fa-save']),
        );
        todoDiv.appendChild(fragment);
        this.todoListEl.appendChild(todoDiv);
        //할 일을 추가한 후 input 내용을 지우는 것을 append한다.
        this.todoInputEl.value = '';
    }

    //버튼은 반복되는 작업이기 때문에 메소드를 이용해 따로 만들어준다
    createButton(btnId, btnClassName, iconClassName) {
        const btn = document.createElement('button');
        const icon = document.createElement('i');
        icon.classList.add(...iconClassName);
        btn.appendChild(icon);
        btn.id = btnId;
        btn.classList.add(btnClassName);
        return btn;
    }
}

//인스턴스 생성
document.addEventListener('DOMContentLoaded', () => {
    const todoList = new TodoList();
});

할 일 삭제 기능 구현

-이벤트 버블링 활용, todo-list 안에서 click을 캐치, 해당 버튼에 맞는 실행을 할 수 있도록 로직
-이벤트를 한 번만 걸어서 나중에 동적으로 엘리먼트들이 추가되어도 따로 이벤트를 적용할 필요없는 로직

// index.js

class TodoList {
    .
    .
    addEvent() {
        this.addBtnEl.addEventListener('click', this.onClickAddBtn.bind(this));
        //todo-list에 이벤트 적용
        this.todoListEl.addEventListener(
            'click',
            this.onClickTodoList.bind(this),
        );
    }

    onClickTodoList(event) {
        //Destructuring을 사용해서 이벤트 타겟을 뽑아내기
        const { target } = event;
        const btn = target.closest('button');
        if (btn.matches('#delete-btn')) {
            this.deleteTodo(target);
        }
    }

    //이벤트 타겟을 받기
    deleteTodo(target) {
        const todoDiv = target.closest('.todo');
        //todoDiv에 트랜지션이 끝났을 때의 시점을 캐치해서 지우는 이벤트를 추가
        todoDiv.addEventListener('transitionend', () => {
            //DOM구조에서 존재하는 엘리먼트 자체를 삭제
            todoDiv.remove();
        });
        //안보이게 지우기
        todoDiv.classList.add('delete');
    }
    .
    .
};

할 일 수정, 완료 기능 구현

// index.js

class TodoList {
    .
    .
    onClickTodoList(event) {
        const { target } = event;
        const btn = target.closest('button');
        //버튼이 null일때 처리해주기
        if (!btn) return;

        if (btn.matches('#delete-btn')) {
            this.deleteTodo(target);
            //edit
        } else if (btn.matches('#edit-btn')) {
            this.editTodo(target);
            //save
        } else if (btn.matches('#save-btn')) {
            this.saveTodo(target)
            //complate
        } else if (btn.matches('#complete-btn')) {
            this.completeTodo(target);
        }
    }

    completeTodo(target) {
        const todoDiv = target.closest('.todo');
        //완료 버튼 클릭시 중간선 생성
        todoDiv.classList.toggle('done');

    }

    saveTodo(target) {
        const todoDiv = target.closest('.todo');
        //edit을 지우고
        todoDiv.classList.remove('edit');
        //todoInputEl을 찾아서 readonly를 해준다.
        const todoInputEl = todoDiv.querySelector('input');
        //save하면 수정할 수 없게 readonly를 true로 해준다.
        todoInputEl.readOnly = true
    }

    //수정버튼
    editTodo(target) {
        const todoDiv = target.closest('.todo');
        const todoInputEl = todoDiv.querySelector('input');
        //수정할거니까 입력이 가능하도록 해주기
        todoInputEl.readOnly = false;
        todoInputEl.focus();
        todoDiv.classList.add('edit');
    }
    .
    .
};

필터 기능 구현

-radio 버튼 탐색
-all, todo, done 버튼을 눌렀을 때 value를 캐치해서 필터링 기능 구현
-콜백을 실행하는 방식으로 필터를 실행하는 로직 구현

//index.js

class TodoList {
    constructor() {
        this.assignElement();
        this.addEvent();
    }

    assignElement() {
        .
        .
        //radio-area 탐색
        this.radioAreaEl = this.inputContainerEl.querySelector('#radio-area');
        //radio 버튼들 탐색
        this.filterRadioBtnEls = this.radioAreaEl.querySelectorAll(
            'input[name="filter"]',
        );
    }
    .
    .
    //radio 버튼들에 이벤트를 적용
    addRadioBtnEvent() {
        for (const filterRadioBtnEl of this.filterRadioBtnEls) {
            filterRadioBtnEl.addEventListener(
                'click',
                this.onClickRadioBtn.bind(this),
            );
        }
    }

    onClickRadioBtn(event) {
        const { value } = event.target;
        console.log(value);
        this.filterTodo(value);
    }

    //필터 메소드는 따로  관리
    filterTodo(status) {
        const todoDivEls = this.todoListEl.querySelectorAll('div.todo');
        for (const todoDivEl of todoDivEls) {
            switch (status) {
                case 'ALL':
                    todoDivEl.style.display = 'flex';
                    break;
                case 'DONE':
                    todoDivEl.style.display = todoDivEl.classList.contains(
                        'done',
                    )
                        ? 'flex'
                        : 'none';
                    break;
                case 'TODO':
                    todoDivEl.style.display = todoDivEl.classList.contains(
                        'done',
                    )
                        ? 'none'
                        : 'flex';
                    break;
            }
        }
    }
    .
    .
};

Router 개발

해시를 이용해서 구현

// index.js

class Router {
    routes = [];
    notFoundCallback = () => {};
    addRoute(url, callback) {
        this.routes.push({
            url,
            callback,
        });
        return this;
    }
    checkRoute() {
        const currentRoute = this.routes.find(
            (route) => route.url === window.location.hash,
        );
        if (!currentRoute) {
            this.notFoundCallback();
            return;
        }
        currentRoute.callback();
    }
    init() {
        window.addEventListener('hashchange', this.checkRoute.bind(this));
        if (!window.location.hash) {
            window.location.hash = '#/';
        }
        this.checkRoute();
    }
    setNotFound(callback) {
        this.notFoundCallback = callback;
        return this;
    }
}
.
.
document.addEventListener('DOMContentLoaded', () => {
    const router = new Router();
    const todoList = new TodoList();
    const routeCallback = (status) => () => {
        todoList.filterTodo(status);
        document.querySelector(
            `input[type='radio'][value='${status}']`,
        ).checked = true;
    };
    router
        .addRoute('#/all', routeCallback('ALL'))
        .addRoute('#/todo', routeCallback('TODO'))
        .addRoute('#/done', routeCallback('DONE'))
        .setNotFound(routeCallback('ALL'))
        .init();
});

LocalStorage에 할 일 data 연동

// index.js

class Storage {
    saveTodo(id, todoContent) {
        const todosData = this.getTodos();
        todosData.push({ id, content: todoContent, status: 'TODO' });
        //만든 것을 다시 todos에 덮어씌워서 LocalStorage에 저장
        localStorage.setItem('todos', JSON.stringify(todosData));
    }
    editTodo() {}
    deleteTodo() {}
    getTodos() {
        //JSON.parse를 이용해서 기존데이터 가져오기
        return localStorage.getItem('todos') === null
            ? []
            : JSON.parse(localStorage.getItem('todos'));
    }
}

class TodoList {
    constructor(storage) {
        .
        .
        this.loadSavedData();
    }
    //storage 받아서 TodoList안에 storage 갖고 있는다.
    initStorage(storage) {
        this.storage = storage;
    }
    .
    .
    //로컬스토리지에 담긴 데이터 불러오기
    loadSavedData() {
        const todosData = this.storage.getTodos();
        for (const todoData of todosData) {
            const { id, content, status } = todoData;
            this.createTodoElement(id, content, status);
        }
    }
    .
    .
    onClickAddBtn() {
        if (this.todoInputEl.value.length === 0) {
            alert('내용을 입력해주세요.');
            return;
        }
        const id = Date.now();
        //LocalStorage에 데이터 추가
        this.storage.saveTodo(id, this.todoInputEl.value);
        this.createTodoElement(id, this.todoInputEl.value);
    }

    //id, value, status값을 받도록 수정
    createTodoElement(id, value, status = null) {
        const todoDiv = document.createElement('div');
        todoDiv.classList.add('todo');
        if (status === 'DONE') {
            todoDiv.classList.add('done');
        }

        //나중에 수정할 때 사용하기 위해 todoDiv쪽에 dataset속성을 사용해서 id 부여
        todoDiv.dataset.id = id;
        .
        .
    }
    .
    .
}

document.addEventListener('DOMContentLoaded', () => {
    const router = new Router();
    const todoList = new TodoList(new Storage());
    const routeCallback = (status) => () => {
        todoList.filterTodo(status);
        document.querySelector(
            `input[type='radio'][value='${status}']`,
        ).checked = true;
    };
    router
        .addRoute('#/all', routeCallback('ALL'))
        .addRoute('#/todo', routeCallback('TODO'))
        .addRoute('#/done', routeCallback('DONE'))
        .setNotFound(routeCallback('ALL'))
        .init();
});

status 변경, edit, save도 LocalStorage에 연동

// index.js

class Storage {
    saveTodo(id, todoContent) {
        const todosData = this.getTodos();
        todosData.push({ id, content: todoContent, status: 'TODO' });
        localStorage.setItem('todos', JSON.stringify(todosData));
    }
    editTodo(id, todoContent, status = 'TODO') {
        const todosData = this.getTodos();
        const todoIndex = todosData.findIndex((todo) => todo.id == id);
        const targetTodoData = todosData[todoIndex];
        const editedTodoData =
            todoContent === ''
                ? { ...targetTodoData, status }
                : { ...targetTodoData, content: todoContent };
        todosData.splice(todoIndex, 1, editedTodoData);
        localStorage.setItem('todos', JSON.stringify(todosData));
    }
    deleteTodo(id) {
        const todosData = this.getTodos();
        todosData.splice(
            todosData.findIndex((todo) => todo.id == id),
            1,
        );
        localStorage.setItem('todos', JSON.stringify(todosData));
    }
    getTodos() {
        return localStorage.getItem('todos') === null
            ? []
            : JSON.parse(localStorage.getItem('todos'));
    }
}

class TodoList {
    //클래스변수들 추가
    storage;
    inputContainerEl;
    inputAreaEl;
    todoInputEl;
    addBtnEl;
    todoContainerEl;
    todoListEl;
    radioAreaEl;
    filterRadioBtnEls;
    .
    .
    completeTodo(target) {
        const todoDiv = target.closest('.todo');
        todoDiv.classList.toggle('done');
        //storage.editTodo메소드를 불러와서 status 바꿔주기
        const { id } = todoDiv.dataset;
        this.storage.editTodo(
            id,
            '',
            todoDiv.classList.contains('done') ? 'DONE' : 'TODO',
        );
    }

    saveTodo(target) {
        const todoDiv = target.closest('.todo');
        todoDiv.classList.remove('edit');
        const todoInputEl = todoDiv.querySelector('input');
        todoInputEl.readOnly = true;
        const { id } = todoDiv.dataset;
        //editTodo에 id를 넣어주고 todoInputEl 넣어주기
        this.storage.editTodo(id, todoInputEl.value);
    }

    editTodo(target) {
        const todoDiv = target.closest('.todo');
        const todoInputEl = todoDiv.querySelector('input');
        todoInputEl.readOnly = false;
        todoInputEl.focus();
        todoDiv.classList.add('edit');
    }

    deleteTodo(target) {
        const todoDiv = target.closest('.todo');
        todoDiv.addEventListener('transitionend', () => {
            todoDiv.remove();
        });
        todoDiv.classList.add('delete');
        //todoDiv의 dataset의 id를 가져와서 삭제하기
        this.storage.deleleTodo(todoDiv.dataset.id);
    }
    .
    .
}
.
.

-파일을 선택하면 이미지를 추가할 수 있게 개발
-이미지 삭제 기능 추가
-반응형으로 개발하여 화면이 작아지면 좌우로 스크롤하여 이미지를 볼 수 있는 기능 추가

React 프로젝트 생성

그냥 리액트를 사용하게 되면 따로 리액트, 리액트 돔, 번들러, 바벨 등등을 일일이 설치해야되기 때문에
create react-app 설치 권장

$ npm i -g yarn
$ yarn create react-app image-gallery[폴더명] --template typescript

이미지 갤러리 로직 구현하기

-버튼을 클릭하면 이미지 파일을 드래그해서 내려받을 수 있고 삭제할 수 있는 가능 구현
-이미지 박스들은 무한히 늘어날 수 있다. [이미지를 계속 추가할 수 있기 때문]

*이미지가 들어갈 컴포넌트 만들기

// src/components/ImageBox.tsx

//타입스크립트 문법으로 props의 타입을 정해준다.[props는 기본적으로 오브젝트여야함 {}]
function ImageBox(props: { src: string }) {
    return (
        <div className="image-box">
            {/* 이미지를 받을 수 있게 기능 구현 */}
            <img src={props.src} />
        </div>
    );
}

//해당 함수를 다른 곳에서 사용할 것이니까 export를 통해 내보내준다.
export default ImageBox;

*이미지 렌더링

// App.tsx

import React, { useRef, useState } from "react";
import "./App.css";
import ImageBox from "./components/ImageBox";

function App() {
  const inpRef = useRef<HTMLInputElement>(null);
  const [imageList, setImageList] = useState<string[]>([]);

  console.log(imageList);

  return (
    <div className="container">
      <div className={"gallery-box" + (imageList.length > 0 && "row")}>
        {imageList.length === 0 && (
          <div className="text-center">
            이미지가 없습니다. <br />
            이미지를 추가해주세요.
          </div>
        )}
        <input
          type="file"
          ref={inpRef}
          onChange={(event) => {
            if (event.currentTarget.files?.[0]) {
              const file = event.currentTarget.files[0];

              console.log(file.name);

              //파일을 이미지 url로 바꿔주기
              const reader = new FileReader();
              reader.readAsDataURL(file);
              reader.onloadend = (event) => {
                setImageList((prev) => [
                  ...prev,
                  event.target?.result as string,
                ]);
              };
            }
          }}
        />
        {imageList.map((el, idx) => (
          <ImageBox key={el + idx} src={el} />
        ))}
        <div
          className="puls-box mt"
          onClick={() => {
            inpRef.current?.click();
          }}
        >
          +
        </div>
      </div>
    </div>
  );
}

export default App;

드래그 드롭 사용하여 UX 개선하기

react-dropzone 라이브러리를 사용하여 드래그 드롭 기능 구현

$ yarn add react-dropzone
$ yarn add @types/react-dropzone

파일을 클릭해서 넣는 것이 아닌 폴더에서 드래그 앤 드롭으로 이미지 추가 가능하게 구현

// App.tsx

import React, { useCallback, useRef, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import './App.css';
import ImageBox from './components/ImageBox';


function App() {
    const [imageList, setImageList] = useState<string[]>([])

    const onDrop = useCallback(acceptedFiles => {
        console.log(acceptedFiles)
        if (acceptedFiles.length) {


            for (const file of acceptedFiles) {
                const reader = new FileReader();

                reader.readAsDataURL(file)
                reader.onloadend = (event) => {
                    setImageList(prev => [...prev, event.target?.result as string])
                }
            }
        }
    }, [])

    const { getRootProps, getInputProps } = useDropzone({ onDrop })


    return (
        <div className='container'>
            <div className={'gallery-box ' + (imageList.length > 0 && 'row')}>
                {
                    imageList.length === 0 &&
                    <div className='text-center'>
                        이미지가 없습니다.<br />
                        이미지를 추가해주세요.
                    </div>
                }
                {
                    imageList.map((el, idx) => <ImageBox key={el + idx} src={el} />)
                }
                <div className='plus-box'
                    {...getRootProps()}
                >
                    <input
                        {...getInputProps()}
                    />
                    +
                </div>
            </div>
        </div>
    );
}

export default App;

-BMI : 체질량 지수
-사용자가 직접 input을 입력하기 때문에 어떤 값이 들어올지 알 수 없다.
-해당 기능을 필터링 하는 로직 구현
-ProgressBar를 사용하여 일반적으로 어느정도 수치인지 확인 -BMI는 소수점 아래 두자리까지 출력

form 태그를 기준으로 HTML, CSS를 이용해서 웹페이지 구현

form으로 input을 컨트롤해야 사용자 친화적으로 여러 사람의 웹 접근성이 좋아진다.
-사용자 친화적으로 "몸무게"를 클릭해도 input에 커서가 활성화되게 구성

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        . .
        <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
        <script src="main.js"></script>
        <title>Calculator</title>
    </head>
    <body>
        <form onsubmit="onSubmit(event)">
            <div class="row">
                <div class="form-inp">
                    <label for="w"> 몸무게 (kg) </label>
                    <!-- 몸무게를 클릭해도 input에 커서가 활성화되게 구성하기 -->
                    <!-- 텍스트들이 숫자만 입력되도록 input타입 수정 -->
                    <input
                        class="inp"
                        type="number"
                        placeholder="kg 단위"
                        name="w"
                        id="w"
                    />
                </div>
                <div class="form-inp">
                    <label for="h"> 신장(m) </label>
                    <input
                        class="inp"
                        type="number"
                        placeholder="m 단위"
                        name="h"
                        id="h"
                    />
                </div>
                <!-- 현재 결과 버튼을 누르면 바로 아래에 결과값이 표시 될 수 있도록 
        submit 이벤트를 캔슬한다.  -->
                <button type="submit" class="btn">결과</button>
            </div>
        </form>
    </body>
</html>

결과값으로 소수점 2자리 까지만 나오게 로직 구성

//main.js

function onSubmit(event) {
    event.preventDefault();

    const w = parseFloat(event.target[0].value);
    const h = parseFloat(event.target[1].value);

    if (isNaN(w) || isNaN(h) || w <= 0 || h <= 0) {
        alert("적절한 값이 아닙니다.");
        return;
    }

    //toFixed(2)를 통해 소수점 2자리만 나오게 수정
    const bmi = w / (h * h);
    console.log(bmi.toFixed(2));

    const res = document.getElementById("res");

    // 여기서 블록으로 만들어주지만 reset 할 경우 다시 none이 되어야 하기 때문에
    // html form에서 onreset을 넣어준다.
    res.style.display = "flex";

    //아이디 가져오기
    document.getElementById("bmi").innerText = bmi.toFixed(2);
    //프로그레스바 가져오기
    document.getElementById("meter").value = bmi;

    let state = "정상";
    let common = true;
    //만약에 bmi가 18.5 미만 일 때는 state가 저체중
    if (bmi < 18.5) {
        state = "저체중";
        common = false;
    }
    //만약에 bmi가 25 이상 일 때는 state가 과체중
    if (bmi > 25) {
        state = "과체중";
        common = false;
    }
    const stateElement = document.getElementById("state");
    stateElement.innerText = state;
    //common이 true 즉, 정상이라면 초록색, 아니라면 빨간색
    //? 앞에 있는 값은 boolean값 즉, true / false 값이어야 한다.
    stateElement.style.color = common ? "#29FF21" : "#FF3A3A";
}

ProgressBar와 결과값 화면에 출력

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
        <script src="main.js"></script>
        <title>Calculator</title>
    </head>
    <body>
        <!-- reset을 한다면 document에서 res를 찾아 스타일의 디스플레이를 none으로 바꿔준다 -->
        <form
            onsubmit="onSubmit(event)"
            onreset="document.getElementById('res').style.display = 'none'"
        >
            <div class="row">
                <div class="form-inp">
                    <label for="w"> 몸무게 (kg) </label>

                    <!-- 최소값 설정해주기 -->
                    <input
                        class="inp"
                        type="number"
                        placeholder="kg 단위"
                        name="w"
                        id="w"
                        min="30"
                    />
                </div>
                <div class="form-inp">
                    <label for="h"> 신장(m) </label>

                    <!-- input에 자연수가 아닌 소수점도 입력할 수 있게 스텝추가하기  -->
                    <input
                        class="inp"
                        type="number"
                        step="0.01"
                        placeholder="m 단위"
                        name="h"
                        id="h"
                        min="0.5"
                    />
                </div>
                <button type="submit" class="btn">결과</button>
            </div>

            <div id="res">
                <!-- ProgressBar -->
                <div>
                    <!-- 높낮이에 따라 적절하게 프로그레스바 안의 컬러가 변하길 원하기 때문에 progress가 아닌 meter 태그를 사용 -->
                    <meter
                        style="width: 100%;"
                        min="10"
                        max="30"
                        optimum="22"
                        low="18.5"
                        high="25"
                        id="meter"
                    ></meter>
                </div>

                <!-- BMI 결과값 -->
                <div class="res-text">
                    <div>당신의 BMI는 <span id="bmi"></span>입니다.</div>
                    <div><span id="state"></span>입니다.</div>
                </div>

                <!-- 초기화 버튼 -->
                <!-- 현재 display가 flex상태이기 때문에 버튼이 가운데로 오질 않는데 inline-flex로 바꿔주면 된다. -->
                <div style="text-align: center;">
                    <!-- form으로 감쌌기 때문에 reset 버튼을 통해 초기화 할 수 있다. -->
                    <button type="reset" class="btn">초기화</button>
                </div>
            </div>
        </form>
    </body>
</html>

/* main.css */

.btn {
    width: 148px;
    height: 48px;
    background-color: #2699fb;
    color: #fff;
    border-radius: 4px;
    outline: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.btn:active {
    background-color: #007feb;
    outline: auto 2px #0055a0;
}

.inp {
    color: #48aeff;
    box-sizing: border-box;
    width: 204px;
    height: 48px;
    padding: 0 20px;
    background-color: white;
    border: solid 1px #48aeff;
    font-size: 14px;
}

.inp:active {
    outline: auto 2px #0055a0;
}

.inp::placeholder {
    color: #48aeff;
}

.row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    /* 아래에 내려와서 붙어야 하기 때문에 flex-end를 준다 */
    align-items: flex-end;
}

/* inline 레벨인 label을 다시 block 레벨로 바꿔준다. */
.form-inp {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* label 스타일 적용 */
.form-inp label {
    font-size: 12px;
    color: #48aeff;
}

/* 처음에는 숨겨져 있어야 한다. 결과를 눌러야 그 때 출력.*/
#res {
    margin-top: 24px;
    /* display: none; */
    width: 588px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.res-text {
    color: #48aeff;
    text-align: center;
}

/* 자식선택자를 이용해서 각각 글씨크기 조정 */
.res-text > div:nth-child(1) {
    font-size: 32px;
}
.res-text > div:nth-child(2) {
    font-size: 24px;
}

HTML, CSS, Javascript 만으로 단순하게 개발하기

두가지 숫자를 받아서 연산자를 활용해 계산하여 값이 나올 수 있도록 구현

1. 아무것도 입력되지 않은 input
2. 결과값이 입력된 input
3. 덧셈 등 연산을 진행하면 + 등 연산자가 생기는 input
4. 숫자를 입력하면 숫자가 바로 입력되는 input
5. 뒤에 입력한 숫자가 음수일 경우 +연산자가 -연산자로 바뀌지 않고 음수가 입력되는 input
6. *를 하다가 뒤에 음수가 올 수 있기 때문에 5번과 같은 input
7. =를 입력하면 바로 연산된 값이 보이는 input
8. 연산된 값이 있는 상태에서 Enter를 입력하면 연산수식없이 결과값만 남는 상태의 input
9. =을 입력한 생태에서 Enter가 아닌 다른 값을 입력하면 리셋 시켜서 해당 값을 넣은 상태로
   출력되는 input

간단한 HTML 구조만들기

<!DOCTYPE html>
<html lang="en">
    <head>
        . .
        <script src="main.js"></script>
        <title>Calculator</title>
    </head>
    <body>
        <div class="row">
            <!-- input을 컨트롤 해야하기 때문에 id를 만든다. -->
            <input class="inp" disabled id="top-inp" />
        </div>
        <div class="row">
            <!-- inputNum 함수를 onClick 이벤트에 넣어서 적용시킨다. -->
            <div class="btn" onClick="inputNum(7)">7</div>
            <div class="btn" onClick="inputNum(8)">8</div>
            <div class="btn" onClick="inputNum(9)">9</div>
            <div class="btn" onClick="inputEqu('=')">=</div>
        </div>
        <div class="row">
            <div class="btn" onClick="inputNum(4)">4</div>
            <div class="btn" onClick="inputNum(5)">5</div>
            <div class="btn" onClick="inputNum(6)">6</div>
            <div class="btn" onClick="inputOper('+')">+</div>
        </div>
        <div class="row">
            <div class="btn" onClick="inputNum(1)">1</div>
            <div class="btn" onClick="inputNum(2)">2</div>
            <div class="btn" onClick="inputNum(3)">3</div>
            <div class="btn" onClick="inputOper('-')">-</div>
        </div>
        <div class="row">
            <div class="btn btn-lg" onClick="inputNum(0)">0</div>
            <div class="btn" onClick="inputOper('/')">/</div>
            <div class="btn" onClick="inputOper('*')">*</div>
        </div>
    </body>
</html>

계산기 로직 구현하기

글로벌 변수를 만들어서 ture일 경우에는 = 이 눌렸다고 설정해준다
*원래는 null sefety하게 프로그램을 짜는 것이 좋으나 단순한 로직이기 때문에 이렇게 진행.

let left = null,
    right = null,
    oper = null,
    res = flase;

//left, right, oper가 존재할 경우 input에 적용시켜주는 함수
function save() {
    const inp = document.getElementById("top-inp");
    let value = "";
    if (left === null) return;
    //left가 존재할 경우에는 value에다가 left를 더해주고 띄어쓰기를 추가해준다.
    value += left + " ";
    //결과값을 input에 적어준다
    inp.value = value;

    //연산자가 없을 경우에는 리턴을 해주고 value에 oper를 더해주고 띄어쓰기를 해준다.
    if (oper === null) return;
    value += oper + " ";
    inp.value = value;

    if (right === null) return;
    value += right + " ";
    inp.value = value;

    //만약에 res가 true라면 = 을 눌렀다는 뜻이고
    //= 을 눌렀으니까 value에다가 =을 붙여준다.
    if (res) {
        //결과값을 담아줄 res를 선언하고
        let res = "";
        //= 뒤에다가 연산결과를 만들어 붙여준다
        //switch로 oper를 돌려주고
        //case로 +일 경우에는 left 와 right를 더하는 형식으로 로직을 구성한다.
        switch (oper) {
            case "+":
                res = parseInt(left) + parseInt(right);
                break;
            case "-":
                res = parseInt(left) - parseInt(right);
                break;
            case "*":
                res = parseInt(left) * parseInt(right);
                break;
            case "/":
                res = parseInt(left) / parseInt(right);
                break;
        }
        value += "=" + res;
        inp.value = value;
    }
}

input버튼을 클릭했을 때 이벤트를 받기 위해서 숫자를 넣는 함수를 만들어준다.

function inputNum(num) {
    //oper가 null이면 즉, 연산자가 null일 경우에는 왼쪽이 아직 다 끝나지 않았다면
    if (oper === null) {
        //그리고 left가 null일 경우 즉, 한번도 input이 되지 않았을 경우
        if (left === null) {
            //left가 null일 경우에는 num을 문자로 바꿔서 넣어준다.
            left = `${num}`;
            //null이 아닐 경우에는 left에 문자열을 더해준다.
        } else {
            //0이 여러번 올 수 없기 때문에 가드를 해준다.
            //num도 0이고 left도 0일 때는 아무것도 더하지 않고 그냥 넘어간다.
            if (num === 0 && parseInt(left) === 0) return;
            left += `${num}`;
        }
        console.log("flag1", left);
    }
    //oper가 null이 아닐 경우, number가 들어왔으면 right에다가 적어준다.
    else {
        //연산자가 입력되지 않았는데 숫자가 들어왔다면 계산기 오른쪽에 텍스트를 적어주고
        //right가 null 경우 즉, 입력이 된 적이 없으면 바로 right에 넣어주고
        if (right === null) {
            right = `${num}`;
        }
        //그게 아니면 더해준다.
        else {
            //마찬가지로 둘 다 0 일 경우 return으로 아래의 명령문을 실행하지 않고 패스
            if (num === 0 && parseInt(right) === 0) return;
            right += `${num}`;
        }
    }
    //input을 한다음에 바로 save를 호출해서 버튼을 클릭하면 바로바로 input에
    //적절하게 대응될 수 있게 해준다.
    save();
}

연산자들을 클릭 했을 때 작동하도록 로직 구현

.
.
function inputOper(op) {
  //연산자 같은 경우에는 left가 null이고 연산자가 -인 경우에는 input이 안되도록해준다.
  if (left === null && op === "-") {
    //left가 null일 경우 음수로 사용하겠다.
    left = "-"
    save()
    return;
  }
  //만약에 left가 null은 아닌데 그냥 -만 있다면 연산자를 쓸 수 없게
  if(left === "-" && op === "-") {
    save()
    return;
  }
  //만약에 연산자가 -인데 기존의 값이 존재한고 right가 null이라면
  if(op === "-" && oper !== null && right === null) {
    //-를 넣어주고 바로 save 해준다.
    right = "-"
    save()
    return;
  }
  //그게 아니라면 아래 명령문을 실행한다.
  //더해지는게 아니라 = 이기 때문에 언제든지 대체될 수 있다.
  oper = op;
  save()
}

= 으로 바로 연산되도록 로직 구현

.
.
function inputEqu() {
  //만약 기존에 이미 한번 = 으로 계산이 되었고
  if(res) {
    //계산된 상태에서 = 를 한번 더 눌렀다면 left에 resValue을 넣고
    left = resValue
    //초기화를 한 번 해준다.
    right = null
    resValue = null
    oper = null
    res = false
    //만약에 res가 기존에 false 였다면 ture로만 바꿔준다.
  } else {
      res = true
  }
  save()
}

inputEqu()보강하기

-left, right, oper가 없다면 res에 변화가 가지않도록 블로킹하여 보강하기
-계산을 할 때 = 을 눌러야만 결과값을 나타내록 보강하기

function inputEqu() {
    //left가 null이거나 right가 null이거나 oper가 null일 때
    //return을 통해서 res가 true가 되는 경우를 막는다.
    if (left === null || right === null || !oper) return;

    if (res) {
        left = resValue;
        right = null;
        resValue = null;
        oper = null;
        res = false;
    } else {
        res = true;
    }
    save();
}

-input box를 클릭하면 달력이 토글로 표시 -현재 날짜를 보라색으로 자동 마크 -선택한 날짜는 주황색으로 마크 -선택한 날짜는 input box에 자동 입력 -토요일은 파란색, 일요일은 빨간색으로 동적으로 표시 -양 옆의 버튼을 통해 이전달, 다음달의 정보를 가져온다. -선택한 날짜는 월을 넘겼다가 돌아와도 그대로 선택되어 있음(정보저장) -선택한 날짜는 달력 토글창을 닫았다가 열어도 그대로 선택되어 있음(정보저장)

개발환경설정 - snowpack

$ npm init -y
$ npm i -D snowpack
$ npm i -D @snowpack/plugin-sass

//snowpack.config.js

module.exports = {
  mount: {
    public: { url: '/', static: true }, // '/' : 최상위
    src: { url: '/dist' },
  },
  optimize: {
    minify: true,
  },
  plugins: [
    '@snowpack/plugin-sass', //설치한 플러그인을 string으로 넣어준다.
  ],
};

$ npm run start

$ npm run build

$ npm i -D eslint
$ npm i --save-exact prettier
$ npm i -D eslint-config-prettier eslint-plugin-prettier

//.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 13,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

//.eslintignore

/node_modules
/build
snowpack.config.js

//.prettierrc.json

{
  "trailingComma": "all",
  "bracketSpacing": true,
  "useTabs": false,
  "semi": true,
  "printWidth": 80,
  "arrowParens": "avoid",
  "proseWrap": "never",
  "endOfLine": "auto",
  "tabWidth": 2,
  "singleQuote": true
}

//.prettierignore

/node_modules
/build
snowpack.config.js

//Open workspace Settings(JSON)

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

날짜 조회 기능 개발

클래스 변수로 표시해줄 달에 대한 정보들을 set하는 변수,
string array로 월별의 영문표기를 가져왔다.

class DatePicker {
  monthData = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];

private 변수 생성
캘린더 안에서 관리하는 변수, 달력이 보이는데 사용될 날짜들에 대한 정보

  #calendarDate = {
    data: "", //js에 new Date()객체를 사용해서 관련 정보를 저장.
    date: 0, //날짜
    month: 0,
    year: 0,
  };

  selectedDate = {
    data: "",
    date: 0,
    month: 0,
    year: 0,
  };

각 기능을 하는 엘리먼트를 사용하고 있다는 것을 바로 알 수 있게 필드에 추가해준다.

  datePickerEl;
  dateInputEl;
  calendarMonthEl;
  montnContentEl;
  nextBtnEl;
  prevBtnEl;
  calendarDatesEl;

  //입력 순서대로 메소드를 constructor에 넣어준다.
  constructor() {
    this.initCalendarDate();
    this.assignElement();
    this.addEvent();
  }

달력의 날짜 정보들을 초기화하는 메소드 생성

  initCalendarDate() {
    const data = new Date(); //따로 파라미터를 넣지 않으면 현재를 기준으로 날짜 정보가 생성된다.
    const date = data.getDate(); //몇일인지 정보를 가져오고
    const month = data.getMonth(); //이번 달이 몇 월인지 정보를 가져오는데 0부터 시작되기때문에 0~11로 리턴이 된다.
    const year = data.getFullYear(); //현재 날짜의 연도 정보를 가져온다.
    this.#calendarDate = {
      data,
      date,
      month,
      year,
    };
  }

엘리먼트 탐색 메소드

  //엘리먼트 탐색 메소드
  assignElement() {
    this.datePickerEl = document.getElementById("date-picker");
    this.dateInputEl = this.datePickerEl.querySelector("#date-input"); //id를 탐색할 때는 #필수
    this.calendarEl = this.datePickerEl.querySelector("#calendar");
    this.calendarMonthEl = this.calendarEl.querySelector("#month");
    //지금의 연/월/일을 표시해주는 엘리먼트
    this.monthContentEl = this.calendarMonthEl.querySelector("#content");
    //next, prev 버튼 엘리먼트
    this.nextBtnEl = this.calendarMonthEl.querySelector("#next");
    this.prevBtnEl = this.calendarMonthEl.querySelector("#prev");
    //day[월화수목금토일]은 SCC영역에서 처리했기 때문에 따로 하지 않고 dates엘리먼트를 불러온다.
    this.calendarDatesEl = this.calendarEl.querySelector("#dates");
  }

이벤트 메소드

  addEvent() {
    //상단의 날짜를 눌렀을 때 calendar에 active가 추가되어 달력을 보여주는 메소드
    this.dateInputEl.addEventListener("click", this.toggleCalendar.bind(this));
    //next, prev 버튼을 눌러서 다음달, 이전달을 탐색하는 메소드
    this.nextBtnEl.addEventListener("click", this.moveNextMonth.bind(this));
    this.prevBtnEl.addEventListener("click", this.movePrevtMonth.bind(this));
  }

동적으로 해당 달의 날짜를 생성해주는 메소드

  moveNextMonth() {
    this.#calendarDate.month++;
    if (this.#calendarDate.month > 11) {
      this.#calendarDate.month = 0;
      this.#calendarDate.year++;
    }
    this.updateMonth();
    this.updateDates();
  }

  movePrevtMonth() {
    this.#calendarDate.month--;
    if (this.#calendarDate.month < 0) {
      this.#calendarDate.month = 11;
      this.#calendarDate.year--;
    }
    this.updateMonth();
    this.updateDates();
  }

토글로 연도와 월의 영어표기가 노출되는 메소드

toggleCalendar() {
  this.calendarEl.classList.toggle("active");
  this.updateMonth();
  this.updateDates();
}

월별 업데이트

updateMonth() {
  this.monthContentEl.textContent = `${this.#calendarDate.year} ${
    this.monthData[this.#calendarDate.month]
  }`;
}

업데이트 될 때 마다 새로 동적으로 날짜를 생성하는 메소드

  updateDates() {
    this.calendarDatesEl.innerHTML = "";
    const numberOfDates = new Date(
      this.#calendarDate.year,
      this.#calendarDate.month + 1,
      0
    ).getDate();
    const fragment = new DocumentFragment();
    for (let i = 0; i < numberOfDates; i++) {
      const dateEl = document.createElement("div");
      dateEl.classList.add("date");
      dateEl.textContent = i + 1;
      dateEl.dataset.date = i + 1;
      fragment.appendChild(dateEl);
    }
    //그 달의 첫번째 날 즉, 1일이 어느요일에서 시작하는지를 알 수 있는 로직
    fragment.firstChild.style.gridColumnStart =
      new Date(this.#calendarDate.year, this.#calendarDate.month, 1).getDay() +
      1;
    this.calendarDatesEl.appendChild(fragment);

    //토요일과 일요일인 날들을 찾아서 파란색과 빨간색을 표시해주는 메소드 구현
    this.colorSaturday();
    this.colorSunday();

    //업데이트가 되었을 때 오늘 날짜에 마크를 해주는 메소드 구현
    this.markToday();
  }

업데이트가 되었을 때 오늘 날짜에 마크를 해주는 메소드

  markToday() {
    const currentDate = new Date();
    const currentMonth = currentDate.getMonth(); //0부터 시작
    const currentYear = currentDate.getFullYear(); //이번년도가 몇년인지
    const today = currentDate.getDate(); //오늘이 몇 일인지

    if (
      currentYear === this.#calendarDate.year &&
      currentMonth === this.#calendarDate.month
    ) {
      //calendarDatesEl에서 data-date 속성 탐색을 해서 today를 찾고
      //classList에 today를 넣어준다.
      this.calendarDatesEl
        .querySelector(`[data-date='${today}']`)
        .classList.add("today");
    }
  }

토요일에 해당하는 날짜는 모두 파란색으로 표시해주는 메소드

  colorSaturday() {
    const saturdayEls = this.calendarDatesEl.querySelectorAll(
      `.date:nth-child(7n+${
        7 -
        //해당 달에 1일이 무슨 요일인지 알 수 있다.
        new Date(this.#calendarDate.year, this.#calendarDate.month, 1).getDay() //getDay()는 0부터 시작된다.
      })`
    );
    //7n+1의 의미는 n이 0부터 시작하게 되니까
    //1, 8, 15, 22, 29 번째를 찾아서 파란색으로 표시하겠다는 의미
    for (let i = 0; i < saturdayEls.length; i++) {
      saturdayEls[i].style.color = "blue";
    }
  }

일요일에 해당하는 날짜는 모두 빨간색으로 표시해주는 메소드

  colorSunday() {
    const sundayEls = this.calendarDatesEl.querySelectorAll(
      //전체를 감싼 다음에 7로 나눠준 것이고,
      `.date:nth-child(7n+${
        (8 -
          new Date(
            this.#calendarDate.year,
            this.#calendarDate.month,
            1
            //나누기 7을해서 나머지를 구한 값을 계산식에 넣어주었다.
          ).getDay()) %
        7
      })`
    );

    //for문을 이용해서 일요일에 해당하는 일들을 빨간색으로 표시해준다.
    for (let i = 0; i < sundayEls.length; i++) {
      sundayEls[i].style.color = "red";
    }
  }
}

클래스 생성 시 인스턴스를 생성해야 정상적으로 실행된다.

new DatePicker();

날짜 입력 기능 개발

constructor에 오늘 날짜를 기준으로 date-input에 동적으로 입력되는 메소드를 넣어준다.

constructor() {
    .
    .
    this.setDateInput();
    this.addEvent();
  }

new Date 객체에서 생성한 날짜 정보를 input에 넣어준다

  initSelectedDate() {
    this.selectedDate = { ...this.#calendarDate };
  }

  setDateInput() {
    //자바스크립트로 동적으로 스트립트를 넣어준다.
    this.dateInputEl.textContent = this.formateDate(this.selectedDate.data);

    this.dateInputEl.dataset.value = this.selectedDate.data;
  }

원하는 날짜를 클릭하면 date-input에 해당 날짜가 자동으로 입력되는 메소드
이벤트 버블링 효과

  addEvent() {
    .
    .
    .
    //calendarDatesEl는 date들의 컨테이너 역할을 하고 이벤트 버블링을 이용해서
    //모든 셀마다 이벤트를 추가하는 것이 아니라 전체를 감싸고 있는 컨테이너에
    //이벤트를 추가해서 그 안에서 어떤 셀을 클릭하는지 캐치할 수 있도록한다.
    this.calendarDatesEl.addEventListener(
      "click",
      this.onClickSelectorDate.bind(this)
    );
  }

이벤를 받아서 eventTarget에 dataset에 date가 있으면 조건문을 실행
옵셔널체이닝

onClickSelectorDate(event) {
  const eventTarget = event.target;
  if (eventTarget.dataset.date) {
    this.calendarDatesEl
      .querySelector(".selected")
      ?.classList.remove("selected");
    eventTarget.classList.add("selected");
    this.selectedDate = {
      data: new Date(
        this.#calendarDate.year,
        this.#calendarDate.month,
        eventTarget.dataset.date
      ),
      //지금 달력으로 보고 있는 날짜의 년 정보
      year: this.#calendarDate.year,
      //지금 달력으로 보고 있는 날짜의 월 정보
      month: this.#calendarDate.month,
      //클릭한 이벤트 타겟의 데이터 정보
      date: eventTarget.dataset.date,
    };
    this.setDateInput();
    //원하는 날짜를 선택하면 캘린더가 안보이게 설정
    this.calendarEl.classList.remove("active");
  }
}

포맷데이터 메소드를 구현해서 날짜 정보를 보여주려는 날짜 형태로 포맷시키는 메소드

  //
  formateDate(dateData) {
    //날짜 정보[dateData]를 가져오는데 date가 10보다 작으면
    //즉, 두자리 수가 아니라면 그냥 0을 붙여준다.
    let date = dateData.getDate();
    if (date < 10) {
      date = `0${date}`;
    }

    //month도 비슷하게 해주는데 index이기 때문에 +를 해서
    //실제 우리가 아는 달의 정보로 바꿔준다.
    let month = dateData.getMonth() + 1;
    if (month < 10) {
      month = `0${month}`;
    }

    let year = dateData.getFullYear();
    return `${year}/${month}/${date}`;
  }

input 창을 닫은 후 다시 열었을 때 선택한 연/월/일이 있는 캘린더가 보여지게 하는 메소드

  toggleCalendar() {
    if (this.calendarEl.classList.contains("active")) {
      //다시 토글을 하게 될때 선택한 날짜의 달력으로 볼 수 있게 된다.
      this.#calendarDate = { ...this.selectedDate };
    }
    this.calendarEl.classList.toggle("active");
    this.updateMonth();
    this.updateDates();
  }

오늘 선택된 날짜를 마크하는 메소드 구현

  markSelectedDate() {
    if (
      //달력에서 보여지는 날짜정보들과 선택된 날짜정보들을 비교해서 조건문을 실행
      this.selectedDate.year === this.#calendarDate.year &&
      this.selectedDate.month === this.#calendarDate.month
    ) {
      this.calendarDatesEl
        .querySelector(`[data-date='${this.selectedDate.date}']`)
        .classList.add("selected");
    }
  }

개발환경설정

Webpack-boilerplate

• [font awesome] 아이콘을 사용하기 위해 라이브러리 설치

npm install --save @fortawesome/fontawesome-free

슬라이드 이미지 관련 설정

//webpack.config.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, "css-loader"],
    },
    {
      test: /\.jpeg$/, //jpeg 파일을
      type: 'asset/inline' //webpack에 내장된 로더로 읽어들이겠다.
    }
  ],
},

Lodash 문법을 사용해서 입력해준다.
Node.js에서는 require 메서드를 통해 외부 모듈을 가져올 수 있다.

<!-- index.html -->

<div class="slider-wrap" id="slider-wrap">
  <ul class="list slider" id="slider">
    <li>
      <img src="<%= require('./src/image/red.jpeg') %>" />
    </li>
    <li>
      <img src="<%= require('./src/image/orange.jpeg') %>" />
    </li>
    <li>
      <img src="<%= require('./src/image/yellow.jpeg') %>" />
    </li>
    <li>
      <img src="<%= require('./src/image/green.jpeg') %>" />
    </li>
    <li>
      <img src="<%= require('./src/image/blue.jpeg') %>" />
    </li>
    <li>
      <img src="<%= require('./src/image/indigo.jpeg') %>" />
    </li>
    <li>
      <img src="<%= require('./src/image/violet.jpeg') %>" />
    </li>
  </ul>
</div>

next, prev 버튼 개발

//imageSlider.js

export default class ImageSlider {
  // 클래스 변수 일부만 private 하게 사용
  #currentPosition = 0; // 현재에 몇 번째 슬라이더에 있는지를 저장

  #slideNumber = 0; // 슬라이드의 개수를 저장

  #slideWidth = 0; // 슬라이드의 너비를 저장

  sliderWrapEl;

  sliderListEl;

  nextBtnEl;

  previousBtnEl;

  // 초기화해준 값을 constructor에 넣어서
  // 클래스에서 인스턴스를 만들 때 실행시켜주도록 함.
  constructor() {
    this.assignElement();
    this.initSliderNumber();
    this.initSlideWidth();
    this.initSliderListWidth();
    this.addEvent();
  }

  // 엘레먼트들을 찾아서 가지고 있는 assignElement()
  assignElement() {
    this.sliderWrapEl = document.getElementById('slider-wrap');
    this.sliderListEl = this.sliderWrapEl.querySelector('#slider');
    this.nextBtnEl = this.sliderWrapEl.querySelector('#next');
    this.previousBtnEl = this.sliderWrapEl.querySelector('#previous');
  }

  // 초기화 메소드

  // 슬라이드 리스트들이 몇개 있는지 알려주는 메소드
  initSliderNumber() {
    // length를 이용하여 querySelectorAll이 몇 개를 탐색했는지 알 수 있다.
    this.#slideNumber = this.sliderListEl.querySelectorAll('li').length;
  }

  // slideWidth를 초기화하는 메소드
  initSlideWidth() {
    // slideWidth는 sliderWrapEl에 css 1000px을 가지고 오는 코드
    this.#slideWidth = this.sliderWrapEl.clientWidth;
  }

  // 현재 slideList는 float을 써서 List가 옆으로 쭉 이어져 있는 형태
  // 자바스크립트를 이용해 동적으로 리스트를 개수에 따라서 리스트를 설정해주는 로직
  // sliderListWidth를 초기화 하는 메소드
  initSliderListWidth() {
    // 개수 * 높이를 해서 SliderList의 총 Width를 계산해서 다시 sliderListEl에 넣었다.
    // 그러면 css에서 8000px을 넣은 것과 같은 효과가 나타나게 된다.
    this.sliderListEl.style.width = `${this.#slideNumber * this.#slideWidth}px`;
  }

  // 이벤트 추가
  addEvent() {
    // 클릭하면 두번째 파라미터로 넣은 이벤트 핸들러를 실행하는데
    // moveToRight라는 메소드를 따로 만들어서 메소드를 실행하도록 했다.
    // moveToRight 메소드에서 this를 사용할 것이기 때문에 bind(this)를 해준다.
    this.nextBtnEl.addEventListener('click', this.moveToRight.bind(this));
    this.previousBtnEl.addEventListener('click', this.moveToLeft.bind(this));
  }

  moveToRight() {
    // 현재의 위치값을 1 더해주는 로직
    // eslint-config-airbnb에서는 '++'는 사용하지 못하게 되어있다.
    this.#currentPosition += 1;

    // 경계값 처리해주기
    // 현재 슬라이드가 0~6까지 있는데
    // 0에서 -1로 내려갈때나 6에서 7로 올라갈때를 처리해서 슬라이드가 끊김없이 이어지게.
    // 동적으로 만들어줘야하니까 this.sliedNumber를 이용해서
    // 현재 위치가 슬라이드의 개수와 같아지면 this.#currentPosition = 0; 이렇게 처리해주기
    if (this.#currentPosition === this.#slideNumber) {
      this.#currentPosition = 0;
    }

    // 슬라이드를 넘기는 효과를 준다 -1000, -2000 이런식으로
    this.sliderListEl.style.left = `-${
      this.#slideWidth * this.#currentPosition
    }px`;
  }

  moveToLeft() {
    // 현재의 위치값에서 1씩 빼주는 로직
    // currentPosition만 바꿔주면 left에 -값 주는 것을 똑같다.
    this.#currentPosition -= 1;

    // currentPosition이 -1이 되면 currentPosition를 this.#slideNumber - 1; 처리해주기
    if (this.#currentPosition === -1) {
      this.#currentPosition = this.#slideNumber - 1;
    }
    this.sliderListEl.style.left = `-${
      this.#slideWidth * this.#currentPosition
    }px`;
  }
}

인디케이터 개발

동적으로 움직이는 인디케이터 만들기

//image-slider.js
export default class ImageSlider {
  .
  .
  constructor() {
    .
    .
    //처음상태의 인디케이터 설정
    this.setIndicator();
  }
  assignElement() {
    .
    .
    //인디케이터 탐색
    this.indicatorWrapEl = this.sliderWrapEl.querySelector('#indicator-wrap');
  }
  .
  .
  moveToRight() {
  .
  .
  // 인덱스에 따라서 인덱스가 활성화되는 로직을 붙여준다.
  this.setIndicator();
  }
  moveToLeft() {
  .
  .
  // 인덱스에 따라서 인덱스가 활성화되는 로직을 붙여준다.
  this.setIndicator();
  }
  // 동적으로 인디케이터를 만들어주는 메소드 생성
  createIndicator() {
    // DOM fragment[프래그먼트]를 이용해서 리스트를 한번에 ul태그 안에 넣기
    const docFragment = document.createDocumentFragment();
    // slideNumber를 이용하여 리스트 생성
    for (let i = 0; i < this.#slideNumber; i += 1) {
        const li = document.createElement('li');
        // 리스트에 data-를 스크립트로 지정해줄때는 dataset한 다음에 .내용입력
        // 여기서는 index값을 내려준다.
        li.dataset.index = i;
        // 그리고 document fragment에 저장해놓은데에다가 리스트를 하나씩 넣어준다.
        docFragment.appendChild(li);
    }
    // ul태그 안에서 찾아야되니까.
    // 이렇게 하게되면 리스트들이 생성되서 docFragment안에 넣어졌고 docFragment를 ul의 자식으로 넣었다.
    // docFragment는 렌더가 되지 않고 결과물은 ul태그 안에 우리가 추가한 엘레멘트가 생성되고 중간에 다른 엘레멘트가 껴들지 않는다.
    this.indicatorWrapEl.querySelector('ul').appendChild(docFragment);
  }

  // 인디케이터 활성화
  // 클릭하면 반투명 -> 흰색 버튼으로 색이 변경되는 로직
  setIndicator() {
  // index 활성화 없음 // li(리스트)에 active된걸 찾고 클래스리스트에서 active를 제거
      // 처음에 초기화 될 때는 active된 게 없을수도 있으니까 옵셔널체이닝(?)을 넣었다.
      this.indicatorWrapEl.querySelector('li.active')?.classList.remove('active');
  // index에 따라서 활성화
      // 몇번째를 활성화 해줄 건지, ul태그 안에 li:nth-child로 몇번째를 찾는지 정해준다
      // nth-child는 0부터 시작이 아니라 1부터 시작하기 때문에 + 1을 해준다.
      this.indicatorWrapEl
          .querySelector(`ul li:nth-child(${this.#currentPosition + 1})`)
          .classList.add('active');
  }
}

인디케이터를 클릭했을 때 해당 로직으로 이동하는 것 구현 [이벤트 버블링 효과]

//image-slider.js

export default class ImageSlider {
  .
  .
  addEvent() {
    // 인디케이터를 클릭했을 때 해당 로직으로 이동하는 [ 이벤트 버블링 효과 ]
    this.indicatorWrapEl.addEventListener(
      'click',
      this.onClickIndicator.bind(this),
    );
  }
  // indicator-wrap부분에 이벤트를 붙여주고 클릭 한 것 중에 데이터인덱스 값이 있으면
  // 해당 인덱스로 이동하는 로직으로 구현.
  onClickIndicator(event) {
    // 이벤트 타겟의 데이터셋을 가져오는데 인덱스로 저장해서 가져온다.
    // 버튼을 누르면 제대로 콘솔에 찍히지만 그 사이를 누르면 undefined가 출력된다.
    // parseInt() : 현재 번호가 string으로 바뀌어져있는데 number로 바꿔줘야한다.
    // 현재 eslint-config-airbnb 룰에 걸려서 10진수 진법을 사용해야한다. = 원래는 안해도 됨
    const indexPosition = parseInt(event.target.dataset.index, 10);
    // parseInt(undefined)를 넣으면 NaN가 뜨는데 이것을 가려내야하기 때문에 조건문을 작성한다.
    // Number에 스테틱메소드인 isInteger를 이용해 indexPosition에 정수가 있으면 다음을 실행.
    if (Number.isInteger(indexPosition)) {
      // 정수를 currentPosition에 넣고 슬라이드를 넘길 수 있게.
      this.#currentPosition = indexPosition;
      this.sliderListEl.style.left = `-${
        this.#slideWidth * this.#currentPosition
      }px`;
      // position이 바뀌었으니까 다시 업데이트를 해준다.
      // 이제 인디케이터 버튼을 클릭하면 해당 인덱스로 이동하게 된다.
      this.setIndicator();
    }
  }
}

autoplay 개발

슬라이드가 자동으로 넘어가는 로직 개발
일시정지 버튼을 누르면 슬라이더가 멈추는 로직 개발

//image-slider.js

export default class ImageSlider {
  .
  .
  // 오토플레이 기능을 멈춰야하는 기능을 구현해야하는데 거기에 사용하기 위해
  // setInterval은 id로 저장해둬야한다.
  // 프라이빗 변수로 IntervalId를 만든다.
  #intervalId;

  // 현재 상태가 오토플레이인지 아닌지 판단하기 위해 프라이빗 변수 생성
  // 페이지를 열면 처음에는 오토플레이가 동작하고 있기 때문에 초기값은 true로 해놓는다.
  #autoPlay = true;

  // 클래스 변수가 어떤 일을 하는지 상단에 미리 작성해놔야
  // 나중에 코드를 리팩토링 할 때나 협업을 할 때 알아보기 용이하다.
  sliderWrapEl;
  .
  .
  assignElement() {
    .
    .
    // 페이지가 떴을 때 오토플레이가 동작하는 기능 구현
    this.controlWrapEl = this.sliderWrapEl.querySelector('#control-wrap');
  }
  .
  .
  addEvent() {
    // intervalId을 가지고 오토플레이가 멈추고 다시 재생하는 이벤트 구현
    this.controlWrapEl.addEventListener('click', this.togglePlay.bind(this));
  }
  // html 문서에 data- 속성을 미리 넣어뒀다. data-status="pause", data-status="play"
  // 이를 활용해 재생해야되는지 멈춰야되는지를 판단하는 메소드 구현.
  // 현재 controlWrap에 이벤트를 넣어놨기 때문에 버블링을 이용하여 부모에 한번에 이벤트를 걸면된다.
  togglePlay(event) {
    if (event.target.dataset.status === 'play') {
      // status가 tute이면 플레이버튼이 눌린 상태라고 인식하고
      // controlWrapEl.classList에 play 클래스를 넣을 것 이고
      // controlWrapEl.classList에 pause 클래스가 있으면 삭제할 것이다.
      this.#autoPlay = true;
      this.controlWrapEl.classList.add('paly');
      this.controlWrapEl.classList.remove('pause');
      // 위에는 버튼만 구현했고 동작하는 기능을 불러온다.
      this.initAutoplay();
    } else if (event.target.dataset.status === 'pause') {
      // status가 pause인 경우에는 멈추게 되니까 autoPlay가 false가 된다.
      this.#autoPlay = false;
      // 위와 반대로 동작해야하니까 add와 remove를 변경해준다.
      this.controlWrapEl.classList.remove('paly');
      this.controlWrapEl.classList.add('pause');
      // pause를 누르면 autoPlay를 멈춰야하니까 clearInterval을 이용해서 멈추게한다.
      clearInterval(this.#intervalId);
    }
  }
  .
  .
  // 3초 interval 즉, autoPlay가 계속 작동되고 있는 상태에서
  // 화살표버튼으로 다음 슬라이드로 넘길 시 3초가 안된 상태에서 다음 슬라이드로 넘어가게된다.
  // 슬라이드를 중간에 넘겨버리지 못하게 처리해주기
  // moveToRight(), moveToLeft()에서 처리해주기
  moveToRight() {
    .
    .
    // pause를 누른 상태에서 버튼을 클릭했을 때 setInterval이 시작되면 안되니까
    // 현재 상태가 play인지 pause인지 즉, autoPlay 상태인지 아닌지 알고
    // autoPlay일 경우에만 해당 로직을 실행시킬 수 있게 조건문으로 감싸준다.
    if (this.#autoPlay) {
      // moveToRight()를 누르게 되면 intervalId가 있다면 얘를 멈추고
      // 즉, clearInterval 하고 다시 setInterval을 시작해주는 로직
      // 이렇게 되면 setInterval이 돌고있는데 moveToRight를 눌렀다면
      // 뒤에서 돌고 있는 setInterval은 멈추게 되고 우리가 버튼을 누름으로 인해서
      // 다음 슬라이드로 넘어가게되고 그 상태에서 다시 setInterval을 시작하게된다.
      clearInterval(this.#intervalId);
      this.#intervalId = setInterval(this.moveToRight.bind(this), 3000);
  }
  moveToLeft() {
    .
    .
    // moveToRight()에서 한 것 같이 똑같이 로직을 구성해준다.
    if (this.#autoPlay) {
      clearInterval(this.#intervalId);
      this.#intervalId = setInterval(this.moveToRight.bind(this), 3000);
    }
    this.setIndicator();
  }
  .
  .
}

개발환경 설정

최상의 성능을 위해 어플리케이션을 최적화하는 개발도구 Webpack 사용

$ npm i -D webpack webpack-cli webpack-dev-server
$ npm i -D terser-webpack-plugin

//webpack.config.js

const path = require("path");
const TerserWebpackPlugin = require("terser-webpack-plugin");
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    clean: true,
  },
  devtool: "source-map",
  mode: "development",
  optimization: {
    minimizer: [new TerserWebpackPlugin()],
  },
};

• 추가적인 압축 플러그인까지 설치 후 TerserWebpackPlugin 을 생성하여
  minimizer 에 입력 후 $ npx webpack 을 실행한다.
• dist 경로에 bundle.js , bundle.js.map 파일이 생성된다.

HTML과 CSS파일을 설정해줄 모듈을 설치한다.

$ npm i -D html-webpack-plugin
$ npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin

Lodash, 객체, 배열 등의 데이터 구조를 쉽게 변환해 사용하게 도와주는
자바스크립트 라이브러리

$ npm i -g npm
$ npm i --save lodash

• 추가적인 Webapck 설정 사항을 입력한다.

//webpack.config.js

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); /
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: "./src/js/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./dist"),
    clean: true,
  },
  devtool: 'source-map',
  mode: "development",
  devServer: {
    host: "localhost",
    port: 4200,
    open: true,
    watchFiles: 'index.html',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "keyboard",
      template: "./index.html",
      inject: "body",
      favicon: "./favicon.ico"
    }),
    new MiniCssExtractPlugin({ filename: "style.css" }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ]
  },
};

• build를 production 모드에서 하기

//package.json

"scripts": {
    "build": "webpack --mode=production", //npm run build
    "dev": "webpack-dev-server" //npm run dev
  },

• Webpack Dev Server를 이용해서 개발할 때 Dev server 띄우기 $ npx webpack-dev-server 입력해서 잘 동작하는지 확인

//webpack.config.js

devServer: {
    host: "localhost",
    port: 4200,
    open: true,
    watchFiles: 'index.html',
  },

Webpack Dev Server로 인해 개발환경이 설정이 제대로 되었다면 브라우저를 새로고침하지 않아도 자동으로 새로고침되어 개발하기 편한 환경 탄생! $ npm run dev를 통해 브라우저를 열 수 있다.

개발환경 설정2

ESLint, 코드 퀄리티를 보장하도록 도와준다. Prettier, 코드 스타일을 깔끔하게 도와준다.

$ npm i -D eslint
$ npm install --save-dev --save-exact prettier
$ npm i -D eslint-config-prettier eslint-plugin-prettier
$ npx eslint --init

//.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 13,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error"
  }
}

//.prettierrc.json

{
  "arrowParens": "always",
  "bracketSameLine": false,
  "bracketSpacing": true,
  "embeddedLanguageFormatting": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

//settings.json

{
    //저장할 때 prettier가 포맷한다.(js.css.html 모두)
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    //저장될 때 eslint 룰대로 fix 한다.
    "source.fixAll.eslint": true
}

다크테마 적용하기

다크테마 기능을 사용하기 위한 css 설정

• filter: invert(100%) 색상 반전 효과 [무채색을 반전]
• filter: hue-rotate 컬러 휠을 기준으로 몇 도를 움직이는지 설정 [색상이 있는 색상을 반전]

/* style.css */

html[theme="dark-mode"] {
  filter: invert(100%) hue-rotate(180deg);
}

<!-- index.html  -->

<!DOCTYPE html>
<html theme=""></html>

class Keyboar 안에서 DOM을 가져와서 DOM에 이벤트를 붙이는 형식으로 구성

• #를 붙이면 private변수가 되서 class 외부에서 값을 오해하거나 덮어씌울 수 없다.
  [ES2019부터 javascript에서 지원되는 속성]

• 인스턴스가 생성되었기 때문에 keyboard.js 안의 consteuctor()가 실행되고
  #assignElement(), #addEvent()가 실행되면서 console에 true / false 값이 찍힌다.
  true 일 때 다크테마모드 적용, false면 해제.

//keyboard.js

export class Keyboard {
  #swichEl;
  constructor() {
    this.#assignElement();
    this.#addEvent();
  }
  //엘리먼트 가져오기
  #assignElement() {
    this.#swichEl = document.getElementById("switch");
  }

  //이벤트를 가져오는 메소드
  #addEvent() {
    this.#swichEl.addEventListener("change", (event) => {
      document.documentElement.setAttribute(
        "theme",
        event.target.checked ? "dark-mode" : ""
      );
      console.log(event.target.checked);
    });
  }
}

Font 변경 기능

<div class="select-box"> 에 <select id="font"> 를 줘서
변경될 때 마다 변화를 감지하고 옵션태그 안의 값을 이용해서 폰트를 변경하는 것을 구현

//keyboard.js

export class Keyboard {
  #swichEl; //다크모드 스위치 엘레멘트
  #fontSelectEl; //폰트 변경 엘레멘트
  constructor() {
    this.#assignElement();
    this.#addEvent();
  }

  #assignElement() {
    this.#swichEl = document.getElementById("switch");
    this.#fontSelectEl = document.getElementById("font");
  }

  #addEvent() {
    this.#swichEl.addEventListener("change", (event) => {
      document.documentElement.setAttribute(
        "theme",
        event.target.checked ? "dark-mode" : ""
      );
      console.log(event.target.checked);
    });
    this.#fontSelectEl.addEventListener("change", (event) => {
      //가져온 폰트값 body에 적용하기
      //body에 있는 모든 폰트들이 선택한 폰트로 바뀌게 된다.
      document.body.style.fontFamily = event.target.value;
      //select-box이기때문에 value를 가져올 수 있다.
    });
  }
}

Keyboard event 적용하기

코드 리팩토링 [비용절감 / 이벤트핸들러 분리]

• document 에서 switch, font를 찾고 탐색하고 있는데 해당 부분 개선하기
  
• 현재는 메뉴, 인풋그룹, 키보드가 컨테이너에 둘러 쌓여 있는데 해당 부분 개선하기
  → 컨테이너를 먼저 찾은 다음에 컨테이너 메뉴, 인풋그룹, 키보드 클래스를 탐색하는 방법

//keyboard.js
export class Keyboard {
  #swichEl; //다크모드 스위치 엘레멘트
  #fontSelectEl; //폰트 변경 엘레멘트
  #containerEl;
  constructor() {
    this.#assignElement();
    this.#addEvent();
  }

  #assignElement() {
    this.#containerEl = document.getElementById("container");
    this.#swichEl = this.#containerEl.querySelector("#switch");
    this.#fontSelectEl = this.#containerEl.querySelector("#font");
  }

  #addEvent() {
    this.#swichEl.addEventListener("change", this.#onChangeTheme);
    this.#fontSelectEl.addEventListener("change", this.#onChangeFont);
  }

    //다크테마모드 변경
  #onChangeTheme(event) {
    document.documentElement.setAttribute(
      "theme",
      event.target.checked ? "dark-mode" : ""
    );
    console.log(event.target.checked);
  }
    //폰트 변경
  #onChangeFont(event) {
    document.body.style.fontFamily = event.target.value;
  }
}

키보드 이벤트 추가하기
KeyboardEvent { isTrusted: true, key: ‘a’, code: ’KeyA’, …}

//keyboard.js

#addEvent() {
    this.#swichEl.addEventListener("change", this.#onChangeTheme);
    this.#fontSelectEl.addEventListener("change", this.#onChangeFont);

    document.addEventListener("keydown", (event) => {
      console.log(event.code);
      if (this.#keyboardEl.querySelector(`[data-code=${event.code}]`)) {
        this.#keyboardEl
          .querySelector(`[data-code=${event.code}]`)
          .classList.add("active");
      }
    });
    document.addEventListener("keyup", (event) => {
      if (this.#keyboardEl.querySelector(`[data-code=${event.code}]`)) {
        this.#keyboardEl
          .querySelector(`[data-code=${event.code}]`)
          .classList.remove("active");
      }
    });
  }

• [ 옵셔널체이닝(optional chaining) ]
  if문 보다 간단하게 ?. 사용하여 코드 리팩토링

//keyboard.js

#addEvent() {
    this.#swichEl.addEventListener("change", this.#onChangeTheme);
    this.#fontSelectEl.addEventListener("change", this.#onChangeFont);

    document.addEventListener("keydown", (event) => {
      console.log(event.code);
      this.#keyboardEl
        .querySelector(`[data-code=${event.code}]`)
        ?.classList.add("active");
    });

    document.addEventListener("keyup", (event) => {
      this.#keyboardEl
        .querySelector(`[data-code=${event.code}]`)
        ?.classList.remove("active");
    });
  }

한글 입력 불가 메세지 표시 및 한글 입력 막기

• keydown 즉, 입력된 키가 한글인지 캐치해서 인풋그룹에 에러 클래스를 추가해
  한글 입력 불가 경고 메세지를 띄우는 것
• input value 중에 한글을 찾아내서 한글을 공백으로 치환해준다.
  replace()의 첫번째 파라미터에는 정규식을 넣어주고 두번째는 ""으로 바꿔준다.
  이렇게 한글을 ""으로 바꾼 값을 다시 inputEl.value에 넣어준다.

export class Keyboard {
  #swichEl;
  #fontSelectEl;
  #containerEl;
  #keyboardEl;
  #inputGroupEl;
  #inputEl;
  constructor() {
    this.#assignElement();
    this.#addEvent();
  }

.
.
.


  #addEvent() {
    this.#swichEl.addEventListener("change", this.#onChangeTheme);
    this.#fontSelectEl.addEventListener("change", this.#onChangeFont);
    document.addEventListener("keydown", this.#onKeyDown.bind(this));
    document.addEventListener("keyup", this.#onKeyUp.bind(this));
    this.#inputEl.addEventListener("input", this.#onInput);
  }

  #onInput(event) {
    event.target.value = event.target.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/, "");
  }

  #onKeyDown(event) {
    this.#inputGroupEl.classList.toggle(
      "error",
      /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(event.key)
    );

    this.#keyboardEl
      .querySelector(`[data-code=${event.code}]`)
      ?.classList.add("active");
  }

  #onKeyUp(event) {
    this.#keyboardEl
      .querySelector(`[data-code=${event.code}]`)
      ?.classList.remove("active");
  }

  #onChangeTheme(event) {
    document.documentElement.setAttribute(
      "theme",
      event.target.checked ? "dark-mode" : ""
    );
    console.log(event.target.checked);
  }

  #onChangeFont(event) {
    document.body.style.fontFamily = event.target.value;
  }
}

마우스 이벤트 추가하기

• 키보드 레이아웃에서 마우스로 키보드를 눌렀을 때 input에 입력되게 구현
• 마우스를 클릭할 때는 키보드가 안눌리게 예외처리
• 키보드를 입력할 때는 마우스 클릭이 안되게 예외처리

export class Keyboard {
  #swichEl;
  #fontSelectEl;
  #containerEl;
  #keyboardEl;
  #inputGroupEl;
  #inputEl;
  //예외처리
  #keyPress = false;
  #MouseDown = false;
  constructor() {
    this.#assignElement();
    this.#addEvent();
  }

  .
  .
  .


  #onMouseUp(event) {
    //키보드를 누를 때 마우스가 동작하지 않도록 해주고
    //mouseUp상태니까 this.#MouseDown = false;로 .
    if (this.#keyPress) return;
    this.#MouseDown = false;
    const KeyEl = event.target.closest("div.key");

    const isActive = !!KeyEl?.classList.contains("active");

    const val = KeyEl?.dataset.val;

    if (isActive && !!val && val !== "Space" && val !== "Backspace") {
      this.#inputEl.value += val;
    }

    if (isActive && val === "Space") {
      this.#inputEl.value += " ";
    }

    if (isActive && val === "Backspace") {
      this.#inputEl.value = this.#inputEl.value.slice(0, -1);
    }

    this.#keyboardEl.querySelector(".active")?.classList.remove("active");
  }

  #onMouseDown(event) {
    //키보드를 입력하고 있을 때 마우스핸들러는 작동하지 않게하기
    //메소드 자체가 실행이 안되고 밑에 있는 코드들에 접근하지 못하게 막기
    if (this.#keyPress) return;
    this.#MouseDown = true;
    event.target.closest("div.key")?.classList.add("active");
  }

  #onInput(event) {
    event.target.value = event.target.value.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/, "");
  }

  #onKeyDown(event) {
    //#MouseDown 상태면 키보드 이벤트핸들러는 동작할 수 없게하기
    if (this.#MouseDown) return;
    //onKeyDown한 상태니까 keyPress가 true인 상태.
    this.#keyPress = true;

    this.#inputGroupEl.classList.toggle(
      "error",
      /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/.test(event.key)
    );

    this.#keyboardEl
      .querySelector(`[data-code=${event.code}]`)
      ?.classList.add("active");
  }

  #onKeyUp(event) {
    //#MouseDown 상태면 키보드 이벤트핸들러는 동작할 수 없게하기
    if (this.#MouseDown) return;
    //onKeyUp을 하면 키보드가 눌려진 상태가 아니니까 false.
    this.#keyPress = false;

    this.#keyboardEl
      .querySelector(`[data-code=${event.code}]`)
      ?.classList.remove("active");
  }
.
.
.

}

HTML / CSS / JavaScript를 활용해서 스타벅스 페이지 제작하기

BEM(Block Element Modifier), HTML 클래스 속성의 작명법 사용하기

<div class="container">
    <div class="name"></div>
    <div class="item">
        <div class="name"></div>
    </div>
</div>

//위의 코드를 Lodash 기호로 요소의 일부분을 표시
//CSS선택자를 통해 요소를 입력할 때 container 후손선택자로 사용할 경우
//item의 자식요소인 name도 같이 선택될 수 있기 때문에 정확하게 요소를 지칭

<div class="container">
    <div class="container__name"></div>
    <div class="item">
        <div class="item__name"></div>
    </div>
</div>

lodash CDN, 스크롤할 때 생성되는 함수의 갯수 제어

• head 태그에 script를 작성

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
    integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
></script>

• _.throttle(함수, 시간)을 이용해서 스크롤 과부하를 방지한다.

window.addEventListener(
    "scroll",
    _.throttle(function () {
        console.log(window.scrollY);
        if (window.scrollY > 500) {
            badgeEl.style.display = "none";
        } else {
            badgeEl.style.display = "block";
        }
    }, 300)
);

gsap CDN, 자바스크립트의 애니메이션

• head 태그에 script를 작성

<script
    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"
    integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
></script>

• gsap.to(요소, 지속시간, 옵션)으로 애니메이션 동작시키기
  

window.addEventListener('scroll' , _.throttle(function () {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
    gsap.to(badgeEl, .6, {
      opacity: 0
            display: 'none'
    });
  } else {
    badgeEl.style.display = 'block';
  }
}, 300));

fade-in, 시간차 애니메이션

/* css */
.visual .fade-in {
    opacity: 0;
}

//js
const fadeEls = document.querySelectorAll(".visual .fade-in");
fadeEls.forEach(function (fadeEl, index) {
    gsap.to(fadeEl, 1, {
        delay: (index + 1) * 0.7,
        //0.7, 1.4, 2.1, 2.7 순차적으로 더해져서 반복
        opacity: 1,
    });
});

Swiper(slide), 자바스크립트 라이브러리 활용

new Swiper(".notice-line .swiper-container", {
    direction: "vertical", // 수직 슬라이드
    autoplay: true, // 자동 재생 여부
    loop: true, // 반복 재생 여부
});

IFrame Player API, 유튜브 영상 삽입

• 유트브 영상이 출력될 위치에 요소를 생성한다.

<!-- html -->

<!-- in HEAD -->
<script defer src="./js/youtube.js"></script>

<!-- in BODY -->
<div id="player"></div>

• onYouTubePlayerAPIReady 함수 이름은 Youtube IFrame Player API에서 사용하는 이름이기 때문에 다르게 지정하면 동작하지 않는다.

//js

// Youtube IFrame API를 비동기로 로드
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubePlayerAPIReady() {
    new YT.Player("player", {
        videoId: "An6LvWQuj_8", // 재생할 유튜브 영상 ID
        playerVars: {
            autoplay: true, // 자동 재생 유무
            loop: true, // 반복 재생 유무
            playlist: "An6LvWQuj_8", // 반복 재생할 유튜브 영상 ID 목록
        },
        events: {
            // 영상이 준비되었을 때,
            onReady: function (event) {
                event.target.mute(); // 음소거!
            },
        },
    });
}

동영상 앞에 움직이는 애니메이션 삽입

// 범위 랜덤 함수(소수점 2자리까지)
function random(min, max) {
  return parseFloat((Math.random() * (max - min) + min).toFixed(2))
}
function floatingObject(selector, delay, size) {
  gsap.to(
    selector, 
    random(1.5, 2.5), //애니메이션 동작 시간
    { //옵션
    y: size,
    repeat: -1, //무한반복
    yoyo: true,
    ease: power1.easeInOut,
    delay: ramdom(0, delay) //지연시간
    } 
  );
}
floatingObject('.floating1', 1, 15);
floatingObject('.floating2', .5, 15);
floatingObject('.floating3', 1.5, 20);

ScrollMagic API

스크롤과 요소의 상호작용을 위한 자바스크립트 라이브러리 활용

• head 태그에 script를 작성

  <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>

• 대표적으로 어떤 요소가 현재 화면에 보이는 상태인지를 확인할 때 사용

  new ScrollMagic
  .Scene({ 
    triggerElement: spyEl, // 보여짐 여부를 감시할 요소를 지정
    triggerHook: .8 // 화면의 80% 지점에서 보여짐 여부 감시
  })
  .setClassToggle(spyEl, 'show') // 요소가 화면에 보이면 show 클래스 추가
  .addTo(new ScrollMagic.Controller()) // 컨트롤러에 장면을 할당(필수!)

Swiper, 다중(이미지) 슬라이드

new Swiper('.awards .swiper-container', {
  autoplay: true,
  loop: true,
  SpaceBetween: 30,
  slidesPerView: 5, //하나의 화면에 몇 개의 슬라이드들이 보일 것인지
  navigation: {
    prevEl: '.awards .swiper-prev',
    nextEl: '.awards .swiper-next'
  }
});

ScrollTo, 페이지 상단으로 이동

const toTopEl = document.querySelector('#to-top');
// window : 브라우저 창, 탭, 윈도우 객체라고 부름. 보고있는 화면 자체
window.addEventListener('scroll' , _.throttle(function () {
  console.log(window.scrollY);
  if (window.scrollY > 500) {
      .
      .
      .

    //버튼 보이기
    gsap.to(toTopEl, .2, {
      x: 0
    });
  } else {
      .
      .
      .
    //버튼 숨기기
    gsap.to(toTopEl, .2, {
      x: 100
    });
  }
}, 300));
//_.throttle(함수, 시간)

toTopEl.addEventListener('click', function () {
    /*window객체는 우리가 출력하는 화면 그 자체를 애니메이션 처리*/ 
  gsap.to(window, .7, { 
    scrollTo: 0
  }); 
});