코드 기어 Code Gear - 개발 강좌

1. 카톡 로그인 창이 보이는 부분이 Frontend입니다.
   여기에서 사용자는 아이디와 패스워드를 입력하고 로그인 버튼을 클릭합니다.
2. 아이디/패스워드 정보가 Backend로 전달이 되어집니다.
   이것으로 Database를 검색하여 사용자 인증을 처리하고, 정상 사용자일 경우 친구 및 대화 목록을 가져와서 Frontend로 전달을 합니다.
3. Frontend에서는 Backend에서 온 Data를 이용해서 대화목록 화면을 보여줍니다.

• Android는 과거 Java 언어를 사용하였으나 최근엔 Kotlin(코틀린)이라는 언어를 사용합니다.
• iOS의 경우는 Swift(스위프트)를 사용합니다.

• React
• Vue

• Python의 경우는 배우기 쉬운 언어라 많이 사용하고 있습니다.
• Python은 데이터 분석 영역에서도 많이 사용합니다.
• Php의 경우는 wordpress라는 브로그 사이트를 만들 수 있는 오픈 소스를 등에 업고 많이 사용되고 있습니다.
• 시스템적으로 빠른 성능이 필요할 경우는 C나 C++을 사용하는 곳도 있습니다.

• 요즘 개발자로 취업을 하기 좋은 언어를 추천하라고 하면,
• 당연히 Javascript 기반의 언어입니다. 백엔드와 프론트엔드를 모두 커버할 수 있기 때문이죠.(Full Stack)
• 먼저 frontend/backend를 결정하시고
• frontend일 경우는 react, vue 중에서 하나를
• backend일 경우는 nodejs, java 중에서 하나를 선택하시는 것을 추천드립니다.

이 포스트의 동영상 강의

https://youtu.be/JvSdzyoaRhg

이전 포스트 일렉트론 퀵스타트에서 만든 프로젝트에 React를 추가하는 방법을 설명합니다.

• 리액트 패키지를 추가

npm install --save react react-dom

• 리액트 소스 폴더 만들기

mkdir src/js

• index.html에 root id 생성

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

• src/js/index.js 파일 만들기

import React from 'react';
import ReactDom from 'react-dom';

ReactDom.render(<h1>Hello React App</h1>, document.getElementById('root'));

• 웹팩용 패키치 추가

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader css-loader style-loader sass-loader sass webpack webpack-cli

• webpack.common.js 추가 (root 폴더)

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/index.js',
  devtool: 'inline-source-map',
  target: 'electron-renderer',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [[
              '@babel/preset-env', {
                targets: {
                  esmodules: true
                }
              }],
              '@babel/preset-react']
          }
        }
      },
      {
        test: [/\.s[ac]ss$/i, /\.css$/i],
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      }
    ]
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'build', 'js'),
  },
};

• package.json에 webpack 스크립트 추가

"watch": "webpack --config webpack.common.js --watch",

• 스크립트 실행
  
  • 스크립트가 실행되면 build/js/app.js가 생성됨.

npm run watch

• index.html에 app.js 추가

<div id="root"></div>
<script src="./build/js/app.js"></script>

• 실행

npm start

React Component 만들기

• src/js/App.js 추가

import React from 'react';

export default function App() {
    return(
        <h1>I am App Component</h1>
    )
}

• src/js/index.js 수정

import App from './App';

ReactDom.render(<App/>, document.getElementById('root'));

• 저장(Ctrl+s)
• 실행화면 창에서 Reload(Ctrl+r)

이 포스트의 동영상 강의 URL

https://youtu.be/iUWwG8RhcMY

다음 작업을 위해서는 nodejs가 설치 되어 있어야 합니다(nodejs 설치)

1. 작업을 위한 폴더를 생성합니다.
   저는 c:\workspace로 만들었습니다.
2. cmd 또는 powershell을 실행하고 위의 폴더로 이동합니다.
3. npx create-react-app my-first-react을 입력한후 실행합니다.
   

   

4. 스크립트가 실행되고 프로젝트가 생성됩니다.
   

   

5. 다음 명령어를 이용해 프로젝트 실행합니다.
   cd my-first-react
   npm start
   
   
6. 브라우저가 실행되고 아래와 같은 화면이 나오면 성공입니다!!!