18일차

Iframe과 status 302
status 302가 필요한 경우

- 페이지에 부적절한 콘텐츠가 있음을 감지했을때 문제해결동안 사용자를 관심있는 페이지로 리다이렉션

- 웹사이트 공격시 페이지를 복원해야하는 경우 리다이렉션을 통해 최소화

Google 로봇 또는 다른 검색엔진이 특정 페이지를 로드하도록 요청할 때 화성화 됩니다.

301과 302가 있는데 301의 경우 seo가 이동한 페이지인 B를 탐색하지만 302는 임시 이동이기때문에 seo가 A의 페이지를 탐색한다.

회사 iframe의 에러를 해결하면서 302로 인해 https사이트 내에서 http페이지를 호출해서 에러가 발생했다 그런데 iframe과는 연관이 없어보인다.

webpack dev server 를 작동시키는데

Cannott get /

 에러가 발생했다.

그래서 config.js의 devServer에 static값을 __dirname + "/dist/"에서 "/dist"로 변경했더니 

Not allowed to load local resource: file:///C:/Users/%EC%9C%A4%EB%8F%99%EC%9A%B0/Desktop/develop/vue-study/dist/app.js

이러한 에러가 발생했다. 

이때 publicPath를 삭제했더니 코드가 정상적으로 작동했다.

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  devtool: "eval",
  resolve: {
    extensions: [".js", ".vue"],
  },
  entry: {
    app: path.join(__dirname, "./main.js"),
  },
  module: {
    // 웹팩의 대부분의 일들을 해준다.
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.css$/,
        use: ["vue-style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: __dirname + "/index.html",
      filename: __dirname + "/dist/index.html",
    }),
  ], // 부가적인 역할을 한다. 압축, script로 추가 등등
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "dist"),
  },
  devServer: {
    hot: true,
    host: "127.0.0.1",
    port: 8080,
    open: true,
    historyApiFallback: false,
    static: path.join(__dirname + "/dist"),
  },
  mode: "development",
};

일반 데이터를 가공해서 사용할땐 computed: { ... } 를 사용한다

사용하는 이유는 사용하는 함수가 캐싱된다.

v-show -> jquery의 hide show랑 같다. 근데 if의 경우 <--- 태그가 남아있는데 show는 display:none이 된다.

template은 react의 <>와 같다. 단 최상단 감싸는 경우에는 template으로 사용하지 못한다.  template 바로 아래에 template를 사용하지 못한다.

또한 template에는 v-show를 사용하지 못한다.

webpack dev server는 dist를 실제로 만들진 안고 가상으로 메모리에 저장한다.