Project 기록 (22) 썸네일형 리스트형 공공데이터API(미세먼지경보발령) 웹에 사용해보자(react,node.js) 저번 포스트와 같은 프로젝트이기 때문에 생략된부분이 있을 수 잇습니다. 내가 사용 할 공공데이터포털의 API다 공공데이터포털: www.data.go.kr/index.do 검색창에 ↓요래 치면 나온다 사용자가 "지역"을 검색했을 때 그 "지역"의 가장 최근 발령 현황을 알려주고 싶다. 왜냐하면 과제이기 때문이다. API명세를 보면 아래 글을 찾을 수 있다. 문제가 있다. 나는 '지역'을 검색하고 싶은데 "조회연도"를 입력하여 경보조회를 한다. 가공해 보자 그래서 나는 조회연도를 2020으로 하고 최근 100개 데이터를 뽑아오고 , 제일 최근 데이터를 보여줄꺼다 먼저 프론트앤드이다. '경남'을 선택 후 "클릭"버튼을 누르면 서버에 요청을 하고 빈공간에 내용이 출력되게 한다 우선 state 값 construc.. 공공데이터API(미세먼지) 활용하여 웹을 만들어보자②(react,node.js) 이제 서버페이지에서 공공데이터와 연결해보자 나의 서버페이지의 경로는 요래생겼다 왜이렇게했는지는 모른다 걍 익숙하다. body-parser, cors, express 모듈을 사용했다. const express = require('express'); //익스프레스 모듈 가져오기 const app = express(); const cors = require('cors'); //cors를 사용하고 싶다 const bodyParser = require('body-parser'); //body-parser을 사용하고 싶다 const port =5000; //서버포트는 5000번 포트 const route = require('./routes/index'); //router가 있는 곳이다 만들 index.js다 app.. 공공데이터API(미세먼지) 활용하여 웹을 만들어보자①(react,node.js) 소프트웨어 공학 수업 과제이다. 상대방의 요구사항 제안서를 살펴보자 custumer가 요구하는 usecase이다 . 지역선택 후 -> 그 지역의 미세먼지 검색과 미세먼지 주의보 발령상황, 생활기상지수를 조회 할 수 있어야한다. 다음은 custumer의 기능적/비기능적/도메인 요구사항이다. 잘 참고하자 . 1) 기능적 요구사항 - 현재 미세먼지 및 초미세먼지 수치를 출력한다. - 현재 생활기상정보를 출력한다. - 현재 주의보 발령 상황을 출력한다. 2) 비기능적 요구사항 - 전국 도 별 정보를 알려 준다. - 지수를 알려주되 좋고, 나쁨의 기준은 WHO에서 권고하는 기준을 따른다. - 미세먼지의 농도는 실시간으로 업데이트된다. 3) 도메인 요구사항 - 한국에서만 사용할 수 있어야한다. - 웹에서 사용이 가.. [프로젝트]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.. 이전 1 2 3 다음
