Code Gear - AI 개발 유튜브 강의

이 글의 동영상 강의

https://youtu.be/cN8y5AjE1ZY

이번 포스트에서는 리액트에 카카오지도를 추가하는 코드를 만들어봅니다.

npx create-react-app kakaomap

프로젝트가 잘 실행되는지 확인해봅니다.

cd kakaomap
yarn start

Visual Studio를 실행합니다.

code .

index.html의 head에 다음 내용을 추가합니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; script-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; img-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net;">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; script-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net; img-src 'self' 'unsafe-inline' https://dapi.kakao.com http://*.daumcdn.net;">

<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=발급받은키"></script>

App.js를 다음과 같이 수정합니다.

import './App.css';
import { useEffect } from 'react';

function App() {
  
  //스크립트 파일 읽어오기
  const new_script = src => { 
    return new Promise((resolve, reject) => { 
      const script = document.createElement('script'); 
      script.src = src; 
      script.addEventListener('load', () => { 
        resolve(); 
      }); 
      script.addEventListener('error', e => { 
        reject(e); 
      }); 
      document.head.appendChild(script); 
    }); 
  };
  
  useEffect(() => { 
    //카카오맵 스크립트 읽어오기
    const my_script = new_script('https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=발급받은키');
    
    //스크립트 읽기 완료 후 카카오맵 설정
    my_script.then(() => { 
      console.log('script loaded!!!');  
      const kakao = window['kakao']; 
      kakao.maps.load(() => {
        const mapContainer = document.getElementById('map');
        const options = { 
          center: new kakao.maps.LatLng(37.56000302825312, 126.97540593203321), //좌표설정
          level: 3 
        }; 
        const map = new kakao.maps.Map(mapContainer, options); //맵생성
        //마커설정
        const markerPosition = new kakao.maps.LatLng(37.56000302825312, 126.97540593203321); 
        const marker = new kakao.maps.Marker({ 
          position: markerPosition
        }); 
        marker.setMap(map); 
      });   
    }); 
  }, []);

  return (
    <div className="App">
      <div id="map" className="map"/>
    </div>
  );
}

export default App;

App.css에 class를 추가합니다.

.map {
  width: 100%;
  height: 600px;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  border-style: solid;
  border-width: medium;
  border-color: #D8D8D8;
}

실행화면

지도의 좌표는 다음 URL에서 찾으시면 됩니다.

(고맙게도 페이지를 만들어주셔서 감사합니다^^)

https://tablog.neocities.org/keywordposition.html

이상으로 리액트에 카카오맵을 추가해 보았습니다.

이 글의 동영상 강의입니다.

https://youtu.be/Dhb_i76FAM0

사이트를 개발하다 보면 "찾아오시는길" 같이 웹페이지에 지도를 삽입하는 경우가 있습니다.

이번 시간은 리액트로 개발할때 카카오 지도 페이지를 만드는 법에 대해서 설명합니다.

우선 카카오 개발자 사이트에 접속하여 계정을 만들고 로그인 합니다.

https://developers.kakao.com/

메인 화면의 상단 메뉴 중 "내 애플리케이션"을 선택합니다.

내 애플리케이션에서 "애플리케이션 추가하기"를 선택합니다.

앱 아이콘, 앱 이름, 사업자명을 입력하고 저장합니다.

저장이 완료되면 요약 정보 페이지에 생성된 "앱 키"가 보입니다.

플랫폼 메뉴의 "Web플랫폼 등록"을 선택합니다.

사이트 도메인을 입력한 후 저장합니다.

Web 사이트 도메인이 등록된 것을 볼 수 있습니다.

여기서 삭제나 수정등을 하실 수 있습니다.

여기까지 완료되었으면 개발을 위한 사이트 설정은 끝났습니다.

이 포스트의 동영상 강의

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)

이 포스트의 동영상 강의

https://youtu.be/7hzH4B6xLIE

이번 글은 일렉트론 공식 홈페이지에 있는 퀵스타트를 요약한 것입니다.

https://www.electronjs.org/docs/latest/tutorial/quick-start

Nodejs 설치 및 업데이트

• Electron을 개발하기 위해서는 우선 nodejs가 설치 되어 있어야 합니다.
• nodejs 홈페이지에서 nodejs를 설치합니다.
• https://nodejs.org/ko/
• 설치 후 다음 명령을 사용하여 설치 버전을 확인합니다.

node -v
npm -v​

 프로젝트 폴더 생성

• mkdir my-electron-app 
• cd my-electron-app

프로젝트 생성

• npm init

Package.json 파일 확인

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": “First electron app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

• "main": "index.js" : entry point로 프로그램의 시작점입니다.
• 파일명은 index.js 또는 main.js를 일반적으로 사용합니다.

Electron Package 추가

• 프로젝트에서 electron을 사용하기 위해서는 "electron" 패키지를 반드시 추가해야 합니다.

npm install --save-dev electron

Package.json에 script 추가

• 실행 스크립트를 다음과 같이 추가합니다.
• npm start로 스크립트를 실행할 수 있습니다.

    "scripts": { 
        "start": "electron ." 
    }

index.html 생성

• root 폴더에 index.html을 만들고 다음과 같이 작성합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.
  </body>
</html>

index.js 생성

• root 폴더에 index.js를 만들고 다음과 같이 작성합니다.

const { app, BrowserWindow } = require('electron')
// include the Node.js 'path' module at the top of your file
const path = require('path')


// modify your existing createWindow() function
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  win.loadFile('index.html')
}
app.whenReady().then(() => {
  createWindow()
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

preload.js 생성

• root 폴더에 preload.js를 생성 합니다.

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

프로젝트 실행

npm start

실행 화면

패키징과 배포

• 패키징과 배포를 위한 가장 빠른 방법은 Electron Forge를 사용하는 것입니다.
• Electron Forge 패키지를 추가합니다.

npm install --save-dev @electron-forge/cli
npx electron-forge import

• Forge의 "make"를 이용하여 빌드합니다.

npm run make

• 실행 파일의 위치는 다음과 같습니다.

\out\my-electron-app-win32-x64\my-electron-app.exe

이상으로 Electron Quick Start를 마칩니다.

이 포스트의 동영상 강의

https://youtu.be/Krc4mHkGLqM

일렉트론은 Javascript, HTML, CSS를 이용하여 Desktop Application을 만드는 프레임워크입니다.

따라서 자바스크립트와 웹개발 지식을 가지고 있다면 쉽게 데스크톱 애플리케이션을 만들 수 있습니다.

그리고, 일렉트론은 1개의 코드만으로 Cross-Platform에서 작동하는 애플리케이션을 빌드할 수 있습니다.

일렉트론은 

• 2013.4 Atom Editor를 만들기 위해 시작한 Atom Shell에서 시작
• 2014.5 MIT라이선스 오픈소스로 전환
• 2015.4 Atom Shell에서 Electron으로 명칭 변경
• 2016.5 Electron V1.0 출시

일렉트론 아키텍처

• Backend - Nodejs 런타임
• Frontend -Chromium(크로미엄, 오픈소스 웹브라우저 프로젝트이며 구글 크롬이 이것을 사용함)

일렉트론을 사용하여 만들어진 Application

• 일렉트론을 이용해 개발된 앱은 https://www.electronjs.org/apps 에서 확인할 수 있습니다.
• 굉장히 많은 앱 리스트가 있고, 그 중 우리가 잘 아는 앱들은 다음과 같은 것들이 있습니다.

일렉트론 Application의 File 구조

일렉트론의 장점

• 웹기술을 이용해 Desktop Application 개발이 가능.
• 한개의 코드로 Cross platform에서 작동하는 애플리케이션을 만들 수 있음.
• NPM을 이용해 node package들을 사용할 수 있음.