Code Gear - AI 개발 유튜브 강의

동영상 강좌

https://youtu.be/o4ZjkibiD8A

리액트 프로젝트 만들기(create-react-app)

• npx create-react-app "프로젝트명"을 사용하여 React Application을 만듭니다.

npx create-react-app react-electron

리액트 프로젝트 실행

yarn start

• http://localhost:3000 으로 실행됩니다.

일렉트론 패키지 추가

yarn add --dev electron

일렉트론 실행 스크립트 추가

• package.json에 다음과 같이 스크립트를 추가합니다.

"scripts": {
	...
	"electron": "electron ."
},

일렉트론 Entry point 스크립트 추가

"main": "src/main.js",

main.js 만들기

• src/main.js 파일을 생성합니다.
• electron-quick-start의 main.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() 
})

윈도우에 리액트 URL을 불러오기

• win.loadFile('index.html') 을 다음과 같이 변경합니다.

win.loadURL('http://localhost:3000')

실행화면

동영상 강의

https://youtu.be/g71mHJVbEzY

보일러플레이트를 사용하면 이전에 만들었던 일렉트론 프로젝트를 보다 쉽게 만들 수 있습니다.

사용법은 다음과 같습니다.

npx create-electron-app "프로젝트명"

npx create-electron-app electron-app
cd electron-app

VS Code를 실행합니다.

code .

npm 패키지를 설치합니다.

• 메뉴에서 터미널 - 새터미널을 선택합니다.
• npm install 스크립트를 실행합니다.

npm install

프로젝트 폴더 구조는 다음과 같습니다.

다음 스크립트로 프로젝트를 실행합니다.

yarn start or npm start

실행 화면은 다음과 같습니다.

VSCode에 npm을 설치하면 보다 보다 쉽게 프로젝트를 실행할 수 있습니다.

• 왼쪽 메뉴바에서 확장을 선택합니다.

• 검색창에 "npm"을 입력합니다.

• egamma의 npm을 설치합니다.
• 보기 - 명령팔레트 메뉴를 선택합니다.
• 입력창에 "npm"을 입력합니다.

• "Npm 스크립트 보기에 포커스"를 선택합니다.
• 탐색기 하단에 "NPM 스크립트"라는 메뉴가 추가되었습니다.

• start 스크립트 옆에 마우스를 가져가면 실행 버튼이 나타납니다.
• 실행버튼을 클릭하면 스크립트가 실행됩니다.

이제 일렉트론 프로젝트를 쉽고 빠르게 만들고 실행할 수 있게 되었습니다.

남는 시간은 잠시 쉬었다 하시길 바랍니다.^^

이 글의 동영상 강의

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)