Skip to content

Instantly share code, notes, and snippets.

View fade_effect_by_scroll2.js
const targets = document.querySelectorAll(".fade-class");
const options = { root: null, threshold: 0.1, rootMargin: "-0px" };
const observer = new IntersectionObserver(function (entries, observer) {
entries.forEach((entry) => {
const container = entry.target;
if (entry.isIntersecting) {
container.classList.add("fade-in");
} else {
container.classList.remove("fade-in");
}
View fade_effect_by_scroll.js
//스크롤 연동 fade-in fade-out
$(window).on("load", function () {
function fade() {
let animation_height = $(window).innerHeight() * 0.5;
let ratio = Math.round((1 / animation_height) * 10000) / 10000;
$(".fade").each(function () {
let objectTop = $(this).offset().top;
let windowBottom = $(window).scrollTop() + $(window).innerHeight();
if (objectTop < windowBottom) {
if (objectTop < windowBottom - animation_height) {
View webpack.config-final.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
devtool: "inline-source-map", // <- source map를 위한 코드
devServer: {
contentBase: "./dist", //
historyApiFallback: true, // <- dev-server를 위한 코드
@gyeongseokKang
gyeongseokKang / webpack.config5.js
Last active Jul 6, 2021
webpack-dev-sever 용 공식문서
View webpack.config5.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
devServer: {
contentBase: "./dist", // <- 추가된 부분
hot: true, // <- HMR 설정
},
@gyeongseokKang
gyeongseokKang / webpack.config5.js
Last active Jul 6, 2021
HtmlWebpackPlugin 설정 및 dist 제거 코드
View webpack.config5.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
module: {
rules: [
{
test: /\.css$/i,
@gyeongseokKang
gyeongseokKang / webpack.config4.js
Last active Jul 6, 2021
webpack.config.js에 시작경로 알려주기
View webpack.config4.js
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
@gyeongseokKang
gyeongseokKang / webpack.config3.js
Last active Jul 6, 2021
webpack.config.js - 웹팩에 확장자 알려주기
View webpack.config3.js
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {