Nginx와 AWS S3, 왜 큰 용량은 업로드가 안돼?(413 Request Entity Too Large, React, Koa)

Nginx 업로드 용량 제한 설정이 필요한 이유

React, Koa를 사용하고 Nginx를 거쳐 파일 업로드 진행하는 프로세스에서 프론트와 백엔드에서 각각 파일 크기를 체크한 뒤 AWS S3에 저장을 진행하도록 하였으나 다음과 같은 에러가 발생하는 경우가 있습니다.

이미 파일 크기 체크를 진행하고 업로드한 파일이 용량 문제로 에러가 발생한다니 이건 뭐지 싶지만 답은 Nginx에 있습니다.

Nginx는 큰 용량의 파일을 대량으로 업로드하는 서버 공격을 막고자 기본 전송 용량 설정이 1MB로 되어 있습니다. 따라서 1MB 이하의 파일을 한번 업로드해보면 바로 해결의 실마리를 찾을 수 있습니다.

위와 같이 1MB 이하의 파일은 아주 잘 올라갑니다.

설정을 위해 커맨드에서 아래와 입력합니다.

# sudo vi /etc/nginx/nginx.conf

nginx.conf 내부 http 부분에서 client_max_body_size로 설정을 진행합니다.

기본값은 1MB이며, client_max_body_size는 기본적으로 명시되어 있지 않으므로 별도로 입력이 필요합니다.

아래와 같이 http{ } 내부에 client_max_body_size와 원하는 용량을 함께 기입해주고 Nginx를 재시작합니다.

50MB로 설정해두고, Nginx를 리셋해 보겠습니다.

# sudo service nginx reload

다시 업로드해보면 이제는 1MB 이상의 파일도 문제 없이 업로드 되는 것을 확인할 수 있습니다.


참고자료 : https://www.cyberciti.biz/faq/linux-unix-bsd-nginx-413-request-entity-too-large/

엑셀과 인코딩(UTF-8)의 싸움, 이젠 끝내기로 해(feat.몽고MongoDB와 날짜 처리)

엑셀 인코딩 문제를 해결하고, mongoDB에 깔끔하게 저장하는 방법

주로 csv 형식의 파일을 열거나 하나의 프로그램에서 다른 형식의 문서를 불러오면 아래와 같은 문자를 만나는 경우가 있습니다.

�����������Ǹ�

.<-9xH#,;}<:@O,A& 8q,;

이는 문자 인코딩에서 발생하는 문제로, 영어로 썼는데 프랑스어로 해석하는 것과 비슷하다고 보시면 될 것 같습니다.

인코딩 문제는 주로 비알파펫(非 ALPHABET) 언어를 사용하는 곳에서 자주 발생합니다.

컴퓨터에서 처음 문자가 사용될 때는 한 문자 당 1바이트를 사용하는 알파벳만 지원되었으므로 이 때는 문자 인코딩이고 뭐고 할 게 없었습니다.

그러나 차츰 컴퓨터의 사용 영역이 넓어지고 컴퓨터에서 처리할 수 있는 데이터도 늘어나자 다른 언어를 지원하기 위한 방법이 연구되었고, 그 결과 다양한 문자 인코딩이 탄생하였습니다.

한글과 관련한 인코딩만 찾아봐도 아래와 같이 다양합니다.


ASCII(American Standard Code for Information Interchange)

-7bit로 구성되며, 128개의 영문자를 표현

ANSI(American National Standard Institute)

-8bit로 구성되며, 256개의 문자를 표현

EUC-KR(Extended Unix Code – Korea)

-16bit로 구성되며, 글자 하나하나에 부여된 코드를 사용. 중국어, 일본어, 한국어 등의 표현에 사용

CP-949(Code Page 949)

– Windows의 코드 조합으로 EUC-KR의 확장

UTF-8(Universal Coded Character Transformation Format 8 bit)

– 가변 길이 문자 인코딩으로 1~4바이트까지 사용. 우리가 원하는 그것.


위와 같이 다양한 방식을 사용해 문자를 표현하고 있습니다.

하지만 우리를 화나게 하는 것은 엑셀에서 csv로 내보낸 파일을 다른 프로그램(또는 DB)에서 불러오려고 하면 ‘???????’ 라고 표현하는 그것일 것입니다.

원인을 살펴보면, 해당 문제를 겪는 대부분은 Windows + 엑셀의 조합일텐데요.

Windows는 기본적으로 CP-949로 인코딩을 하지만 읽는 프로그램은 UTF-8을 사용하다 보니 주로 발생하는 문제입니다.

따라서 인코딩 시 UTF-8로 내보내기만 하면 문제는 해결되지만 Windows는 쉽게 UTF-8로 바꿔주려고 하지 않습니다…

그래서 엑셀로 내보내는 csv 파일을 UTF-8로 변환하는 방법에 대해 알아보겠습니다.

위와 같은 데이터를 가진 엑셀 친구를 UTF-8 형식으로 만들어 보겠습니다.

먼저 저 친구를 그냥 csv로 내보내기를 하면 Windows에서 지정한 인코딩 형식으로 내보내기가 됩니다.

확인해볼까요?

엑셀 2010을 사용해 테스트를 진행해보겠습니다.

다른 설정 없이 위와 같이 CSV 형식으로 다른 이름으로 저장을 하고 mongoDB에서 가져오기를 하면 다음과 같이

‘알아듣게 얘기하라’는 식의 반응을 보입니다…

그럼 이제 엑셀에서 인코딩 형식 지정하여 내보내기를 해보겠습니다.

저장 시 위와 같이 [도구-웹 옵션]으로 들어가면

이렇게 친절하게 [인코딩] 탭에서 인코딩 형식의 지정이 가능합니다…..만

파일명을 test(set).csv로 저장해보았습니다.

하지만 mongoDB에서 위 파일을 불러오면

mongoDB가 왜! 뭐! 라고 하는 것 같습니다.

엑셀에서 인코딩 형식을 지정해도 제대로 반영이 되지 않는 것 같습니다.

물론 최신 엑셀에는 ‘csv 내보내기(UTF-8)’과 같은 방식의 확장자 유형의 선택이 생겼으나 현재는 엑셀 최신 버전이 없어 서 테스트가 불가하므로… 다음.

여기서는 다른 방식으로 인코딩 형식을 변경해 보도록 하겠습니다.

엑셀로 저장한 csv를 메모장으로 불러옵니다(엑셀 파일이 아닌 csv 파일입니다).

메모장에서 ‘다른이름으로 저장’을 선택하여 아래와 같이 인코딩을 UTF-8로 변경해줍니다.

csv 파일 형식은 유지해야 하므로 파일 형식은 모든 파일(*.*)로 변경해주고 파일 이름의 확장자에는 .csv를 유지합니다.

그리고 다시 한번 mongoDB에서 조우를 해보겠습니다.

더이상 반항하지 않습니다.

하여, IMPORT를 눌러보면!

문맹은 벗어났으나….

이제는 날짜를 못 알아먹네요.

날짜도 입맛에 맞게 맞춰주겠습니다.

먼저 날짜를 모두 선택하고 ‘.’으로 구분된 기호를 ‘/’로 변경해줍니다.

CTRL + H를 사용합니다.

변경 후 해당 칼럼(또는 해당 셀)을 날짜 형식으로 변경해줍니다.

DB에 저장될 타입을 Date로 변경해줍니다.

그리고 마지막으로 기회를 한번만 더 주겠습니다.

그리고 IMPORT!

더 이상 반항을 하지 않는 착한 데이터를 표현합니다.

위 날짜 데이터는 toLocaleDateString()과 같은 자바스크립트 함수로 깔끔하게 정리해주면 이쁘게 출력이 가능합니다.

그럼 더 이상 엑셀과 인코딩으로 스트레스 받지 않기를 바랍니다.

peace!

깃허브(Github) PUSH와 Personal Access Token 문제 해결하기

Support for password authentication was removed on August 13, 2021. 에러

깃허브의 정책 변경으로 인해 8월 13일부터는 개인 액세스 토큰을 사용해야 푸시(PUSH)가 가능하도록 변경이 되어

설정하는 방법을 간략하게 알아보겠습니다.


1. 토큰 발급

vscode에서 푸시를 진행하면 8월 13일 이후로는 위와 같은 에러 메시지와 함께 토큰을 사용하라는 에러가 발생합니다.

토큰 발급은 다음 페이지에서 진행합니다.

https://github.com/settings/tokens

접속하여 Generate new token 클릭

위 페이지에서 Note, Expiration, Select scopes 항목을 선택하면 됩니다.

Note는 토큰 설명, Expiration은 만료 기간, Select scopes는 범위를 지정합니다.

기본적인 범위만 지정하고 싶은 경우 Select scopes는 repo만 체크하면 됩니다.

위 세 항목 작성 및 체크 후 Generate token을 클릭합니다.

토큰이 생성되면 위와 같이 확인할 수 있으며, 생성된 토큰은 홈페이지에서 재확인할 수 없으므로 복사해두고 사용하시면 됩니다.


2. 자격 증명 설정하기

발급 받은 토큰을 윈도우의 자격 증명에 설정하면 작업이 완료됩니다.

윈도우에서 자격 증명 관리자를 실행합니다.

Windows 자격 증명을 선택하면 아래와 같이 github 자격 증명을 확인할 수 있습니다.

위와 같은 형식으로 된 부분을 선택하여 편집을 클릭합니다.

위에서 발급 받은 토큰을 복사하여 암호 부분에 붙여넣기 및 저장하면 작업이 완료됩니다.


Useful Shortcut Keys For Visual Studio Code(VS code단축키 모음)

효율적인 작업을 위한 비쥬얼 스튜디오 코드(VS Code) 단축키 모음

Sometimes we need some shortcut keys for improving efficiency and avoiding irritable repeating works.

But occasionally, we use it because just seems cool!

VS code shortcut keys will help you and your work faster.

You can also check or edit shortcuts keys at File – Preferences – Keyboard Shortcuts.

Or follow default set version as below.

단축키는 효율성을 높이거나 반복되는 작업에 자주 사용하곤 합니다.

그 작업이 게임이건 사무용 프로그램이건 말이죠.

단축키를 쓰면 실력자로 보이기도 하고, 약간은 숙련자로 보이기도 하는 것 같습니다.

익숙한 단축키부터 유용한 단축키까지 VS Code에서 사용할 수 있는 단축키를 정리해보았습니다.

물론 File – Preferences – Keyboard Shortcuts에서 단축키의 수정도 가능합니다.


SHORTCUT KEYS FOR VS CODE

EDIT
CopyCtrl + C복사
CutCtrl + X잘라내기
PasteCtrl + V붙여넣기
Select AllCtrl + A전체 선택
Undo(↔Redo)Ctrl + Z실행취소(↔다시실행)
Redo(↔Undo)Ctrl + Y다시실행(↔실행취소)
Copy LineAlt + Shift + ↑/↓행 복사하기
Move LineAlt + ↑/↓행 옮기기
Insert Line AboveCtrl + Shift + Enter한 줄 삽입하기(위쪽)
Indent LineCtrl + ]들여쓰기
Line CommentCtrl + /코멘트 (라인)
Block CommentAlt + Shift + A코멘트 (블록)
FindCtrl + F찾기
ReplaceCtrl + H바꾸기
Trigger SuggestionCtrl + Space완성 제안
Close EditorCtrl + W에디터 닫기
SaveCtrl + S저장하기
Reopen closed EditorCtrl + Shift + T닫은 에디터 열기
Full Screen ModeF11풀스크린
Sidebar visibilityCtrl + B사이드바 열기
Show TerminalCtrl + `터미널 열기
Debug
Start/ContinueF5시작/계속
StopShift + F5정지
BreakpointF9브레이크 포인트

VS Code 터미널 Terminal에서 yarn 실행하기

How to use ‘yarn’ with VS Code terminal


VS Code와 yarn을 설치하고 VS Code의 터미널에서 yarn을 사용하려고 하면 다음과 같이 에러가 뜨는 경우가 있어요.

이는 스크립트의 실행 권한으로 발생하는 문제인데요. Node.js command prompt 등의 프롬프트를 따로 열고 실행하면 문제없지만 하나의 툴(VS Code)로 코드도 편집하고 프롬프트 명령도 사용할 수 있으면 좋잖아요.

다음과 같이 간단한 작업을 통해 문제를 해결할 수 있습니다.

1. Windows PowerShell 을 관리자 권한으로 실행


2. 주어진 권한 상태 확인(get-ExecutionPolicy)

get-ExecutionPolicy 명령을 입력하면 권한이 Restricted로 설정되어 있는 것을 확인할 수 있어요.
간단하게 이 권한을 RemoteSigned로 변경해주면 됩니다.


3. Set-ExecutionPolicy RemoteSigned 입력 -> y

Set-ExecutionPolicy RemoteSigned를 실행하면 변경 여부를 묻고, y를 입력하면 변경이 완료!
get-ExecutionPolicy 명령을 통해 변경된 권한을 확인할 수 있어요.


4. 작동 여부 확인

이제 자유를 얻은 VS Code 터미널에서 yarn 명령을 실행해 만족스러운 결과를 확인합니다.