Project 기록/와글와글(web) (11) 썸네일형 리스트형 [프로젝트]1:1 매칭 대상을 바꿔보자 (react,nodejs,express) 오늘 작업한거 정리이다 기존 이성 끼리만 매칭되던 기능을 버튼 하나 더 만들어 동성끼리도 만나게 해주자 콤보박스를 누르면 원래는 1:1과팅과 "다중매칭은 준비중입니다." 가 뜬다 저자리에 동성 친구를 넣어주자 버튼은 어떻게 구분 해 줄까 this.state = { arrow_text: "1 : 1 과팅", // 콤보박스에 뜨는 문구인데 default는 "1 : 1 과팅" count: 1, state 값에 count를 넣어서 1:1 과팅 클릭시 count: 1, 동성친구 클릭시 count: 2, 로 초기화 해준다 "매칭시작"을 누르면 컴포넌트가 실행 되는데 start 컴포넌트에 count값을 넘겨 주자, 그래야 구분지어 함수를 실행 할 수 있다 컴포넌트 당연히 props를 사용해야 한다 const user.. [프로젝트]벤 당한 유저를 접근 못 하게 하자 (react, nodejs,mysql) 채팅앱이다 보니 욕설이나 성희롱이 존재 한다 신고 당한 유저를 이용 못하게 만들자 나쁜사람. 비매너 신고를 받으면 접수를 받고 그 유저를 ben_table에 넣어 주도록 하였다 ben_useer_realid가 회원의 아이디이다 이 테이블에 존재하는 유저는 페이지 어디에 있더라도 알림과 함께 로그인 페이지로 가게 만들자 페이지가 render되기 전 componentWillMount() 안에 코드이다 let user_realid = JSON.parse(localStorage.getItem("user")).user_realid; // 로컬스토리지에서 console.log(user_realid); 유저의 아이디를 가져오자 const box2 = { //박스로 감싸기 user_realid: user_realid,.. [프로젝트] setTimeout()을 사용해 버튼클릭에 제한을 두자(react) 요새 우리학교 랜덤 채팅 웹앱을 제작중이다 잠시 서버 오픈 했었는데 사람들이 이메일 인증번호 전송을 클릭하고 금방 메일이 오지 않자 다시 전송을 누르는 현상이 생겼다 이를 시간 제한을 둬서 해결 해 보자 위의 사진이 회원가입 인터페이스이다 전송을 누르면 요론 메시지가 나오도록 설정했다 state값: this.state = { email: "", //입력받은 이메일 waitingEmail: true, // false면 눌러도 메일이 안가게 할거다 }; 전송버튼: 전송 onClick 이벤트 발생시 sendEmail 함수를 실행시킨다 sendEmail 함수: sendEmail = (e) => { //전송 버튼 눌렀을 때 e.preventDefault(); if (this.state.waitingEmail ==.. [프로젝트]텍스트 입력후 데이터베이스에 넣기(nodejs,react,mysql사용) 영빈이가 오랜만에 오더를 줬다 제작중인 웹에 피드백을 받기위해 불편사항 신고기능을 만들어라고 했다 입력받은 내용을 디비에 넣기만 하면 된다 함 해보자 내 핸드폰 아이폰7기준으로 인터페이스를 만들었다 정말 깔끔하고 예쁘다 기능을 보자 제출 버튼에 onClick 이벤트를 주고 onSubmit함수를 이용해 데이터를 보낼 예정이다 제출 제목을 받는 input 태그와 내용을 받는 textarea 태그에 onChange함수 이벤트를 주었다 onChange로 인해 input이나 textarea에 입력이 있을 때마다 state값이 초기화 된다 onChange = (e) => { this.setState({ [e.target.name]: e.target.value, // 변화가 있을때마다 state값을 초기화 }); }.. [프로젝트]채팅앱기본 React에서 Socket.io를 사용해보자(node.js) 채팅 앱 같이 실시간 연결 되어 소통이 일어 날 수 있게 해야한다 친구 영빈이가 가르쳐 줬다 복습 해보자 react 프레임워크에서 서버는 node.js 언어를 사용했다 우선 사용 할 모듈을 설치해 주자 npm install socket.io npm install socket.io-client 서버 사용 하기 위해 npm install body-parser npm install cors npm install express express, cors, bodyParser 모듈도 받아줬다 준비가 됐다 '클라이언트페이지1' 과 '클라이언트페이지2', 그리고 '서버페이지' 세개의 .js 파일을 만들 거다, 클라이언트는 라우터로 나눠주었다 "socket.emit 데이터 줄때" "socket.on 데이터 받을때" "s.. [프로젝트]챗봇(chatbot)에 대해서, API종류 우리학교를 위한 정보 쳇봇 프로그램을 만들기로 했다 그전에 쳇봇이 먼저 알아야한다 알아보자 챗봇이란? 쳇봇의 기초적인 의미는 사람 간의 대화(문자 또는 음성)을 시뮬레이션 및 프로세싱하는 컴퓨터 프로그램이다 마치 사람과 대화를 나누는 것처럼 디지털 장치와 소통할 수 있게 해주는 기술이다 쳇봇은 단순하게는 한줄로 간단한 문의 할 수 있는것부터 디지털 어시스턴트처럼 정보를 수집과 처리하여 이를 학습하고 맞춤 서비스를 제공하는 정교한 프로그램 등이 있다 챗봇은 어떻게 작동할까? AI: 인간의 학습능력과 추론능력, 지각능력, 자연언어의 이해능력 등을 컴퓨터 프로그램으로 실현한 기술 머신러닝: 기계학습으로 지도학습과 비지도학습으로 크게 나누어짐. 주로 통계적인 기법 통해서 학습 딥러닝: 머신러닝의 한 분야로 사물.. [프로젝트] props를 사용해서 컴포넌트를 껐다 키자(react) 요새 회원가입 페이지를 만들고 있다.정말 심플하고 트랜디하게 잘만들었다 그치만 회원가입완료가 떴는데 입력하던 폼은 안사라지고 그대로 있다 props로 임마를 사라지게 해보자 !!!! 나의 js파일 구조는 signup_button 컴포넌트 ↓ 하위 signup_page 컴포넌트 버튼(signup_button)을 누르면 Dialog 팝업의(signup_page)가 뜨는 구조다 import React from 'react'; import Button from '@material-ui/core/Button'; import Dialog from '@material-ui/core/Dialog'; import DialogActions from '@material-ui/core/DialogActions'; import.. [프로젝트] nodemailer 사용해서 인증번호 확인 해보자 ② (react) ①에서는 먼저 입력해 놓은 내용을 클라이언트에게 메일을 보냈었다 이제는 난수를 생성하고 고것이 사용자가 다시입력한 것과 일치하는지 알아 보자!!! 우선 서버에게 요청할 함수.js다. 발송된 인증번호를 number에 , 내가입력한 인증번호를 inputnumber로 뒀따 constructor(props) { super(props); this.state = { email: '', usingemail: false, // 인증번호가 맞아서 가입가능한가?? number: '', //보내진 인증번호 inputnumber: '', //내가 입력한 인증번호 // 이 두개가 똑같아야 한다 } sendEmail(e){ e.preventDefault(); console.log(this.state.email); const da.. 이전 1 2 다음
