프로그래밍 공부 노트

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: 나는 읽기,쓰기,실행 권한 / 그룹과 전체에는 읽기 권한 허용 이런 식으로 권한을 설정할 수 있다. 

useEffect와 useLayoutEffect 둘의 사용법은 아래와 같다. useLayoutEffect 1 2 3 4 5 6 useLayoutEffect(()  = >  {   effect    return  ()  = >  {     cleanup   }; }, [input]) cs useEffect 1 2 3 4 5 6 useEffect(()  = >  {   effect    return  ()  = >  {     cleanup   } }, [input]) cs useEffect 와 useLayoutEffect을 확인해보면 동일한 형태로 사용된다. 하지만 둘의 차이점은 바로 실행 시점의 차이이다. useEffect 동작 순서 1. DOM 렌더링(레이아웃 배치 등) 2. useEffect 내부 로직 수행 및 state 값 업데이트 3. 업데이트 된 state 값으로 DOM 리렌더링 useEffect는 비동기적으로 실행된다. useLayoutEffect 동작 순서 1. useLayoutEffect 내부 로직 수행 및 state 값 업데이트 2. 업데이트 된 state 값으로 DOM 렌더링 useLayoutEffect는 동기적으로 실행된다.

EC2를 생성하면 퍼플릭 IPv4 가 할당되는데 이때 할당되는 IP주소는 시간이지나면 계속해서 변경된다. 계속해서 변경되기때문에 해당 IP주소로 나중에 접속하려고하면 접속이 안되는 경우가 발생한다. 이러한 문제점은 탄력적 IP 주소를 할당받아 IP주소를 고정시켜 해결할 수 있다. 그런데 이렇게 탄력적 IP 주소를 할당해주고 ssh에 연결하려고하면 위와 같이 WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 오류가 발생한다. 최초에 접속한 인증 정보와 새로운 IP주소가 할당된 후 접속하는 인증정보가 다르기 때문에 위와같은 현상이 발생하는것이다. 해당 오류에서 보여주는 해결제시 방안을보면 /root/.ssh/known_hosts 에 옳바른 host key를 추가하라고 한다. 나는 아래 명령어로 간단하게 known_hosts의 내용을 갱신해줄 수 있었다. $ ssh-keygen -R 192.168.0.1(대상 서버 IP 주소 또는 Domain Name) 접속 성공.!

프로젝트를 진행하다 보면 폴더 구조가 복잡해지고 깊어질 수록 파일 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 = { ...

ts(2322) 에러 Type 'undefined' is not assignable to type 'HTMLInputElement | null'. ts(2322) // 1번 const inputRef = useRef () ; // 2번 const inputRef = useRef ( null ) ; useRef 선언시 null 값을 작성하지 않아서 발생하는 에러이다. 1번을 2번처럼 변경하여 오류를 해결할 수 있다. ts(2339) 에러 Property 'focus' does not exist on type 'never'. ts(2339) const inputRef = useRef < HTMLInputElement > ( null ) ; useRef<해당하는 엘리먼트 객체> 를 작성해주면 해당 오류를 해결할 수 있다.

프로젝트 배포 전 로컬 환경에서 passport로 구글 로그인이 제대로 동작했는데 배포 후 구글 로그인이 안되었다. passport 공식문서에 나와있는데로 콜백 URI를 작성했는데도 오류가 발생했다. 혹시 몰라서 Google Cloud Platform에 API 및 서비스 페이지에서 승인된 리디렉션 URI를 잘못작성해뒀나 싶어서 확인했는데도 오류가 발생했다. 찾아보니 대부분 승인된 리디렉션 URI 이부분을 제대로 안적어줘서 오류가 발생하는것같았다. 구글에 검색해본 결과  OAuth 동의화면 - 범위 - 선택적 정보 - 요약 부분을 모두 입력해야 된다고 했다. 해봤지만 오류는 동일했다. 프로젝트를 다시 확인해보니 아래에 성공시, 실패시 Redirect 부분을 개발환경이었던 localhost로 작성해놓은 것이었다.  해당 부분의 주소를 변경해주니 정상적으로 구글 로그인에 성공했다.

  데이터 속성 ( data-set, data-* ) 데이터 속성은 DOM 요소에 데이터를 저장할 수 있고, 해당 데이터를 event.target.dataset.정의한이름 으로 해당 값에 접근하여 값을 다룰 수 있다. 사용 방법은 DOM 요소에 속성으로 data-원하는이름 을 작성하면 된다. < span id ={ item . id } data-content ={ item . content } role = " presentation " onClick ={ handleModifyComment } style ={{ cursor : ' pointer ' }} > 수정 </ span > 주의할점 data- 뒤에 불가능 대문자 영어 data- 뒤에 가능 소문자 영어, 하이픈( - ), 언더스코어( _ ), 피어리드( . ), 콜론( ; ) 예전에 배웠을 당시에 따로 정리는 하지 않았는데 프로젝트를 진행하면서 아주 유용하게 사용해서 정리를 했다.

 Partial<Type> - Type의 모든 속성이 선택 사항으로 설정된 형식이다. interface A { a : string ; c : boolean ; d : number ; } const a : A = { a : ' aaa ' , c : false , d : 123 , }; const b : Partial < A > = { c : true , d : 123 , }; Readonly<Type> - 모든 속성이 읽기 전용으로 설정된 형식을 생성한다. 즉, 생성된 형식의 속성을 다시 할당할 수 없다. interface A { a : string ; c : boolean ; d : number ; } const a : A = { a : ' aaa ' , c : false , d : 123 , }; const b : Readonly < A > = { a : ' bbb ' , c : true , d : 123 , }; ReturnType<Type> - 어떤 함수의 return 값의 return 타입을 가져올 수 있다. declare function f1 (): { a : number ; b : string }; type T0 = ReturnType <() => string >; //type T0 = string type T1 = ReturnType <( s : string ) => void >; //type T1 = void type T2 = ReturnType << T >() => T >; //type T2 = unknown type T3 = ReturnType << T extends U , U exte...

  # nvm 설치하기 $ sudo apt-get update $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash 설치가 완료되면 잘 설치되었는지 확인 $ nvm -v 만약 "Command 'nvm' not found, ~~" 와 같은 내용이 보이거나 nvm 버전이 출력되지 않는다면 현재 terminal(터미널)을 닫았다가 다시 새로 열거나, shell 별로 아래 명령어를 통해 해당 문제를 해결할 수 있다. bash: source ~/.bashrc zsh: source ~/.zshrc ksh: . ~/.profile 참고 : nvm github https://github.com/nvm-sh/nvm https://github.com/nvm-sh/nvm#install--update-script # nvm으로 Node.js, npm 설치하기 $ nvm install node 잘 설치 되었는지 확인 $ node -v $ npm -v 설치된 Node.js 버전 확인 및 설치 가능한 버전들 확인 $ nvm ls 원하는 특정 버전 설치하기 $ nvm install --lts $ nvm install 12.17.0 현재 사용중인 버전을 다른 버전으로 변경하고 싶은 경우 $ nvm use 14.17.3

  .env 파일 생성 명령어 $ sudo vim .env 숨김파일을 포함한 모든 파일 목록 확인 $ ls -a vim 에디터로 들어가지 않고 명령어로 파일 내용 확인하는 명령어 $ cat "filename" ex) $ cat .env