프로그래밍 공부 노트

태그와 문자열이 함께 저장되어있는 JSON 데이터를 받아와 화면에 출력하려고 했다. HTML 태그와 문자열을 포함하는 json 데이터 컴포넌트에 json 데이터 출력 json 데이터 출력 결과 우리가 상상하는것과 다르게 태그가 문자열 그대로 출력된다. React 공식 문서에 따르면 일반적인 코드에 HTML 코드를 삽입하는것은 Cross-Site Scripting(XSS)에 취약하다고 한다. 사용자가 임의로 웹페이지에 스크립트를 적용할 수 있어 이러한 문제점을 차단하기위해 무조건 텍스트로만 출력되게 설정되어있다고 한다. 그래서 우리가 상상하던데로 출력되지않고 문자열 그대로 태그가 출력 되는것이었다. React 공식 문서에 따르면 DOM에 innerHTML을 사용하려면 즉, 태그를 포함한 문자열 데이터를 태그가 적용되어 출력되게 하기위해서는 대체 방법인 dangerouslySetInnerHTML 을 사용하라고 나와있다. dangerouslySetInnerHTML 속성명을 보면 알 수 있듯이 개발자에게 위험하다는것을 한번더 상기시키기 위해서  dangerously라는 단어가 포함되어있는  dangerouslySetInnerHTML을 사용해서 출력하게 한다는것이다. 사진과 같이 __html을 객체의 키로 전달하고 value값으로 태그가 포함된 문자열 데이터를 전달하면 우리가 상상하던것과 같이 출력된다. dangerouslySetInnerHTML  출력 결과  

  input 태그에 type 속성과는 별개로 inputmode 속성 값을 작성하면 모바일 웹뷰에서 속성값에 따라 특화된 가상 키보드가 활성화 된다.   none 가상 키보드를 사용하지 않는다. 가상 키보드를 직접 구현하는 경우 사용한다.       text (기본값) 사용자의 현재 위치에 맞는 표준 가상 키보드를 제공한다.       decimal 사용자의 위치에 따라 소숫점( , 또는 . )을 제공하는 숫자형 가상 키보드를 제공한다. 사용자의 장치에 따라 음의 부호( - )를 제공할 수도 있고 안할 수도 있다.     numeric 숫자형 가상 키보드를 제공한다. 소숫점은 없으며 사용자의 장치에 따라 음의 부호( - )를 제공할 수도 있고 안할 수도 있다.   tel 전화번호 가상 키보드를 제공한다. 숫자 0 ~ 9, +, *, # 를 포함한다.    search 검색 입력에 최적화된 가상 키보드를 보여준다. 사용자의 장치에 따라 Enter / 제출 키가 검색 아이콘이나 레이블을 가질 수 있다. email 이메일 입력에 최적화된 가상 키보드를 보여준다. @ 키를 제공한다. url URL 입력에 최적화된 가상 키보드를 제공한다.  / 와 .com 과 같은 키를 제공한다.

예전에 컴퓨터를 새로 구매하면서 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 +...

  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. Type '{ children: string; css: { color: string; }; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.   Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322) 찾아보니 상단에 작성되어있는 jsx pragma가 CRA와 충돌이 생겨서 발생하는 문제라고 한다. /** @jsx jsx */ 위 선언을 아래와 같이 변경하면 해당 문제를 해결할 수 있었다. /** @jsxImportSource @emotion/react */ 그런데 @emotion/react를 사용하는 모든 컴포넌트에서 /** @jsxImportSource @emotion/react */ 를 작성해야 한다는 번거로움이 있었다. 번거로움과 실수를 줄이기 위해서 tsconfig.json을 수정해서 jsx pragma를 사용하지 않고도 모든 컴포넌트에서 @emotion/react를 사용할 수 있게 설정을 변경하였다. 그런데 여기서 또 다른 문제가 발생한다. 위 사진과 같이 tsconfig.json을 수정할 경우 컴포넌트 자체에서 오류는 발생하지 않았지만 작성한 css가 적용되지 않는 문제가 발생했다. hotpink 색을 적용했지만 검정색으로 표시되었다. 해당 문제는 CRA의 바벨 설정을 수정하고 해결할 수 있었다. eject를 사용하여 수정하는 방법도 있지만 eject 할 경우 이전 상태로 되돌아 갈 수 없기에 eject 없이 CRA를 커스터마이징 할 수 있게 도와주는 craco 라이브러리를 이용했다. 아래...

현재 사용중인 Catalina 버전 React Native를 공부하면서 expo로만 화면을 띄워봤는데 직접 시뮬레이터로 화면을 띄워보고싶었다.  공식 문서 메뉴얼대로 설치하고있었다. 하지만 아래처럼 오류가 발생했다. 오류 메세지에서 제시해준 방법대로 pod install 했을때 설치되는 버전이 1.8.4 버전이었는데 1.9 이상을 설치해야한다고 한다. 찾아보니 현재 내 맥 버전에 깔려있는 ruby는 2.6.3 버전으로 cocoapods 1.9.x 이상 버전의 설치를 지원하지 않는다고 한다. 그래서 ruby 버전을 업데이트 해줘야 했다. 원하는 버전의 ruby를 다운받고 시스템 경로를 내가 세팅한 ruby로 변경해줘야 했다. $ brew update $ brew install rbenv $ rbenv install -l (설치 가능한 버전 목록이 나온다.) $ rbenv install 3.0.0 $ ruby -v (설치된 버전 확인) 설치하고나면 시스템 경로를 설정해줘야 한다. 아래 명령어를 터미널에 입력한다. $ vim .zshrc .zshrc 에 아래 설정 붙여 넣기 export PATH="$HOME/.rbenv/bin:$PATH" eval "$(rbenv init - zsh)" 위 내용 붙여넣고 아래 명령어 입력(저장 후 실행)한다. $ source ~/.zshrc 그리고 나서 설치한 버전 중 원하는 버전의 ruby가 적용되도록 명령어를 입력한다. 버전 설정 $ rbenv global 3.0.0 $ rbenv rehash 제대로 버전이 설정되었는지 확인한다. $ ruby -v 그리고 다시 실행해보면 정상적으로 실행된다.

 React native 공식문서를 보면서 설치하는 과정중에 에러가 발생했다. $ sudo gem install cocoapods 위 명령어를 사용해서 cocoapods를 설치하라고 한다. 하지만 아래와 같은 오류가 발생했다. ERROR:   Error installing cocoapods: ERROR: Failed to build gem native extension. 여러 블로그들에 해결방법이 있었지만 제대로 동작하지 않았고 stackoverflow에서 해답을 찾을 수 있었다. 아래 두 명령어를 입력하면 된다. $ brew cleanup -d -v $ brew install cocoapods 결과 확인  $ pod --version 출처: https://stackoverflow.com/questions/20939568/error-error-installing-cocoapods-error-failed-to-build-gem-native-extension

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 = { ...