프로그래밍 공부 노트

  express.js, passport.js, typescript 를 사용해서 로그인 기능을 구현했다. passport local 로그인 동작 순서는 아래와 같다. passport-local -> passport.authenticate -> local strategy -> req.login -> passport.serializeUser -> response 각 순서에서 작업을 수행하고 각 단계에서 callback 함수와 함께 다음 함수에서 필요한 값을 넘겨주게 된다.  error TS2339: Property 'id' does not exist on type 'User'. 해당 에러는 아래 코드에서 발생되었다. passport . serializeUser (( user , done ) => { done ( null , user . id ); }); 아래 코드처럼 req.login으로 user 정보를 넘겨passport.serializeUser에서 해당 유저 정보를 받는데 return req . login ( user , async ( err ) => { if ( err ) { console . error ( err ); return next ( err ); } if ( typeof user === 'object' && user !== null ) { if ( user ) { return res . status ( 200 ). json ({ success : true , message : 'login success' , user : { email : user . email , nickname : u

오류 사진 import { Entity , PrimaryGeneratedColumn , Column , OneToMany } from 'typeorm' ; import { Post } from './Post' ; @ Entity () export class User { @ PrimaryGeneratedColumn () id : number ; @ Column ({ unique : true , length : 50 }) email : string ; @ Column ({ unique : true , nullable : true }) google : string | null ; @ Column ({ length : 10 }) nickname : string ; @ Column ({ length : 200 }) password : string ; @ Column () createdAt : Date ; @ OneToMany (() => Post , ( post ) => post . user ) posts : Post []; } - 수정 전 - 구글 로그인으로 가입한 사용자 정보를 받는 컬럼에서 오류가 발생했다. Object 데이터 타입을 받을 수 없다는것인데 찾아보니 유니언 타입(Union type)으로 작성하면 데이터 타입을 Object로 인식하기 때문에 위에서 google: string | null 과 같이 작성하면 안된다고 한다. import { Entity , PrimaryGeneratedColumn , Column , OneToMany } from 'typeorm' ; import { Post } from './Post' ; @ Entity () export class User { @ PrimaryGeneratedColumn () id : number ; @ Column ({

TCP/UDP 통신에서는 포트 번호를 이용해서 컴퓨터 안의 어떤 프로그램에게 데이터를 전달할지 식별한다. 포트 번호는 0 ~ 65525까지의 16비트 범위의 숫자로 구성되어 있다. - 포트번호: 0 ~ 1023 잘 알려진 포트(Well-Known Port) 라고 부르며, 웹 서버나 메일 서버 등의 일반적인 프로그램들이 사용한다. 일반적으로 잘 알려진 포트 번호 21/TCP- FTP 22/TCP- SSH 23/TCP- Telnt 25/tcp- SMTP (Simple Mail Transfer Protocol) 53/udp- DNS (Domain Name Syetem) 69/udp- TFTP 80/tcp- HTTP (HyperText Transfer Protocol) - 웹 페이지 전송 110/tcp- POP3 (Post Office Protocol version 3) - 전자우편 가져오기에 사용 161/udp- SNMP (Simple Network Management Protocol) 443/tcp- HTTPS - HTTP over SSL ( 암호화 전송 ) - 포트번호: 1024 ~ 49151 등록된 포트(Registered Port) 라고 부르며, 주로 서버 소켓으로 사용하는 영역이다. - 포트번호: 49152 ~ 65535 동적 포트(Dynamic Port) 라고 부르며, 수시로 변경되는 포트를 의미하며 인터넷이나 시스템에서 사용할 때 동적으로 할당하는 포트를 의미한다.  *동적 포트 영역은 서버 소켓 포트로 사용을 금지한다.

vscode에서 코드를 작성할때 자동완성 기능 단축키로 control + space를 사용했는데  맥 초기화 및 업데이트 이후부터 자동완성 기능이 fn + control + space를 눌러야만 동작했다. 사진처럼 vscode에 shortcuts을 확인해봐도 control + space 인데 말이다. vscode trigger suggest 해결 방법은 아래와 같다. 1. Go to system preferences -> keyboard -> input sources 2. add a new input source (I did english ABC)  3. Go to shortcuts tab (inside of keyboard settings) 4. Click on input sources on the left 5. disable the "select previous input source" shortcut 참고자료: https://github.com/microsoft/vscode/issues/103855#issuecomment-671062294  

태그와 문자열이 함께 저장되어있는 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 + U를 눌러 설정 업로드하

  공식문서에서 위 사진과 같이 사용하라고 나와있었다. 하지만 아래와 같이 오류가 발생햇다. 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