코드 기어 Code Gear - 개발 강좌

Frontend 개발시에 Device 종류를 알아야 하는 경우가 있습니다.
예를들면, Device 종류가 Mobile 인지 PC 인지에 따라 CSS를 다르게 처리하는 등의 일입니다.

이때 device를 알기 위해서는 @nuxtjs/device 라는 패키지를 사용합니다.

Nuxt3에서 @nuxtjs/device의 셋팅 방법과 사용방법에 대해 알아봅니다.

@nuxtjs/device 패키지 설치

npm 또는 yarn으로 @nuxtjs/device 패키지를 설치합니다.

# npm 사용시
npm install @nuxtjs/device

# yarn 사용시
yarn add @nuxtjs/device

nuxt.config.ts 설정

modules에 @nuxtjs/device를 추가하고, device 설정을 추가합니다.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/device'],
  
  // 기본 device 설정
  device: {
    refreshOnResize: true,  // 창 크기 변경시 디바이스 감지 새로고침
    defaultUserAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36',  // 기본 User Agent
    detectOnInitialize: true  // 초기화시 디바이스 감지
  }
})

플러그인 생성

plugins 폴더에 device.ts 파일을 생성합니다.

export default defineNuxtPlugin((nuxtApp) => {
  const device = useDevice()

  // 디바이스 정보를 전역 상태로 관리하고 싶을 때
  const deviceStore = useState('device', () => ({
    isMobile: device.isMobile,
    isTablet: device.isTablet,
    isDesktop: device.isDesktop,
    userAgent: device.userAgent
  }))

  return {
    provide: {
      deviceInfo: deviceStore
    }
  }
})

사용 방법

device 정보를 가져올 Vue 소스에서 deviceInfo를 선언합니다.

const { $deviceInfo } = useNuxtApp();

$deviceInfo.isMobile 을 사용하여 mobile 여부를 체크할 수 있습니다.

<div class="mobile-css" v-if="$deviceInfo.isMobile"/>

Nuxtjs에서 날짜를 그냥 뿌려주면 다음과 같은 형식으로 나타나게 됩니다.

2022-05-13T22:55:12.000Z

이것을 다음과 같은 형식으로 보여주는 방법에 대해 알아보겠습니다.

2022/05/14

순서는 다음과 같습니다.

• nuxt.config.js에 필터 추가
• plugin 폴더에 filter.js 파일 생성
• vue에서 필터 사용

nuxt.config.js에 필터 추가

nuxt.config.js 파일에서 plugins: [] 에 다음 코드를 추가합니다.

plugins: [
   '~/plugins/filter.js',
],

plugin 폴더에 filter.js 파일 생성

plugin 폴더에 filter.js 파일을 생성하고 다음 코드를 입력하고 저장합니다.

import Vue from 'vue';
import moment from 'moment';

Vue.filter('formatDate', (value) => {
    return moment(String(value)).format('YYYY/MM/DD');
})

vue에서 필터 사용

.vue 파일에서 다음과 같이 입력합니다.

{{createdAt | formatDate}}

createdAt 이라는 필드의 값을 formatDate라는 필터를 적용하라는 뜻입니다.
이렇게 하면 다음과 같은 결과가 나오는 걸 확인 할 수 있습니다.

2022/05/14

이 글의 동영상 강의

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 사이트 도메인이 등록된 것을 볼 수 있습니다.

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

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

React 소스 분석을 위해 에디터는 VSCode(Visual Studio Code)를 사용합니다.

• 우선 VSCode를 실행합니다.
• 메뉴-파일-폴더열기를 선택하고 생성한 프로젝트 폴더를 선택합니다.
  예) C:\workspace\my-first-react-app

• 폴더 구조

• index 페이지 호출 구조

• App.js 분석

이 포스트의 동영상 강의 URL

https://youtu.be/BRDw_rJ74vY

리액트 프로젝트를 만들기

• npx create-react-app s3-react-file-upload

패키지 추가

• npm i aws-sdk
• npm i reactstrap

컴포넌트 생성

• S3Upload.js

코드 작성

• import

import './App.css';
import {useState} from "react";
import AWS from 'aws-sdk';
import { Row, Col, Button, Input, Alert } from 'reactstrap';

• 변수 선언

const [progress , setProgress] = useState(0);
const [selectedFile, setSelectedFile] = useState(null);
const [showAlert, setShowAlert] = useState(false);

• s3 정보를 설정합니다.

const ACCESS_KEY = 'IAM의 ACCESS KEY';
const SECRET_ACCESS_KEY = 'IAM의 SECRET ACCESS KEY';
const REGION = "ap-northeast-2";
const S3_BUCKET = 'codegear-react-file-upload-test-bucket';

AWS.config.update({
  accessKeyId: ACCESS_KEY,
  secretAccessKey: SECRET_ACCESS_KEY
});

const myBucket = new AWS.S3({
  params: { Bucket: S3_BUCKET},
  region: REGION,
});

• 파일 선택시 function

const handleFileInput = (e) => {
  const file = e.target.files[0];
  const fileExt = file.name.split('.').pop();
  if(file.type !== 'image/jpeg' || fileExt !=='jpg'){
    alert('jpg 파일만 Upload 가능합니다.');
    return;
  }
  setProgress(0);
  setSelectedFile(e.target.files[0]);
}

• upload 버튼 click시 function

const uploadFile = (file) => {
  const params = {
    ACL: 'public-read',
    Body: file,
    Bucket: S3_BUCKET,
    Key: "upload/" + file.name
  };
  
  myBucket.putObject(params)
    .on('httpUploadProgress', (evt) => {
      setProgress(Math.round((evt.loaded / evt.total) * 100))
      setShowAlert(true);
      setTimeout(() => {
        setShowAlert(false);
        setSelectedFile(null);
      }, 3000)
    })
    .send((err) => {
      if (err) console.log(err)
    })
}

html

 return (
    <div className="App">
      <div className="App-header">
        <Row>
          <Col><h1>File Upload</h1></Col>
        </Row>
      </div>
      <div className="App-body">
        <Row>
          <Col>
            { showAlert?
              <Alert color="primary">업로드 진행률 : {progress}%</Alert>
              : 
              <Alert color="primary">파일을 선택해 주세요.</Alert> 
            }
          </Col>
        </Row>
        <Row>
          <Col>
            <Input color="primary" type="file" onChange={handleFileInput}/>
            {selectedFile?(
              <Button color="primary" onClick={() => uploadFile(selectedFile)}> Upload to S3</Button>
            ) : null }
          </Col>
        </Row>
      </div>
    </div>
  );

App.css

.App-body {
  background-color: #6d7b97;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-body .alert-message {
  height: 50px;
  background-color: #61dafb;
}

App.js에 S3Upload 컴포넌트 추가

App.js에 S3Upload 컴포넌트를 추가합니다.

  return (
    <S3Upload/>
  );

빌드

터미널에서 다음 스크립트를 실행합니다.

npm run build
빌드 후 프로젝트폴더/build에 생성 된 파일들

s3에 애플리케이션 업로드

build 폴더 아래에 있는 모든 파일을 s3에 업로드합니다.

index.html URL 확인

index.html을 클릭해서 속성의 url을 확인한 후 브라우저에서 실행합니다.

권한 설정 변경

아래와 같이 접근오류가 발생할 경우

s3에 업로드한 모든 파일을 선택후 -> 퍼블릭으로 설정해줍니다.

최종화면

다시 index.html에 접속해보시면 다음과 같이 화면이 나옵니다.

이 포스트의 동영상 강의 URL

https://youtu.be/-BmF30R_erk

AWS의 S3는 단순 Storage 제공 서비스입니다.

EC2와 같이 프로그램을 실행시킬 수는 없고, 파일을 업로드하거나 html과 같은 정적 페이지는 서비스 할 수 있습니다.

React로 file upload 기능을 하는 애플리케이션을 S3에서 서비스 하는 기능을 만들어보겠습니다.

S3 버킷 만들기

• aws에 로그인 한 후 검색창에 s3를 입력합니다.
  S3를 선택합니다
  

  

• 버킷 만들기를 클릭합니다.
  

  

• 버킷 이름을 입력합니다. (버킷 이름은 리전을 통틀어 유일한 이름만 사용 가능합니다)
  버킷 이름 : codegear-react-file-upload-test-bucket
  

  

• 테스트용도이므로 퍼블릭 액세스 차단 설정을 해제합니다.
  

  

• 버킷 만들기를 클릭합니다.
  아래와 같이 버킷이 만들어 집니다.
  

  

• 버킷 이름을 클릭하면 파일 업로드를 할 수 있는 화면이 나옵니다.
  

  

• 권한-CORS에 다음을 입력합니다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

• 이제 S3의 사용 준비가 완료되었습니다.

이 포스트의 동영상 강의 URL

https://youtu.be/rX_c3DXvG2g

React 개발을 위한 IDE(Integrated Development Environment, 통합개발환경)로 Visual Studio Code를 많이 사용합니다. 

Visual Studio Code는 Microsoft에서 개발한 오픈소스이고, 무료로 사용 가능합니다.

VSCode 설치

https://code.visualstudio.com/

Visual Studio Code 사이트에서 Download 하여 설치하면 됩니다.

프로젝트 폴더 열기

• 메뉴-파일-폴더열기를 선택합니다.
  지난시간에 만든 C:\workspace\my-first-react-app 폴더를 선택 후

프로그램 실행

• 메뉴-터미널-새터미널

• npm start

• 아래와 같이 브라우저가 실행됩니다.

이 포스트의 동영상 강의 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. 브라우저가 실행되고 아래와 같은 화면이 나오면 성공입니다!!!
   

   

이 포스트의 동영상 강의 URL

https://youtu.be/dz4wdxZGycs

NodeJS란?

• Nodejs는 브라우저에서만 실행되던 Javascript를 브라우저 없이 단독으로 실행할 수 있게 해 주었습니다.
• 이로인해 Javascript로 클라이언트 프로그래밍 뿐만 아니라 서버 프로그래밍이 가능해졌습니다.
• Nodejs와 함께 설치되는 NPM - Node Package Manager를 이용하면 각종 Javascript 라이브러리를 손쉽게 설치할 수 있습니다.

NodeJS 설치

• https://nodejs.org/

• nodejs 사이트를 방문후 LTS 버전을 설치합니다.
  LTS 버전은 안정화 버전입니다.
• nodejs 설치 확인
  cmd 창에서 node -v를 실행합니다.