Polpid's Pensieve

맨날 붙여넣기만 하다가 오늘은 갑자기 의문이 들었다.

npm install --save 하고 --save-dev가 대체 뭔 차이지? 잘 안쓰고 맨날 찾아서 붙여넣기만 하니 알리가 있나..

그래서 찾아봤다. 구글 검색을 해보니 아래와 같은 글이 있었다.

https://www.linkedin.com/pulse/npm-dependencies-vs-devdependencies-daniel-tonon

내가 쓴 내용은 위에 링크의 글을 일부 번역한 글이다. 

npm install module --save 

특정 A 모듈을 Install 할 때 --save 옵션을 넣으면 package.json 에 dependencies 목록에 포함된다. Dependencies 목록에 있다는 것은 현재 npm 모듈이 A 모듈 없이는 사용할 수 없다는 뜻이다. 즉, A 모듈 없이는 동작하지 않는다.

npm install module --save-dev 

특정 A 모듈을 Install 할 때 --save-dev 옵션을 넣으면 package.json 에 devDependencies 목록에 포함된다. 이건 현재 npm 모듈은 A 모듈과는 dependency가 없지만 개발 환경에는 연관성이 있다는 뜻이다. 

npm 으로 퍼블리싱을 할 경우

npm 모듈이 동작하는데 필요한 모듈이라면 --save 플래그를 사용하고 모듈 동작에는 필요 없지만 테스트에 필요하다면 --save-dev 플래그를 사용한다.

NPM으로 퍼블리싱을 안할경우

상관할 필요는 없지만 작성한 소스코드에 영향을 주는 모듈은 --save, 컴파일러가 작동하는데 필요한 모듈은 --save-dev 플래그를 사용한다.

윈도우 10을 쓰다가 지난주에 랜섬웨어 대비 업데이트를 진행했다.

그런데 업데이트를 하고 난 이후에 부팅시 이상한 증상이 나타났다. 다른 이상 증상이 있었을 수도 있었겠지만 내가 발견한 증상은 크게 2개 였다. 

1. 부팅후에 아이콘의 이름이 다 사라지고 정상 작동을 하지 않고 키보드의 키를 눌러도 제대로 값이 타이핑 되지 않는다. 

화면이 보통 저렇게 보인다. 아이콘에 이름이 다 사라지고 아이콘 자체도 약간 작아진 느낌이 든다. 그리고 폴더를 열어도 글씨가 전체적으로 제대로 나오지 않는다. 처음에는 업데이트 후에 그래픽 카드가 뭔가 호환이 안되나 싶어서 그래픽 카드 드라이버도 업데이트를 했다. 하지만 동일 증상이 지속적으로 반복되었다. 

2. 엑셀 저장시에 저장이 안된다. 

컴퓨터 사용하는데 굉장히 신경이 쓰이고 불편해서 구글을 검색해봤지만 사례도 별로 못찾고 해결책도 찾을수가 없었다. 그리고 이 2가지 증상이 서로 같은 문제로 발생한다고도 생각을 못했다. 검색어도 대체 뭘로 해야 할지 잘 몰라서 이것저것 검색을 다 해봤다. 그러다가 우연찮게 특정 프로그램과 충돌이 발생해서 이런 문제가 생긴다는 글을 보게 되었다. 그 프로그램을 삭제를 하면 발생하지 않을거라는 것을 보고 실제로 내 컴퓨터에 깔려있는지 확인해보았다.

아주 정확하게 설치가 되어있었다. 아마도 집에 설치되어있는 VDI 때문에 깔려있는것 같은데. 이게 문제가 될거라고는 생각을 못했다. 그런데 설치 시점이 2017-05-14 인거 보면 랜섬웨어 대비 패치를 한것 같은데 (난 절대 수동으로 설치한 적이 없으니) 그게 뭔가 잘못된것 같다. 그래서 일단 삭제했다. 

삭제후에 1번 증상은 아직까지는 나타나지 않았다. 그리고 혹시나 해서 엑셀도 저장을 해보았더니 정상 동작을 했다. 위 증상이 다시 나타나면 또다는게 문제가 된다는 이야기 이지만 아직까지는 나타나지 않았다. 

문제를 해결해서 기분이 좋긴 하지만 뭔가 좀 황당하다는 생각이 든다.

Redis ERR Client sent AUTH, but no password is set

이런 에러가 나올때가 있다.  

Request for authentication in a password-protected Redis server. Redis can be instructed to require a password before allowing clients to execute commands. This is done using the requirepass directive in the configuration file.

If password matches the password in the configuration file, the server replies with the OK status code and starts accepting commands. Otherwise, an error is returned and the clients needs to try a new password.

Note: because of the high performance nature of Redis, it is possible to try a lot of passwords in parallel in very short time, so make sure to generate a strong and very long password so that this attack is infeasible.

(출처 : https://redis.io/commands/auth)

내용을 살펴 보자면 Redis는 Client 가 command를 실행하기 위해서 password를 요구할수 있다. 그리고 그 패스워드는 configuration file 에 requirepass로 저장되어 있다. 바로 저 requiredpass가 없을때 위와 같은 에러메세지가 나온다. 

값을 설정하기 위해서는 위와 같은 절차로 진행 하면 된다. 

redis-cli -p 6379 를 통해서 redis 접속후에 config get requirepass 명령어를 실행해본다. requirepass 가 위와 같이 빈값으로 나올 경우 set 명령어를 통해서 requirepass를 설정해준다. 그리고 설정해준 password 에 auth 설정을 해주면 모든 절차는 끝났다. 그리고 다시 실행해보면 에러는 발생하지 않는다. 

아직 사용이 익숙하지 않은 IntelliJ 에서 작업을 하다가 JPA의 Entity로 되어 있는 도메인들을 못찾는 현상이 발생했다. 

src/main/generated 라는 폴더 안에 Qdomain 들이 실제 존재하고 있는 상황인데 build 를 돌리면 찾지 못했다. 

에러 내용은 위와 같이 cannot find symbol, class QCode. 저 캡쳐는 한 부분만 캡쳐를 했지만 실제로는 모든 Qdomain을 찾지 못한다고 에러가 났다. 

그래서 구글링을 해보니 generated 폴더를 패스에 추가를 해줘야 한다는 것을 알았다. 

IntelliJ 에서 File>Project Structure>Modules 에 들어가면 아래와 같이 화면이 구성되어있다. 

위에 화면에서는 이미 Source Folder 에 src\main\genereated 폴더가 추가한 후의 캡쳐이다. 실제로는 우측에 Source Folders 에 src\main\java 만 있었다. 실제로 추가하는 방법은 위 화면에서 보이는 좌측 트리에 src 부분을 펼쳐 보면 genreated 폴더가 보인다. 거기에서 마우스 우클릭을 하면 아래와 같이 메뉴가 나온다. 거기에서 Sources를 선택을 하면 우측 Source Folders 에 추가가 된다. 

이렇게 하고 난 후 build를 실행하게 되면 에러 없이 정상적으로 success 가 된다. 

프로젝트 내부에는 설정파일들이 많이 있다. 대표적인 항목이 DB 접속 정보가 있다. 

그런데 이 접속정보에는 ID, PASSWORD 가 항상 존재 한다. ID는 상관이 없지만 PASSWORD 정보가 파일 내부에 평문으로 적혀있으면 외부에 노출될 위험이 있다. 그래서 암호화를 해야 한다. 

Jasypt를 이용하면 이런 항목들을 쉽게 암호화 할 수 있다. 

먼저 라이브러리를 다운로드 받는다.

http://www.jasypt.org/download.html

사이트에 들어가보면 상단에 DOWNLOAD JASYPT 라는 링크가 있다. 그 걸 누르면 라이브러리를 다운로드 받을 수 있다. 

이 글을 쓰는 시점의 버전은 1.9.2 이다. 

다운로드 한다음 사용 방법은 간단하다. 압축을 푼후에 bin 폴더로 이동한다. 

그리고 콘솔창(윈도우cmd 창)에서 아래와 같이 입력한다. 

input 항목에는 실제 사용하고 있는 패스워드를 입력하면 되고 password 항목에는 암호화된 값을 복호화 할때 사용되는 key 값을 넣으면 된다. 임의로 정해서 넣으면 된다.

compile('com.github.ulisesbocchio:jasypt-spring-boot-starter:1.4-java7')

현재 우분투 리눅스가 설치되어있는 넷북은 작업 환경이 정말 열악하다.

집에서 쓰는 거라서 보조 모니터가 있는것도 아니고 조그만한 화면을 들여다 보고 있으면 정말 목이 아프다. 

그래서 굳이 넷북에서 직접 작업할 필요가 있을까라는 생각을 했다. 

데스크탑도 있고 맥북도 있는데 굳이 그 조그만한 화면을 들여다 볼 필요가 있을까라는 생각을 했다. 

원격 접속해서 사용해도 큰 무리가 없을것 같은데.

그래서 책을 찾아보니 OpenSSH 서버라는 것이 있었다. 

telnet 과는 거의 동일 하지만 데이터 전송 시 암호화를 한다는 차이점을 가지고 있다. 

apt-get install openssh-server

이렇게 간단하게 명령어 한번만 치면 설치가 순식간에 진행된다. 

참고로 내가 사용한 -y 옵션은 패키지 설치시 설치여부 확인을 자동으로 진행해주는 옵션이다. 

systemctl restart ssh : 서비스를 재기동한다.

systemctl enable ssh : 서비스를 항상 기동하도록 설정한다.

systemctl status ssh : 서비스 상태를 확인한다. 

그리고 나서 여기 캡쳐 상에는 없지만 ufw allow 22/tcp 로 방화벽에서 SSH 포트인 22번 포트를 허용하도록 한다.

이 화면은 맥북에서 접속한 화면이다. 

ssh 사용자이름@IP 로 접속을 하면 된다. 위에는 이름과 IP 가 나와서 블러 처리를 했다. 

이렇게 함으로써 이제부터는 굳이 작은 넷북 화면 안쳐다보고 맥북에서 작업을 할 수 있게 되었다. 

필요한 것을 찾아가면서 이것 저것 적용해보는 재미가 쏠쏠한것 같다. 그러면서 아는것도 생기니 일석이조다. 

집에 있던 삼성 넷북 NT-N150을 어떻게 하면 쓸수 있을가 고민을 했다. 

처음 샀을때에 윈도우 XP가 깔려 있던 모델이고 성능을 봐서도 거의 폐급 수준이다. 도저히 그냥은 사용할 수 없는 수준이어서 업그레이드를 시도했다. 

마침 집에 있던 128기가 짜리 SSD가 있어서 하드는 이것으로 교체했다. 어차피 공부용으로 쓰거나 테스트 용으로 사용할거라서 많은 용량은 필요하지 않았다. 그리고 2기가 램을 하나 구매해서 기존 1기가 램과 교체를 했다.

자. 이제 하드웨어는 준비가 끝났고 OS는 뭘 깔아야 할까.

데스크탑은 윈도우10을 쓰고 있고 , 맥북에는 맥OS 가 설치되어있고. 이제 남는것은 리눅스다. 

그럼 리눅스는 어떤것을 설치해야 하나. 이번에 한빛 리더스를 통해서 받은 우분투 책도 있겠다 공부도 할겸 우분투로 정했다. 

그런데 이렇게 보면 정말 짧은 몇줄로 끝난 일이었지만 여기까지 오는 길은 정말 많은 일들이 있었다. 

비하인드 스토리.

처음에는 그냥 넷북에다 ubuntu-16.04.2-desktop-amd64 이미지를 받아서 무작정 설치했다. 물론 설치는 성공적으로 끝났다. 하지만 이건 너무 느려서 마우스를 움직일 수 없는 지경이었다. 그래서 혹시 64비트를 설치해서 그런가? 라는 생각에 ubuntu-16.04.2-desktop-i386을 받아서 설치했다. 하지만 결과는 똑같았다. 그래서 이번에는 14 버전 이미지를 받아서 설치해봤다. 여전히 느리다. 

인터넷을 검색해 보니 centos 가 좀더 가볍다고 하길래 centos 를 받아서 설치를 했다. 그런데 이번에는 설치가 안된다. 

설치가 안됐던 원인은 이미지를 usb 부트디스크로 만드는 과정에서 난 Universal-USB-Installer-1.9.7.2를 사용했는데 이게 잘 작동을 안해서였다. 이미지 만들때 이미 에러가 난 상황이니 설치가 제대로 안될 수 밖에. 이것때문에 설치만 4,5번 했다. 

centos를 설치해서 봤는데 뭔가 만족스럽지가 않다. 여전히 느렸기 때문이다. 

다시 검색을 해보니 루분투라는게 있더라. 그래서 다시 그 이미지 구해다가 설치를 했는데 이건 뭔가 더 맘에 안들었다. 

그래서 내린 결론은 지금의 성능으로는 그냥 아무것도 못하는게 맞다는 결론을 내렸다. 그래서 위에서 쓴것과 같이 업그레이드를 했다.

그리고 나서 다시 ubuntu-16.04.2-desktop-i386를 설치했다. 그랬더니 그래도 할만한 정도로 넷북이 돌아갔다. 처음에 64비트를 설치 안한 이유는 그래도 혹시나 성능이 딸릴까봐 32비트를 설치했다. 그런데 우분투에 Docker를 설치하려고 했더니 64비트를 설치하라는 말이 있어서 결국은 다시 ubuntu-16.04.2-desktop-amd64로 바꿔 설치했다. 대체 몇번을 재설치 한건지 모르겠다.

비하인드 스토리 끝.

아래 화면들은 설치하면서 아이폰으로 찍은 과정이다. 

USB를 꼽고 부팅을 하면 위와 같이 화면이 나온다. 

여기에서 한국어 선택하고 계속을 클릭한다. 

무선 네트워크는 아직 연결하지 않는게 좋다고 나와있어서 연결을 하지 않았다.

연결을 하게 되면 업데이트 항목까지 설치 시점에 다운로드 하기 때문에 시간이 많이 걸린다고 한다.

그래픽과 와이파이 정도는 설치를 해줘야 하기때문에 아래를 체크하고 계속을 클릭한다.

항상 OS를 설치할 때에는 무조건 깨끗한게 좋다. 어차피 백업할 자료도 없기 때문에 무조건 싹 지우고 설치한다. 

난 서울에 살고 있기 때문에 서울 선택하고 계속 버튼을 누른다.

계정 이름과 정보를 누르고 암호도 넣어준다. 

그러면 이렇게 파일 복사하고 설치가 완료된다.

봤듯이 설치는 간단하다. 하긴 요즘은 윈도우도 USB 로 부팅디스크 만들어서 설치하면 금방 다 설치가 되니 별다른 차이는 없는것 같다. 

이렇게 해서 나의 우분투 리눅스 설치 삽질이 끝났다. 덕분에 우분투 이미지 만들어서 설치하는것은 눈감고도 할수 있을것 같다. 아주 많은 삽질과 시간과 비용이 들어갔지만 재미는 있었다. 어렵게 설치하고 만들어놨으니 앞으로 공부하면서 잘 써먹어야겠다. 

React 에서 사용하는 map() 메소드는 파라미터를 전달하여 새로운 배열을 생성한다. 

최근에 본 자바의 Stream 에서 map 의 기능하고 비슷해보인다. 아니 아마도 java가 functional 프로그래밍을 지원하려고 하면서 비슷하게 구현해놓은것 같다. 

아래와 같은 contractData 라는 state를 저장해 놓는다. 

위 코드에서 주석을 친 부분은 map() 메소드를 사용하기 전의 코드이다. 

그 아래 부분이 위에서 정의한 state를 사용해서 가져오는 부분이다.

최근에 자바에서 사용하는 stream 관련된 내용을 봐서 그런지 그렇게 낯설지는 않다. 실제로 짤수 있을지는 잘 모르겠지만...

말 그대로 contactData 있는 내용을 contact로 하나씩 받아서 contractInfo의 내용을 채워 넣고 있다. 

출처 : https://velopert.com/957

props 는 컴포넌트에서 사용할 데이터중 변하지 않는 데이터를 다룰때 사용한다. 

Parent 컴포넌트에서 child 컴포넌트로 데이터를 전달할 때 props를 사용한다. 

컴포넌트의 render() 메소드 내부에 {this.props.propsName} 형태로 넣고 컴포넌트에서 사용할 때에는 <> 안에 propsName='value' 형태로 값을 설정 한다. 

- render() 메소드 내부

- 컴포넌트

- Default 값 사용시에는 App 내부에 className.defaultProps={propsName:value} 로 설정해주면 된다. 

- propType 지정

title 과 body 를 모두 string으로 지정하고 body 는 필수로 설정한다. 필수 지정일경우 값이 없으면 오류가 난다.

<이 문서에 작성된 소스는 https://velopert.com 에 게시된 소스 입니다. >

----------------------------------------------------------------------------------------------------------------

추가.

React 에서는 단방향 흐름을 강조하는 것 같다. 그래서 props는 상위 컴포넌트에서 하위 컴포넌트로 전달되는 데이터이며, 또한 이것을 하위 컴포넌트에서 변경되는것은 권장하지 않는것 같다...