분류 전체보기
IT 및 일상을 공유합니다.
[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 문서 카카오 개발자 공식문서에 카카오 로그인에 대한 전체적인 프로세스가 나와있으니 한번 참고하시면 됩니다. 전체적인 흐름을 이해하려면 문서를 꼼꼼하게 읽어 보시는 걸 추천드립니다. 저도 먼저 구..
[맛리뷰] 경기 광주 곤지암 키라네 일본 라멘 맛집
영업시간 월요일 정기 휴무 매일 오전 11시 ~ 오후 8시 브레이크 타임 : 15:30 ~ 17:00 라스트 오더 : 15:00 , 19:30 위치 경기도 광주시 곤지암읍 곤지암천로 326 곤지암 역 건너편 HTML 삽입 미리보기할 수 없는 소스 이런 보라색 문으로 입장 하시면 됩니다. 주차는 오른쪽에 위치하니 주차하시면 됩니다. 키라네 메뉴판 입니다. 주문서 옆에 펜으로 메뉴 체크해서 가져다 주면됩니다. 저는 매운 돈코츠 라멘과 가라아게를 먹어보았습니다. 시간이 흘러 메뉴가 나왔습니다 ! 음..!! 차슈도 크고 !! 정말 맛있어 보입니다. 저의 개인적인 취향으로 칼칼한 매운맛을 좋아해서 한번 먹어보았는데, 약간 후추맛이라고 해야되나? 목이 칼칼하면서 생각보다 괜찮았습니다. 역시 돈코츠 라멘이라 그런지 ..
[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)를 이용한 ..
[Nuxt] Vuetify 설치 방법 및 Material icon 설정
Nuxt2 환경에서 Cli 명령어로 간단하게 Nuxt 프로젝트와 Vuetify 설치를 진행을 해보고 Material icon을 설정하는 방법을 알아보도록 하겠습니다. Nuxt2 설치 cli 명령어로 나오는 밑에 단계들 진행 # nuxt2 프로젝트 생성 cli 명령어 npx create-nuxt-app NuxtTest # 1. 프로젝트 이름 설정 create-nuxt-app v5.0.0 ✨ Generating Nuxt.js project in . ? Project name: (NuxtTest) # 2. 언어 설정 ? Programming language: (Use arrow keys) > JavaScript TypeScript # 3. package manager 설정 ? Package manager: (..
[구글 애드센스] 구글 애드센스 광고 공백 표시 해결 방법
구글 애드센스 설정 이후에 어떤 포스팅을 들어올 때 직접 포스팅 주소를 입력해서 들어오거나 아니면 게시글 목록을 직접 클릭하여 들어올 경우 정상적으로 나오지만 하단에 카테고리 목록을 통해서 들어올 때 구글 애드센스 광고가 공백으로 나오는 문제가 있었습니다. 구글 애드센스가 웹페이지 로딩 속도에 대해서 송출 시간이 오래 걸리기 때문에 공백 현상이 나오는 경우가 있다 했지만 이거는 거의 나오지 않는 거 같아서 해결 방법을 찾아보았습니다. 구글 애드센스 공백 송출 해결 방법 검색을 통해서 해결 방안을 찾아본 결과 원인은 간단했습니다. 직접적으로 게시글을 들어올 경우 정상적으로 표시되지만 하단 카테고리 목록을 통해서 들어간 경우 URL 뒤에 ?category=숫자 이런 형식으로 형성이 되고 있습니다. ?cate..
[티스토리 스킨] 카테고리 괄호 없애기 (feat. hELLO 스킨)
현재 제 블로그에 적용된 스킨은 hELLO 4.1.3 버전으로 되어있습니다. 카테고리에 각 몇 개의 게시글이 있는지 개수가 표시되어 있는데 괄호로 되어있어서 이것을 한번 없애는 것을 해보도록 하겠습니다. 카테고리 찾기 티스토리 관리페이지 - 꾸미기 - 스킨 편집 - HTML에서 카테고리 부분을 찾아봅니다. [##category_list_##]치환자로 검색하면 그 부분이 카테고리 목록입니다. 위에 스킨편집 HTML에서 카테고리 부분을 찾아보면 치환자 말고는 아무것도 존재하지 않아서 어려울 수 있습니다. 여기는 위치만 알고 계시면 되고, 카테고리 목록 위치에서 본인이 좀 더 커스텀 하고 싶으시면 HTML 코드와 CSS를 엮어서 작성해 주시면 됩니다. 저희는 이 부분에 HTML을 수정하지 않고 JS 스크립트와..