-
Reactjs 2021‧04‧09
`value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
리액트에서 input 요소에 value 값을 데이터를 가져와 넣는 형식으로 구성했다면 콘솔에 아래와 같이 오류가 빨갛게 뜬다. 그래도 번들링은 이상없이 된다. 그렇지만 우리는 이 빨간색이 저주스럽지 않은가? 당연히 없애고 싶은 개발자의 마음이니까~ 이렇게 코드를 작성했는데 value에 보면 this.state.companyCode 값을 가져와 넣도록 되어 있다. 바로 이 부분이 잘못된 것이다. 없을 경우에 대해서도 처리를 해주자 value={this.state.companyCode} 를 value={this.state.companyCode […]
-
AWS, Server, Tools 2021‧01‧25
mac 에서 ssh ppk 키 pem 키로 변환 및 접속
aws 같이 pem 파일을 제공해주고 그걸로 접속하면 편하긴 한데 가지고 있는 파일이 ppk 확장자일 경우 변환해서 접속한다. brew를 통해 putty를 설치한다. brew가 설치되어 있지 않으면 https://brew.sh/index_ko 에서 터미널에 복붙할 커멘드를 복사한 뒤 터미널에서 설치한다. brew가 설치되었으면 아래 커맨드를 터미널에서 입력하여 putty를 설치한다. 그 다음 터미널로 ppk가 있는 곳으로 이동하여 아래처럼 변환 커맨드를 입력한다. 이렇게 하면 원본.ppk 에서 […]
-
Reactjs 2021‧01‧07
react, vue - Uncaught SyntaxError: Unexpected token < (흰 화면 이슈)
매번 SPA로 프로젝트를 진행할 때 마다 나를 괴롭히는 에러 메시지 ㅠUnexpected token '<' 지금까지 vue.js 로 구축하거나 react.js 로 구축하여 프로젝트를 번들링 후 배포하고 나면 종종 발생하는 에러라서 이 것 때문에 많은 대응책을 마련해 왔다. 원인을 살펴 보자면 배포하고 접속하면 index.html이 브라우저의 캐시 상태이기 때문에 배포 바로 이전 버전의 index.html 이다. 그 안에 번들링한 js파일을 […]
-
Reactjs 2020‧12‧23
this.props.history.push 이동시 파라미터 같이 보내기
보통 이렇게 이동할 링크를 push() 안에 넣어 쓴다. 하지만 사용자 토큰 정보나 결제 정보 또는 게시물의 일련번호 등 다음 페이지로 넘어갈 때 파라미터를 가지고 넘어가야할 때 push를 써서 이동할 때는 아래처럼 이용한다. 위 처럼 전달할 파라미터를 담아 보내면 된다. 객체 형식으로 보내도 된다.그리고 전달 받는 페이지에서는 아래처럼 불러온다. 이렇게 불러오면 getParams안에 전달받은 파라미터가 담아져 있다. […]
-
AWS 2020‧12‧18
lambda 함수에서 cloudWatch 로그 안보내기
AWS에서 람다를 쓰다가 클라우드와치에 로그를 보내는 부분을 활성화 상태로 두었다가 요금 폭탄을 맞았다. 물론 반복적 오류 로그를 파악하지 못한 내 잘못이기도 하다. 아무튼 로그가 필요할 때만 사용하고 필요 없을 때는 아래처럼 비활성화 한다. 이렇게 Effect 부분에 Allow 대신 Deny를 넣는다.
-
Android 2020‧12‧16
안드로이드 - 네트워크 끊겼을 때 webview에 '웹페이지를 찾을 수 없음' 안뜨게 하기
안드로이드에서 인터넷이 끊기면 웹뷰에 url과 함께 안드로이드에서 제공하는 '웹페이지를 찾을 수 없음'이 뜬다. 이렇게 되면 만들고 있는 프로젝트와 어울리지 않게 되버린다.이 페이지를 안뜨게 하고 기존에 연결되어 있는 페이지에 머무르게 하려면 아래처럼 코드를 넣으면 된다. 그리고 다른 페이지로 이동하는 버튼들이나 함수들에서 네트워크를 한번 더 체크해서 네트워크가 연결되어 있다면 페이지를 이동 시킨다.이 방식은 내가 프로젝트들을 진행할 때 […]
-
Tools 2020‧12‧14
ffmpeg 이용해서 HLS 파일 인코딩
일단 brew를 이용해서 ffmpeg를 설치한다. brew가 설치되어 있지 않으면 https://brew.sh/index_ko 에서 터미널에 복붙할 커멘드를 복사한 뒤 터미널에서 설치한다. brew가 설치되었으면 터미널에서 ffmpeg를 설치한다. 설치가 완료되었으면 터미널로 동영상 변환할 폴더로 이동하여 아래처럼 입력하고 실행한다. 위 예제는 test.mp4 를 1920x1080 사이즈로 10초로 영상을 쪼개어 만들고 testindex.m3u8의 인덱스 파일에 이 쪼갠 파일들을 리스트업 한다는 것이다.
-
AWS, Javascript, jQuery 2020‧12‧13
동영상 스트리밍 서비스 구축 (AWS s3/cloudFront, HLS, video.js)
동영상을 스트리밍 할 수 있는 방법론은 다양하다.구글을 검색하고 정리하고 다시 찾고 시도하고 해왔지만 결론은 동영상을 HLS로 인코딩하고 그 파일을 AWS의 S3에 업로드하여 cloud front에 배포되고 Javascript를 이용해서 사용자의 웹브라우져에서 스트리밍 하는 것이다. 이제부터 설명하는 플랫폼들의 UI와 기능은 2020년 12월 10일 기준으로 작성되어 차후 버전이 업데이트들 되면 다르게 작업해야할 수 있다는 점 주의해야 한다.자세한 설명은 생략하고 […]
-
Reactjs 2020‧10‧27
iOS에서 뒤로 가기 전환시 스크롤링 포지션 이슈 (route, scrollTop)
최근에 react.js 로 구현된 어플리케이션에서 페이지 이동 후 뒤로 가기 위한 행동을 하면 스크롤 포지션이 엄하게 바뀌는 경우를 대처하기 위해 이런 저런 방법을 찾아 본 뒤 원인을 찾게 되었다. iOS에서 앵커 태그(a) 가 아닌 이동일 경우에 생기는 이슈인 듯 하다.예) this.props.history.push('/main');리액트 라우터를 이용해 페이지가 전환되었을 경우 생기는 데 기존 프로젝트에 보니 route에 scrolltop이라는 컴포넌트를 보고 […]
-
Javascript, jQuery 2020‧10‧16
html2canvas 사용시 특정 영역 프린트 제외 시키기
data-html2canvas-ignore 속성으로 프린트 제외하고 싶은 엘리먼트를 지정할 수 있다.아래 예제에 data-html2canvas-ignore 속성에 true를 넣은 것을 볼 수 있다.