• 복사를 여러개 해둘 수 있다. 꿀 단축키

Win + V

• Win + V 키를 누르면 클립보드 창이 나온다
• 아마 이 기능을 처음 사용한다면, 클립보드를 시작할 것인지 물어보는데 버튼을 눌러 시작할 수 있다
• Ctrl + C 나 Print Screen키를 누를때마다 클립보드에 새로이 추가된다

1
2
3
4
5
6
7
8

pathname = null;
robot = null;
screencapture = null;
file = null;
str = null;
p = null;
d = null;
System.gc();

• 내가 원할 때 가비지 컬렉터를 호출할 수 있다. System.gc();

상황

• java.awt.Robot 으로 스크린샷을 찍고 이미지 파일로 저장하는 로직이 있었다
• 이거를 runnable jar로 익스포트하고 실행해사 잘 사용하고 있었는데
• 스크린샷을 찍는 함수가 실행될 때마다 메모리가 20mb 씩 증가했다…
• 함수가 끝낼 때에 맞춰서 사용한 변수들을 전부다 null을 대입했는데도 해결되지 않았다

해결

• 마지막에 가비지 컬렉션을 호출함으로써 메모리가 폭풍증가하지 않게되었다

• 나는 C > C++ > java > js 순으로 배웠다
• 요즘은 쭉 nodejs에서 npm, package.json 을 통해 모듈을 쉽게 설치하고 관리하였다
• 오랜만에 java로 돌아오니까 외부 라이브러리를 임포트 할 때 불편하게 느껴졌다
• gradle의 이론이 대해서는 자세히 모르지만,
• 이전에 build.gradle파일을 통해 라이브러리를 설치한 기억이 있어서
• gradle 프로젝트를 생성, 사용해보았다

gradle 설치

• Windows에 Gradle 설치하기 by Jeongjin Kim 를 보고 따라 했다

• https://gradle.org/releases/ 에 들어가서 garadle을 다운로드한다

• Download: binary-only or complete 인데 나는 binary-only 를 다운로드하였다

• .zip 파일로 받아지는데 적당한 위치에 압축을 풀어주고

• 환경변수를 세팅한다

• GRADLE_HOME : 그래들 디렉터리 경로 ex) C:\Tools\gradle-6.6.1

• path : %GRADLE_HOME%\bin

• 새롭게 cmd를 열고 gradle -v하여 잘 설치되었는지 확인한다

이클립스에 gradle 플러그인 설치 및 세팅

• Gradle Beginner Tutorial 4 | How to create Gradle Project in Eclipse from Scratch | Windows & Mac 을 보고 따라 했다
• 여기서는 맥, 윈도우 모두 알려주기 때문에 띄엄띄엄 봐야 한다

• Help > Marketplace 로 들어가 gradle을 검색한다
• 코끼리 모양의 아이콘을 가진 Buildship Gradle Integration 3.0 을 인스톨했다
• 이클립스 재시작

• Window > Preferences 로 들어간다
• gradle을 검색하고 gradle 경로를 지정해준다
• 여기서 C:\Tools\gradle-6.6.1 환경변수 설정에서 GRADLE_HOME으로 지정했던 경로를 적어준다

• 이제 그래들 프로젝트를 생성해보자
• File > new > other 로 들어가 gradle을 검색한다
• gradle project를 선택하고 다음으로 넘어가면 위 화면이 나온다
• next

• Project name 을 적어준다
• next

• next

• 조금 기다리면 된다
• Finish 버튼이 활성화 되면 클릭

• build.gradle 파일에서 원하는 라이브러리를 명시하고
• 참고 ; gradle로 외부 라이브러리 설치하기

• build.gradle을 우클릭하고 Gradle > Refesh Gradle Project 를 누르면 외부 라이브러리들이 설치된다
• 설치된 라이브러리들은 이클립스 익스플로러에서 Project and External Dependencies에서 확인할 수 있다

참고

• Windows에 Gradle 설치하기 by Jeongjin Kim 를 보고 따라 했다
• Gradle Beginner Tutorial 4 | How to create Gradle Project in Eclipse from Scratch | Windows & Mac 을 보고 따라 했다

• gradle로 외부라이브러리 설치하기
• gradle project 에서 runnable jar 생성하기

• web 개발하면서 샘플 이미지를 넣어보고 싶을 때

Placeholder.com

• https://placeholder.com/#How_To_Use_Our_Placeholders <- 사용법

1
2

<img src="https://via.placeholder.com/468x200?text=Sample+Image" />
<img src="https://via.placeholder.com/{가로}x{세로}?text={문자열}" />

sysout

• ctrl space

favicon

logo

avatar

• 깔끔하게 코드 공유하기, 숨겨야하는 파일 숨기기!

따라하기

준비물

• 깃허브 데스크탑
• 이클립스 (java IDE)

샘플 자바 프로젝트 만들기

• 이런 구조의 자바 프로젝트가 있다
  .
  ├── .settings
  │ └── org.eclipse.jdt.core.prefs
  ├── bin
  │ ├── HelloWorld.class
  │ └── Tmp.class
  ├── src
  │ ├── HelloWorld.java
  │ └── Tmp.java
  ├── .gitignore
  ├── .classpath
  └── .project

• .java 파일은 컴파일 과정을 통해 .class 파일이 된다

• 코드를 공유할때 java파일만 있어도 충분히 공유 받은 사람이 컴파일해서 사용할 수 있다

• .class 파일은 공유할 필요가 없는 것이다

• .gitignore 파일이 빈파일이라고 하면 총 8개의 파일이 트랙된다

.gitignore에 *.class추가하기

1

*.class

• .gitignore 에 위 내용을 추가하면

• 이렇게 .class 파일이 빠지고 6개 파일만 트랙된다
• 이렇게해서 내 로컬에는 남아있지만 깃에서는 무시된다

깃허브 데스크탑에서 gitignore 파일 추가하기

• Tmp.java는 내가 혼자 막 테스트하느라 임시로 생성한 파일이라고 해보자
• 다른사람이 봐도 아무 의미가 없는 파일이라면 .gitignore에 추가해준다

• 깃허브 데스크탑에서 우클릭으로 무시 목록에 추가해보았다

• 그러면 이렇게 자동으로 .gitignore이 업데이트 된다

• 이렇게 Tmp.java가 무시되어 5개만 트랙되는 모습니다

• 이런식으로 특정 파일을 골라서 무시할 수 있다

• 이제 init이라는 커밋 하나를 해보겠다

이미 커밋한 파일 gitignore하기

• HelloWolrd.java를 수정했다.

• 근데 HelloWolrd.java도 .gitignore에 추가해야할 거 같아서 Tmp.java와 같은 방법으로 무시하기를 했는데…

• .gitignore에 분명이 추가되었지만 여전히 트랙되고있다…
• 이미 한번 커밋된적이 있는 파일들을 새로이 .gitignore에 추가했을때 생기는 문제다
• 이럴 때는 터미널에 git rm -r --cached .명령을 통해 캐시를 삭제하고..

1

git rm -r --cached .

• 깃허브 데스크탑으로 돌아와보면 이렇게 제외되있는걸 확인할 수 있다
• 초록색 + 표시는 무시해도된다. 이미 커밋되었지만 캐시가 삭제되서 다시 나타난 거다

여기까지 커밋 내역

팁

• 이렇게 하나씩 수동으로 무시할 파일을 지정하는 방법이 있지만
• 프로젝트 구조가 비슷하기 때문에 사람들이 미리 정의해둔 .gitignore을 쓰면 편리하다

• 깃허브 데스크탑에서 로컬 저장소를 생성할때 gitignore을 설정하는데 그렇게 쓰는 방법도 있고,

• https://www.toptal.com/developers/gitignore 여기서 자신이 어떤 언어를 쓰는지, 어떤 IDE를 쓰는지에 따라서 자동 생성해준다

• https://chinsun9.github.io/TypeDoc-practice/index.html
• TypeDoc으로 문서 생성하고 깃허브에서 보기!

따라하기

• Typescript: generate documentation을 보고 따라하였습니다

TypeDoc 생성하기

샘플 코드 작성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

{
  "name": "typedoc-practice",
  "version": "1.0.0",
  "description": "",
  "main": "index.ts",
  "scripts": {
    "tsc": "tsc",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typedoc": "^0.19.2",
    "typescript": "^4.0.3",
    "typedoc-plugin-nojekyll": "^1.0.1"
  },
  "dependencies": {}
}

• 연습용 디렉터리를 생성하고 위 내용으로 package.json을 생성한다

1

npm i

• 종속성을 설치한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "*": ["types/*"] },
    "target": "ES3",
    "module": "commonjs",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "typedocOptions": {
    "mode": "modules",
    "out": "docs"
  }
}

• 타입스크립트 설정파일 tsconfig.json를 생성한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/**
 * This class keeps track of the version number
 * of your application.
 */
class Status {
  /**
   * This property ...
   */
  public version: number = 0;

  /**
   * This method prints out the current version number
   */
  public showVersion() {
    console.log('version:', this.version);
  }

  /**
   * This method increases the version number with 1
   *
   * @returns the current version number
   */
  public increaseVersion() {
    this.version += 1;
    return this.version;
  }

  /**
   * change the version number to the provided number
   *
   * @param version the number that needs to be used as a version number
   * @returns the current version number
   */
  public changeVersion(version: number) {
    this.version = version;
    return this.version;
  }
}

• index.ts를 생성하고, 독주석을 작성한다
• 나는 Typescript: generate documentation를 참고하여 작성하였다
• javaDoc과 동일한 문법으로 작성하면된다
• 독주석을 작성하고싶은 클래스나 메서드, 변수 위에 /**를 타입하면 독주석 자동완성이 나온다
• 자동완성으로 만들경우에 @param, @returns가 자동완성된다

typedoc 생성하기

• 이제 문서를 생성해보자

1

npx typedoc --out docs

• docs라는 폴더가 생긴다
• docs/index.html 파일을 열어서 잘 만들어졌는지 확인한다
• 이제 깃허브에서 볼 수 있도록 해보자

깃허브에 올리기

• 처음 package.json에 보면 typedoc-plugin-nojekyll 모듈을 설치해줬는데,
• 기본적으로 깃허브 페이지는 지킬 기반으로 동작한다
• 지킬에는 어떤 규칙이 있는데 _로 시작하면 페이지가 안나온다
• typedoc을 통해 생성된 html은 _index_.html 이런식으로 _가 붙는다
• 따라서 docs/ 디렉터리에 지킬을 사용하지 않는다는 것을 알리는 .nojekyll이라는 파일을 만들어놔야한다
• 수동으로 .nojekyll을 추가할 수 있지만, npx typedoc --out docs명령을 쓸때마다 초기화되서 불편하다
• typedoc-plugin-nojekyll 모듈은 이 문제를 해결해준다

.gitignore 추가

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

# Created by https://www.toptal.com/developers/gitignore/api/node
# Edit at https://www.toptal.com/developers/gitignore?templates=node

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# Next.js build output
.next

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# End of https://www.toptal.com/developers/gitignore/api/node

• .gitignore 파일을 만든다. node프로젝트용 무시목록이다

• 깃허브에 저장소를 만들고 푸쉬한다

• 저장소 > 세팅
• master, docs 선택하고 save버튼을 누른다
• 생성된 링크를 클릭해서 잘 동작하는지 확인한다

여기까지 소스코드

• 카카오 이미지 검색 API를 사용해보자

따라하기

• 이미지가 먼저오고 그 아래에 설명이 있습니다!

준비물

• postman

kakao developers 가입하기

• 카카오 api 사용이 처음이라면 kakao developers에 가입해야한다
• 이미 있는 카카오 계정으로 가입할 수 있다

REST API 키 발급받기

• 내 애플리케이션 > 애플리케이션 추가하기 를 눌러준다

• 앱 이름, 사업자명을 입력하고 저장을 눌러준다

• 방금 만든 앱을 클릭하여 앱 키 > rest api 키를 확인한다

POSTMAN으로 확인하기

• 포스트맨을 켜주시고, 아래 텍스트를 복사해 붙여넣어준다

1

https://dapi.kakao.com/v2/search/image?query=안녕

• 1. Headers 탭에 들어가서
• 2-1. Authorizationkey를 하나 추가하고
• 2-2. value로는 KakaoAK {방금 발급받은 rest api key}를 넣어준다
• KakaoAK 와 키 사이에 하나의 공백이 있음을 유의한다
• 3. Send 버튼을 눌러 결과를 확인한다

검색 옵션 사용하기

• 위에서는 필수 파라미터인 query만 사용해 검색을 해보았다
• 포스트맨 Params 탭으로가서 이것저것 테스트해보길..
• https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide#search-image

참고

• 카카오 이미지 검색 api를 활용한 ios앱

• 깃허브 블로그는 네이버 블로그와 같이 자동으로 검색엔진을 통해 검색되지 않는다!
• 내가 쓴 글이 구글 검색에 노출되려면 설정을 해줘야한다!

따라하기

• hexo icarus theme (react) 기준입니다!
• Hexo SEO - 하루 만에 검색 엔진 최적화 시키기 | Seongho’s Dev Story를 참고하였다

SEO 설정

• seo, search engine optimization

1
2
3
4

npm i hexo-autonofollow
npm i hexo-generator-feed
npm i hexo-generator-seo-friendly-sitemap
npm i hexo-generator-robotstxt

• hexo에서 seo 관련 플러그인이 있는데 설치한다
• 참고 ; 다른 seo관련 글에서는 hexo-auto-canonical을 설치하라고 하는데 react로 되어있는 최신버전의 icarus 테마에서는 표준링크을 자동으로 생성한다. 그래서 설치하지 않아도 된다!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

deploy:
  type: git
  repo: 'https://github.com/chinsun9/chinsun9.github.io'
  branch: master
# 새로 추가
nofollow:
  enable: true
  exclude:
    - exclude1.com
    - exclude2.com
feed:
  type: rss2
  path: rss2.xml
  limit: 20
sitemap:
  path: sitemap.xml
  tag: false
  category: false
robotstxt:
  useragent: '*'
  allow:
    - /
  sitemap: https://chinsun9.github.io/sitemap.xml

• _config.yml 최 하단에 deploy 설정 밑에 새로 추가한다
• sitemap: https://여러분의깃헙유저네임.github.io/sitemap.xml 주의!

• 나는 위 과정에서 hexo-component-inferno 패키지를 설치하라고 해서 설치했다

• 또 패키지 4개를 설치하면서 warn 경고 메시지가 자꾸 출력되는데 나는 무시했다

• 여기까지 했다면 hexo d -g명령으로 배포한다

• 참고 ; hexo d -g는 hexo deploy --generate명령과 동일하다

• 참고 ; hexo deploy --generate는 hexo generate & hexo deploy와 동일하다

• 그러면 public 디렉터리에 rss2.xml, sitemap.xml, robots.txt 이 3개의 파일이 보이면 성공이다

검색 엔진 등록하기

구글

• 구글 서치 콘솔로 이동하여 시작하기를 누른다

• URL 접두어를 선택하고, 자신의 깃헙 주소를 입력하고 계속한다

• 소유권 확인 과정이 있는데, html 파일을 다운받고,
• hexo 디렉터리에서 public 디렉터리 밑에 다운받은 파일을 위치시키고
• hexo d하려 배포한다
• 잠시 기다렸다가 확인버튼을 누른다

• 소유권이 확인되면 속성으로 이동 버튼을 누른다

• 1. sitemaps 메뉴를 클릭한다
• 2-1. 사이트맵 URL 입력에 sitemap.xml을 입력하고 제출 버튼을 누른다
• 2-2. 사이트맵 URL 입력에 rss2.xml을 입력하고 제출 버튼을 누른다
• 상태에 보면 성공이 아닐 수도 있는데 새로고침 해보면 성공으로 보일 것이다
• 하루정도? 지나면 구글에서 내 글을 검색할 수 있다!

네이버

• 네이버도 구글과 비슷하므로 간단하게 넘어간다

• 네이버 웹마스터 도구에 들어간다
• 사이트 등록에 내 깃헙 블로그 주소를 입력하면 소유권확인 과정이 나온다
• 구글과 똑같이 html파일을 다운받고 public 디렉터리에 파일을 옮기고 hexo d하여 갱신한다

• 왼쪽 메뉴를 보면 요청 > rss제출로 들어가
• 자신의 rss2.xml 주소를 입력하고 확인버튼을 누른다

• 요청 > 사이트맵 제출로 들어가
• sitemap.xml을 입력하고 확인버튼을 누른다
• 네이버 등록도 끝이 났다!

다음

• 다음은 약간 다르다
• 다음 검색등록에 들어간다
• 신규등록하기 버튼을 누른다
• 약관에 동의한다

• 폼을 작성한다. * 마크가 붙어있는 것은 필수 항목이다

• 심사가 끝나면 이메일로 알려준다고 하니 기다리자..
• 여기까지 다음 등록도 끝났다!

팁

언제부터 검색이 될까..?

• 검색 엔진에 등록하면 바로 검색 노출은 안되고, 시간이 필요하다
• 하루 정도 걸린다고 생각하자

표준링크 확인하기

• hexo-auto-canonical를 설치하지 않아도 된다고 했는데, 알아보니까 자동으로 생성해주고 있었다!
• 확인하는 방법은..

• 내 블로그에서 아무 글이나 클릭해서 들어간다
• F12로 개발자도구를 연다
• ctrl f 로 검색창을 연다음에 canonical를 검색한다. 그러면 위와같은 link 태그가 있으면 된다!