차가운세상

Vite Alias path 설정 (tsconfig.json)

차가운남자 — Wed, 16 Aug 2023 17:25:41 +0900

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/": ["layouts/"] } vite.config.js resolve: { alias: [ { find: '@', replacement: path.resolve(__dirname, 'src') }, { find: '@components', replacement: path.resolve(__dirname, 'src/components'), }, { find: '@layouts', replacement: path.resolve(__dirname, 'src/layouts'), }, ], },

자세한 내용은 아래 링크를 참조

https://velog.io/@davelee/typescript-paths-%EA%B4%80%EB%A0%A8-%EB%AC%B8%EC%A0%9C-3%EA%B0%80%EC%A7%80%EC%99%80-%ED%95%B4%EA%B2%B0%EC%B1%85

typescript paths 관련 문제 3가지와 해결책

typescript로 nodejs나 react 프로젝트를 진행할 때 paths를 설정하면 경로를 깔끔하게 관리할 수 있다.가령 이런 경로를이렇게 사용할 수 있는 것이다.그런데 사용하다보면 이런저런 문제가 발생한다.

velog.io

https://velog.io/@real-bird/React-Vite-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-path-alias-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

[Vite] Vite 환경에서 path alias 설정하기

Vite에서 path alias 설정하기

velog.io

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

차가운남자 — Tue, 13 Sep 2022 23:58:27 +0900

1. 카카오 개발자센터(https://developers.kakao.com/)에 가서 로그인 후 내 애플리케이션 이동 후 등록을 한다.

2. https://developers.kakao.com/sdk/js/kakao.js 파일을 다운로드하여 프로젝트에 import 한다.

3. 도메인을 등록하고 테스트를 위에 코드로 진행- localhost:3000 같이 도메인만 등록해도 가능 (CI값 설정을 해두면 카카오는 제공)

4. 테스트 완료 후 실제 운영에 적용하기위한 서비스 신청을 한다.

/* globals Kakao */ <<< Kakao가 전역변수로 선언되어져 있음
export function setKakao () {
  /* Kakao 값 체크 */
  if (Kakao === null) return

  /* 초기화 */
  if (!Kakao.isInitialized()) {
    /* 키값 설정 */
    Kakao.init(this.isDevHost ? dev : prod)
  }
}

export function kakaoLogin () {
  /* 
    동의항목 페이지에 있는 개인정보 보호 테이블의 활성화된 ID값을 넣습니다. (선택 또는 필수는 관리자 페이지에서 설정)
    scope: 'profile_nickname, account_email, gender, age_range, birthday' 기타 등등
  */
  Kakao.Auth.login({
    scope : 'profile_nickname, account_email', <<< 위에 내용같이 필요값 설정
    success: (response) => { // response : token 값
      
      /* 사용자 정보 가져오기 */
      Kakao.API.request({
        url: '/v2/user/me',
        success: async (res) => { // res: 사용자 정보
 
          /* 구현하고 싶은 함수 호출 */
          await snsLogin.call(this, res) <<< 예시
        }
      })
    },
    fail: function (error) {
       /* 실패시 */
    }
  })
}

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

차가운남자 — Tue, 13 Sep 2022 23:37:04 +0900

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: 발급받은 네이버 ID값,
    callbackUrl: 등록 되어진 URL,
    isPopup: true
  })

  /* 네이버 아이디로 로그인 정보를 초기화하기 위하여 init을 호출 */
  naverObj.init()

  /* 현재 로그인 상태를 확인 */
  window.addEventListener('load', () => {
    naverObj.getLoginStatus(async (status) => {
      /* 로그인 상태가 "true - 성공" 인 경우 로그인 버튼을 없애고 사용자 정보를 출력합니다. */
      if (status) {
       /* 호출하는 부분 */
       await snsjoin.call(this, naverObj) <<<< 예시
      }
    })
  })
}

/* 네이버 아이콘(클릭 이벤트)에 적용하면 된다 */
export async function naverLogin () {
  /* 네이버 생성된 URL로 이동 */
  window.location.href = naverObj.generateAuthorizeUrl()
}

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

차가운남자 — Mon, 4 Apr 2022 22:59:51 +0900

프로젝트를 진행하면서 비동기식 코드를 작성을 많이 하게 되는데, 비동식으로 코드 작성시 항상 갈증이 있었는데 외국 블로그에 잘 정리된 글을 보고 배움을 얻어 코드를 작성할때 고려하려고 한다.

한화면에서 여러 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 Promise.all(responses);

Promise를 x 표시 되게 썼던 경험도 있어서 올바른 방법으로 사용하기 위하여 적어둠.

// ❌
new Promise((resolve, reject) => {
  return result;
});

// ✅
new Promise((resolve, reject) => {
  resolve(result);
});

바로 await를 반환한 값을 바로(직접) 변화를 주면 race condition(경쟁상태로) 되어진 값으로 같은 시간(시점)에 업데이트가 되면 제대로 된 결과를 얻을수가 없다.
결론은 좋은 방법은 const "변수" 로 생성한 후에 값을 변경을 주는것이 좋다.


let totalPosts = 0;

async function getPosts(userId) {
  const users = [{ id: 1, posts: 5 }, { id: 2, posts: 3 }];
  await sleep(Math.random() * 1000);
  return users.find((user) => user.id === userId).posts;
}

// ❌
async function addPosts(userId) {
  totalPosts += await getPosts(userId);
}

// ✅
async function addPosts(userId) {
  const posts = await getPosts(userId);
  totalPosts += posts; // variable is read and immediately updated
}

await Promise.all([addPosts(1), addPosts(2)]);
console.log('Post count:', totalPosts);

참고한 개발자 블로그

https://maximorlov.com/linting-rules-for-asynchronous-code-in-javascript/

14 Linting Rules To Help You Write Asynchronous Code in JavaScript

A compiled list of linting rules to specifically help you with writing asynchronous code in JavaScript and Node.js.

maximorlov.com

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

차가운남자 — Mon, 21 Feb 2022 23:05:49 +0900

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
  regEmail.test(value) ? true : false
  regNum.test(value) ? true : false

2. Input form 입력시 사용되는 정규식 - 입력자체를 막기

// 숫자만 입력
const onlyNum = /[^0-9]/g
// 한글 + 영어만
const koEng = /[^(ㄱ-힣a-zA-Z)]/gi
// 사업자번호
const businessNumber = /(\d{3})(\d{2})(\d{5})/
// 핸드폰 번호입력
const phone = /(\d{3})(\d{4})(\d{4})/

newValue = value.replace(onlyNum, '')
newValue = value.replace(koEng, '')
newValue = value.replace(phone, '$1-$2-$3')
newValue = value.replace(businessNumber, '$1-$2-$3')

자세한 내용은 밑에 링크를 참조:
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_Expressions

정규 표현식 - JavaScript | MDN

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다. 이 패턴들은 RegExp의 exec 메소드와 test 메소드 ,

developer.mozilla.org

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

차가운남자 — Wed, 2 Jun 2021 16:45:48 +0900

한참을 문제를 고민을 하다가 해결이 안되어서 다른 사람들의 글을 찾아보고 이해하게 되었다.

주어진 배열에서 최소 뉴클레오타이드 값이 무엇인지 리턴하는 문제입니다.

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가 되고,

S[0:6] = CAGCCTA 이고 A의 영향도가 1이므로 1이 됩니다.

그래서 리턴은 [2, 4, 1]을 리턴하면 됩니다.

function solution(S, P, Q) {
   let resultArr = [];

   for(let i = 0; i < P.length; i++) {
          // slice메소드는 두 번째 index까지는 포함시키지 않으므로 포함해서 자를수있도록 +1 해줌
       let temp = S.slice(P[i], Q[i]+1); 

        if(temp.indexOf('A') !== -1) {
            resultArr.push(1);
        } else if (temp.indexOf('C') !== -1) {
            resultArr.push(2);
        } else if (temp.indexOf('G') !== -1) {
            resultArr.push(3);
        } else {
            resultArr.push(4);
        }
   }

   return resultArr;
}

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

차가운남자 — Wed, 2 Jun 2021 00:23:36 +0900

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

세팅 끝 !!

심플한 블로그 템플릿이 보일 것이다. 여기에 필요한 개츠비 플러그인을 설치하여서 개발하면 편하다.

수동으로 개발 환경 - gatsby new

Gatsby에 튜토리얼에 자세하게 나와있다. https://www.gatsbyjs.com/docs/tutorial/part-1

이번에는 다시 gatsby를 공부한다는 생각으로 수동으로 진행하였다.
gatsby new 입력하면 아래와 같이 이쁘게 나온다. v2에서는 이러지 않았던거로 기억이 되어진다...

자신이 하고 싶은 옵션을 넣고 진행하면 된다.

gatsby develop 또는 npm run develop

그러면 localhost:8000 과 http://localhost:8000/___graphql 가 보이면 잘 작동이 되고 있는 것이다.
개발 환경은 이것으로 끝!!!!

폴더 구조

contents - 블로그 포스트 관련 파일들을 저장하기 위한 디렉토리입니다.

src
-> components - react Component를 저장하기 위한 디렉토리
-> hooks - custom Hooks을 저장하기 위한 디렉토리
-> pages - 페이지의 역할을 하는 컴포넌트를 저장하기 위한 디렉토리
- gatsby 기본규칙으로 브라우저에서 pages 디렉토리에 있는 파일의 이름을 통해 페이지에 접근(url 경로)
-> templates - Gatsby에서 제공하는 API를 통해 이 디렉토리에 저장된 템플릿 컴포넌트로 여러 페이지를 생성
- 같은 형식의 여러 콘텐츠를 보여주는 컴포넌트를 저장하기 위한 디렉토리

플러그인 - 추후 보충

Typescript + ESLint + Prettier 설정

gatsby-config.js 설정

다음에는 Gatsby Graphql를 진행!!!

코딜리티(Codility) Lesson4 CountDiv 문제풀기

차가운남자 — Thu, 27 May 2021 16:34:37 +0900

Write a function:

function solution(A, B, K);

that, given three integers A, B and K, returns the number of integers within the range [A..B] that are divisible by K, i.e.:

{ i : A ≤ i ≤ B, i mod K = 0 }

For example, for A = 6, B = 11 and K = 2, your function should return 3, because there are three numbers divisible by 2 within the range [6..11], namely 6, 8 and 10.

Write an efficient algorithm for the following assumptions:

A and B are integers within the range [0..2,000,000,000];

K is an integer within the range [1..2,000,000,000];

A ≤ B.

문제 풀이

세 개의 정수 A, B, K가 주어지면 [A..B] 범위 내에서 K로 나눌 수 있는 정수의 수를 return 하라는 문제.

첫번째 시도 : 0%

function solution(A, B, K) {
    let result = 0;

    for(let i = A; i <= B; i++) {
        if( i % K === 0 ) result++; 
    }

    return result;
}

5번정도 시도 후: 100%

 function solution(A, B, K) {
    let result = parseInt(B/K) - parseInt(A/K);

    if(A % K === 0) result += 1;

    return result    
}

처음의 시도의 for문으로 무식한 방법을 사용이 좋지는 않다....

왜 나는 parseInt(B / K) - parseInt(A / K) 를 생각을 못했을까?????

math.floor로 먼저 적용을 하다가 남의 코드를 보고 parseInt를 보게 되었고

math.floor !== parseInt 에 대해서 체크 하게 되었다.

조건을 잘 생각해야된다.

쉽지 않다....

Gatsby로 어떤걸 만들어 볼까?

차가운남자 — Thu, 20 May 2021 12:17:04 +0900

현재 소규모로 커뮤니티 사이트(프로토타입)를 만들고 싶은데 생각을 해보게 되었는데... 기획 부분이 많이 부족한 상태이다.
후보중에 떠오르는 구성은 다음과 같았다.

1. React + Express
2. Next + NestJs
3. Gatsby

CMS를 이용하여서 하여야 되는 부분이 있어서 Gatsby가 편리한 부분도 있지만,
제약적인 부분이 많다고 생각이 들어서 적합하지 않다고 판단이 되었다.

Gatsby로 블로그를 (3. Gatsby) 배포 완료 후,
인디 게임 리뷰 프로젝트를 진행할 예정 ( 2- Next + NestJS).

현재 프로젝트 목표: 블로그

선정 이유: 개인적인 일상, 생각 등을 관리하기 위한 목적이다.

고려 대상:
1. 도메인 구매
2. 어떤 서비스에 배포 ( github , gatsby cloud, netlify...)
3. 디자인 부분
4. gatsby starter를 이용 여부

추후 프로젝트 목표: 인디게임 리뷰 ( 오픈 커뮤니티 )

선정이유: 인디게임 정보만 깔끔하게 보고싶고, 내가 그중에 마음에 드는 게임을 하고 싶기 때문이다.

생각이 필요한 부분 - 만들면서 더 고민을 해볼 생각이다.
1. 회원 관리가 필요 또는 가능한가?
- gatsby의 플러그인 gatsby-plugin-netlify-cms 사용하면 이메일 인증을 통한 회원가입 후에 일반 유저에게 생성 권한을 줄 수 있다.

2. markdown 형식 에디터를 제공
- 1번에서 말한 Netlify cms에 로그인시에 Netlify에서 제공하는 editor에 preview기능까지 제공한다.

3. 데이터는 어디서 가지고 와야할까?
- 정적인 데이터(MDX)파일 생성 또는 Netlify에서 생성한 데이터를 가지고 와서 동적으로 페이지를 생성 가능.
- NestJS를 이용해서 인디관련 정보를 scraping을 통해서 파일(mdx)로 저장하는걸 고려중

4. 인피니티 스크롤을 적용
- 가능하다. IntersectionObserver를 이용하여서 블로그에 추가 예정이다.
- 적용 후 마음에 들지 않는다면 페이지네이션으로 대처

처음 개츠비를 사용하여 간단하게 블로그를 만들었을 때가 v2 버전이였지만 현재는 v3으로 업데이트가 되어져 있어서 뭐가 달라졌는지에 대해서는 추후에 정리를 할 예정이고 예전에는 v2에서 netlify에 배포였던것을 gatsby cloud로 사용하려고 고려 중이다.

다음 컨텐츠는 Gatsby 개발 설정!!

https://www.gatsbyjs.com/

Gatsby | The Speed you Need to Delight Every Customer

Gatsby provides development teams an open source frontend framework for creating rich, optimized websites and a cloud platform for delivering them on a blazing fast edge network.

www.gatsbyjs.com

코딜리티(Codility) Lesson4 PermCheck 문제풀기

차가운남자 — Wed, 12 May 2021 17:10:57 +0900

A non-empty array A consisting of N integers is given.

A permutation is a sequence containing each element from 1 to N once, and only once.

For example, array A such that:

A[0] = 4 A[1] = 1 A[2] = 3 A[3] = 2

is a permutation, but array A such that:

A[0] = 4 A[1] = 1 A[2] = 3

is not a permutation, because value 2 is missing.

The goal is to check whether array A is a permutation.