about the things that I know and I love.
웹스톰(webstorm)에는 기본적으로 prettier가 설치되어 있습니다.
그러므로 npm 또는 yarn을 통해서 node_modules에 prettier를 설치해주고 prettier관련 설정만 해주면 됩니다.
npm install --save-dev --save-exact prettier
위와 같이 설치해준 뒤 File -> Settings -> Languages & Frameworks -> JavaScript -> Prettier에 들어가서 다음과 같이 설정해줍니다.
Prettier package에는 node_modules/prettier가 위치하는 주소를 지정하고 아래 체크 박스를 모두 체크해주면 저장 시에도 prettier가 작동이 됩니다.
작동이 안될 때는 웹스톰을 재시작.
prettier 작업의 단축키는 alt+ctrl+shift+p 입니다.
다른 옵션을 설정하지 않는 한 맵을 최대로 축소하면 다음과 같이 지도가 반복되어 나타납니다.
여기서 맵을 오른쪽이나 왼쪽으로 넘겨서 중심을 바꿔도 Marker는 그대로 있습니다.
하지만 맵 렌더링 시 다음과 같이 ‘worldCopyJump’ 옵션을 넣어주면 중심이 이동하더라도 기존의 Marker를 모두 표시할 수 있습니다.
<MapContainer
center={[35.102, 129.067]}
zoom={5}
scrollWheelZoom={true}
worldCopyJump
>
옵션 하나만으로 맵을 이동하면 Marker도 이동하여 같은 좌표에 표시되는 것을 확인할 수 있습니다.
leaflet의 기본 맵은 각 지역마다 현지 나라의 언어로 표기되어 한국 맵은 한국어, 일본 맵은 일본어, 프랑스 맵은 프랑스어로 표기되어 있습니다.
하지만 전체 맵을 영어로 표기하고 싶거나 산맥, 해양 등 용도에 맞게 지도의 이미지를 변경하고 싶을 때는 아래 링크에서 원하는 맵의 유형과 서버를 확인하여 서버만 변경해주면 됩니다.
http://leaflet-extras.github.io/leaflet-providers/preview/
링크에 접속하면 다음과 같은 화면입니다.
초록색 네모칸에서 서버 정보, 빨간색 네모칸에서 맵의 종류 샘플을 볼 수 있습니다.
샘플로 OpenStreetMap.France를 적용해보도록 하겠습니다.
빨간 네모칸에서 OpenStreetMap.France을 선택하면 초록 네모칸에 서버 정보가 표시됩니다.
‘https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png’
‘© OpenStreetMap France | © <a href=”https://www.openstreetmap.org/copyright”>OpenStreetMap</a> contributors’
이 두 부분만 코드에서 변경해주면 바로 적용이 됩니다.
import { MapContainer, TileLayer, useMap, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import { icon } from "leaflet";
const Icon = icon({
iconUrl: "marker-icon.png",
iconSize: [16, 16],
iconAnchor: [12, 16],
});
const MyMap = () => {
return (
<MapContainer
center={[37.56675, 126.97842]}
zoom={10}
scrollWheelZoom={true}
style={{ width: "500px", height: "500px" }}
>
<TileLayer
attribution='© OpenStreetMap France | © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png"
/>
<Marker position={[37.56675, 126.97842]} icon={Icon}>
<Popup>서울시청이에요.</Popup>
</Marker>
</MapContainer>
);
};
export default MyMap;
설정에 따라 변경된 맵과 언어를 확인할 수 있습니다.
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/
주로 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을 사용해 테스트를 진행해보겠습니다.
‘알아듣게 얘기하라’는 식의 반응을 보입니다…
그럼 이제 엑셀에서 인코딩 형식 지정하여 내보내기를 해보겠습니다.
저장 시 위와 같이 [도구-웹 옵션]으로 들어가면
이렇게 친절하게 [인코딩] 탭에서 인코딩 형식의 지정이 가능합니다…..만
파일명을 test(set).csv로 저장해보았습니다.
하지만 mongoDB에서 위 파일을 불러오면
mongoDB가 왜! 뭐! 라고 하는 것 같습니다.
엑셀에서 인코딩 형식을 지정해도 제대로 반영이 되지 않는 것 같습니다.
물론 최신 엑셀에는 ‘csv 내보내기(UTF-8)’과 같은 방식의 확장자 유형의 선택이 생겼으나 현재는 엑셀 최신 버전이 없어 서 테스트가 불가하므로… 다음.
여기서는 다른 방식으로 인코딩 형식을 변경해 보도록 하겠습니다.
엑셀로 저장한 csv를 메모장으로 불러옵니다(엑셀 파일이 아닌 csv 파일입니다).
메모장에서 ‘다른이름으로 저장’을 선택하여 아래와 같이 인코딩을 UTF-8로 변경해줍니다.
csv 파일 형식은 유지해야 하므로 파일 형식은 모든 파일(*.*)로 변경해주고 파일 이름의 확장자에는 .csv를 유지합니다.
더이상 반항하지 않습니다.
하여, IMPORT를 눌러보면!
문맹은 벗어났으나….
이제는 날짜를 못 알아먹네요.
날짜도 입맛에 맞게 맞춰주겠습니다.
CTRL + H를 사용합니다.
DB에 저장될 타입을 Date로 변경해줍니다.
그리고 마지막으로 기회를 한번만 더 주겠습니다.
그리고 IMPORT!
더 이상 반항을 하지 않는 착한 데이터를 표현합니다.
위 날짜 데이터는 toLocaleDateString()과 같은 자바스크립트 함수로 깔끔하게 정리해주면 이쁘게 출력이 가능합니다.
그럼 더 이상 엑셀과 인코딩으로 스트레스 받지 않기를 바랍니다.
peace!
Support for password authentication was removed on August 13, 2021. 에러
깃허브의 정책 변경으로 인해 8월 13일부터는 개인 액세스 토큰을 사용해야 푸시(PUSH)가 가능하도록 변경이 되어
설정하는 방법을 간략하게 알아보겠습니다.
토큰 발급은 다음 페이지에서 진행합니다.
https://github.com/settings/tokens
접속하여 Generate new token 클릭
위 페이지에서 Note, Expiration, Select scopes 항목을 선택하면 됩니다.
Note는 토큰 설명, Expiration은 만료 기간, Select scopes는 범위를 지정합니다.
기본적인 범위만 지정하고 싶은 경우 Select scopes는 repo만 체크하면 됩니다.
토큰이 생성되면 위와 같이 확인할 수 있으며, 생성된 토큰은 홈페이지에서 재확인할 수 없으므로 복사해두고 사용하시면 됩니다.
발급 받은 토큰을 윈도우의 자격 증명에 설정하면 작업이 완료됩니다.
Windows 자격 증명을 선택하면 아래와 같이 github 자격 증명을 확인할 수 있습니다.
위와 같은 형식으로 된 부분을 선택하여 편집을 클릭합니다.
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에서 단축키의 수정도 가능합니다.
| EDIT | ||
| Copy | Ctrl + C | 복사 |
| Cut | Ctrl + X | 잘라내기 |
| Paste | Ctrl + V | 붙여넣기 |
| Select All | Ctrl + A | 전체 선택 |
| Undo(↔Redo) | Ctrl + Z | 실행취소(↔다시실행) |
| Redo(↔Undo) | Ctrl + Y | 다시실행(↔실행취소) |
| Copy Line | Alt + Shift + ↑/↓ | 행 복사하기 |
| Move Line | Alt + ↑/↓ | 행 옮기기 |
| Insert Line Above | Ctrl + Shift + Enter | 한 줄 삽입하기(위쪽) |
| Indent Line | Ctrl + ] | 들여쓰기 |
| Line Comment | Ctrl + / | 코멘트 (라인) |
| Block Comment | Alt + Shift + A | 코멘트 (블록) |
| Find | Ctrl + F | 찾기 |
| Replace | Ctrl + H | 바꾸기 |
| Trigger Suggestion | Ctrl + Space | 완성 제안 |
| Close Editor | Ctrl + W | 에디터 닫기 |
| Save | Ctrl + S | 저장하기 |
| Reopen closed Editor | Ctrl + Shift + T | 닫은 에디터 열기 |
| Full Screen Mode | F11 | 풀스크린 |
| Sidebar visibility | Ctrl + B | 사이드바 열기 |
| Show Terminal | Ctrl + ` | 터미널 열기 |
| Debug | ||
| Start/Continue | F5 | 시작/계속 |
| Stop | Shift + F5 | 정지 |
| Breakpoint | F9 | 브레이크 포인트 |
VS Code와 yarn을 설치하고 VS Code의 터미널에서 yarn을 사용하려고 하면 다음과 같이 에러가 뜨는 경우가 있어요.
이는 스크립트의 실행 권한으로 발생하는 문제인데요. Node.js command prompt 등의 프롬프트를 따로 열고 실행하면 문제없지만 하나의 툴(VS Code)로 코드도 편집하고 프롬프트 명령도 사용할 수 있으면 좋잖아요.
다음과 같이 간단한 작업을 통해 문제를 해결할 수 있습니다.
get-ExecutionPolicy 명령을 입력하면 권한이 Restricted로 설정되어 있는 것을 확인할 수 있어요.
간단하게 이 권한을 RemoteSigned로 변경해주면 됩니다.
Set-ExecutionPolicy RemoteSigned를 실행하면 변경 여부를 묻고, y를 입력하면 변경이 완료!
get-ExecutionPolicy 명령을 통해 변경된 권한을 확인할 수 있어요.
이제 자유를 얻은 VS Code 터미널에서 yarn 명령을 실행해 만족스러운 결과를 확인합니다.