Hello World!!

next.js 사용법 정리 청약닷컴 에서 기존에 router 로 작업하던 것을 next.js 로 수정했다. 설치 프로젝트 폴더에서 아래 명령어로 next.js 기반의 app을 생성한다. npx create-next-app@latest . 이때 typescript 와 ESLint 의 사용여부를 묻는데 프로젝트에 맞춰서 선택한다. ESLint 는 Javascript 의 문법을 확인해 주는 도구이다. CRA 로 app 생성시에는 ESLint 가 자동으로 설치된다. app 을 생성하면 기존 CRA 로 생성한 것과 다르게 pages 와 styles 폴더, next.config.js 가 있다. 프로젝... Read More

Overload 동일한 매개변수이지만 갯수나 타입에 따라 다른 타입의 return 값이 반환될 때 overload 처리한다. interface User { name: string; age: number; } function memberDB(name: string, age: number | string): User | string { if (typeof age === 'number') return {name, age}; else return 'age 는 숫자 형식이야 합니다.' } const David: User = memberDB('David', 20); const Emily: string ... Read More

기본 타입 문자열 let text: string = 'text'; text = 3; // error 숫자 let num: number = 1; num = 'text'; // error 불리언 let isBoolean: boolean = true; isBoolean = 'boolean'; // error null let empty: null = null; empty = 'null'; // error undefined let errors: undefined = undefined; errors = 'undefined'; // error 배열 const... Read More

오늘의 삽질일기. 리스트를 동적으로 출력하기 위해 map() 을 돌 때, 조건에 따라 일부 값을 나타내고 싶지 않을 수 있다. 그래서 처음에는 아래와 같이 조건을 주어 빈값을 return 시켰다. 리스트.map((데이터, 인덱스)=>{ if (조건) return; return ( 데이터출력 ) }) 그러나 JSX에서 작성한 코드이기 때문에 돔 요소를 return 시켜야 했고, 그래서 빈 요소를 return 시켰다. 리스트.map((데이터, 인덱스)=>{ if (조건) return <></>; return ( 데이터출력 ) }) ... Read More

react로 만든 app에 typescript를 적용했다. 그 과정에서 svg 파일이 컴포넌트 형태로 import 되지 않아, 어제 아래 방법으로 해결했다. svg 컴포넌트 import src 폴더에 아래 코드로 custom.d.ts 파일을 생성한다. declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>; const src: string; export default src; } tsconfi... Read More

만들던 React app을 타입스크립트로 바꿔보았다. 음… 타입스크립트 처음인데 처음부터 ts로 만들었으면 훨씬 편했을 것 같다. ts 써보니 일단 타입이 뭔지 보여서 코드를 이해하기가 수월해진 것 같다. 설치 아래 명령어로 global 하게 한번만 설치한다. npm i -g typescript 나머지는 사용하는 라이브러리 따라서 설치한다. npm i @types/node @types/react @type/jest @types/react-dom @types/react-router-dom @types/react-redux 음 jest 는 뭔지 모른다. 히히 tsconfig.json 생성 ... Read More

포스팅을 하면서 이미지는 잘 넣지 않으니 어쩌다 한번씩 넣을 때마다 검색하는게 귀찮아서 정리해놓는 글. 줄바꿈 문단을 나누려면 엔터 두번 문단을 나누려면 엔터 두번 줄만 바꾸려면<br>br을 하거나 윗줄 뒤에 공백을 3개 이상 <- 이만큼 공백 써주고 바로 다음줄 작성 줄만 바꾸려면br을 하거나 윗줄 뒤에 공백을 3개 이상 써주고 바로 다음줄 작성 제목 라인 앞에 #을 붙인다. # h1 ## h2 ### h3 #### h4 ##### h5 ###### h6 링크 [텍스트](url) 이미지 링크와 사용법이 비슷하지만 앞에 !를 붙이고, 사이즈... Read More

인프런 강의를 보며 질문 답변 서비스를 만들었다. firebase 를 사용해 google 소셜로그인을 구현했는데, 카카오톡의 인앱브라우저로 열어서 로그인하려고 하니 로그인화면 대신 아래와 같이 403 에러가 반환되었다. 아래는 그에 대한 카카오의 답변 안녕하세요. 구글 소셜로그인은 구글 내부 정책으로 인해, 안드로이드 인앱 브라우저를 사용하는 앱 에서의 로그인을 차단하고 있습니다. https://developers.googleblog.com/2016/08/modernizing-oauth-interactions-in-native-apps.html 14 카카오톡의 브라우저는 안드로이드 인... Read More

정적 웹인 jekyll 블로그에 댓글 기능 추가를 위해 Giscus 를 이용했다. Github 내 기능인 Discussions 에 댓글을 등록하고 읽어오는 방식이다. 따라서 먼저 댓글의 저장을 원하는 Repository 에 Settings 하단의 Features 부분에서 Discussions 를 활성화 시켜야 한다. 그리고 https://github.com/apps/giscus 에서 Giscus 앱을 Install 한다. 인스톨 시 Repository 선택을 특정지어서 저장하면 간단하게 설치가 끝난다. 이제 출력을 원하는 곳에 스크립트 코드를 넣어주면 된다. https://giscus.app/ko 으로 ... Read More

분명히 커밋을 했는데 잔디에 반영이 되지 않아서 확인 해 보니 이메일에 오타가 있었다. 계정에 잘못 입력된 이메일을 등록해두면 되지만 내 이메일도 아니고 근본적인 해결방법 또한 아니므로, 다른 방법을 찾아 보았다. 구글링 해 보니 커밋을 수정해 주어야 했는데 이미 수십개의 커밋이 잘못 되어있어 하나하나 수정하기는 번거로웠고, 그러던 중 일괄적으로 수정하는 방법을 찾아냈다. 수정하려고 하는 프로젝트의 root 폴더에서 아래 명령어를 그대로 입력하면 수정이 된다. git filter-branch --env-filter ' WRONG_EMAIL="잘못된이메일주소" NEW_NAME="새로운 이름" NEW_EMAIL... Read More