Welcome to Boki's Blog!!

Web Developer

LiveTemplate

2021-02-14

boki

IDE

IntelliJ WebStorm Live Template
이거 왜 안써? JetBrains사의 Live Template

IntelliJ, WebStorm, PhpStrom 등등…

어느날 책을 보면서 공부하다가 VsCode의 Snipet에선 복잡하게 돌아가는걸 발견했다…!!

그래서 웹스톰(인텔리제이도 됨)에서는 그런기능이 없을까 찾아보다보니.. Live Template이란 것을 발견했다.

자 결론을 좋아하는 한국인들을 위해 사진 투척

파일이름: test.js 일때 z를 치고 엔터를 치면

파일이름: I_Love_youSoMuchS2.js 일때 z를 치고 엔터를 치면

추가로 한글 명령어도 가능하다 왜냐? 내가 추가해놨으니까^^

리액트 라고 치고 엔터를 치면

뿅! 기본 틀이 완성된다

한글은 바로 추가툴팁이 뜨지는 않지만 잘 작동한다.

[ How? ]

우리는 단축키를 사랑하는 민족이니까 나만 따라오시라. 대신 윈도우 기준으로 설명하겠다.. 맥.. 부러워 갖고싶어..ㅠ 거지라서.. Ctrl + Alt + S를 누르면 Settins 창이 뜬다. 여기에서 Live라고 치고 Live Template을 선택해준다.

우측 상단의 + 버튼을 눌러서 템플릿 그룹을 추가한다. 그냥 자기 이름으로 하자

난 boki로 만들어줬고 5개의 명령어를 추가해줬다.

z를 살펴보면… ㅋ로 할수도 있었지만, 코드를 치는순간 영문이 더 쓰이는 경우가 많을거같아서 z로했다.

우측 상단의 +를 눌러서 이번에는 1번으로 추가를 해준다(그룹 x) Abbreviation에는 명령어를, Description에는 말그대로 설명을 적으면된다. 한글도 상관없다. 근데 명령어는 한글이면 설명툴팁이 안뜬다..

그리고 밑에 Template Text에 코드를 적는다. 코드를 적으면 흰색으로 뜬다. 그럴때는 밑에 Define을 눌러서 어떤 형식의코드인지 알려줘야 한다. 리액트를 할것이기 때문에 나는 JavaScript and TypeScript라고 정했다. 그러면 코드에 색이 입혀지면서 적용되는 것을 알 수 있다.

옆에 Expand With는 이 명령어를 치고 활성화시킬 동작들이다. 나는 탭보다는 엔터가 편해서 엔터로 전부 다 설정했다. Default는 Tab이다.

추가로 변수를 알아보자 변수는 $ $사이에다가 아무내용이나 적으면 EDIT VARIABLES 버튼이 활성화가 되면서 입력이 가능하다 날짜도 가능하고, 파일명, 확장자를 포함하지 않는 파일명 등등 엄청 다양하다. 추가로 내 스타일 컴포넌트 하나 설정을 알려주고 글을 마칠까한다..
```
import React from "react";
import styled from "styled-components";

const $FILENAME$Block = styled.div``;

const $FILENAME$ = () => {
  return <$FILENAME$Block></$FILENAME$Block>;
};

export default $FILENAME$;
```
이 명령어를 스컴 이라고 등록했다. 스타일드 컴포넌트의 줄임말이다. $$뒤에 변수명이 와도 상관없다. 어차피 텍스트로 인식될거니깐(여기는 셋팅환경 안이다)

스컴의 결과

겁나 긴 파일이름명을 따라서 만들어진것을 볼 수 있다!

모두 IntelliJ, WebStrom 쓰세요!! ㅋㅋ
Read All
tomcat

2021-02-03

boki

debug

tomcat port IDE
톰캣 실행에러 쉽게 처리하자!(feat. 내가만든 프로그램…)

이클립스 또는 스프링으로 톰캣을 돌리다 보면 이런 에러를 가끔 마주하곤 한다.
1. Starting Tomcat v 8.5 Server at localhost …
2. Port 8080 is already in use …
※ 나는 포트를 web.xml에서 변경해주는 식의 포스팅은 아니다

논외로 오라클을 먼저 설치하고 톰캣을 설치한 경우에는 포트번호가 충돌하기때문에 web.xml에서 포트번호를 바꿔야 한다. 하지만 여기에서는 이 내용을 다루지 않는다.

분명히 사용하던 IDE(이클립스, 인텔리J 등등)을 다 껐는데도 톰캣을 실행하면 오류가 난다. 이런 경우는 실행되고 있는 톰캣을 직접 꺼줘야한다.

뭐 cmd창을 열고 netstat에 등등..뭐 말이 많지만… 나는 방법론적인거보다 결과를 툭 던져드리겠다. 계속 이 오류를 마주칠 때마다 netstat ano find ~ 언제치고있을것인가..? 직접 만든 windows10 Batch(실행)파일을 첨부한다.

유튜브

파일

https://drive.google.com/file/d/1jBel3k-H3CFjl4PC3z07Q1XcF4kcHN6H/view?usp=sharing
1. 실행 화면이다 출력된 그대로 ‘80’이 붙은 실행 중인 포트들을 출력한다. 나는 톰캣을 켜놓지 않은 상태라 없다.
2. 기본포트인 8080 그대로 사용중이고, 종료하고 싶다면 그냥 엔터를 치면 된다. 2-1. 다른 포트로 변경했다면(Ex: 나는 오라클이랑 충돌나서 8090포트로 변경했다) 다음줄에 포트번호를 입력한다.
3. 2초뒤 그 포트를 가진 프로세스를 죽인다
4. 결과화면을 보면 성공or오류 표시가 뜨지 않은 것을 볼수있다. 이 경우 실행중인 프로세스를 종료한 것이 아니기 때문이다.
실제 테스트
1. 톰캣이 설치된 곳으로가서 bin 폴더에서 startup 파일을 실행시켜준다.
2. 한글이깨지는건 무시…) 하고 잘 동작중인것을 알 수 있다.
1. 톰캣 kill 배치파일을 실행시켜서 8090포트(나의경우)가 실행중인 것을 확인 후 8090을 입력해주자
2. 뒤에 떠있던 프로세스가 죽고 성공과 오류 메세지를 볼 수 있다. 오류메세지는 반복문으로 돌리느라 표시된 것이니 걱정말자!
결론

그냥 내가 만든거 쓰자. 혹시나 불안하면 배치파일 까보면 된다 별거없다 ㅎㅎ 색깔 바뀌는건 귀엽게 추가해봤다. 많이 사용해주신다면 감사하겠다!!! https://drive.google.com/file/d/1jBel3k-H3CFjl4PC3z07Q1XcF4kcHN6H/view?usp=sharing
Read All
Oracle JDBC DAO debug

2021-01-27

boki

debug

java JAVA JDBC debug error commit

Oracle JDBC DAO debug

DB insert 안됨…

1. 개요

자바랑 DB랑 연동해서 처리해보다가 진짜 죽어도 안되서 이곳저곳 찾다가도 안되서 4시간 벙쪄있다가 해결책을 찾았다 문제가 있는 코드같은가..? 휴… 사실 하나 추가한게 있다면 28번째 줄에 conn.commit(); 이 부분이다.

2. How To

사실 추가로 SQL develop를 켜서 DB에 데이터가 잘 들어갔나 테스트를 하고 있었는데 문제는 여기에 있었다. SELECT를 제외한 나머지 INSERT, DELETE, UPDATE는 무엇을 필요로 하는지 아는가? 바로 commit이다. 작업을 할때 F11을 눌러서 커밋이나 혹은 롤백을 시켜주는 습관을 들이자. 혹은 다른 방법으로 autocommit을 on시켜주는 방법이 있는데, 이런 방식으로 사용이 가능하다. 혼자 mock데이터(가짜 데이터) 혹은 서비스하지 않고 local에서 개발하는단계라면 모를까 실 서비스하는 데이터를 갖고 autocommit을 켜두기에는 위험부담이 클거같다. commit이나 rollback을 습관화하거나 autocimmit을 하는 습관을 갖자! 추가로 JAVA에서도 conn.commit();코드를 작성해두는 것이 좋을 것 같다.

Read All
IntelliJ(+WebStorm) 주석 커스터마이징

2021-01-26

boki

IDE

IDE intelliJ WebStorm

IntelliJ(+WebStorm) 주석 커스터마이징

IntelliJ, WebStorm comment customizing

1. 개요

알고리즘으로는 파이참(파이썬), Node.js로는 vscode, 스프링으로는 인텔리J, 그리고 리액트로는 이번에 최근에 웹스톰을 쓰게되었다. (C로는 Visual Studio..) 파이썬을 보면 주석이 “”” “"”와 # 두가지가 있는 것을 볼 수가 있다. 나는 주석이 언어자체에만 있는건줄 알았다. C언어를 배울때 //와 /* */를 배웠고, HTML을 배울때는 를 배웠으니 말이다. 하지만 코드 작성시, 동작은 하지 않지만, 이 코드를 메모로, 혹은 버그로, 혹은 기타 등등으로 표시하고 싶을때가 있다. 표시는 할 수 있지만 에디터에서 눈에 띄지 않는 회색으로 처리되는게 싫었다.

2. How To

이번에 리액트를 공부하면서 JetBrains사의 WebStorm IDE를 쓰게 되었는데, 주석을 커스터마이징 할 수 있다는 것을 알았다 (+기타 JetBrains의 모든 IDE가능<Ex: intelliJ>)

결과화면

File-Settings를 들어가준다. 윈도우 기준 단축키는 Ctrl+Alt+S이다. todo를 쳐서 검색해준 후 밑에 +를 눌러 하나씩 추가해준다. 위에보면 원래 있던 // todo와 // fixme를 볼 수 있을 것이다.참고로 이건 이클립스에도 있다. +를 눌러서 위에 패턴을 그대로 따라 쳐준다. 가운데 추가하고 싶은 단어만 추가하고 Use color scheme TODO default colors만 체크를 해제해준 후 밑에서 색상이나 Effects 등 추가해서 바꿔주면된다!

Read All
윈도우10에서 작업표시줄 아이콘 작게하기

2021-01-01

boki

Windows10

작업표시줄 아이콘

윈도우10에서 작업표시줄 아이콘 작게하기

일단 Mac노트북이 없는 사람으로써 윈도우 개발에 대해 얘기하려고한다.

대학교4년을 거치고 졸업을 하고 여러인강을 들으면서 참 쓸데없는 혹은 언젠가는 쓸지도 모르는 개발툴들을 많이 설치했더랬다.

크롬,웨일,카톡,안드로이드 스튜디오,유니티,코드블럭,비쥬얼스튜디오,Mysql CLI, VSC, IntelliJ Ultimate(이건 학생라이센스가 끝나서 유료라 더이상 안쓴다), IntelliJ Community, Pycharm, 아나콘다 CLI, Sublime Text, 메모지, 엑셀, 넷플릭스, 프리미어프로, 디스코드, 스크래치, 알송, Brackets, 이클립스, HeidiSQL, Robo3T(MongoDB), 잔디, Postman, 노션, Git Bash까지…

사실 필요없는거 지우면 되지만 뭔가 나는 바로바로 정리를 안하는 성격이고 언젠가는 쓸지도 모른다고 생각해서 남겨두는편이다.

여기서 문제점은 몇개를 열때마다 작업표시줄자체에서 다음창으로 넘겨주는 것이었다. 나는 그래서 무슨 창이 열리고 닫힌지 확인을 하려면 다시 back을 해야했다.(매우불편)

그래서 찾은…것이 바로 작은 작업표시줄 아이콘 표시였다!

1. 작업표시줄에서 마우스 우클릭을 해서 작업 표시줄 설정에 들어간다.

2. 작은 작업 표시줄 단추 사용을 눌러서 <켬>으로 바꿔준다.

확인해보니 엄청 작은 작업표시줄로 바꼈다. 아마 프로그램 설치를 할때 아이콘을 기본 아이콘과 작은 아이콘을 윈도우에 제공하는게 있나보다. 특정 프로그램들은 아이콘 모양이 아예 바꼈다!

나름 깔끔해져서 보기좋고, 이제 딱히 제거하지 않아도 전부 다 볼수있게 되서 행복하다!

끗!

Read All
윈도우10에서 Git Bash alias 설정

2021-01-01

boki

Git

Git Bash 깃
윈도우10에서 Git Bash alias 설정

윈도우10에서 Node.js와 React.js를 개발하면서 작성된파일을 Git Bash를 통해 깃허브에 올려야될때 cd 경로를 다시 쳐야하는게 불편했다

예를 들어 React의 경로는 C:\Users\Boki\Desktop\do-it-react\nvm-setup\React\do_it를 가지고있었기에 불편했었다

git bash가 리눅스 명령어로 동작을해서 .bash_profile 또는 .bashrc에 alias를 추가하면 될것 같았다

1. Git bash를 실행한다 그리고 cd ~를 입력해준다 여기가 어디냐면 c:/Users/본인이설정한컴퓨터이름의 경로이다
```
$ cd ~
$ pwd
/c/Users/Boki
```
2.vim .bash_profile 파일에 alias를 추가해준다

내부에서는 i가 입력모드, esc가 명령모드가 된다. i를 눌러 입력모드로 바꿔주자

내부에서는 #이 주석이된다. alias 이름=’‘을 입력해주면된다

나는 #favorte path로 입력을 해주고 밑에 alias React=’cd ~/Desktop/do-it-react/nvm-setup/React/do_it’라고 입력을 해줬다.
```
$ vim .bash_profile

<.bash_profile 내부>
# generated by Git for Windows
test -f ~/.profile && . ~/.profile
test -f ~/.bashrc && . ~/.bashrc
# favorite path
alias React='cd ~/Desktop/do-it-react/nvm-setup/React/do_it'
```
저장은 다시 esc키를 눌러서 :wq라고 입력해준다(저장 후 나간다는 뜻)

이제 React라는 명령어를 입력해주고 pwd로 현재경로를 확인해보자
```
$ cd ~
$ React
/c/Users/Boki/Desktop/do-it-react/nvm-setup/React/do_it
```
아주 잘 작동한다. 앞으로 블로그경로, React.js나 Node.js, 스프링 프로젝트를 할때 사실 IDE와 git bash가 연동이된다면 혹은 cmd창 내부에서도 git이 명령어로 동작을 하기에 현재 프로젝트 경로를 잡아주는 IDE로 개발을 한다면 필요없을지도 모르지만 cmd창 내부에서는 git에 대한 명령어를 깔쌈하게 쓸수없기때문에 간편하게 만들어보았다.

추가로 git bash 내부에서의 복사는 Ctrl+Insert, 붙여넣기는 Shift+Insert이다.
Read All