본문 바로가기

전체 글154

Webpack : Webpack 빌드후 자동으로 S3로 배포하기 (webpack-s3-plugin) Webpack으로 웹 애플리케이션을 빌드한 뒤에 S3로 업로드를 해야 하는 경우가 있습니다. 보통 S3를 통한 정적 웹페이지 배포를 할 때, 또는 특정한 버킷 위에 Webpack으로 bundling 한 js파일을 업로드해야 할 경우가 있을 때 이러한 경우가 발생하게 됩니다. 수동으로 dist폴더 안에 있는 파일들을 drag-end-drop을 통해 S3로 업로드 할 수도 있지만, Webpack 명령어 사용 후에 자동으로 S3 Bucket에 올려주는 플러그인이 있어 한번 소개해드리도록 하겠습니다. webpack-s3-plugin 오늘 설명해드릴 플러그인은 바로 webpack-s3-plugin 인데요, 아래 링크를 누르시면 npm 설명 페이지를 확인하실 수 있습니다. webpack-s3-plugin Uploa.. 2022. 7. 22.
React-Native: 안드로이드 빌드 및 배포하기 React-Native로 몇 개의 앱을 만들어 보았는데 항상 안드로이드 배포를 할 때마다 찾아보고 고생을 많이 한 것 같습니다. 그래서 간단하게 안드로이드 배포시 꼭 필요한 부분만 정리해서 포스팅을 해보았습니다. Release 빌드 준비해야할 것 1. Icon 준비하기 2. 구글 개발자 등록하기 3. keystore 발급하기 4. android/gradle.properties 편집하기 5. release apk 만들기 6. Play Store에 앱 등록하기 1. Icon 준비하기 먼저 기본적으로 안드로이드 앱을 만들고 플레이스토어에 등록하기 위해 준비해야 할 이미지는 아래와 같습니다. 최소 2개의 스크린샷 (측면 최소 320픽셀, 최대 3840픽셀의 JPG 또는 24비트의 PNG) 그래픽 이미지 (102.. 2022. 7. 12.
HTTP : 브라우저에서 axios 요청 보낼시 브라우저 캐시(from disk cache)로 부터 응답 되는 문제 해결하기 최근에 프로젝트를 진행하던 중에, 리소스 요청을 하는 Rest API Request를 날렸을 때 서버로부터 응답이 오는 것이 아니라 이전의 데이터를 반복해서 가져오는 문제가 발생하였습니다. 이를 해결하기 위해 열심히 구글링을 하여 원인을 찾아보았습니다. 문제 원인 문제의 원인은 인터넷 브라우저에서 get 함수를 호출했을 때 동일한 url이면 브라우저 자체에서 캐시 처리가 되어 실제 서버를 호출하지 않는 문제 때문이었습니다. 즉 새로운 요청을 서버로부터 받아와야 하는데 크롬 브라우저 자체의 캐시로 요청을 처리한 것입니다. 브라우저 캐시의 생명주기 위와 같은 이유가 일어나는 이유를 알기 위해서는 브라우저의 캐시 생명주기를 알아야합니다. 보통 웹브라우저가 서버에서 지금까지 요청한 적이 없는 리소스를 요청하게 .. 2022. 6. 21.
express: 413 payload too large 에러 해결하기 얼마 전 회사에서 express로 백엔드 개발을 하다가 프론트엔드의 요청에 대해서 413 에러가 발생하였습니다. 이에 대한 해결 방법을 간단하게 공유해보도록 하겠습니다. 문제점 먼저 알아볼 내용은 413 에러가 어떤 에러인지 파악하는 것이었습니다. HTTP 상태 코드에서 413 상태 코드는 Payload Too Large 상태를 의미하는 것으로 요청 Entity가 서버에 정의된 제한보다 크다는 것을 의미합니다. (Request Entity Too Large라는 의미이기도 합니다.) 즉 request 크기가 서버에서 제한해놓은 사이즈보다 크다는 것을 나타내는 것입니다. 따라서 해당 제한을 풀어주면 문제는 자연스럽게 해결됩니다. 제가 구축한 Rest API 서비스는 EC2(리눅스)에 express 서버가 띄.. 2022. 6. 2.
Webstorm : 마지막 개행문자 자동으로 지워지는 옵션 끄기 문제점 WebStorm에서 프로젝트를 진행하던 중에 마지막 개행 문자가 자동으로 지워지는 현상을 발견하였습니다. 파일을 바꾸지 않았는데도 마지막 개행문자가 자동으로 지워지는 바람에 이전 소스코드와 비교했을 때 Git에서 계속 바뀐 파일로 체크되어 불편함을 겪었습니다. 즉 예전 소스코드에서 마지막 개행문자가 있었는데, 소스코드를 수정하거나 단순 저장만 해도 Webstorm에서 마지막 개행문자를 지워주는 옵션 때문에 계속 Diff가 표시된 것입니다. 문제의 소스파일 Show Diff 해결법 아래와 같이 이동하셔서 Preperence > Editor > General > On Save > Remove trailling blank lines at the end of saved files 체크 해제 이렇게 해주시.. 2022. 5. 27.
리눅스 : Swap 메모리란? EC2를 이용하여 리눅스 Shell에서 개발을 진행하던 중에, 서버의 용량을 확인하다가 Swap 메모리라는 공간을 확인하였습니다. Swap 메모리는 어디서 많이 들어봤는데, 정확한 개념을 알고 싶고, 리눅스 내에서는 어떠한 역할을 하는지 알고 싶어서 한번 정리해보게 되었습니다. Swap 메모리란? 스왑 메모리란, 실제 메모리 Ram이 가득 찼지만 더 많은 메모리가 필요할때 디스크 공간을 이용하여 부족한 메모리를 대체할 수 있는 공간을 의미합니다. 실제 디스크 공간을 메모리처럼 사용하는 개념이기 때문에 가상 메모리라고 할 수 있습니다. 속도면에서는 실제 메모리가 아닌 하드디스크를 이용하는 것이기 때문에 메모리 속도면에서는 현저히 떨어진다고 할 수 있습니다. 리눅스에서의 Swap 메모리 리눅스에서의 Swap.. 2022. 5. 3.
Git : github 개인 엑세스 토큰 발급 / Git Crediential을 이용하여 원격저장소에 처음 한번만 로그인하도록 계정정보 캐싱 Github의 인증 정책 변경 github는 2021년 08월 13일부터 인증정책을 변경하여 개인 Github ID, Password를 통해 원격 저장소의 push와 같은 명령을 막고, 개인 Access Token을 발급받거나, SSH를 통한 원격 저장소 변경만 허용하도록 정책을 바꾸었습니다. 실제로 ID / Password를 통해 서버 push를 테스트해보면 아래와 같은 에러가 발생합니다. 오늘은 ssh와 Personal Access Token을 이용한 github 인증 환경 구성 방식 중에 Personal Access Token을 발급받는 방식을 알아보겠습니다. Github로 개인 Access Token 발급받기 일단 Github에서 Access Token을 받기 위해서 github 페이지로 이동하여.. 2022. 4. 11.
JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL) 웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blob이란? blob은 binary large object의 약자입니다. 이름처럼 바이너리 형태로 큰 객체를 저장하며, 이 객체는 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 나타냅니다. blob의 경우 Chrome에서 954MB 정도의 이진 데이터를 저장할 수 있고, 이는 환경에 따라 다릅니다. blob으로 저장할 수 있는 최대 용량을 구하는 방법에 대해 궁금하신 분들은 아래 링크를 참조해주세요. JS: chrome 브라우저에서 blob 최대 용량 구하기 브라우저에서 blob에 저장할수.. 2022. 4. 8.
JS: chrome 브라우저에서 blob 최대 용량 구하기 브라우저에서 blob에 저장할수 있는 최대 용량을 구하는 방법에 대해 간단하게 알아보겠습니다. 일단 blob에 대한 개념은 아래 링크를 통해 확인해주시면 됩니다. JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL) 웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blo jw910911.tistory.com Blob 최대 용량 계산 공식 Blob의 최대 용량을 계산하는 공식입니다. OS 환경에 따라 할당할수 있는 Blob 사이즈가 달라지는 것을 확인 할 수 있습니다. 브라우저에서.. 2022. 3. 18.
Git: stash list의 각 stash 이름 바꾸기 (rename) git에서 stash는 정말 좋은 옵션입니다. stash를 통해 우리는 기존 로컬 변경사항을 잠시 저장해 두고 서버에서 최신 commit을 pull을 받거나 다른 브랜치로 이동하기 전에 local상태를 깔끔하게 정리 한 뒤에 브랜드를 이동할 수 있습니다. 이전에 stash에 관련된 포스팅을 하였는데요, stash 사용방법은 아래 링크를 통해 들어가시면 잘 정리되어 있으니 참고 부탁드립니다. [git - stash 명령어에 대해 알아보자!] 오늘 알아볼 내용은 기존의 Stash의 이름을 바꾸는 방법입니다. Stash로 이름 주기 기본적으로 Stash를 사용하면 아래 처럼 현재 브랜치의 이름과 마지막 커밋 이름으로 Stash 이름을 지정하게 됩니다. 이름을 지정하고 싶을때 보통 Save명령어를 통해 원하는 .. 2022. 2. 27.

티스토리툴바