웹 개발을 하다보면 우편번호 기능을 사용할 일이 빈번하더라구요. 감사하게도 다음 우편번호 검색 라이브러리가 너무 간단하고 사용하기 편리해서 포스팅에 한번 적어보려고 합니다. 👀 먼저, 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파일을 생성하여 컴포넌트 코드를..

이번 포스팅에서는 간단하게 로그인 회원가입에서 아이디 중복확인을 해주는 기능을 한번 작성해보려 합니다. 저는 서버리스식으로 firebase를 이용해서 작업하고 있어요. 공부하면서 느끼지만 firebase.. 최고입니다.. 저는 displayName (사용자 닉네임)의 중복 확인을 구현했습니다. 먼저 제가 구현한 화면입니다. 입력받은 문자열이 DB에 있는 사용자 정보중에 동일한 displayName이 존재한다면 "이미 다른 사용자가 사용 중입니다."라는 메시지를 띄웁니다. + 무시하고 회원가입 버튼을 누를 경우 "DisplayName을 확인해주세요"라는 error를 띄워줍니다. 코드로 바로 설명하겠습니다. 먼저 동일한 ID가 있는지 확인하는 부분의 코드입니다. const [dpNameCheck, setDp..

데이터 분석 처리 웹사이트 프로젝트에 참여해보면서 데이터 시각화를 위해 d3를 사용해보게 되었어요. 이번 포스팅에서는 csv파일의 내용을 table형식으로 웹에 나타내는 것에 대해 적어보겠습니다 : ) 아래 사이트에서 보시면 다양하고 좀 있어보이는(?) 그래프들과 예시 코드들도 있어서 참고해보시면 좋을 것 같아요. www.d3-graph-gallery.com/ The D3 Graph Gallery – Simple charts made in d3.js The D3 graph gallery displays hundreds of charts made with D3.js, always providing the reproducible code. www.d3-graph-gallery.com 위의 csv파일(exam..