전체 글 47

Vite Alias path 설정 (tsconfig.json)

Webpack (CRA 또는 nextjs) Vite tsconfig.json만 설정 tsconfig.json만 설정 vite.config.js 에도 path 설정이 필요 tsconfig.json "paths": { "@/*": ["*"], "@components": ["components"], "@components/*": ["components/*"], "@layouts": ["layouts"], "@layouts/*": ["layouts/*"] } tsconfig.json "paths": { "@/*": ["*"], "@components": ["components"], "@components/*": ["components/*"], "@layouts": ["layouts"], "@layouts/*":..

Kakao(카카오) 로그인 자바스크립트

1. 카카오 개발자센터(https://developers.kakao.com/)에 가서 로그인 후 내 애플리케이션 이동 후 등록을 한다. 2. https://developers.kakao.com/sdk/js/kakao.js 파일을 다운로드하여 프로젝트에 import 한다. 3. 도메인을 등록하고 테스트를 위에 코드로 진행- localhost:3000 같이 도메인만 등록해도 가능 (CI값 설정을 해두면 카카오는 제공) 4. 테스트 완료 후 실제 운영에 적용하기위한 서비스 신청을 한다. /* globals Kakao */

IT/SNS 로그인 2022.09.13

네이버 로그인(네아) 자바스크립트 코드

1. 가장먼저 네이버 개발자센터(https://developers.naver.com/main/)에 가서 로그인 후 application(메뉴) 이동 후 등록을 한다. 2. naveridlogin_js_sdk_2.0.2-nopolyfill.js 파일을 다운로드하여 프로젝트에 import 한다. 3. 도메인을 등록하고 테스트를 위에 코드로 진행 (CI 값을 필요하다면 별도의 네이버팀에게 문의가 필요) 4. 테스트 완료 후 실제 운영에 적용하기위한 서비스 신청을 한다. let naverObj = null /* 화면 호출시(init) 세팅 하는 부분 */ export function setNaver () { naverObj = new naver.LoginWithNaverId({ clientId: 발급받은 네이버..

IT/SNS 로그인 2022.09.13

비동기식 코드 작성 (promise, async , await) 고려점

프로젝트를 진행하면서 비동기식 코드를 작성을 많이 하게 되는데, 비동식으로 코드 작성시 항상 갈증이 있었는데 외국 블로그에 잘 정리된 글을 보고 배움을 얻어 코드를 작성할때 고려하려고 한다. 한화면에서 여러 api로 호출하는 부분이 있었는데 promise.all을 써서 해결한 경험이 있었는데 eslint 로 조금더 가독성 좋은 코드로 되는 부분이 있어서 내용을 가져왔다. // ❌ for (const url of urls) { const response = await fetch(url); } // ✅ const responses = []; for (const url of urls) { const response = fetch(url); responses.push(response); } await Promi..

자주 쓰이는 정규식 모음 (자바스크립트)

1. 조건을 통한 흐름에 필요한 정규식 - true, false 에 따른 조건문으로 분기처리 // 아이디 const regId = /^[가-힣a-zA-Z]+$/g // 생년월일 const regBirth = /^(19[0-9][0-9]|20\d{2})(0[0-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])$/ // 이메일 const regEmail = /^[a-z0-9.\-_]+@([a-z0-9-]+\.)+[a-z]{2,6}$/ // 숫자 const regNum = /^[0-9]+$/ // 이름 - 한글 const regName = /^[가-힣]+$/ regName.test(value) ? true : false regBirth.test(value) ? true : false regEm..

코딜리티(Codility) Lesson5 GenomicRangeQuery 문제풀기

한참을 문제를 고민을 하다가 해결이 안되어서 다른 사람들의 글을 찾아보고 이해하게 되었다. 주어진 배열에서 최소 뉴클레오타이드 값이 무엇인지 리턴하는 문제입니다. DNA는 뉴클레오타이드 A, C, G, T의 배열로 만들 수 있는데 각 뉴클레오타이드의 영향도가 1, 2, 3, 4 라고 합니다. 예를 들어 S = CAGCCTA 라고 한다면 전체 배열 중 최소 뉴클레오타이드의 영향도는 A가 있으므로 1이 됩니다. 여기서 문제는 부분 배열에서의 최소 뉴클레오타이드의 영향도를 찾는 것이고, 문제에서는 세 가지 예를 보이고 있습니다. P = [2, 5, 0] Q = [4, 5, 6] 여기서 S[2:4] = GCC 이고 C의 영향도가 2이므로 2가 되고, S[5:5] = T 이고 T의 영향도는 4이므로 4가 되고, ..

IT/Algorithm 2021.06.02

Gatsby 시작하기 - 개발 환경 설정

Gatsby를 만들기 위한 준비물이 뭐가 있을까? 필요한 프로그램 설치 후에 gatsby 프로젝트 생성(2가지 방법)이 있다. 1. Git 설치 - https://www.atlassian.com/git/tutorials/install-git 2. Node 설치 - https://nodejs.org/ko/ 3. gatsby-cli 설치 npm install -g gatsby-cli 빠른 개발 환경 - Starter gatsby new 프로젝트명 https://github.com/gatsbyjs/gatsby-starter-blog gatsby develop 또는 npm run develop 세팅 끝 !! 심플한 블로그 템플릿이 보일 것이다. 여기에 필요한 개츠비 플러그인을 설치하여서 개발하면 편하다. 수동으..

IT/Gatsby 2021.06.02

Gatsby로 어떤걸 만들어 볼까?

현재 소규모로 커뮤니티 사이트(프로토타입)를 만들고 싶은데 생각을 해보게 되었는데... 기획 부분이 많이 부족한 상태이다. 후보중에 떠오르는 구성은 다음과 같았다. 1. React + Express 2. Next + NestJs 3. Gatsby CMS를 이용하여서 하여야 되는 부분이 있어서 Gatsby가 편리한 부분도 있지만, 제약적인 부분이 많다고 생각이 들어서 적합하지 않다고 판단이 되었다. Gatsby로 블로그를 (3. Gatsby) 배포 완료 후, 인디 게임 리뷰 프로젝트를 진행할 예정 ( 2- Next + NestJS). 현재 프로젝트 목표: 블로그 선정 이유: 개인적인 일상, 생각 등을 관리하기 위한 목적이다. 고려 대상: 1. 도메인 구매 2. 어떤 서비스에 배포 ( github , gat..

IT/Gatsby 2021.05.20