전체 글 (58) 썸네일형 리스트형 빙글빙글 돌아가는 프로그레스(progress)를 만들자 (React,meterial-ui) 데이터를 요청하고 받을 때 까지 뭐가 ui적으로 눈에 보이면 좋다. 이게 돼가는지 안돼가는지 봐야 된다. 얘를 들면 요론거 버튼을 눌러 데이터를 요청하고 받아오기 전까지 저 프로그레스가 떴으면 좋겠다. 해보자 난 react에서 제공해주는 material-ui를 사용했다 여기가면 무료로 사용할 수 있다 material-ui.com/ 먼저 material ui를 사용하기 위해 패키지 설치 npm install @material-ui/core 좌측 메뉴 Component - Feedback 에 가면 Progress 보인다 나 이걸 사용하고 싶다. 소스코드와 함께 친절하게 있다 사용하고 싶은 .js파일에 import 해주기 // style은 안쓸거다 저거만으로 예쁘니깐 import CircularProgress.. 공공데이터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) 도메인 요구사항 - 한국에서만 사용할 수 있어야한다. - 웹에서 사용이 가.. [react-native] SafeAreaView의 높이를 어케 구할까?(ios) 아이폰 x 이후 모델은 디스플레이 상단에 노치가 있다 개발을 하는데 있어서 노치를 신경 안쓰다가 자칫 잘못하면 기껏 만들어 놓은 ui가 가려 질 수있다 왜냐하면 기본적인 height는 노치와 하단 home indicator를 포함한 높이기 때문에 사용 범위 보다 크게잡히기 때문이다 그래서 SafeAreaView를 사용하게 되는데 나같은 경우 컨테이너의 크기가 자꾸 safearea보다 작아지길래 강제로 높이 설정을 해주었다 내 실력탓이다 그치만 잘 해결됐다 알아보자 먼저 스크린의 크기를 구해 보자 Dimension을 import import { Dimensions, } from 'react-native'; 스크린의 높이와 너비를 알 수 있다 let ScreenWidth = Dimensions.get('wi.. [react-native] 키보드를 띄우면 input창을 가리지 않게 해보자 (KeyboardAwareScrollView) 회원가입창을 만드는데 페이지가 길어서 키보드를 누르면 화면을 가리게 된다 해결 해보자 앱은 성가시다 다음과 같이 맹글었다 키보드를 올리게 되면 다음과 같이 덮어 진다 . 겹치지 않으며 현재 선택 한 input창에 포커싱이 되게 해보자 먼저 react-native-keyboard-aware-scroll-view 모듈을 받아주자 npm i react-native-keyboard-aware-scroll-view --save github.com/APSL/react-native-keyboard-aware-scroll-view import 문 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' 본문 내용을 Keyboard.. [react-native] 버튼을 누르면 alert 창을 띄워보자(ios) 기존 하던 프로젝트를 이제 앱으로 만들기로 했다 react-native 처음 만져봤다 react와 똑같이 class형과 functional형이 있는데 난 class형을 사용했다 버튼을 누른 후 alert창이 뜨게 하고 싶다 우선 버튼을 만들자 (react와 비슷한점이 많다) //title : 표시 될 문자 //onPress가 버튼을 눌렀을 때의 이벤트이다 react와 조끔 다르니까 주의하자 아이폰스러운 버튼이다 RN(react-native)에서 제공해주는 api 를 사용해보자 import { View, StyleSheet, Button, Alert } from "react-native"; Alert api를 가져온다 onPress 이벤트 발생 시 실행되는 함수를 만들자 goAlert = () => Ale.. [git] github에서 협력하여 작업해보자 (organization) 개인의 repository에 여러명이 짠 코드를 복붙으로 합친다면 너무 비효율적이다 내가그랬다 팀원과 협력하여 github에서 작업해 보자 우선 github에 Oragnization이라는 계정을 만들어야 한다 여러 명이 같은 프로젝트를 관리하는 데 사용하는 그룹 계정이고 사람들을 서브 그룹을 나누어 관리할수 도있다 github 로 로그인 후 위화면에서 create organization으로 쉽게 계정을 만들수있다 모두의 작업공간이다 팀원이 필요하다 추가를 해보자 View organization을 들어가면 People 클릭 우측 Invite member 클릭 초대할 친구의 email을 입력 후 수락을 할 시 멤버들이 뜬다 든든하다 여기에 repository를 만든다면 공동계정(organization)에 작.. 이전 1 2 3 4 5 6 ··· 8 다음
