프론트엔드 개발환경의 이해와 실습

프론트엔드 개발환경의 이해와 실습

(9개의 수강평)

291명의 수강생
69,300원
지식공유자 · 김정환
39회 수업· 총 5시간 2분수업
평생 무제한 시청
수료증 발급 강의
수강 난이도 중급
andrewlee 프로필

서버관련 질문 andrewlee 2일 전

강의 정말 잘 듣고 있습니다. 

이제 개발공부한 지 1 달 정도 된 초보라서 조금 쉬운 언어로 설명해주시면 감사하겠습니다 ㅠㅜ

강의 중에 개발 용 서버와 api 서버를 띄우고 개발을 한다고 말씀하셨는데 

1. 스타트업 업체에서, 개발환경과 프로덕션 환경에서 보통 어떤 종류의 서버들을 만들고 몇개를 띄우는 지 궁금합니다.

 

2. 서버라는 말이 추상적이라서 이해가 안 갑니다ㅠㅠ 일반적으로 완성된 서비스를 제공할 때, 가장 중점이 되는 서버가 있고, 데이터를 보관하는 DB 서버가 있고, API를 보관하는 API서버가 있고 , 등등 수많은 서버들이 있는데, 각각의 서버는 독립적으로 존재하는 것이 맞나요?? 

예를 들어 데이터 베이스 서버가 나간다고해서 중점이 되는 서버(뭐라고 지칭하는지 모르겠네요)와는 상관없는 일 인 것이죠. 

강의흐름과는 조금 무관한 질문을 해서 죄송합니다. 어디 속 쉬원하게 알려주는 블로그를 아직 못 만나서 항상 아쉽다가 이렇게 질문을 올립니다. 

확실한 답변이라면 짧게 대답해주셔도 감사하겠습니다 !! 

좋은 강의 감사드립니다.

0
andrewlee 프로필

이전에 코드를 올려달라고 하셔서 코드 올립니다. andrewlee 2일 전

질문도 같이 올리겠습니다~

================== 이전 질문입니다. sass 실습 파트입니다. ======================

강의랑 똑같이 한 것 같은데 계속 오류가 떠서 자력으로 해결하기가 어려워 질문을 합니다..

<에러 리포트 > 

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\AndrewLee\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v13.12.0
4 verbose run-script [ 'prebuild''build''postbuild' ]
5 info lifecycle lecture-frontend-dev-env@1.0.0~prebuild: lecture-frontend-dev-env@1.0.0
6 info lifecycle lecture-frontend-dev-env@1.0.0~build: lecture-frontend-dev-env@1.0.0
7 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: PATH: C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env\node_modules\.bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\AndrewLee\bin;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Intel\Intel(R) Management Engine Components\iCLS;C:\Program Files\Oculus\Support\oculus-runtime;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\Program Files\dotnet;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files\Java\jdk1.8.0_201\bin;C:\Program Files\Git\cmd;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn;C:\Program Files\Microsoft SQL Server\140\Tools\Binn;C:\Program Files\Microsoft SQL Server\140\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\150\DTS\Binn;C:\Program Files\Perforce;C:\Program Files\PuTTY;C:\Program Files\nodejs;C:\Program Files\nodejs;C:\Users\AndrewLee\Desktop\파이썬\Scripts;C:\Program Files\Java\jdk1.8.0_201\bi;C:\Users\AndrewLee\AppData\Local\Microsoft\WindowsApps";C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files\Java\jdk1.8.0_201;C:\Users\AndrewLee\AppData\Local\GitHubDesktop\bin;C:\Users\AndrewLee\AppData\Local\Programs\Microsoft VS Code\bin;C:\Bitnami\wampstack-7.3.15-2\mysql\bin;C:\Program Files\heroku\bin;C:\Users\AndrewLee\AppData\Roaming\npm
9 verbose lifecycle lecture-frontend-dev-env@1.0.0~build: CWD: C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env
10 silly lifecycle lecture-frontend-dev-env@1.0.0~build: Args: [ '/d /s /c''webpack --progress' ]
11 silly lifecycle lecture-frontend-dev-env@1.0.0~build: Returned: code: 2  signal: null
12 info lifecycle lecture-frontend-dev-env@1.0.0~build: Failed to exec build script
13 verbose stack Error: lecture-frontend-dev-env@1.0.0 build: `webpack --progress`
13 verbose stack Exit status 2
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\AndrewLee\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1026:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid lecture-frontend-dev-env@1.0.0
15 verbose cwd C:\Users\AndrewLee\Desktop\example_web\lecture-frontend-dev-env
16 verbose Windows_NT 10.0.17763
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\AndrewLee\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v13.12.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 2
22 error lecture-frontend-dev-env@1.0.0 build: `webpack --progress`
22 error Exit status 2
23 error Failed at the lecture-frontend-dev-env@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2true ]

<webpack.config.js>

const path = require("path");
const webpack = require("webpack");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

process.env.NODE_ENV = process.env.NODE_ENV || "development";

module.exports = {
  mode: "development",
  entry: {
    main: "./src/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist")
  },
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          process.env.NODE_ENV === "production"
            ? MiniCssExtractPlugin.loader
            : "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: `빌드 날짜: ${new Date().toLocaleString()}`
    }),
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      templateParameters: {
        env: process.env.NODE_ENV === "development" ? "(개발용)" : ""
      },
      minify:
        process.env.NODE_ENV === "production"
          ? {
              collapseWhitespace: true// 빈칸 제거
              removeComments: true // 주석 제거
            }
          : false,
      hash: process.env.NODE_ENV === "production"
    }),
    new CleanWebpackPlugin(),
    ...(process.env.NODE_ENV === "production"
      ? [new MiniCssExtractPlugin({ filename: `[name].css` })]
      : [])
  ]
};

나머지는 커밋한 시점에서 손댄 부분이 없습니다 ㅠ 

좋은 강의 해주셔서 감사합니다. 

 코드는 https://github.com/JoonsongLee/question.git 에 zip 파일로 올렸습니다

1
andrewlee 프로필

질문입니다. andrewlee 3일 전

강의 중간중간에 나머지 연산자에 대한 내용을 자주 언급하시는데 구글링을 해도 마땅한 정보를 찾을 수가 없어서.. 

이것이 무슨 뜻이고 어떤 기능인지 설명 좀 해주시거나 구글에서 어떤 키워드로 검색해야 학습이 가능한지 알고 싶습니다.

2. webpack으로 dist 폴더를 생성한 후에 index.html 파일안에 input 태그의 가장 중요한 속성인 type 속성이 사라진 것을 확인했는데 이건 어떤 문제인지 알 수 있을까요? 

< webpack.config.js> 

const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin}  = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

process.env.NODE_ENV = process.env.NODE_ENV || "development"

module.exports = {
  mode: "production",
  entry: {
    main: "./src/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            process.env.NODE_ENV==="production" ? MiniCssExtractPlugin.loader"style-loader"            
            , "css-loader"]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000 // 10Kb
        }
      }
    ]
  },
  plugins:[
      new webpack.BannerPlugin({
        banner : `빌드 날짜 : ${new Date().toLocaleString()}`
      }),
      new HtmlWebpackPlugin({
          template: './src/index.html',
          templateParameters :{
              env:process.env.NODE_ENV === 'development'?'(개발용)' :'',
          }
      }),

      new CleanWebpackPlugin(),

      ...(process.env.NODE_ENV==='production' ?
      [new MiniCssExtractPlugin({
          filename :'[name].css'
      })] :[]),
      
    ]
  /**
   * TODO: 아래 플러그인을 추가해서 번들 결과를 만들어 보세요.
   * 1. BannerPlugin: 결과물에 빌드 시간을 출력하세요.
   * 2. HtmlWebpackPlugin: 동적으로 html 파일을 생성하세요.
   * 3. CleanWebpackPlugin: 빌드 전에 아웃풋 폴더를 깨끗히 정리하세요.
   * 4. MiniCssExtractPlugin: 모듈에서 css 파일을 분리하세요.
   */
};

<index.html> in dist 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>검색</title>
    <link href="main.css?9d95228d2bede0c25351" rel="stylesheet">

</head>

<body>
    <div id="app">
        <header>
            <h2 class="container">검색</h2>
        </header>
        <div class="container">
            <form class="FormView">
// type 속성 어디갓지
<input placeholder="검색어를 입력하세요" autofocus>
 <button type="reset"
                    class="btn-reset"></button></form>
            <div class="content">
                <div id="tabs"></div>
                <div id="search-keyword"></div>
                <div id="search-history"></div>
                <div id="search-result"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="main.js?9d95228d2bede0c25351"></script>
</body>

</html>

좋은 강의 감사합니다.

3
andrewlee 프로필

질문입니다. andrewlee 3일 전

4.4 url-loader

사용하는 이미지 갯수가 많다면 네트웍 리소스를 사용하는 부담이 있고 사이트 성능에 영향을 수도 있다. 만약 페이지에서 작은 이미지를 여러 사용한다면 Data URI Scheme 이용하는 방법이 낫다. 이미지를 Base64 인코딩하여 문자열 형태로 소스코드에 넣는 형식이다url-loader 이러한 처리를 자동화해주는 녀석이다.

강의자료를 잘 이해한 것이 맞는지, 혹시나 추가 설명을 해주실 수 있을 까요 ?

네트워크로 웹 브라우저가 웹 서버에 자원들을 받아 내는 과정에서 이미지 또한 요청을 하는데 매번 이미지를 받아내기 위해선 각 이미지마다 네트워크 통신을 하는 것이 손해이기때문에 사용한다는 것으로 이해 했습니다. 그런데 Data URI Scheme를 써도 결국엔 웹 브라우저가 네트워크를 통해 웹서버로부터 이미지를 받는 것이고 그 사실 자체를 변화가 없는 것이 아닌가요? 이걸 쓴다고 무엇이 이득이라는 건지 잘 이해가 안갑니다. 어떤 방법을 통하던 이미지는 웹 서버로 부터 받아야 하는 것이고 이미지 갯수가 많다면 네트워크 리소스 부담이 많아 지는 것은 피할 수 없는 것이 아닌가 싶거든요.

좋은 강의 감사합니다

1
andrewlee 프로필

강사님 안녕하세요 andrewlee 4일 전

강의를 너무 잘 듣고 있습니다. 최근에 배운 것을 정리해보고자 블로그를 시작하였는데 내용이 너무 좋아서 강의 자료를 저만의 방식으로 2차 가공해서 업로드를 하고 싶은데 혹시 허락을 받을 수 있을까요? 

글 서두 혹은 말미에 링크와 저작권에 대한 내용을 확실히 기재할 예정입니다. 

좋은 강의 감사드립니다.

1
KE 프로필

webpack-dev-server 사용시 image 로드 실패 KE 4일 전

webpack-dev-server를 사용시 image 파일을 수업영상에서는 문제가 없는데

제가 따라하고 있는 연습 프로젝트에서는 제대로 로드하지 못하고 있습니다ㅜㅜ

src/index.scss

body {
  background-image: url('./img/lolche.png');
  background-size: cover;
}

src/app.js

import './index.scss'

webpack.config.js

module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('./dist')
  },
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          process.env.NODE_ENV === 'production'
          ? MiniCssExtractPlugin.loader
          : 'style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.png$/,
        loader: 'url-loader'
        options: {
          publicPath: './dist/',
          name: '[name].[ext]',
          limit: 10000
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: () => `빌드 날짜: ${new Date().toLocaleString()}`
    }),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      templateParameters: {
        env: process.env.NODE_ENV === 'development' ? 'development' : 'production'
      },
      minify: process.env.NODE_ENV === 'production' ? {
        removeComments: true
      } : false
    }),
    // new CleanWebpackPlugin(),
    ...(
      process.env.NODE_ENV === 'production'
      ? [new MiniCssExtractPlugin({filename: `[name].css`})]
      : []
    )
  ],
  devServer: {
    contentBase: path.join(__dirname"dist"),
    publicPath: "/"
  }
}

npm rub build시 문제없이 html, css, js, png 파일이 /dist 폴더 내에 생성되는데

npm start로 실행시 다른 건 다 문제가 없는데 image 파일을 제대로 불러오지 못합니다

GET http://localhost:8080/dist/lolche.png 404 (Not Found)

콘솔창에 위와 같은 에러를 뿜는데

제가 뭐를 잘못했을까요?

3
이충만 프로필

output filename 관련 질문이 있습니다. 이충만 27일 전

안녕하세요, 우선 좋은 강의 정말 감사합니다! 

제 질문은 웹팩 설정이 아래와 같이 되어있는데

output: {
filename: '[name].js',

저는 entry 파일이 app.js 라 결과물도 app.js 로 나올 것이라 예상을 했는데 main.js 로 떨어지더라구요. 이는 webpack의 기본 설정이라고 생각하면 될까요?

1
류재준 프로필

안녕하세요 강의를 수강중입니다. 류재준 28일 전

안녕하세요

webpack 강의 잘 보고 있습니다.

강의 내용이 webpack4로 되어 있어서 인프런 강의 중에서는 가장 최신 버전을 사용하시는거 같아서 너무 좋내요

혹시 webpack Devtool 관련해서 강의내용을 조금더 추가해 주실수는 없으실까요?

devtool 설정 및 디버깅설정을

dev와 prod를 나눌때 어떻게 하는지 궁금한 부분이 많아서요^^

남은 강의도 완강 하겠습니다

감사합니다.

1
이언상 프로필

자주사용하는 플러그인과 동일한 영상이 올라온거같습니다! 이언상 28일 전

1-webpack/3-plugin 브런치에서 과제 진행입니다!

1
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스