사소한것부터 바꾸자

vite.config.js 설정 (1)

뷰베 — Wed, 27 Apr 2022 17:19:45 +0900

https://vitejs-kr.github.io/guide/why.html#the-problems

Vite를 사용해야 하는 이유 | Vite

Vite를 사용해야 하는 이유 이런 문제점이 있었어요 브라우저에서 ESM(ES Modules)을 지원하기 전까지는, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 따라서 개발자들은 "번들링(Bundl

vitejs-kr.github.io

vite 방문 하면 첫 페이지에 사용해야 하는 이유가 딱 쓰여져 있습니다.

브라우저에서 ESM(ES Modules)을 지원하기 전까지는, JavaScript 모듈화를 네이티브 레벨에서 진행할 수 없었습니다. 딸라서 개발자들은 '번들링' 이라는 우회적인 방법을 사용할 수 밖에 없었습니다.

*번들링 : 모듈화 된 소스 코드를 브라우저에서 실행할 수 있는 파일로 한데 묶어 연결해주는 작업

.... 하지만 말그대로 1000개 10000개의 JavaScript 모듈이 있는 거대한 프로젝트라면 어떨까요? 실제로 이러한 상황을 어렵지 않게 마주 하고 있습니다.

이러한 상황에서 보다 빠르게 퍼포먼스를 내주는 vite 사용하지 않을 이유는 없겠지요?

vite를 사용하면서 발생했던 여러분들도 곧 마주할 Error 및 오류 부분 들을 소개 해 드립니다. ㅋㅋ

(그냥 제가 업무하면서 나중에 까먹을까봐 메모하는 거에요)

그럼 제일 쉬운 설정부터 시작해서 적어 보겠습니다.

참고할 사항은 저는 vue3 프로젝트에 vite 사용 하였습니다.

1. 배포버전의 console.log 제거

프론트엔드 개발을 진행 하면서 개발자 분들이라면 console.log는 디버깅 용으로 또는 값 확인 용으로 정말 많이 사용 하곤 합니다. 하지만 개발 할 때 여기저기 막 남발한 console.log를 개발 다된 시점에 배포할때 하나하나 찾아서 삭제 할려면 ..... ..... ;;;;; 그러다 한두개라도 중요정보 관련 log를 남기면 .... .... 그땐 정말 ..... .....

그럼 확인하고 삭제 하고 확인하고 주석 하고 그것 또한 귀찮은 일입니다. 정말 꼼꼼하게 삭제 해야 하며 다시 수정하거나 하면 로그를 또 다시 여러번 찍어봐야 하는 일들이 생깁니다.

그럼 이런생각을 하게 됩니다. 개발할때 맘편히 로그 찍고 배포할때 한번에 처리하는 방법이 있다면 실수 없이 배포할때는 그냥 모든 console.log를 제거 해주는 기능이 있다면 얼마나 좋을까 하고 ㅋㅋ 네 있습니다.

이제 설정 들어가지요 vite.config.js 에 아래와 같이

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  //build 시에 모든 console.log를 제거
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  }

})

네 끝났습니다. 고생하셨어요 ^^

이렇게 간단하게 로그를 제거 할 수 있습니다.

로컬 개발 콘솔

서버 배포 콘솔

말그대로 아무런 로그도 없습니다. ㅋㅋ

2. Router dynamic 하게 사용 할 때

개인 프로젝트 이외의 실제 프로젝트에서 Router를 전부 하드 코딩해서 설정해서 사용 하는 경우는 없다고 생각합니다. 로컬에서 개발 테스트 진행할때 잘 작동하던 dynamic router가 build 후 배포하면 작동이 안될 때 정말 당황 스럽습니다. (자기소개 하기 !!) 원일을 찾는데 아무리 찾아도 답이 나오지 않아 정말 힘들 었습니다. 그렇게 헤매고 있다과 vite 가이드 문서를 보면서 차분한 마음으로 테스트 여러 번에 성공 했습니다. 이전 코드와 변경된 코드 아래에 첨부 합니다. 작업하시면서 비슷한 오류 나타나면 참조 하시길 바랍니다.

처음 작성한 dynamic router

- dynamicRoutes.js

export default (paths) => {
  //route 형식 만들기
  const routes = []
  for (const { menuName, menuComponent, menuPath } of paths) {
      routes.push({
        path: `${menuPath}`,
        name: `${menuName}`,
        component: () => import(`@/views/${menuComponent}.vue`)
      });
    }
  return routes
}

- dynamicRoute.js 에서 router에 add 해주면 끝

const routes = dynamicRoutes(resultData);
for(let index; index < routes.lenth; index++) {
	router.addRoute(routes[index]);
}

수정 한 dynamic router

- dynamicRoutes.js

export default (paths) => {
  //route 형식 만들기
  const routes = []
  for (const { menuName, menuComponent, menuGroup, menuPath } of paths) {
      routes.push({
        path: `${menuPath}`,
        name: `${menuName}`,
        component: `${menuGroup}/${menuComponent}.vue`
      });
    }
  return routes
}

- dynamicRoute.js 에서 import.meta.glob 함수를 이용해 모듈을 한 번에 가져올 수 있게 처리

const routes = dynamicRoutes(resultData);
const modules = import.meta.glob('../views/main/*/*/*.vue');
routes.forEach((item) => {
	// debugger
   if (item.path) {
   		const route = {
        path: item.path,
        name: item.name,
        component: modules['../views/main/' + item.component],
   		}
      router.addRoute(route);
   }

* 주의사항 import.meta.glob('../view/main/*/*/*.vue') 이부분 패턴이 위에 component : `${menuGrop}` 이부분이랑

main/하위폴터/하위의하위폴더/vue 파일 이렇게 이해가 안되면 댓글로 ....

https://vitejs-kr.github.io/guide/features.html#glob-import

오케이 오늘은 여기까지

PermissionDeniedException (User denied permissions to access the device's location.) - 오류 해결

뷰베 — Fri, 18 Mar 2022 12:06:49 +0900

geolocator 패키지를 사용해서 사용자의 위치를 가져오는 기능을 구현 테스트 하는데

PermissionDeniedException (User denied permissions to access the device's location.) 이런 오류가 계속 발생을 하게 되어

프로젝트 새로 만들고 https://pub.dev/packages/geolocator

geolocator | Flutter Package

Geolocation plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API for generic location (GPS etc.) functions.

pub.dev

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

위에꺼 넣고 실행 아래꺼 넣고 실행

두개 다 넣고 실행

debug 폴더의 AndroidManifest.xml 에 도 넣고 prifile폴더에도 넣고 별별 방법 다해보고

안되서 AVD 삭제도 해보고 AVD버전도 여러번 변경

geolocator 버전도 변경해보고 다 해보았으나 결국 실패!

여기 저기 검색 하다가

드디어 해결 방법을 찾았다!

LocationPermission permission = await Geolocator.requestPermission();

요렇게 코드 한줄만 넣어주면 해결!

오늘도 열심히 flutter 공부!

Drawer

뷰베 — Thu, 10 Mar 2022 15:55:59 +0900

좌측 drawer 메뉴 부분

    drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/3.jpg'),
                // backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
              ),
              accountName: Text('BYUBE'),
              accountEmail: Text('jeffkim@korfinholdings.co.kr'),
            )
          ],
        ),
      ),

위에 헤더 부분 편집 라운드 효과 및 정보 펼치기 버튼 추가 ( 현재는 console 에 글씨만 출력 되게 입력)

   drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/3.jpg'),
                // backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
              ),
              accountName: Text('BYUBE'),
              accountEmail: Text('kangjunne@naver.com'),
              onDetailsPressed: (){
                print('아래로 펼쳐라');
              }, //클리후 아래로 펼쳐지기
              decoration: BoxDecoration(
                color: Colors.purple[200],
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0)
                )
              ),
            )
          ],
        ),
      ),

ListTile

    drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/3.jpg'),
                // backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
              ),
              otherAccountsPictures: [
                CircleAvatar(
                  backgroundImage: AssetImage('assets/1.jpg'),
                ),
              ],
              accountName: Text('BYUBE'),
              accountEmail: Text('kangjunne@naver.com'),
              onDetailsPressed: () {
                print('아래로 펼쳐라');
              }, //클리후 아래로 펼쳐지기
              decoration: BoxDecoration(
                  color: Colors.purple[200],
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(40.0),
                      bottomRight: Radius.circular(40.0))),
            ),
            ListTile(
              leading: Icon(
                Icons.home,
                color: Colors.grey[850],
              ),
              title: Text('Home'),
              onTap: (){ //tap 했을때 기능
                print('Home is clicked');
              },
              trailing: Icon(Icons.add), // + 아이콘 추가
            ),
            ListTile(
              leading: Icon(
                Icons.settings,
                color: Colors.grey[850],
              ),
              title: Text('Setting'),
              onTap: (){ //tap 했을때 기능
                print('Setting is clicked');
              },
              trailing: Icon(Icons.add), // + 아이콘 추가
            ),
            ListTile(
              leading: Icon(
                Icons.question_answer,
                color: Colors.grey[850],
              ),
              title: Text('Q&A'),
              onTap: (){ //tap 했을때 기능
                print('Q&A is clicked');
              },
              trailing: Icon(Icons.add), // + 아이콘 추가
            ),
          ],
        ),
      ),

App bar Icon Button

뷰베 — Thu, 10 Mar 2022 15:31:09 +0900

leading: 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때
actions: 복수의 아이콘 버튼 등을 오른쪽에 배치할 때
onPressed: 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의

    appBar: AppBar(
        title: Text('Appbar icon menu'),
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            print('menu button is clicked');
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_cart),
            onPressed: () {
              print('shopping_cart button is clicked');
            },
          ),
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              print('search button is clicked');
            },
          ),
        ],
      )

1. Jenkins_Centos 7 설치

뷰베 — Thu, 21 Oct 2021 23:46:46 +0900

두서 없이 또 시작 해볼게요

요즘 핫한 jenkins 설치 시작 하겠습니다.

왜 사용 하냐구요? 설치 다하고 알려드림 ㅋㅋ

그냥 핫한데는 이유가 있고 공부 하세요

우선 centos 7 에 jdk 설치 되어 있다는 가정하에 시작 하겠습니다.

$ sudo yum install wget  //wget  있으면 굳이 설치 안해도 
$ sudo yum upgrade       //upgrade 안해서 설치 안되는 경우를 많이 보았음
$ sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
$ sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key
$ sudo yum install epel-release # repository that provides 'daemonize'
$ sudo yum install jenkins

위 순서대로 설치를 진행하면 깔끔하게 설치가 될 것

설치후

//젠킨스 설치 되었는지 확인
# rpm -qa | grep jenkins
jenkins-2.303.2-1.1.noarch

//젠킨스 실행(전 오류 발생)
# systemctl start jenkins
Job for jenkins.service failed because the control process exited with error code. See "systemctl status jenkins.service" and "journalctl -xe" for details.

//젠킨스 실행 오류 확인
# systemctl status jenkins.service
● jenkins.service - LSB: Jenkins Automation Server
   Loaded: loaded (/etc/rc.d/init.d/jenkins; bad; vendor preset: disabled)
   Active: failed (Result: exit-code) since 금 2021-10-22 08:24:00 KST; 22s ago
     Docs: man:systemd-sysv-generator(8)
  Process: 21164 ExecStart=/etc/rc.d/init.d/jenkins start (code=exited, status=1/FAILURE)

10월 22 08:24:00 localhost.localdomain systemd[1]: Starting LSB: Jenkins Automation Server...
10월 22 08:24:00 localhost.localdomain jenkins[21164]: Starting Jenkins File "/usr/bin/java" is not executable. // 자바를 못찾네
10월 22 08:24:00 localhost.localdomain jenkins[21164]: [실패]
10월 22 08:24:00 localhost.localdomain systemd[1]: jenkins.service: control process exited, code=exited status=1
10월 22 08:24:00 localhost.localdomain systemd[1]: Failed to start LSB: Jenkins Automation Server.
10월 22 08:24:00 localhost.localdomain systemd[1]: Unit jenkins.service entered failed state.
10월 22 08:24:00 localhost.localdomain systemd[1]: jenkins.service failed.

그럼 자바를 찾아 줘야 겠죠?

# which java
/usr/local/lib/jdk1.8.0_301/bin/java

자바를 찾고 경로 복사

# vi /etc/init.d/jenkins
// 아래 부분 찾아서 맨아래에 
// 복사한 자바 경로 붙여넣기
candidates="
/etc/alternatives/java
/usr/lib/jvm/java-1.8.0/bin/java
/usr/lib/jvm/jre-1.8.0/bin/java
/usr/lib/jvm/java-11.0/bin/java
/usr/lib/jvm/jre-11.0/bin/java
/usr/lib/jvm/java-11-openjdk-amd64
/usr/bin/java
/usr/local/lib/jdk1.8.0_301/bin/java
"
:wq 저장하고

// 다시 실행
# systemctl start jenkins
Warning: jenkins.service changed on disk. Run 'systemctl daemon-reload' to reload units.
# systemctl daemon-reload
# systemctl status jenkins.service
● jenkins.service - LSB: Jenkins Automation Server
   Loaded: loaded (/etc/rc.d/init.d/jenkins; bad; vendor preset: disabled)
   Active: active (running) since 금 2021-10-22 08:29:52 KST; 36s ago
     Docs: man:systemd-sysv-generator(8)
   CGroup: /system.slice/jenkins.service
           └─21228 /usr/local/lib/jdk1.8.0_301/bin/java -Djava.awt.headless=true -DJENKINS_HOME=/var/lib/jenkins -jar /usr/lib/jenkins/jenkins.war --logfile=/var/log/jenkins/jenkins.log --webroot=/var/c...

10월 22 08:29:52 localhost.localdomain systemd[1]: Starting LSB: Jenkins Automation Server...
10월 22 08:29:52 localhost.localdomain jenkins[21224]: Starting Jenkins [  OK  ]
10월 22 08:29:52 localhost.localdomain systemd[1]: Started LSB: Jenkins Automation Server.

조금 꼼꼼한 분들은 바로 눈치 채셨겠지만 위에는 $ 아래는 #

계정의 차이입니다. ㅋㅋ 다들 아시는 내용 이라 그냥 생략

어제 기본 설치 글 올리고 뭔가 아쉬워서

오류 부분도 끄적여서 다시 수정 해 봅니다.ㅋㅋ

요번장은 가볍게 설치 부분 정리 하였고 다음장은 설치후 접속해서 초기 설정

끄적여 보겠습니다.

Google-OAth2 - refreshToken 값 받기 2

뷰베 — Fri, 23 Oct 2020 13:26:52 +0900

https://changeminor.tistory.com/9

Google-OAth2 - refreshToken 값 받기 1

Google API를 사용함에 있어서는 OAth2 를 모르고 refreshToken 값을 받을 줄 모른다면 그냥 googleapi를 사용 할 수 없다고 생각하는게 맞다! 그래서 이 글을 포스팅한다 물론 고수님들은 너무 쉽게 연동하

changeminor.tistory.com

1부분 완성 했다면 이제 2부분으로 가야겠지?

시작 해보자!

API 사용해보기 클릭 해주고

Guides 클릭하고

Authorize Requests 클릭

Scope에 URL 하나 복사 해서 메모에 저장 (조금 이따가 사용할예정)

그리고 OAuth 2.0 documentation 클릭

OAuth 2.0 Scopes 클릭 해주고

서버측 웹 앱용 OAuth 2.0 클릭 하고 드래그 해서 위 사진 처럼 Authorize Code http로 받는 가이드 까지 내려와 주면됨

그냥 사진 과 똑같이 생긴거 나올때까지 드래그 해!

GET 뒤에 https부터 true까지 복사! (그리고 더 드래그 하면 아래에서 사용할 부분이 나옴 !!!! 아래에서는 그냥 위에서 언급한 드래그 드래그 하면 드래그 해서 나오면 드래그 하게되면 나온다 뭐 이정도로 언급 하겠음 우하하하하하하하 글을 꼼꼼히 봐야 한다는거 다시 한번 강조 합니다)

Spring Boot 프로젝트로 돌아와서 jsp 파일 열어주고

<a> 태그 href 에 복사해서 붙여 넣기

scope= 사이 & 여기 사이 값 지워 버리고 redirect_uri 도 똑같이 지워버리고

google에 online url encoding 검색하서

url encoding 해주는 사이트 아무곳이든 상관없으니 들어가서

아까 메모에 적어놓은 값(기억나죠? 막 드래그해서 블로그 보는거 아니죠? 정말 꼼꼼하게 처음 하는 사람이 보아도 알수 있게 적고 있는데 긴 시간을 투자 해서 성의를 봐서라고 기억 해야 되요!!!)

값 넣고 Encode 클릭

그러면 위와 같이 아름답게 Encoding이 될꺼야!

다시 복사해서

scope값에 넣어 주고

이부분은 처음 클라이언트 ID 만들때 부분인데 (잘 기억 나지 않으면 1보고 오세요 링크 맨위에)

url 주소 복사해서 똑같이 Encoding 해주고

redirect_uri 값에 붙여넣으면 끝

인줄 알았으나 아니죠 ㅋㅋ

client_id값도 복사해서 넣어 줘야 진짜 끝!! 인거 같으면서 아니라는거

<a href="https://accounts.google.com/o/oauth2/v2/auth?scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcalendar&access_type=offline&include_granted_scopes=true&response_type=code&state=state_parameter_passthrough_value&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Freturngood&client_id=296274828209-jgo80b1mb6aeltl05j9sc7dkvfl920pd.apps.googleusercontent.com">구글 API 사용 인증</a>

a태그에서 href 줄바꿈 지원하지 않기 때문에

위와같이 한줄로 정리를 해주어야 진짜 끝

이제 cotroller에서 /login url 받아서 해당 jsp로 갈수 있게 해주고

/returngood 도 설정해주고 reciveCode.jsp 파일 더 만들어주고 해당 jsp로 가게끔 설정 해주면 끝

1에서도 언급은 했지만 바로 이부분 구글에서 Authorize 값을 받기 위한 url 임으로

/원하는 url 만들어서 원하는 jsp파일에서 받으면 됨(spring-boot) 타 프로젝트는 바로 해당 html 파일 또는 php 파일 주소를 넣어 줘도 상관없다는거 해당 값을 clientid 만들때 리디렉션 url에 넣어 주고 해야 함

(이부분 잘 모르면 아래링크통해서 공부 하고 오세요! git에 소스 공유 해놀게요 )

2020/09/04 - [Spring-Boot] - [Spring-Boot]네이버 REST API 사용법 - 1(파파고번역)

자 이제 클릭을 신나게 해보겠습니다.

위사진 순서대로 쭈~욱~ 클릭 하다보면 마지막 여기까지 오게 될꺼야

url 보면 뭐가 막 값이 적혀서 오는데 위에서 설정한 reciveCode.jsp로 돌아 오게 되지요 저기서 중요한 부분은 바로 code=값 바로 이 값이며 해당 값은 1회용으로 한번생성되고 url 벗어나거나 브라우저 끄고 다시 켜서 재사용 불가 다시 받아서 사용해야 하니 메모 하거나 하지 말고 잘 되는지 code값이 받아 져 왔는지 확인 만 하면 끝!

잘되면 아래 부분 진행 안되면 다시 위로 올라가서 확인 하고 오시길

자 위에서 언급한 드래그 드래그 기억나면 바로 드래그 해서 위사진 찾아!

내용 복사해서

바로 여기 reciveCode.jsp로 고고

a태그는 로그인하러 가기 위함 (우린 개발자니 편하게 일을 해야져~)

form 태그 만들고 위에서 처럼 주저리 주저리 적어주고 드래그 한 내용 참조해서 작성한거니

붙여넣고 잘 만들어

redirect_uri post로 form태그 전송할때는 자동 encoding 되니 굳이 안하셔도 됨 하면 에러!!!

그래도 친절하게 /returngood url 관련 적어본다 이렇게 Cotroller에 적으라는 뜻

properties파일(yml파일) 에 값을 입력을 .... 그냥 지난글 naver api를 보고 오길....

그정도 정성도 없으면 개발을 하지 않는게 좋을것 같다

자 다시 http://localhost:8080/login 부터 쭈욱 내려오다 보면

위사진 처럼 code에 값을 자동으로 받을 것이고

제출 버튼 누르기 전에 마지막으로 client_id, client_secret 값을 입력하고

제출 버튼 클릭하면

이렇게 refresh_token 값을 받아 오게 될것이다.

축하한다 드디어 구글의 Calendar api를 사용할수 있는 token 값을 받았다

refreshtoken값은 딱 한번 발급되고 위 과정을 다시 실행하면 access_token 값은 항시 바뀌는데 더이상 refresh_token값은 나타 나지 않으므로 메모에 잘 적어두길

다시 발급 받을려면 아래에 있는 내용따라 권한 삭제 하고 다시 발급 받으면 된다

myaccount.google.com/permissions

로그인 - Google 계정

하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인

accounts.google.com

링크도 친절하게 적어두고

과정설명도 이정도면 뭐 ... ㅋㅋ

역시 난 친절해

다음에는 google의 라이브러리에 대해 또 설명을 해보겠다.

아마 광고업체나 키워드광고 대행업체에서 제일 궁금해 하는 부분일텐데 ㅋㅋ

오케이 그냥 포스팅 해주지 !!

어차피 나도 공부가 되고

java 버전의 구글의 예제를 실제로 사용하는 방법

키워드 가져와서 지우고 소재생성

ads.properties 에 client id, client secret 등을 DB에 저장해놓고

접속하는 업체별로 자동 DB에서 가져와서 접속하는 방법등을 업로드 하겠다.

코드도 길고 내용도 많아서 정리 하는데 시간이 좀... 그래도 복습이라고 생각하고 올려야지

나도 사람이니 메모는 습관처럼 !! 그럼 이번 포스팅은 여기서 마무으리! <- 너무 옛날사람? ㅋㅋㅋ

Google-OAth2 - refreshToken 값 받기 1

뷰베 — Thu, 22 Oct 2020 11:29:49 +0900

Google API를 사용함에 있어서는 OAth2 를 모르고 refreshToken 값을 받을 줄 모른다면

그냥 googleapi를 사용 할 수 없다고 생각하는게 맞다!

그래서 이 글을 포스팅한다

물론 고수님들은 너무 쉽게 연동하여 잘 사용 할텐데

그렇지 않은 사람이 더 많기 때문에

자 그럼 시작!

Google Cloud Platform에 가입상 상태로 진행 한다고 가정하고 시작(가입해서 프로젝트 생성 관련 잘 모르시면 댓글 남겨 주세요)

console.cloud.google.com/home

Google Cloud Platform

하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.

accounts.google.com

URL 타고 들어오면 위 사진 화면이 나온다 여기서 API 및 서비스 -> OAuth 동의 화면 클릭

애플리케이션 이름 적어주고

나무지 1도 안적어도 되니 그냥 저장

그러면 이렇게 OAuth동의 화면이 생성

이제 사용자인증정보를 만들어 보자

위사진처럼 사용자인증정보 클릭 -> 사용자 인증 정보 만들기 클릭

OAuth 클라이언트 ID 클릭

웹 애플리케이션 클릭!

이름을 넣고 리디렉션 URL 넣고 만들기 클릭!

여기서 승인된 리디렉션 URL은

google에 refreshToken 값 받기 위해 승인 요청을 해야 하는데 승인되고 돌아올 주소를 뜻한다

위에 적은 url은 프로젝트 돌아가면 다시 언급 할텐데 미리 만들어 놓았으니 똑같이 하셔도 되고

헷갈리면 그냥 아무값도 적지 말고 나중에 수정해도 무방하다

단 http://127.0.0.1:8080/ <---- 이렇게 IP 주소는 입력이 불가 하다. localhost를 하던 아니면

다른 데서 서버 연결하여 받고 싶다 싶으면 호스팅해서 .com 또는 .org 등 url 주소를 입력해야만 한다 이점 참고 바람

드디어 OAuth 클라이언트 생성이 완료!

여기서 클라이언트 보안 비밀번호는 절대로 노출하면 안된다!

라이브러리 클릭하고

사용할 API를 검색하고

테스트로 구글 Calendar api를 연결 해 보겠다

위사진 순서대로 검색 클릭 클릭 하면

마지막 사진처럼 나오면 성공

[Spring-Boot] js,css파일 jsp파일 외부로 빼기

뷰베 — Thu, 22 Oct 2020 09:37:13 +0900

개발을 하다 보면 jsp 파일에 <script> function(){ }</script> 이렇게 막 코딩 할때가 있다.

정말 지저분하고 코드가 보기도 불편하고 유지보수 하기도 힘들다

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
	$(function() {
		$("#chinese").click(function(){
			var ko = $("#korean").val();
			$.ajax({
				url:"/chinese",
				type:"GET",
				dataType:"json",
				data:{korean:ko},
				success:function(v){
					console.log(v);
				},error:function(e){
					console.log(e);
				}
			});
		});
		$("#english").click(function(){
			var ko = $("#korean").val();
			$.ajax({
				url:"/english",
				type:"GET",
				dataType:"json",
				data:{korean:ko},
				success:function(v){
					console.log(v);
				},error:function(e){
					console.log(e);
				}
			});
		})
	});
</script>
<title>항상테스트부터</title>
</head>
<body>
	<h1>성공이다!!!!</h1>
		<table border="1">
			<thead>
				<tr>
					<th>한국어</th>
					<th>중국어</th>
					<th>영어</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="text" id="korean" name="korean"></td>
					<td width="200" height="30" id="china"></td>
					<td width="200" height="30" id="english"></td>
				</tr>
			</tbody>
		</table>
		<input type="button" id="chinese" value="중국어">
		<input type="button" id="english" value="영어">
</body>
</html>

지난 REST API 파파고 에서 코드 이런식으로 하나의 JSP 파일에 JS도 함께 코딩 하였는데

오늘은 그 JS를 외부로 빼서 JavaScript 파일로 만들어 외부 폴더에 저장하여 사용하는 방법을 적어 보겠다.

https://changeminor.tistory.com/2?category=1147357

[Spring-Boot]네이버 REST API 사용법 - 1(파파고번역)

2019년 12월 처음으로 국비로 학원을 다니면서 for문 무엇인지 몰라서 한참을 헤매던 그날이 바로 엊그제 같은데 어느새 취직을해서 api를 활용하여 프로젝트를 만들다니 세월이 진짜 빠르구나 싶

changeminor.tistory.com

위의 1~4 까지 해서 만들어 놓은 코드 활요해서 작성할 예정이니 참조 하시길 (GIT URL로 있습니다. 마구 가져다 사용 하세요)

우선 application.yml 파일을 열고

spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/ 
      suffix: .jsp
    static-path-pattern: /resources/**

static-path-pattern: /resoures/** 를 추가 해준다

그리고

resoures폴더에

static/js 폴더를 차례대로 만들어 주고

마지막으로 js폴더에 javascript 파일을 만들어 준다 (js파일을 javascript 파일인지 모르고 막 찾는 사람이 있었다. 본인이라고 말은 하지 않겠다. ㅋㅋ )

그리고

jsp 파일로 돌아와서

코드를 복사해서

위 사진처럼 js파일에 전부 붙여 넣고 저장

다시 jsp 파일로 돌아와서

사진처럼 코드를 넣어 주면 된다.

<script src="/resources/js/papago.js"></script>

여기서 설명을 간단하게 하자면

src는 루트 이며 해당 루트의 파일을 연동 하겠다 뭐 대충 그런 뜻이다

코드가 많이 깨긋해 진거 같으니 기분이 좋다

오늘은 가볍게 여기까지 포스팅을 하겠다.

도움이 되었다면

댓글은 바라지도 않음 가볍게 하트 정도는 부탁해도 되지 않을까?

시큐어코딩 - 테스트 방법

뷰베 — Mon, 12 Oct 2020 10:51:35 +0900

1. 시큐어코딩(secure coding) 이란?

소프트웨어(SW)를 개발함에 있어 개발자의 실수, 논리적 오류 등으로 인해 SW에 내포될 수 있는

보안취약점(vulnerability)을 배제하기 위한 코딩 기법을 뜻 한다.

2. 시큐어코딩의 국내ㆍ외 배경

SW 개발보안의 중요성을 인식한 미국의 경우, 국토안보부(DHS)를 중심으로 시큐어코딩을 포함한

SW 개발 전과정(설계ㆍ구현ㆍ시험 등)에 대한 보안활동 연구를 활발히 진행하고 있다.

국내의 경우 2009년부터 전자정부서비스 개발단계에서 SW 보안약점을 진단하여 제거하는 시큐어코딩 관련 연구를 진행하면서,2012년까지 전자정부지원사업 등을 대상으로 SW 보안약점 시범진단을 수행하였다.

또한, 2012년 년 6월부터는 행정안전부 '정보시스템 구축ㆍ운영 지침(행안부고시 제2012-25호)'이 개정ㆍ고시 됨에 따라 전자정부서비스 개발시 적용토록 의무화 되었다.

3. 시큐어코딩테스트

본격적인 시큐어코딩 테스트 진행에 앞서 본인은 java 개발자 이기 때문에 java 코드의

시큐어코딩 테스트를 진행과정을 기재 함을 먼저 알린다.

spring, springboot 혹은 기타 프레임워크 전부 상관없이 java로 코딩한 경우 전부

아래와 같이 진행 가능 본인은 지난 네이버 REST FULL API 코드로 시큐어코딩 테스트 진행 할 예정이며

시큐어코딩 테스트에서 나타나는 몇가지 보안 취약점도 어떻게 해결 하는지 이제 차근차근 적어 보겠다.

2020/09/04 - [Spring-Boot] - [Spring-Boot]네이버 REST API 사용법 - 1(파파고번역)

[Spring-Boot]네이버 REST API 사용법 - 1(파파고번역)

2019년 12월 처음으로 국비로 학원을 다니면서 for문 무엇인지 몰라서 한참을 헤매던 그날이 바로 엊그제 같은데 어느새 취직을해서 api를 활용하여 프로젝트를 만들다니 세월이 진짜 빠르구나 싶�

changeminor.tistory.com

시큐어코딩테스트 프로그램은 아래 링크를 타고 가서 받으면 된다.

https://sourceforge.net/projects/yasca/files/Yasca%202.x/Yasca%202.2/

Yasca - Browse /Yasca 2.x/Yasca 2.2 at SourceForge.net

VPN은 해킹을 방지하고 온라인 트래픽 흐름을 위한 암호화된 터널이라고 상상해 보세요. 아무도 터널 안을 통해 볼 수 없으며 사용자의 인터넷 데이터를 손에 넣을 수 없습니다. NordVPN은 공용 Wi-

sourceforge.net

yasca-core-2.21, yasca-2.2-jlint 두가지 다운 받으면 된다.(java)만 진행 할 예정이라

압축을 풀어 주고 yasca-core-2.21 폴더에 yasca-2.2-jlint 폴더를 넣어준다.

yasca-core-2.21폴더위치를 복사하고 명령어 입력창 cmd를 킨다.

cmd창에 cd yascs-core-2.21폴더위치 입력

아래와같이 해당 폴더로 이동 했는지 확인

이동 되었다면

아래와 같이 설치를 실행

해당 부분은 최초에 딱 한번만 해주면 되고 앞으로 할일을 없음

yasca --debug 일렵 해주면 된다.

그럼 cmd창이 무한루프 걸린것 마냥 계속 무슨 작업을 할 것이다.(본인은 10분정도 걸린것으로 생각남 진짜 무한루프 걸린줄 알았음)

끝나면 이제 본격적인 테스트 진행 하면 된다.

테스트 진행할 java소스가 들어 있는 폴더위치를 복사 하고

아래와 같이 yascs --px jlint 폴더위치

입력하면 끝

나는 바탕화면에 설치해서 그런지 바타화면에 생성됨

폴더를 열고 파일 실행하면

이렇게 시큐어코딩 취약점 확인 가능 하다.

취약점 해결은 system.out.println 은 지우거나 log를 사용권장

나머지 취약점은 다음에 올리도록 하겠다.

여기까지 시큐어코딩 테스트

Properties 파일 활용하기

뷰베 — Tue, 29 Sep 2020 11:55:46 +0900

SpringBoot FramWork를 사용한다면 properties파일을 다들 한번씩 들어 보셨을텐데

참 처음 공부 하는 입장에선 해당 파일에 값을 입력하고 입력한 값을 사용하면 은폐도되고

편하게 사용 할텐데 어떻게 값을 불러와서 사용하는지 몰라서 난감 합니다. (물론 고수님들은 잘 사용하고 있겠지요)

properties 파일에 저장해서 캡슐화해서 DB에서 불러 오지 않아도 나름 안전하게 저장된 값을 가져오니 꼭 사용하고

싶은데 어떻게 사용하면 좋을지 몰라서 답답한 저같은 초보를 위해 적어 봅니다.

1. 클래스를 하나 만들고 아래의 코드를 입력 합니다.

import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;

public class PropertiesLoader {
	public static Properties fromResource(String resource) throws IOException {
		try (InputStream input = classLoader().getResourceAsStream(resource)) {
			if (input == null) {
				throw new FileNotFoundException(resource);
			}
			Properties properties = new Properties();
			properties.load(input);
			return properties;
		}
	}

	private static ClassLoader classLoader() {
		ClassLoader loader = Thread.currentThread().getContextClassLoader();
		return loader == null ? PropertiesLoader.class.getClassLoader() : loader;
	}
}

그리고

사용할 부분에 가서

불러오면 되는데

지난 Naver Rest Api 활용해서 설명 해 드리겠습니다.

번역부분 소스를 살짝 정리를 했습니다.

조금 더 간결하고 보기 좋게 정리를 하였는데 바로 이부분 입니다.

// 영어번역(Naver Rest Api)
	@Override
	public String getEnglish(MysecretDto msd) {
		String apiURL = "https://openapi.naver.com/v1/papago/n2mt";
		String result = "";
		try {
			Properties properties = PropertiesLoader.fromResource("api.properties");
			String clientId = properties.getProperty("clientId");
			String clientSecret = properties.getProperty("clientSecret");
			HttpPost post = new HttpPost(apiURL);
			post.addHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
			post.addHeader("X-Naver-Client-Id", clientId);
			post.addHeader("X-Naver-Client-Secret", clientSecret);
			StringBuilder json = new StringBuilder();
			json.append("source=ko&target=en&text=" + msd.getKorean());
			post.setEntity(new StringEntity(json.toString(), "UTF-8"));
			CloseableHttpClient httpClient = HttpClients.createDefault();
			CloseableHttpResponse response = httpClient.execute(post);
			result = EntityUtils.toString(response.getEntity(), StandardCharsets.UTF_8);
			response.close();
			httpClient.close();
		} catch (Exception e) {
			result = e.getMessage();
		}
		return result;
	}

위부분 확인 해보시면 Properties properties = PropertiesLoader.fromResource("api.properties");

이부분이 있어요 여기서 properties파일과 연결을 해줍니다.

("properties 파일명") -> test.peroperties 이와 같이 .properties까지 전부 입력 하셔야 합니다.

그리고

String clientId = properties.getProperty("clientId");

이렇게 불러 오는데

getProperty("속성명") 되겠습니다.

그러면 properties 파일 확인 해 볼까요?

이렇게 resoures에 api.properties 파일이 있지요

그리고 api.properties파일에는

이렇게 입력 되어 있습니다.

속성명=adfadsf (*단 ;세미클론은 입력하지 않습니다.)

이렇게 아주 쉽게 properties 파일의 값을 불러와서 사용하는 방법을 알아 보게 되었습니다.

감사합니다.

마지막 저의 git 주소 입니다. 소스 마구 가져다 사용하세요 ㅋㅋ

https://github.com/Byube/NaverRestApi

Byube/NaverRestApi

Contribute to Byube/NaverRestApi development by creating an account on GitHub.

github.com