H2 DB 는 Java 로 작성된 RDBMS 이다. 

Java 로 만들어져서 Java가 꼭 설치되어 있어야 한다. 

때문에 환경변수에 Java 가 꼭 등록되어 있어야 하는데...

 

일단 Java가 설정/설치 (환경변수 등록) 가 되어 있지 않은 상태에서 H2 DB 를 실행하면

위와 같이 오류가 떨어진다. 

즉, H2 DB 를 실행할 Java 가 없거나 환경변수를 찾지 못하는 것이다. 

 

[ 해결방법 ]

1. Window 버전의 Java 를 Install 한다. (그렇게 하면 자동으로 JAVA_HOME 으로 환경변수가 등록됨 )

2. Java 가 설치된 경로를 환경변수에 등록한다. 

3. Java 환경변수에 등록하지 않고, H2 DB 실행파일에 직접 java 경로를 설정해준다. 

 

개인적으로 Window에 설치되는 것을 좋아하지 않아 H2 DB 실행 시 Java 경로를 지정해주기로 했다. 

 

우선 {H2DB 가 설치되어 있는 경로}/bin 까지 이동한다. 

OS 에 맞추어 Windows 이면 h2.bat , Linux 이면 h2.sh 파일을 편집하면 된다. 

 

개인적으로 원본파일은 '무조건 백업' 이라는 개념 충만헌(?) 마인드가 있다.

그래서 h2_link_jdk.bat 로 파일 하나를 복사했다. 

 

해당 파일을 열어보면 다음과 같다. 

@java -cp "h2-2.1.214.jar;%H2DRIVERS%;%CLASSPATH%" org.h2.tools.Console %*
@if errorlevel 1 pause

위와 같이 되어 있는데 여기에 Java 가 있는 절대 경로를 직접 입력해주면 된다. 

Java 가 설치되어 있는 경로 = C:\JAVA\jdk-17.0.6+10\bin 

 

그럼 이제 h2_link_jdk.bat 파일을 편집하자.

@C:\JAVA\jdk-17.0.6+10\bin\java -cp "h2-2.1.214.jar;%H2DRIVERS%;%CLASSPATH%" org.h2.tools.Console %*
@if errorlevel 1 pause

위 처럼 편집 & 저장 하자.

 

그 다음 h2_link_jdk.bat 파일을 실행하면 다음과 같은 화면이 노출된다. (브라우저로 노출 된다. )

여기서 '연결' 버튼을 누르면 찾을 수가 없다.... (404 발생)

 

위 URL 에서 jsessionid 값을 바꾸지 않고 172.30....10:8082 값을 localhost 로 변경한다. 

=> http://localhost:8082/login.jsp?jsessionid=.....

 

변경 후 '연결' 버튼을 클릭하면 아래와 같은 화면이 노출된다. 

 

리눅스 파일이 많아 과거 날짜로 파일을 삭제해야 할경우는 다음과 같은 방법을 쓴다. 

(* 파일명으로 특정짓기 어려울 때 유용하다. )

 

1. 원하는 생성일 기준 파일 검색하기

ll --time-style full-iso | awk '{print $6" "$9}' | grep 입력날짜

 

Ex) 2022.1 ~ 2월 사이에 생성된 파일 찾기

ll --time-style full-iso | '{print $6" "$9}' | grep 2022-0[1-2]

 

2. 원하는 생성일 기준 파일 삭제하기

ll --time-style full-iso | awk '{print $6" "$9}' | grep 입력날짜 | awk '{print $2}' | xargs rm -f

 

Ex) 2022.5~6월 사이에 생성된 파일 삭제하기

ll --time-style full-iso | awk '{print $6" "$9}' | grep 2022-0[5-6] | awk '{print $2}' | xargs rm -f

 

Tip. 입력날짜에 따라 년/월/일 로 파일을 검색할 수 있다. 

 

WAS 가 Tomcat 인 경우, 별도 log4j 또는 logback 아니면 직접 로그를 남기는 프로그램을

만들어서 사용하지 않는다면, 보통 System.out.println (이하 sysout) 을 이용하여 로깅할 때가 있다.

 개발툴(Eclipse / IntelliJ .. )에서는 잘만 찍히는데 Tomcat 에서 로그가 남지 않을 경우에는

다음 부분을 확인해보자.

 

별도 설정을 하지 않는경우에는 Tomcat 의 catalina.out 파일에 sysout 데이터가 찍힌다. 

catalina.out 로그는 보통 {Tomcat 설치 경로}/logs 에 존재한다. 

 

만약 Tomcat 재구동 시 catalina.out 로그에 정상적으로 logging 이 되는데, sysout 데이터는

catalina.out 에서 남지 않는다면 아래와 같이 작업을 해보자.

 

{Tomcat 설치경로}/conf/context.xml 파일 열기

AS-IS : <Context >  ......  </Context>

TO-BE : <Context swallowOutput="true"> ....  </Context>

위 처럼 바꾸고 Tomcat 재구동 ㄱㄱ~

 

(참고: 디폴트 swallowOutput 값은 false 이다. )

 

'Server' 카테고리의 다른 글

리눅스 생성일 기준 검색/삭제하기  (0) 2022.10.07
Apache - mod_jk 예외처리  (0) 2020.04.22

프로그래머 직업을 가지고 돌이켜 봤을 때 개발툴은 대략 3개정도 접해본것 같다. 

(단순 에디터인 Notepad++, UltraEdit 는 제외하자. _

 

대략적으로 3개의 개발툴 Eclipse , IntelliJ , VSCode 를 써봤고 비율은 아래와 같다. 

- Eclipse (70%)

- IntelliJ (25%)

- VSCode ( 5% )

 

즉, VS Code 는 완전 생초보로 시작한지 3일 됬다. 

 

개발툴을 사용할 떄 단축키를 많이 사용하는 편이고, IntelliJ 의 경우는 KeyMap 단축키를 변경 및 추가하여

사용하였다. 

 

음... 그 중에서 내가 가장 필요한것은 VS Code의 키보드 단축키 설정창을 보여주는 것이다. 

키보든 단축키 설정 :  Ctrl + k + s 

 

외우기 어려운가? 알고보면 쉽다. 

k + s = Keyboard Shortcut 의 약자로 생각해보면 쉬워지는것이다. 

 

즉, Ctrl + k + s 만 알면, 이후 단축키를 외우거나 변경 시 문제될게 없다고 생각된다. 

Ctrl + k + s 입력 화면

 

추가적으로 VS Code 의 자주 사용하는 단축키와 그 예제 화면까지 정리해준 고마운 웹페이지가 있어

링크를 건다. 

 

https://jhnyang.tistory.com/408

 

VS Code 비주얼스튜디오코드 유용한 단축키 사용법 모음 (VSC Shortcuts)

안녕하세요 양햄찌블로그 주인장입니다. 오늘은 비주얼스튜디오코드 일명 VS Code의 단축키를 알아보려고 해요 ㅎㅎ 특히 중요한건 별표(★)쳤음! Visual Studio Code 단축키 알아보기 (VS Code Shortcuts) [

jhnyang.tistory.com

 

 

React 로 공부를 하던 중 갑자기 오류가 발생되었다.

 

  Delete `CR` prettier/prettier 

 

해당 오류는 '줄 시퀀스의 끝문자' 이 어떻게 셋팅되어 있느냐 문제이다. 

이전에 개발 시에는 문제가 없었는데, 남들 다 한다는 eslint & prettier 을 설치 후 문제가 발생되었다. 

 

아래는 문제의 오류 화면이다. 

브라우저 오류화면
소스코드 내 오류화면

 

문제의 원인은 EsLint 와 Prettier 이다. 

 

때문에 ESLint 또는 Prettier 에 '줄 시퀀스 끝문자' 에 대한 규칙을 추가해주자. 

 

eslint 의 설정 파일인 .eslintrc.js 또는 .eslint.json 파일을 열고 rules 에 endOfLine: 'auto' 를 추가해주자.

eslintrc.js 에 rule 추가

만약 eslint를 사용하지 않고 prettier 만 사용한다면 .prettierrc.js 파일을 열고 동일하게

endOfLine: 'auto' 를 추가한다. 

.prettierrc.js 파일

 

 

우선 자신의 PC 또는 서버에서 돌아가는 React 버전을 확인해보자

이유는 React 버전에 따라 Deprecate 된 함수가 있기 때문이다. 

 

- React 프로젝트에서 확인 : {React.version} 

- 터미널에서 확인 :   yarn info react    ( 단, yarn 이 설치되어 있어야 한다. )

  * 터미널에서 yarn 확인 시 훨씬 (압도적으로) 많은 정보가 나온다.   

 

터미널에서 react 버전 확인

 

가장 좋은것은 React 홈페이지의 공식 문서를 보는것이다. 

기술적인 문서는 상당수가 영문만 지원되는 경우가 많지만, React 는 한글도 아주 풍부하게 제공하고 있다. 

 

'React 공식 한글 문서 링크'

 

위 문서 링크에 있는 내용 중 일부를 발췌 하겠다. 

 

(주의: React17 부터는 componentWillMount, componentWillUpdate, componentWillReceiveProps 라이프 사이클이

          deprecate 된다. )

 

Mount

컴포넌트가 처음 실행될 때 그것을 Mount라고 표현합니다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장합니다. 그 후에 componentWillMount 메소드를 호출합니다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출됩니다.

주의할 점은, componentWillMount에서는 props나 state를 바꾸면 안 됩니다. Mount 중이기 때문이죠. 그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없습니다.

componentDidMount에서는 DOM에 접근할 수 있습니다. 그래서 여기에서는 주로 AJAX 요청을 하거나, setTimeout, setInterval같은 행동을 합니다.

정리하면 다음 순서로 실행됩니다.

  1. state, context, defaultProps 저장
  2. componentWillMount
  3. render
  4. componentDidMount

Props Update

props가 업데이트될 때의 과정입니다. 업데이트되기 전에 업데이트가 발생하였음을 감지하고, componentWillReceiveProps 메소드가 호출됩니다. 그 후 shouldComponentUpdate, componentWillUpdate가 차례대로 호출된 후, 업데이트가 완료(render)되면 componentDidUpdate가 됩니다. 이 메소드들은 첫 번째 인자로 바뀔 props에 대한 정보를 가지고 있습니다. componentDidUpdate만 이미 업데이트되었기 때문에 바뀌기 이전의 props에 대한 정보를 가지고 있습니다.

shouldcomponentUpdate에서는 아직 render하기 전이기 때문에 return false를 하면 render을 취소할 수 있습니다. 주로 여기서 성능 최적화를 합니다. 쓸데없는 update가 일어나면 여기서 걸러내는 거죠.

주의사항이 있는데, componentWillUpdate에서는 state를 바꿔서는 안 됩니다. 아직 props도 업데이트하지 않았으므로 state를 바꾸면 또 shouldComponentUpdate가 발생합니다. componentDidUpdate에서는 render이 완료되었기 때문에 DOM에 접근할 수 있습니다.

  1. componentWillReceiveProps
  2. shouldComponentUpdate
  3. componentWillUpdate
  4. render
  5. componentDidUpdate

State Update

setState 호출을 통해 state가 업데이트될 때의 과정입니다. props update와 과정이 같지만, componentWillReceiveProps 메소드는 호출되지 않습니다. 그리고 메소드의 두 번째 인자로는 바뀔 state에 대한 정보를 가지고 있습니다. componentDidUpdate는 두 번째 인자로 바뀌기 이전의 state에 대한 정보를 가지고 있습니다.

  1. shouldComponentUpdate
  2. componentWillUpdate
  3. render
  4. componentDidUpdate

Unmount

컴포넌트가 제거되는 것은 Unmount라고 표현합니다. 더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있습니다. componentWillUnmount가 그것입니다. componentDidUnmount는 없습니다. 이미 제거된 컴포넌트에서 이벤트를 발생시킬 수는 없겠죠? componentWillMount에서 주로 연결했던 이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 합니다.

  1. componentWillUnmount

다행히도 용도에 맞지 않는 메소드를 사용하면 React에서 자체적으로 에러 메시지를 띄워 줍니다. componentDidMount나 render에 setState를 사용한 경우도 에러 메시지를 띄웁니다. 그래도 혹시나 모를 상황에 대비하여 용도를 항상 알고 있는 게 좋겠습니다. 다음 시간에는 React-router에 대해 알아봅시다.

Error

에러 발생 시를 위한 componentDidCatch도 있습니다. 리액트 16에서 추가되었습니다.

componentDidCatch(error, info) {
  console.error(error, info);
}

위와 같이 사용하고, 최상위 컴포넌트에 한 번만 넣어주면 됩니다. 에러 발생 시 어떻게 대처할 것인지를 정의할 수 있습니다. 최소한 에러를 로깅하는 것만으로도 사용 가치가 있습니다.

 

아래는 공식 사이트에서 발췌된 내용중 일부이다.

 

마운트 (Mount)

아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.

 

( Mount란 컴포넌트를 특정 영역에 삽입하는 행위이다. 

  예로 ReactDOM.render 함수를 통해서 DOM의 특정 영역에 React 컴포넌트를 삽입할 수 있고

  이러한 과정을 마운트(Mount) 한다고 얘기한다. )

 

* Deprecate 함수 설명 및 대체 함수 

componentWillMount()

componentWillMount()는 마운트가 발생하기 전에 호출된다.
render() 가 실행되기 전에 호출되므로, 이 메서드 내에서 setState()를 동기적으로 호출하더라도
추가적인 렌더링이 발생되지 않는다. 

공식 문서에서 권장하는것은 componentDidMount() 를 대신 사용하라고 한다. 
* componentDidMount() 는 서버 렌더링에서 호출되는 유일한 생명주기 메서드 이다. 

 

 

 

업데이트

props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출됩니다.

 

* Deprecate 함수 설명 및 대체 함수/방법

componentWillReceiveProps()

componentWillReceiveProps() 는 마운트된 컴포넌트가 새로운 props를 전달받기 전에 호출된다. 
그러나 이 메서드를 사용하면 버그를 만들거나 일관성을 해칠 수 있다. 

- props 변화에 대응한 효과를 발생시켜야 한다면 (Ex: 데이터를 가져오기 또는 에니메이션 등...) 
  componentDidUpdate() 생명주기를 사용하기를 권한다. 

- props가 변화할 때 일부 state를 재설정하기 위해서는
   완전 제어 컴포넌트 또는 Key를 사용하는 완전 비제어 컴포넌트를 만들어서 사용하라고 
  공식 문서는 권한다. 

 

componentWillUpdate()

componentWillUpdate() 는 새로운 props 또는 state가 전달되어서 렌더링이 이루어지기 전에 호출된다. 
이 메서드는 초기 렌더링에서는 호출 되지 않는다. 

또한 이 메서드 내에서는 this.setState() 를 호출 할 수 없다. 또한 React 컴포넌트가 
갱신되도록 만드는 그 어떤 작업eh componentWillUpdate() 가 결과값을 반환하기 전에 
이루어 져서는 안된다. 

componentWillUpdate() 는 shouldComponentUpdate() 메서드가 false 를 반환한다면 호출되지 않는다.  

componentWillUpdate()componentDidUpdate() 로 대체할 수 있다. 
만약 메서드내에서 DOM 에 대한 정보 획득 (Ex: 스크롤 위치 저장 등..) 을 하려 한다면
getSnapshotBeforeUpdate() 를 사용하는것이 가능하다.

 

위 내용들은 아래 링크인 React 공식 홈페이지에서 발췌해 왔다.

아래 링크를 통해 공식 문서를 천천히 살펴보기를 강력하게 권한다. 

 

 

 

React.Component – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

 

 

마지막으로 React LifeCycle 에 대한 이미지로 마무리 하겠다. 

 

[ 일반적인 React LifeCycle ]

일반적인 React LifeCycle

 

[ 덜 일반적인 React Life Cycle ]

약간 일반적이지 않는 Life cycle

 

 

VSCode 를 이용하여 React 를 개발하려 마음먹었다. 

VSCode 내 terminal 에서는 yarn start 실행 시 오류가 발생되었다. 

 

Windows 의 command 창에서는 yarn start / npm start 로 React 화면이 정상적으로 연동되는데

VSCode 의 terminal 창에서는 아래와 같은 오류가 발생되는 것이다. 

( 참고로 npm start 는 정상적으로 작동한다. )

오류 내용을 보니 yarn을 로드 할수 없고 권한이 없다고 얘기한다. 

그러면서 친절하게 참조 URL도 알려준다. 

https://go.microsoft.com/fwlink/?LinkID=135170

 

위 사이트를 들어가서 천천히 보면 Windows의 Script 사용권한이 제한되어 발생되는것을 알 수 있다. 

go.microsoft.com

 

위 링크로 들어가서 페이지 내용을 쭉 보는것이 가장 좋우나, 

현재 문제만을 우선적으로 해결해보자. 

 

1. Windows 에서 PowerShell 을 관리자 권한으로 실행한다. 

(관리자 권한으로 PowerShell 실행)

2. 현재 스크립트 정책이 어떻게 설정되어 있는지 확인한다. 

   PowerShell 에서 ExecutionPolicy 를 입력하면 알 수 있다. 

 

   > ExecutionPolicy  

 결과는 Restricted 이다. 

  * Restricted  ( 링크된 Microsoft 페이지에서 발췌 )

     - 클라이언트 컴퓨터 Windows에 대한 기본 실행 정책

     - 개별 명령을 허용 하지만 스크립트를 허용하지 않는다. 

     - 서식 지정 및 구성 파일( .ps1xml ), 모듈 스크립트 파일( .psm1 ) 및 PowerShell 프로필 () 을 비롯한 

        모든 스크립트 파일의 실행을 방지 .ps1 한다. 

 

3. 위 microsoft 링크에서 '실행 정책 변경' 부분을 찾으면 자세히 나오나

   나는 PowerShell 에 아래와 같이 명령을 입력 하였다. 

 

    > Set-ExecutionPolicy Remotesigned   

PowerShell 에서 권한 변경

4. 이렇게 권한을 변경한 후 VSCode 의 터미널에서 yarn start 명령어 수행 시 

    정상적으로 구동된다. 

 

* 조금 귀찮을 수도 있지만, Windows 스크립트 실행 권한에 대해서 좀더 자세히 알아보는것을 추천한다. 

  관련 링크 : https://go.microsoft.com/fwlink/?LinkID=135170

'Development > React Issue' 카테고리의 다른 글

React Delete `CR` prettier/prettier 이슈  (0) 2021.10.21

IntelliJ 2020 을 쓰게 되면 기본적으로 Dark Theme 가 적용되어 있고, 그럭저럭 쓸만 하지만

몇가지 아쉬운 점이 있다면, 아이콘이 눈의 잘 띄지 않거나 주석이 너무 어둡게 보이는 경우가 있었다. 

 

때문에 나름 국민 IntelliJ Theme 라고 하는 Dracul 테마로 변경해 보겠다. 

 

[ 테마 변경 ]

1. 테마 다운 받기.

File | Settings | Plugins 이 경로로 가서 Plugins 를 선택하면 아래와 같은 화면이 나온다.

그럼 다운 받기 위해 Marcketplace 를 선택한다. 

 

2. 검색창에 Material Theme UI 를 입력 후 검색한다. 

개인적으로 Lite 보단 용량이 더 큰 Material Theme UI 를 Install 하였다. 

다운로드를 완료 하면 Restart 하라고 버튼이 바뀌며, IntelliJ 를 다시 시작해 준다. 

 

3. Restart 후에는 설치된 Thema 를 적용한다. 

File | Settings | Appearance & Behavior | Appearance 경로로 이동한다. 

상단 Theme : Dracula 를 선택하여 Thema를 변경한다. 

 

[ 폰트 변경 ]

개인적으로 개발시 보기 편한 폰트는 D2Coding 이다.

Naver 에서 제작하여 무료로 배포하는것으로 알고 있으며, 특히 SecureCrt 또는 Putty 에 D2Coding 폰트를 적용 시

만족도가 매우 높았다. 

 

아래 링크로 가서 Font 를 다운받는다. 

https://github.com/naver/d2codingfont/releases

 

Releases · naver/d2codingfont

D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub.

github.com

가능하면 용량이 가장 큰 파일을 다운받기를 권한다. 

 

파일 다운 완료 후 압축 해재 한 다음 ttc 파일을 설치 한다. 

여기서 도 D2Coding 모든 ttc를 설치하기 추천한다.

( 간혹 Putty 또는 Secure CRT 에서 D2Coding Light 설치 시 깨짐 현상이 발생한 경우가 생긴다. )

마지막으로 FONT 를 변경해보자.

 

IntelliJ 의 File | Settings | Editor | Font 경로로 이동한다. 

 

위 처럼 선택 후 적용하면 완료!!

'Dev Tool > IntelliJ' 카테고리의 다른 글

폐쇄망 - IntelliJ SVN 연동  (0) 2020.04.07

+ Recent posts