프로그래밍 공부 노트

예전에 컴퓨터를 새로 구매하면서 VSCode 설정을 동기화 해본 경험이 있다. 하지만 최근 주니어 개발자로 취업하고 회사에서 업무용으로 지급받은 맥에도  VSCode 설정도 동기화 해야했는데 자주하는 경험이 아니다보니 또다시 찾아보게되어 추후에도 쉽게 찾아볼 수 있도록 블로그에 작성하게 되었다. VSCode 설정을 동기화 하는 방법은 2가지가 있다.  1. VSCode에 내장되어있는 Syncs 기능 사용하기 2. VSCode Extensions에 있는 Settings Sync 사용하기 나의 경우 회사에서는 개인적으로 사용하는 계정을 일체 사용하지 않을것이기 때문에 2번 방법을 사용했다. 1번 방법의 경우 동일한 github 계정을 사용해여야 동기화가 가능하다. 1번. Settings Sync 익스텐션 설치하기 https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync 2번. Github에서 Personal Access Token 생성하기 Settings -> Developer Settings -> Personal access tokens -> Generate new token -> Note(식별 내용 작성) -> Expriration 설정하기(원하는 만료기간 설정) -> gist 체크 박스 체크 -> Generate token 클릭 주황색으로 가려진 토큰은 복사해서 보관해둬야 한다. 발급된 토큰은 한번만 확인할 수 있다. 새로 고침시 비공개처리 된다. 3번. gist 접속해서 Create sercret gist 생성하기 구글에 gist 글 검색한다. 들어가서 생성버튼을 누르고 제목, 내용? 양식은 없으며 본인이 알아볼 수 있는 식별 내용 작성하고 Create sercret gist 클릭 생성한 gist를 눌러보면 URL Params 끝에 Gist Id 가 작성되어있다.  4번. VScode에서 Shift + Option + U를 눌러 설정 업로드하

AWS EC2에 ssh를 이용하여 접속할때 키파일에 대한 Permission 오류가 발생한다. 키파일에 대한 권한 설정을 변경해줌으로써 문제를 해결할 수 있었는데 그때 사용되는것이 chmod 이다. chmod 뒤에 숫자 세개가 나오는데 차례대로 나(사용자) / 그룹 / 전체에 대한 권한을 의미한다. 권한은 세가지로 read(4), write(2), execute(1) 가 있는데 이 숫자들 합을 이용하여 나(사용자) / 그룹 / 전체 각각에 권한을 설정할 수 있다. 예를 들어 5면, 5 = 4 + 1 로 read, write 권한이 있음을 의미한다.  EC2 인스턴스에 연결하는곳을 보면 아래와같은 명령어를 볼 수 있다. $ chmod 400 자신의키파일.pem 즉 chmod 400의 의미는 4/0/0 이므로 나에게만 읽기 권한이 있도록 하는것이다. 다른 예를 들어보면 600: 나에게만 읽기,쓰기 권한 허용 744: 나는 읽기,쓰기,실행 권한 / 그룹과 전체에는 읽기 권한 허용 이런 식으로 권한을 설정할 수 있다. 

프로젝트를 진행하다 보면 폴더 구조가 복잡해지고 깊어질 수록 파일 import 경로를 작성하는것이 어려워진다.  상대경로를 사용하여 특정 파일을 import 하게되면 아래와 같이 작성해야 한다. ex)  ../../../components/header/index.tsx 이러한 문제점을 절대경로를 사용하여 해결할 수 있다. 하지만 절대경로에도 문제가있는데 운영체제별로 절대경로가 (root 경로가)달라서 협업시 문제가 있을 수 있다. 윈도우면 C:\\Windows\System32\... 이런식이고 맥이면 /User/lsw/... 이런식이다. 하지만 위와 같은 방식으로 root부터 절대경로를 사용하지 않고 @ 키워드 즉 alias(별칭)를 사용해서 운영체제의 root 부터가 아닌 특정 폴더에 바로 접근할 수 있는 방법을 알아볼 것이다. CRA(create-react-app) + Typescript에서 절대경로 설정 일단 절대경로를 사용하려면 tsconfig.json과 webpack 설정을 변경해야 한다. 하지만 CRA로 생성한 프로젝트는 기본적으로 webpack이 설정되어있어서  eject를 해서 webpack 설정을 직접 변경해줘야 하는데 권장되는 방법은 아니다. (버전 업데이트 등의 문제 발생) 그래서 CRA를 eject 하지않으면서도 webpack 설정을 바꾸어 줄 수 있는 라이브러리가 있다. 바로 Craco 1. Craco 설치 craco를 사용하면 CRA를 eject 하지 않아도 CRA에 설정되어있는 eslint, webpack, babel 등을 쉽게 커스터마이징할 수 있다. 두가지 라이브러리를 설치해야 한다. npm i @craco/craco npm i -D craco-alias 두 라이브러리를 설치하고 root 디렉토리에 craco.config.js 를 생성한다. craco.config.js const CracoAlias = require ( ' craco-alias ' ) ; module.exports = { plugins :