React + TypeScript 이용해서 카카오 로그인 구현하기

React + TypeScript를 사용해서 카카오 로그인을 구현해 봤습니다. Next.js를 이용해서 개발을 진행하였습니다. 카카오 로그인 과정 1. 카카오 SDK 자바스크립트 불러오기 2. 카카오 SDK 초기 설정 Kakao.init(JAVASCRIPT_APP_KEY); 3. 로그인 요청 Kakao.Auth.authorize({ redirectUri: "http://localhost:3000/login", }); 로그인이 성공하게 되면 redirectUri에서 설정한 주소로 코드 값이 옵니다. ex) http:/// localhost:3000/login?code=12345 4. 코드 값을 보내서 토큰 받아오기 const response = await fetch("https://kauth.kakao.c..

• format_list_bulleted Develop/React
• · 2023. 9. 7.
• textsms

차가 너무 멋져서 그런데 혹시 직업이 어떻게 되실까요? 부의 추월 차선

유튜브 쇼츠에 보면 재미있는 밈이 있습니다. 차가 너무 멋져서 그런데 혹시 직업이 어떻게 될까요? 젊을 때 멋진 외제차를 타는 사람들을 보면 멋있고 부럽습니다. 어떻게 하면 젊을 때 저런 멋진 외제차를 탈 수 있을까 생각하면, 저는 부의 추월 차선에 올라타야 한다고 이야기하고 싶습니다. 참고로 저는 인도에서 주행 중입니다. 인도 ➡️ 가난 부 = 소득 + 빚 소득 < 지출 부자처럼 보이기 (중고 BMW 저가라인, 벤츠 60개월 할부) 가짜 부가 진짜 부를 파괴 (가족, 건강, 자유) 히치하이킹 ➡️자신의 재무 계획을 남에게 맡김 서행 차선 ➡️ 평범한 삶 부 = (주요수입원 : 직업) + (부의증식방법 : 투자) 절약, 검소, 주택 매입, 주식 구매, 보험, 연금 가입 2일의 자유를 위해 5일간의 노예 ..

• format_list_bulleted 일상/재테크
• · 2023. 9. 6.
• textsms

npm / Yarn / pnpm 차이점 특징 설치 방법

npm vs Yarn vs pnpm npm, Yarn, pnpm 모두 자바스크립트나, node 프로젝트 패키지를 관리하는 도구입니다. 프로젝트 내에 있는 패키지 종속성을 관리하거나 빌드 프로세스를 용이하게 해 줍니다. npm(2010) ➡️ Yarn (2016) ➡️ pnpm(2023) 순서로 출시되었습니다. npm npm은 Node.js 패키지 관리 도구입니다. 세계에서 널리 사용되고 있습니다. Node.js 기본 패키지에 포함되어 있습니다. 설치방법 node 설치 시 자동 설치 Yarn 페이스북에서 만든 패키지 관리 도구입니다. npm 보다 가볍고 빠르다는 장점이 있습니다. 패키지를 다운로드할 때, 병렬로 처리를 하여 빠르고, 캐시를 이용하여 중북 된 패키지를 다운로드하지 않는다는 장점이 있습니다. ..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 5.
• textsms

Vue 반응성 Reactivity 데이터를 추적하는 방법 Proxy 객체

Vue에서 data 옵션을 이용해서 설정한 값은 바로 화면에 렌더링이 됩니다. 값을 변경하면 Vue는 변경을 감지하고, Vue과 관리하는 HTML 코드를 스캔하여 변경사항이 있는 값을 다시 렌더링을 합니다. const app = Vue.createApp({ data() { return { message: 'Hello, Superman', }; }, }); Vue는 어떻게 변경을 감지할까요? 자바스크립트의 내장 기능인 Proxy 객체를 이용해서 변경을 감지합니다. data 옵션으로 설정한 객체를 Proxy 객체로 래핑을 합니다. Proxy로 래핑 한 객체는 내부적으로 data의 속성을 추적하고 있습니다. name 값이 변경이 될 때마다, Vue는 바로 감지할 수 있습니다. const data = { nam..

• format_list_bulleted Develop/Vue
• · 2023. 9. 4.
• textsms

JSDoc 사용법 타입 정의하기 typedef params 비동기함수

JSDoc 이란? JSDoc을 자바스크립트 프로그램이나, API를 문서화하기 위한 스타일 도구입니다. 기본적으로 /** 을 작성하면 JSDoc Parser가 인식을 합니다. 별 한 개 또는 세 개는 인식을 하지 않습니다. 다양한 태그를 이용해서 정보를 저장할 수 있고, 문서화할 수 있습니다. /** * 두개 숫자 더하기 */ function add(num1, num2) { return num1 + num2 } JSDoc 장점 단순히 설명을 작성하는 것 외에도 장점이 있습니다. JSDoc 목적에 맞게 문서화를 할 수 있고, 타입을 미리 정의하기 때문에 IDE 자동 완성 기능을 사용할 수 있습니다. 생산성 향상과 오류 찾는 디버깅 시간을 줄일 수 있습니다. 자바스크립트 프로젝트에서 타입스크립트를 도입하기 어..

• format_list_bulleted Develop/JavaScript
• · 2023. 8. 31.
• textsms

양양 물치항 회센터 튀김집 후기

물치 해수욕장 옆에 물치항 활어회 센터가 있습니다. 회센터에서는 회를 떠서 포장을 할 수 있고, 상차림비를 내면 식사도 할 수 있는 그런 곳 입니다. 상차림비는 테이블당 3,000원 입니다. 회센터는 1, 2층으로 되어있습니다. 건물은 오래되어서 옛날 느낌이 납니다. 관광객들도 많이 찾고 있습니다. 인근에 식당도 많아 놀러오신분들이 많이 방문하시는 것 같습니다. 저는 회센터에서 회를 먹으려고 생각하다가 오징어 회 이런게 있나 싶어서 찾아봤는데, 없어서 그냥 안먹었습니다. 광어, 우럭은 워낙 많이 먹어서... 그러던 중에 회센터 옆에 튀김집을 발견 새우튀김과 오징어 튀김을 포장했는데, 별 이야기도 안했는데, 서비스도 챙겨주시고 원래는 회 포장해서 같이 먹을까 생각했었는데, 튀김만 따로 먹었습니다. 새우튀김..

• format_list_bulleted 일상/맛집
• · 2023. 8. 31.
• textsms

Typescript - any, unknown, never 차이점 정리

any let name: any; 타입스크립트에서 가장 유연한 성격을 가진 타입입니다. 모든 타입의 값도 받을 수 있습니다. 유연해서 많이 사용할 것 같지만 사용을 지양하는 것이 좋습니다. any를 사용하면 타입스크립트 컴파일러 작동을 하지 않아, 타입을 검사하는 부분이 없어지게 됩니다. 이렇게 된다면 일반 자바스크립트와 차이점이 없어지게 됩니다. 타입스크립트에서 어떠한 타입을 사용할지 정확하게 설정해주어야 합니다. unknown let name: unknown unknown 타입은 어떠한 값이든 저장이 가능합니다. 하지만, any 타입과는 다른 점이 있습니다. 값을 입력하고 값을 전달하려고 하면 에러가 발생합니다. 조금 더 제한 적입니다. any 보다 나은 점은 할 수 없는 작업이 에러가 발생한다는 점..

• format_list_bulleted Develop/TypeScript
• · 2023. 8. 30.
• textsms

양양 물치해변 로컬 맛집 물치식당

안녕하세요 양양 물치해수욕장 인근에 있는 물치식당을 방문했습니다. 물곰탕, 물회 전문집입니다. 특히나 관광객보다, 일반 로컬분들이 많이 오셔서 인상 깊었습니다. 영업시간 08:00 ~ 21:00입니다. 물치 해수욕장 보다 한쪽 안의 골목이 있는 식당입니다. 저는 물회를 주문했었고, 회덮밥, 문어물회, 곰치국 등 다양하게 있습니다. 저녁 타임에 방문했는데, 첫 손님이어서 자리가 비워있었는데 금방 로컬 현지인 분들로 가득 찼습니다. 기본 반찬으로 위와 같이 나옵니다. 반찬 하나하나가 뭐랄까... 찐 맛집의 맛이... 다 맛있었습니다!! 짜잔, 대망의 물회가 나왔습니다. 물회 안에 회가 넉넉히 들어있습니다. 맛은 새콤달콤한 물회보다는 매콤한 맛이 강한 물회입니다. 화끈하게 먹기 좋습니다 사장님께서 직접 만드신..

• format_list_bulleted 일상/맛집
• · 2023. 8. 28.
• textsms

네이버 대화형 AI CLOVA X 사용 방법 이용 후기 티스토리 유입?

네이버에서 Chat GPT와 같은 대화형 AI 베타버전을 오픈했습니다. 국내 기업에서는 처음으로 출시했습니다. 특히 한국어 언어 모델에 특화되어 있어서 더욱 정확하게 답변을 할 수 있다고 합니다. 저는 주로 프로그래밍할 때, 많이 사용합니다. 최근 들어서 Chat GPT가 좀 멍청해진 듯한 느낌을 받고, 또 이왕이면 국산 제품을 사용하자라는 마인드이기 때문에 CLOVA X를 또 사용해보려고 합니다. CLOVA X 사용법 현재는 베타 서비스로 테스트 중이어서 아래 url로 입장 후 대기 등록 후 이용할 수 있습니다. https://clova-x.naver.com/ 저는 약 2~3일 이후 네이버로 메일이 도착해서 가입 후 사용해 보았습니다. 클로바 X 이용후기 프로그래밍 분야에 관련해서 정확한 지식을 답변해..

• format_list_bulleted 일상/리뷰
• · 2023. 8. 28.
• textsms

Vue3 + Typescript Props interface 사용법 기본값 설정

Props는 자식 컴포넌트에게 데이터를 전달할 수 있는 방법입니다. Vue3에서 타입스크립트를 이용해서 사용할 수 있습니다. Vue3에서 없이 Props 사용하기 export default { props: { name: { type: String, }, age: { type: Number, }, }, }; 으로 Props 사용하기 const props = defineProps({ name: { type: String, }, age: { type: Number, default: 20, }, }); 이 방법으로 사용할 수 있지만, 타입스크립트를 쓰는 의미가 없어서 다른 방법도 있습니다. interface로 타입 정의 하고 Props 사용하기 interface로 타입을 선언하과 defineProps 제네릭타입..

• format_list_bulleted Develop/Vue
• · 2023. 8. 25.
• textsms