2018년 11월 7일 수요일

reactJs 에서 function body { } brace 주의..

리엑트 공부 하겠다고 퇴근하고 짬짬히 만지기 시작하는데, 튜토리얼 거의 첫장에서 진도를 못빼게 되는데.. 아무리 눈씻고 비교해도 오타도 모르겠고..

(문제의 코드중... common js와 다른점이 있다?!)

정말 짜증 지대로 빽빽 내면서 한시간동안 이것저것 알아보다 발견한 차이점..

commonJS에서의 arrow function declare
() => {}
reactJS에서의 arrow function declare
() => () 

하 내 한시간..

https://medium.com/@leannezhang/curly-braces-versus-parenthesis-in-reactjs-4d3ffd33128f




2018년 11월 4일 일요일

node.js 내장 apache 로 서버 퍼블릭으로 띄우기. on Windows

김고은 닮은 후배님께서 node.js 에 내장되어 있는 아파치에 대한 언급을 몇번 했었는데, 의아해 하면서 알아 본 적이 있는데, 놀랍게도 진짜로 지원한다고 합니다(!)
급하게 테스트 할때에 웹서버 올릴 필요가 없었던 거네..

그 결과 오늘 잠깐 만져봤고, 그 테스트 과정을 간단하게 공유 해 보겠습니다.


1. 서버 백단을 작성합니다.

(간단하게 express로 작동하는 http 서버를 만들었습니다.)


2.프로젝트 세팅을 하고, 모듈을 설치합니다.

 (app.js 를 만든폴더로 이동해 npm create 로 npm project를 생성했습니다.)

 (이후express 모듈을npm i express --save 로 설치했습니다)


3.포트를 세팅해야 합니다. 방화벽 세팅으로 갑니다.

 (윈10에서 가장 사랑하는 검색기능.. 넘모 편해요오옷)

 (고급 설정을 누릅니다)

( 인바운드 규칙 -> 새규칙 -> 포트 -> 다음 )

(app.js에서 작성할떄 사용된 포트번호, 굳이 따라 8080 할 필요가 없지만 무슨소린지 모르겠으면 그냥 8080쓰세요. 이후는 그냥 다음 다음 다음 누르면 끝이라 스샷음슴)


4. (옵션)상위 네트워크 설정 정책/포트포워드

이부분은 환경에 따라 다릅니다.
그냥 렌 케이블 뽑아다 쓰는 경우엔 필요가 없을거고, 사내/ 내부 인터넷/정책/서비스 에 따라 다양한 설정이 필요로 합니다.
내가 그걸 모두 알아낼 방법도 없고, 귀찮으니 내가 가진 공유기인 iptime 환경에서 세팅법만 알려dream니다. 

공유기 환경에서는 포트포워드를 설정해 주어야 하는데,

(포트포워드 세팅에 보면 가장 주목해야할 부분은 내부IP주소/프로토콜/외부포트/내부포트)

내부 IP라 하면 공유기 내부 네트워크상 자기 자신(서버 돌리는 컴퓨터)의 IP를,
프로토콜은 지금 이걸 읽는 사람의 시점이라면 TCP를,
내부 포트는 아까 app.js를 작성할떄 사용한 포트 번호를 지정해야 하고,
그리고 외부 포트도 나름대로 자유롭게 세팅이 가능하나, 80으로 해 봅니다. 

Note 
 why 80포트? - http 통신에 쓰이는 default 포트가 80이기 때문에, 무슨 소리냐 하면
 www.google.com 의 도메인을 벗겨내면 123.123.123.123:80 인 것입니다.(물론 아이피는 예제니깐 저거 쳐서 왜 안들어가지냐 하면..ㅎ)
 난 80 싫다 하면 바꾸면 됩니다. 물론 뒷처리도 해주어야겠지만.

Note
 AWS? - AWS같은 웹 서버를 통해 구축을 시도하는 분도 계실것 입니다. 열심히 아름답게 3번을 따라 보안정책을 허용하였으나, 4번에서처럼 포트포워딩을 어떻게 해야할지 모를 경우도 있을것 입니다. 당황하지 마시고 웹 서버 제공자의 문서를 찾아보세요. 이런 설정법은 존재합니다. AWS의 EC2 또한 EC2 대쉬보드에서 설정 할 수 있습니다.


5. 재시작

 윈도우 세팅 바꾸고 제시작 없이 하는법이 있는지 모르겠음. 모를떈 재시작이 답이다.


6. 서버 동작!

이걸 모르겠다 하면 나도 어디서부터 어떻게 설명해야 할지 모르겠습니다. 방금 만든 서버를 돌리라는 뜻입니다.


7. 외부 Ip로 접속시다!

를 하기전에, 내 외부 ip가 뭔지 모르는데? 할 수 도 있습니다.
그래서 아주 배리배리 쉬운 사이트를 소개합니다.
www.whatismyip.com 
(이렇게 들어가면 외부 ip부터 isp정보나 대략적인 위치도 찍힙니다. 우리는 public ip만 있음 okay!)


8. 접속!

방금 알아낸 외부 ip를 그냥 웹사이트에 입력만 하면 끗!!!
(Hello world! 나의 오랜 친구여...)



마치며...

이렇게 내장 아파치로 노드 서버를 퍼블릭 상태로 웹에 띄우는 법을 같이 보았습니다.

이부분까지 왔으나,안되는 케이스도 분명히 다양하게 있을것 입니다. 그런 경우는 아래와 같습니다.

  1. 정책상 외부에서 당신의 서버로 접근이 불가능하게 상위 네트워크 관리자가 제한을 걸었습니다. (주로 학교, 회사, 공공기관 등이 있습니다. 네트워크 관리자랑 상의를 할 수 밖에 없습니다)
  2. 본인 네트워크 세팅 문제입니다 ( 주로 3번과 4번에서 발생합니다) 
그래서 어캐하냐고요? 구글링 하세요.



2018년 11월 3일 토요일

MariaDB/MySQL insert / update / ON DUPLICATE KEY UPDATE

이미 존재하는 프로젝트를 분석하는 작업을 진행중인데, 아무래도 실무자들이 여럿 붙어 만든 프로젝트이며, 포기했던 스프링이다 보니 신기한 부분이 한둘이 아닙니다.

그중 오늘은 재미난 것을 발견했는데 바로 쿼리문 중에 등장한
ON DUPLICATE KEY UPDATE
입니다!

INSERT INTO MYTABLE (foo,bar,hello,world)VALUES (1,2,3,4) 까지는 아주 친숙한데, 이 뒤에 추가 쿼리가 있었습니다!

INSERT INTO MYTABLE (foo,bar,hello,world)VALUES (1,2,3,4) ON DUPLICATE KEY UPDATE UPDATE  foo = 1 , bar = 2 , hello = 3 , world = 4

베리마취하게 마취되어(?) 검색을 좀 때려봤고 매우 마음에 드는 쿼리문을 찾게 되었습니다.

현제 1.0 jellojay 에서는, 아직까지 등록되지 않은 table row 인 경우, insert를 하고, 이미 존재하는 데이터인 경우 update 문을 하게 설계가 되어있습니다. 즉 백단에서 해당 table row의 존재여부부터 확인한뒤, insert와 update에 해당하는 두개의 함수를 만들어 운용하고 있었습니다.

하지만 이런 수고스러움을해결하고자 하여 사용되는것이 바로 ON DUPLICATE KEY UPDATE
였습니다. 이정도 까지 읽었다면 다들 어느정도 어떤 기능인지 납득이 되기 시작할 것 입니다.

해당 TABLE의 KEY값이 이미 중복으로 존재한다는것이 확인이 되면,
INSERT에서 에러를 뿜고 끝내는게 아닌, 해당 KEY값의 ROW를 UPDATE 시켜버리는것 입니다.

이 얼마나 갓 쿼리문인가..난 이런것도 모르고..흐극..
이런 기능은 인기있는 대부분의 db에 존재하는것 으로 보이니, 현제 사용중인 DB가 다르다고 좌절하지 마시고 본인의 DB에서도 같은 기능을 하는 문법을 알아보심을 추천함미다.

2018년 11월 1일 목요일

Spring Exception starting filter [encodingFilter] 문제

아침에 컴터앞에 앉아서 프로젝트를 실행하는데, 어제랑 다르게 에러가 뿜뿜 뜬다.
톰켓 경로안에 무슨 파일을 읽지 못한다고 하는데, 제부팅해도 못읽는다, 클린해도 못읽는다.. 그냥 지워버렸다 (-_-)

그러자 톰켓이 작동은 하지만 이젠 이러한 에러를 토해내는데 :

심각: Exception starting filter [encodingFilter]
java.lang.NoClassDefFoundError: org/springframework/web/filter/CharacterEncodingFilter

와따 참말로...
블로그 가면 뭐 파일을 넣으라고 raw 파일을 던져주는 블로그가 보이는데, 톰켓 버전도 운영체제도 다 다른데 덩그러니 수상하기 짝이없는 파일 던져놓고 그걸로 잘도 바꾸겠다..

다른 해결법을 찾다 나온것이

문제의 project -> properies -> Deployment Assembly -> add -> Java Build Path Entries -> next -> apply

요롷코롬 하면 톰켓의 세팅이 restored되나보다.

으으 이클립스.. 스프링..