STUDY (287) 썸네일형 리스트형 React | socket.io를 활용한 채팅 (+ Node.js, redux) 아직 완성은 아니지만 정리하기 위해 작성해봅니다. +) 참고 [Node.js] 웹 소켓으로 실시간 랜덤 채팅 구현 중 메시지 중복 버그 해결과정 (WebSocket Random Chat - clients rendering duplicate message) 정말 오랜만에 블로그 글을 작성하는 것 같다. 바닐라코딩에서 서버쪽 공부를 시작하면서 할 것도 엄청 많고 과제에 허덕이다보니 도저히 블로그 글을 쓸 여유가 안생겼었다. 이번에 웹소켓을 이용해서 랜덤 채팅.. im-developer.tistory.com 0. create-react-app을 이용해 기본 뼈대 만들기 2020/01/02 - [STUDY/React.js] - React | Create React App을 이용해 React 시작하기 그 후, s.. Node.js | Oracle 연동 (npm oracledb) 1. npm을 이용하여 oracledb설치 $ npm install oracledb 2. 사용준비 const oracledb = require('oracledb'); 3. DB와 연결하기 이제 콜백 함수의 두 번째 인자값인 conn을 이용하여 쿼리문을 실행하시면 됩니다. oracledb.getConnection({ user: 'user명 입력', password: '비밀번호 입력', host: 'localhost', database: 'xe' }, function (err, conn) { if(err){ console.log('접속 실패', err); return; } console.log('접속 성공'); }); 4. 쿼리문 실행해보기 conn.execute("select * from member", .. CSS | 파일 업로드 css적용하기 (input file custom) input file의 기본 모습을 없애고 css를 적용하는 방법은 기본 css를 제거하고, label태그를 커스텀 해 버튼처럼 사용하는 방법입니다. HTML코드 파일 선택 CSS코드 // input file의 기본 모습을 제거 #profile_img_upload{ width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; } #profile_img_upload + label { border: 1px solid #d9e1e8; background-color: #fff; color: #2b90d9; border-radius: 2rem; padding: 8px 17px 8px 17px; font-weigh.. Node.js | nodemailer ejs사용하기 (이메일 인증번호) nodemailer 설치 및 기본 사용법은 이전 글을 참고하세요. 1. ejs 설치 $ npm install ejs const ejs = require('ejs'); 2. ejs파일 생성 및 코드작성 authCode에 생성된 인증번호가 들어갑니다. 회원 가입을 위한 인증번호 입니다. 아래의 인증 번호를 입력하여 인증을 완료해주세요. 3. ejs 렌더 이 과정에서 ejs파일의 authCode에 생성한 인증번호가 대입되고, html코드로 변환됩니다. // 숫자 let authNum = Math.random().toString().substr(2,6); let emailTemplete; ejs.renderFile('./src/resources/users/emailtemplete.ejs', {authCode :.. Node.js | nodemailer 이미지 첨부하기 (Embedded Image) mailOptions에 attachments 항목을 추가하고 filename에는 첨부하고자 하는 이미지의 파일명, path에는 첨부하고자하는 이미지가 담긴 경로(파일 명도 함께 적어주어야 합니다.) 그리고 cid는 html의 img 태그의 src에 적을 내용을 작성합니다. ※ 이 방법으로 메일을 전송할 경우 이미지가 첨부파일로 전달됩니다. const mailOptions = { from: 'id@gmail.com', to: 'to@email.com', subject: '메일 제목', html : , attachments: [{ filename: 'logo.png', path: './src/resources/users/images/logo.png', cid: 'logoImg' }] }; +)참고 Using.. Node.js | nodemailer를 이용한 이메일 인증(Gmail) nodemailer는 Node.js에서 메일을 쉽게 보낼 수 있도록 해주는 모듈입니다. 1. nodemailer 설치 npm을 이용하여 nodemailer를 설치한 뒤, 사용할 준비를 해줍니다. $ npm install nodemailer const nodemailer = require('nodemailer'); 2. google계정 보안 설정 변경 아래의 링크를 클릭하여 설정을 활성화해줍니다. 이 설정을 해줘야 nodemailer측에서 본인의 구글 계정에 접근 할 수 있다고 합니다. 우선 첫 번째 링크에서 활성화를 마친 뒤, nodemailer가 정상적으로 실행되지 않는다면 두 번째 링크도 활성화를 해주세요. https://myaccount.google.com/lesssecureapps https://.. Node.js | Passport.js (passport-naver) 1. Naver Develpors에 애플리케이션 등록 NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음성인식, 음성합성 등이 있습니다. developers.naver.com 사이트 하단에 애플리케이션 등록을 클릭하여 등록을 진행하세요. 2. npm을 이용하여 passport-naver 설치 $ npm install passport-naver 3. 사용준비 configuration 네이버 clientID와 clientSecret이 필요합니다. var NaverStrategy = require('passport-naver').. Node.js | Passport.js (passport - kakao) React(frontend) - Node.js(backend) - MySQL(DB) 연동 플젝임 1. KakaoDevelopers 사이트에 앱 등록 및 설정 계정이 없다면 가입 후 앱을 등록하세요. Kakao Developers_ 더 나은 세상을 꿈꾸고 그것을 현실로 만드는 이를 위하여 카카오에서 앱 개발 플랫폼 서비스를 시작합니다. developers.kakao.com 설정 - 사용자관리 - ON 설정 - 일반 - 플랫폼 등록 2. npm을 이용해 passport-kakao설치하기 $ npm install passport-kakao 3. 사용을 위한 준비 (config) 설정 - 일반 - 기본정보 - 앱 키에서 REST API키를 복사한 후, clientID항목에 넣어줍니다. clientSecret은 .. 이전 1 ··· 29 30 31 32 33 34 35 36 다음