저는 이번 우아한테크러닝 4기 : 나만의 노션 만들기 (feat.시니어봇)에 운이 좋게 참여하게 되었어요 이 노션 프로젝트는 리액트 typescript를 이용하여 진행되는데 typescript는 처음이라 많이 어색하더라구요 해당 프로젝트에서는 로그인 기능을 구글 인증 API인 Oauth2를 이용하기로 결정되어서 구현한 내용을 토대로 포스팅을 해보려합니다 :-D 먼저 구글 Oauth2 의 document는 아래 링크에서 자세히 볼 수 있어요. https://developers.google.com/identity/protocols/oauth2 OAuth 2.0을 사용하여 Google API에 액세스 | Google ID 플랫폼 | Google Developers 참고 : Google의 OAuth 2.0 구현..

이번 포스팅에서는 카카오 맵과 카카오 로컬 API 간단한 사용법에 대해서 써보려 합니다 😊 +2023.09.25 내용 업데이트 카카오 맵 API 제가 사용했던 API는 사진과 같이, 위도&경도를 이용하여 지도에 위치를 띄우고, 지도에서 이동 시, 현위치 재검색을 구현했습니다. 지도 생성 먼저 해야할 것은 kakao Developers 사이트에 애플리케이션 등록하여 인증키 [앱키 > JavaScript 키]를 발급받는 것 입니다. (애플리케이션 등록 후 플랫폼까지 등록해야 합니다.) https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. ..

웹 개발을 하다보면 우편번호 기능을 사용할 일이 빈번하더라구요. 감사하게도 다음 우편번호 검색 라이브러리가 너무 간단하고 사용하기 편리해서 포스팅에 한번 적어보려고 합니다. 👀 먼저, react-daum-postcode 패키지를 설치해줍니다. npm i react-daum-postcode 코드내용은 react-daum-postcode의 DaumPostCode onComlete 함수로 handleComplete를 사용하였습니다. 이 handleComplete에서는 입력이 끝나면, 주소를 전체 주소(우편번호 포함)로 변환해주어 fullAddress로 반환해줍니다. 이 fullAddress를 원하는 대로 처리하면 됩니다. import REACT, { useState } from 'react'; import D..

이번 포스팅에서는 node js에서 네이버 클라우드 플랫폼 (NCP)에서 제공하는 문자발송 API를 사용하는 법에 대해서 간단하게 적어보려 합니다 👻 저는 식당 대기 예약 웹서비스를 개발해보면서 사용하게 된 부분인데요. 생각보다 문자 발송 API를 적용하는데 설명도 부족하고 서버에 대한 개념이 부족해서 많이 고생했던 것 같아요..ㅎ 이제 바로 설명해보겠습니다. 사전작업(인증키 발급) 먼저 아래 NCP사이트에서 회원가입 후 서비스 이용 신청을 해줍니다. https://www.ncloud.com/product/applicationService/sens NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with G..

메신져 프로젝트를 진행하면서 사용자들을 언급하는 기능이 있다면 좋겠다 생각했어요ᓚᘏᗢ 트윗을 보낼 때 @를 이용해서 사용자 ID를 언급한다면 상대방의 알림창에 해당 트윗내용이 보여지게 구현했습니다. 먼저 구현한 부분들을 보여드릴게요 . 기본적인 구현 내용은 "@와 이어붙은 문자열을 멘션내용으로 다룬다!"에요. 좀더 코드적으로 분석해보면 입력받은 문자열에서 @가 포함되어있는 문자열을 걸러내어 @만 잘라내면 됩니다. 좀 황당할 정도로 간단합니다.. ㅎ 세부적인 내용은 코드로 살펴보면서 설명하겠습니다 :D:D import { dbService, storageService } from 'fbase'; import React, { useState } from 'react'; import TextareaAutosi..

안녕하세요. 이번 포스팅에서는 진행 중인 트위터 클론 코딩 프로젝트에서 모달 창을 구현하다 애를 먹었던 게 너무 아까워서 구현 방법을 작성해보려 해요 👊 저는 모달창을 구현하기 전에 details태그를 이용하여 서브 메뉴들을 작성했는데 다시 해당 태그를 클릭해야지만 메뉴가 닫히는 게 꼴 보기 싫더라고요..ㅎ 그래서 이것저것 알아봤는데 이렇게 특정 영역 외의 부분을 클릭하면 창이 닫히는 것을 모달 창이라고 하더라고요 react에서 modal라이브러리가 있기는 한데.. 제가 원하는 느낌은 아니라 제가 구현하는 쪽으로 선택했어요 모달 창을 위한 컴포넌트를 만들어서 코드를 작성했고, 구현 페이지에서 컴포넌트를 불러와서 작성했습니다. 먼저 구현된 화면을 보여드릴게요. Modal.js파일을 생성하여 컴포넌트 코드를..