IT
IT 및 일상을 공유합니다.
[TypeScript] Axios TypeScript 적용하여 사용해보자
화창하지만 황사로 인해 미세먼지 많은 날씨 다들 마스크 쓰며 열일하셨나요? 이번 포스팅에서는 Nuxt와 React에서 서버로 HTTP 통신을 위해 사용되는 Axios에 대해서 TypeScript 적용하여 인스턴스 생성 및 사용하는 방법을 설명해 볼까 합니다. 23.07월 기준으로 포스팅 내용이 수정되었습니다. Axios 설치하기 npm install axios@1.4.0 // 23.07월 기준 1.4.0 최신버전입니다. 만약에 Nuxt2에서 axios 1.4.0버전을 사용한다면 Es Module 에러가 나오는데 nuxt.config.js에 아래와 같이 추가해주면됩니다. // nuxt.config.js build: { transpile: [ 'axios' ], } Axios 인스턴스 타입 확인 node_m..
[TypeScript] 타입 스크립트 기본 타입에 대해서 알아보자
타입스크립트 기본 타입 타입스크립트의 기본 타입은 12가지 종류가 있습니다. : 를 이용하여 자바 스크립트 코드에 타입을 정의 합니다 String 변수의 타입이 문자열인 경우 아래와 같이 사용합니다. const str: string = 'hello'; Number 변수의 타입이 숫자이면 아래와 같이 사용합니다. const num: number = 100; Boolean | Object | Array | Tuple 해당 타입일 경우 아래와 같이 사용합니다. // Bolean const isShow: boolean = false // Object const data: object = { title: string } // Array const array: number[] = [10,20,30] // 제네릭 방..
[Nuxt] Typesciprt 환경에서 Nuxt $refs 정의 방법
Nuxt2 Typescript 환경에서 $refs를 사용하려고 할 때 TS2532: Object is possibly 'undefined' 에러를 발생하여 어떤 방법으로 해결할지 알아본 내용에 대해서 소개해보려고 합니다. vue-property-decorator와 클래스 형식으로 사용하지 않고 Vue.extend로 구현한 내용입니다. 참고해 주세요! 에러 상황 Nuxt3 환경은 아직 여의치 않은 거 같아 Nuxt2 프로젝트로 진행을 하게 되었습니다. Js로 구현된 컴포넌트들을 Ts로 변환하면서 구현해 가던 중 $refs로 해당 자식 컴포넌트의 메서드를 호출하는 일이 생겨 사용할 때 이러한 에러가 났습니다. TS2532: Object is possibly 'undefined' TS2339: Property..
[Error] Typescript Cannot find module 'xxx.svg?inline'
Typescript로 프로젝트를 진행하던 도중 svg, png 파일에 대해 에러가 발생하였습니다. 이것저것 검색해 보고 알아본 결과로 Nuxt와 React에서 이런 에러가 발생했을 때 해결 방안을 알아보겠습니다. Nuxt , Vue에서 해결 방안 루트 경로에 custom.d.ts를 생성합니다. declare module '*.svg?inline' { const content: any export default content } declare module '*.svg' { const content: any export default content } declare module "*.png" { const content: any export default content } tsconfig.json 에서 cu..
[React] GitHub 로그인 구현하기
GitHub 개발자 애플리케이션 등록 Github developers 해당 주소로 이동하여 깃허브(GitHub) 앱을 생성합니다. 이번 포스팅에서는 프론트에서 GitHub 로그인 버튼을 생성해 서버로 인가코드를 보내주는 방법에 대해서 알아보겠습니다. Homepage URL : 프론트 도메인 주소를 입력합니다. Authorization callback URL : 인가코드를 받을 콜백(redirect) URL을 입력합니다. GitHub OAuth Client Key (클라이언트 키) Client ID Client secrets 발급(Generate a new client secret 버튼) 서버(백엔드)에서 Client ID와 인가코드와 Client secrets 키로 AccessToken을 발급받습니다. ..
[React] 카카오(Kakao) 로그인 구현해보기
React 카카오 로그인을 구현해보려고 합니다. Nuxt 프레임워크에서 구현해 본 적이 있기 때문에 로그인 프로세스 과정이나 백엔드와 어떻게 통신할지에 대해서는 기본적으로 숙지된 상태입니다. 그런데 리액트로 아직 익숙지 않아 정교하게 구현은 못했지만 간단하게 구현해서 설명해보고자 합니다.REST API 방식으로 URL을 통해서 인가코드를 받아 로그인 과정을 하는 방법과, JavaScript Key를 사용하여 react-kakao-login 라이브러리로 구현하는 방법을 알아보겠습니다. Kakao Developers 문서 카카오 개발자 공식문서에 카카오 로그인에 대한 전체적인 프로세스가 나와있으니 한번 참고하시면 됩니다. 전체적인 흐름을 이해하려면 문서를 꼼꼼하게 읽어 보시는 걸 추천드립니다. 저도 먼저 구..
[Express] Error(에러) Handler 구현해보자
이전 포스팅(링크) 에서 설정한 내용을 토대로 진행되니 한번 참고하시면 됩니다. 오류 처리 미들웨어 오류 처리 미들웨어에는 항상 4개의 인수가 필요합니다. 어떠한 함수를 오류 처리 미들웨어 함수로 식별하려면 4개의 인수를 제공해야 합니다. (err, req, res, next) 4개의 매개변수로 사용됩니다. app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('500 에러'); }); 에러 핸들러 에러 핸들러는 일종의 미들웨어라고 볼 수 있는데요, app.use() 함수를 사용하여 인스턴스를 등록해 두면 모든 에러가 한 곳을 통해서 에러를 관리할 수 있습니다. 그래서 저는 Express로 프로젝트를 진..
[i18n] 배열에서 i18n 다국어 적용하는 방법을 알아보자
Nuxt 및 vue 환경에서 i18n으로 다국어를 작업하던 와중 문자열 데이터가 포함된 배열을 번역 설정을 할 때 언어 변경 시 선택된 언어로 렌더링이 되지 않는 현상이 있어 이를 해결하는 방법을 알아보겠습니다. 참고로 i18n 설정 방법을 모르신다 하시면 아래 포스팅을 참고해 주세요. 2023.01.30 - [IT/Nuxt & vue] - [Nuxt] 구글시트(google sheet)를 이용한 다국어(i18n) 자동화 처리 느린 개발자 프론트엔드 백엔드 학습정리 및 정보공유 블로그입니다. stack94.tistory.com 다국어 Json 파일 예를 들어 한국어 및 영어 번역 파일을 한번 생성해보겠습니다. ※위 포스팅 구글 시트로 연결하셨으면, 구글 시트에서 key값 설정하여 만들어지는 json 파일로..
[React] 구글 로그인(Google Login) 리액트(React)에서 구현해보자
기존에 사용하던 웹용 구글 로그인 라이브러리가 중 2023년 3월 31일 일자로 중단될 예정이라 새로운 웹용 Google ID 서비스 솔루션 을 사용하여 진행해 보기로 한다 새로운 웹용 Google 로그인 문서 Google JavaScript API로 로그인 참조 | Authentication | Google Developers 이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Google JavaScript API로 로그인 참조 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세 developers.google.com 프로젝트 생성 (구글 클라우드 플랫폼) Google 클라우드 플랫폼 로그인 Google 클라우..
[디자인패턴] 싱글톤 패턴(Singleton) 에 대해 알아보자
싱글톤 패턴이란? 싱글톤(Singleton) 패턴의 정의를 설명해 보자면, 객체의 인스턴스가 단 1개만 생성되는 패턴이다. 이 단일 인스턴스는 프로그램 전체에서 공유될 수 있고, 전역으로 상태를 관리하는데 적합합니다. 싱글톤 패턴을 사용하는 이유? 메모리 데이터 공유 최초 한번 new 연산자를 통해서 고정된 메모리 영역을 사용하기 때문에 생성된 해당 객체에 접근할 때 메모리 낭비를 방지할 수 있습니다. 이미 1개의 객체 인스턴스를 생성하여 활용하기 때문에 속도 측면에서도 이점이 있습니다. 또 전역으로 상태를 관리하기 때문에 클래스 간에 데이터 공유가 쉽습니다. 하지만 싱글톤 인스턴스가 혼자 너무 많이 사용되거나 많은 클래스들에서 사용하게 되면 클래스들 간의 결합도가 높아져 개방-폐쇄 원칙에서 위배되므로 ..
[Nuxt] PostCSS Warning 문구 해결하기
Nuxt 2.15.8 버전으로 설치하여 진행하던 와중 구동에는 문제가 없지만 Warning 문구로 인해 불편한 감이 있었습니다. postcss 8 버전으로 업데이트되면서 webpack이랑 관련해서 뭔가 문제가 있는 걸로 보입니다. 아무튼 Warning 문구에 대해서 해결하는 방법을 간단하게 알아봅니다. 에러문구 WARN You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. 앱 구동은 되지만 이런 문구가 나와서 불편합니다. PostCss8 설치 ..
[Nuxt] 구글 시트에서 적용한 다국어( i18n) vee-validate 사용하기
저번 포스팅에서 구글시트와 i18n을 설정하여 다국어 세팅을 해보았습니다. 이 설정 방법으로 버튼이나 HTML 태그에 글자들을 구글 시트 key 값을 참조하여 쿠키에 저장해 둔 i18n_redirected 값으로 한국어든 영어로든 설정을 할 수 있었습니다. 그러면 이번 포스팅에서는 다국어 변경하는 버튼과 각 텍스트필드(TextField)에 Validation을 적용했을 때 error Message에 대해서 다국어 적용을 하는 방법을 알아보겠습니다. 참고로 아래 구글 시트와 i18n이 적용되어 있는 상태에서 진행됩니다. 설정을 안 했으면 아래에 이전 포스팅에서 설정방법을 진행하고 보셔야 합니다. 2023.01.30 - [IT/Nuxt & vue] - [Nuxt] 구글시트(google sheet)를 이용한 ..