IT & Tech

 vsCode local test: .vscode > launch.json > add the following > go to run menu > click run button

{
 "type": "java",
 "name": "Launch CdpServiceApiBatchApplication",
 "request": "launch",
 "mainClass": "com.lge.cdpsvcbatch.CdpServiceApiBatchApplication",
 "projectName": "cdp-serviceAPI-batch",
 "vmArgs": "-Dspring.profiles.active=local" // 이부분 추가해야함
}

• git remote
  • 등록된 remote명 보여줌 
• git remote -v
  • remote명 + URL
  • -v, -vv, -verbose: 수다스러운 
• git remote show [remote명]
  •  git remote show origin
  • 이걸로 중요 정보 다 알수 있음
  • remote에 있는 모든 branch 확인가능
    • branch 상태는 tracked, stale(오래된, 상한 이런 뜻) 으로 나눠짐
    • stale한 애는 git remote prune(가지치다 이런 뜻)으로 제거하라고 친절하게 알려주기까지 함

http://13.125.140.150:8080/posts
http://ec2-13-125-140-150.ap-northeast-2.compute.amazonaws.com:8080/posts
node /home/ec2-user/my-json-server/node_modules/.bin/json-server --host 172.31.10.248 --watch db.json --port 8080
nohup node /home/ec2-user/my-json-server/node_modules/.bin/json-server --host 172.31.10.248 --watch db.json --port 8080 &
-> 잘안되서 pm2 설치
pm2 start npm start -> 안됨
pm2 start `npm start` 됨!!!!

return fetch(`${API_BASE_URL}/admin/terms/published-terms?type=${data}`, {
  method: 'POST',
  headers: getHeaders(),
})
  //.then(res => res.json())
  .then(body => {
    console.log('body', body);
    console.log('body json', body.json());//이게 없으면 크롬인스텍서 preview, response에서 안보임
    console.log('body body', body.body);
    if (body.status===200)
      alert('Successfully Published !');
    else
      alert('Some Error Occured !');
  })
  .catch(() => {});

get width, height: 이거는 상대적으로 간단

<img src='http://...jpg id='bgImg'>
document.getElementById('previewImg').width -> 화면에서 보이는 width
document.getElementById('previewImg').height
document.getElementById('previewImg').naturalWidth -> 이미지 원본크기
document.getElementById('previewImg').naturalHeight
document.getElementById('previewImg').clientWidth -> =width, width와 동일
document.getElementById('previewImg').clientHeigtht

아래처럼 Image 객체를 직접 생성해서 처리할 수도 있음 (<img> element만드는 것과 동일함)

const img = new Image();
img.onload = ()=>{
      alert("Current width=" + img.width + ", " + "Original height=" + img.height);
};
img.src='http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg';

이미지가 load된 후에야 size정보를 파악할 수 있으므로 onLoad 이벤트 리스너를 붙여줘야함, 안그러면 async한 처리를 하다가 뭔가 틀어질 수 있음

<img onLoad = {(e)=>{e.target.xxxx}}>

size in byte: 문제는 이거,,,

response헤더에 정보가 담겨오면 헤더를 통해 알수 있음

'Content-Length'

http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg
요청하면 Content-Length:110,019로 응답이 오며 실제 응답받은 파일사이즈도 110,019 (Byte)

request를 보내고 blob해서 알아낼수도 있음

let img = new Image()
img.crossOrigin = "Anonymous"; // Helps with some cross-origin issues

fetch('foo.png')
.then(response => response.blob())
.then(blob => { img.src = URL.createObjectURL(blob); })

위 방법써도 아래와 같은 CORS 에러발생
Access to fetch at 'http:/..jpg' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

const fileImg = await fetch(URL_TO_IMG).then(r => r.blob());
fileImg.size

 const size=performance.getEntriesByName('http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg');
 잘은 모르겠으나 이것도 해보니 안됨

그런데 문제는.............

header를 통해 알아내거나 blob하려면 request를 직접 보내야 하는데 만약 CORS 이슈가 있다면 직접 응답을 받아내지 못함 -> 이거저거 다 시도해봤으나 안됨, 되게하려면

* 이미지 파일 response해주는 서버의 CORS정책을 바꾸거나

* client가 아니라 서버에서 요청을 대리하도록 만들어야 함

Access to fetch at 'http://kic-qt2-ngfts.lge.com/fts/gftsDownload.lge?biz_code=CDP&func_code=PROGRAM_IMAGE&file_path=/cdp/program_image/test/skin/ncaa_back_fhd.jpg' 

from origin 'http://localhost:3000' 

has been blocked by CORS policy: 

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 

If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

그냥 이렇게 쓰면 됨, ``내부에 또 ``넣는 건 안되는듯

json.data[0].word
  ? `${json.data[0].word} (${json.data[0].reading})`
  : `${json.data[0].reading}`

react component에는 2가지 종류가 있다 - 클래스형, 함수형

• 아래 예시에서 보다시피 클래스형은 함수형보다 코드 길이가 더 길고 복잡
• 함수형은 클래스형보다 메모리 자원도 덜 차지한다고 함 (왜??)
• 그렇지만 함수형은 별도의 state나 lifecycle 정의를 할 수 없었기 때문에 간단한 용도로만 사용되었으나,
• 2019년 리액트 버젼16.8부터 추가된 hook으로 인해 함수형이 클래스형보다 많이 쓰이게 되었음
• 클래스형은 안쓴지 오래되서 이제 어떻게 쓰는지도 잘 모르겠음 (클래스형 https://devowen.com/298 참고하자)

class component

class Classcomp extends React.Component {
    state = {...};
    render(){
    	return(
        	<div className="containter>...</div>
        );
    }
}

function component

function FunctionComp(props){

	return (<div>...</div>);

}

• remote에 아직 안올리고 local내에서만 처리가능할 때
  • git commit --amend로 기존 커밋 수정
  • git reset
  • git checkout
  • 여기서 reset과 checkout의 차이를 알아보자
    • reset 명령은 HEAD가 가리키는 브랜치를 움직이지만(정확히는 브랜치 Refs), checkout 명령은 HEAD 자체를 다른 브랜치로 이동, 참고: https://readystory.tistory.com/150 

• remote에 이미 push 했을 때
  • git revert - 특정 커밋만 취소, but 커밋한 기록이랑 그 커밋을 취소한 기록이 모두 남음
  • 기록안남기고 그냥 강제 덮어쓰기 하려면 local에서 reset이나 rebase등으로 원하는 상태로 만든후에 git push ---force, but 협업자가 많으면 멘붕올수 있음
    • 과거의 특정 커밋 수정하기
      • git push --force: 강제로 덮어쓰기
      • git push --force-with-lease: 덮어쓰기 전에 로컬의 remotes/브랜치A가 참조하고 있는 것과 현재 원격의 브랜치A가 참조하고 있는 내용이 동일할 경우에만, 즉, 다른 누군가가 원격의 브랜치A에 push를 하지 않은 상태에서만 git push --force를 실행
      • git push --force함으로 없어져 버린 commit은 어떻게 될까?
        • git show f65ff0737a0a935b67235aae20ec389db32e5240: 일단 git push --force한 당일에는 아래처럼 결과가 나옴
        • change userNo=null error action 5 (added in amazon-echo, naver-clova)

• 테이블확인
  • select * from information_schema.tables where table_name='tb_rc_term_multi_lang';
• foreign key, primary key, unique (idx) 등 테이블에 있는 constraint 이름과 타입 확인
  • select * from information_schema.table_constraints where table_name='tb_rc_term_multi_lang';
• 각 constraint가 어떤 테이블, 컬럼, 순서로 구성되는지 확인
  • select * from information_schema.KEY_COLUMN_USAGE where referenced_table_name='tb_rc_term'
  • 특정 테이블을 사용하는 모든 foreign key 확인가능 -> 외래키때문에 테이블 삭제 안될 때 유용
• index 상세정보 확인
  • select * from information_schema.STATISTICS where table_name='tb_rc_term_multi_lang';