블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기 (184) 썸네일형 리스트형 [91-110일차] 어플 개발 with React Native Expo <Before you die > Android & ios App 개발 일지 (React Native Expo 사용) Timeline 7/26 (월) BYD 프로젝트 시작 ! 어플 방향, 목적, 타겟, 만들 Pages, DB, tables 정하기 7/27~8/1 (화-일) 각자 React Native & Expo 공부 8/2~8/4 (월-수) 여름휴가 여름 휴가 개인 과제 : 각자 4개 pages 할당 ! 만들어오기 8/5 (목) 각자 만든 pages 합쳐서 UI 대략 완성 시키기 (navigation, tab bottom , rough layout etc) -> 첫 github에 push / 합침 8/6 (금) UI - Navigation 완성 시키기 - pages 도면 비교해보면서 첨부터 끝까지 ui 완성 + 디테일 기능 추가 pop.. [99일차] Redux 리액트 리덕스 Middleware Thunk Generator 함수에 * 별을 다니깐 함수 호출이 바로 실행이 안됨 gen{} 안에 있는 next 라는 함수를 붙여야 다음 코드로 진행된다. gen().next() 왜 1밖에 안찍히지? - > generator 사용 이유 함수 안의 코드들을 내가 구분해서 사용할 수 있음 next를 써야지만 안의 코드 명령들을 이어서 쓸 수 있음 gen 이라는 함수를 어떤 특정 변수에는 담아놔야함 ** 함수에 return 이 없는데 무언가가 return 됨 {value:undefined, done:false} generator 함수 특성 : yield 가 return 이랑 비슷하다고 생각해보기 next() 할 때마다 yield 가 return 해주는구나~ yield 3 이라고 쓰면 value에 들어감 done의 뜻 :.. [98일차] 20210729 Redux 리덕스 사용법 / reducer 파일 쪼개기 / combine Redux 데이터 중앙관리 리덕스 설치 npm i next-redux-wrapper npm i redux npm i react-redux npm i redux-devtools-extension Redux devTools 확장 프로그램 설치 어제까지 만든 react basic layout 코드에 redux 사용하는 듯 ! ? -> context 대체 REDUX 1. store/configureStore.js 만드는 이유 context.jsx 와 비슷 - 초기값, 상태값, createContext(초기값) - const Store = craeteContext(initialState) -> 결과값 : component - 초기값 저장하고 내보내는 아이 configureStore.js 는? - createSto.. [95-97일차 복습] 리액트 (+NEXT) 웹 홈페이지 만들기 기초 (레이아웃 / 로그인 / 회원가입) React 로 웹 홈페이지 만들기 기초 1. Visual Studio 환경 셋팅 1) 새 폴더 생성 - back, front 폴더 생성 > 터미널 front 접근 > npm init npm i next react react-dom 2) package.json 수정 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"next dev -p 3001 -H 0.0.0.0", "build":"next build", "start":"next start", "lint":"next lint" }, 3) pages 폴더 생성 >index.jsx 생성 및 코드 작성 const Index =()=>{ return( hello Next.js ).. [97일차]20210728 React 리액트 회원가입 로그인 / 리덕스 설치 같다 1. 어제잘못 놓은 store 폴더를 -> front 아래로 이동 _app.js, header, logout, etc 경로 바꾸기 2. hooks 따로 뺴기 front > hooks 생성 > userInput.jsx 생성 import {useState} from 'react' const useInput =(defaultValue)=>{ const [value,setValue] = useState(defaultValue) const onChange =e=>{ setValue(e.target.value) } //useInput에 들어가 있는 상태 value값 은 value에 onChange함수는 onChange함수에 넣기 return{ value,onChange } } export default use.. [96일차] 20210727 React 리액트, 레이아웃 CSS, 새로고침할 때 CSS 풀리는 현상, 1. Header 모듈로 만들기 + ul, li styled component components > layout 폴더 > Header.jsx 만들어서 BlogLayout 의 header부분 따로 빼기 import Link from 'next/link' import NavToggle from '../NavToggle' // import Styled from 'styled-components' // const const Header =()=>{ return( {/* 로고 & 메뉴 */} 로고 Home 글쓰기 login join ) } export default Header CSS : Styled 주기 import Link from 'next/link' import NavToggle from '../NavT.. [95일차]20210726 react Link, head, title, css, 라우터, 폰트, 이미지 넣기, 핸드폰과 연동하기 프론트에 next 를 설치하기 1. blog > back, front 폴더 생성 2. 터미널 front까지 접근 3. npm init / 설치 npm init npm install next react react-dom 3. package.json 수정 { "name": "front", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"next dev -p 3001 -H 0.0.0.0", "build":"next build", "start":"next start", "lint":"next lint" }, "author.. [94일차]20210723 front server 연결 / Next 설치 도메인 연결 1. 로컬에서 잘 작동 되는지 확인 -> 실서버 올려서 실행 localhost:8080 잘 나오는지 확인 파워쉘 - front cd front (ubuntu 아님 !!) npm run dev 파워쉘 - aws-back ubuntu계정 - server on (sudo node server.js) local에서 만든 코드 소스를 가지고 실 서버에 올리기 index.html 만 읽을 수 있어 지금 nginx에서 그렇게 설정했었음 local 에 있는 소스를 webpack 으로 build 로 해야함 웹팩 - 우리가 가진 jsx -> App.js 로 변경하기 2. local에서 build를 했을 때 실행 잘 되는지 쳌 웹팩 local- server 터미널 경로 - front npx webpack 실행 .. [ 93일차 복습 ] 리액트 React CRUD 아래 단계별로 연습하기 [contents] 1. 버튼 + - 누르면 수 가감 되게 만들기 2. Create 댓글 추가하기 3. Delete 댓글 삭제하기 4. Update 댓글 수정하기 1. 버튼 + - 2. 댓글 추가 댓글 추가를 reducer 사용해서 만들어 보기 3. 댓글 삭제 4. 댓글 수정 [93일차] 20210722 Front api restful fetch / 리액트 CRUD front 마무리 get 말고 post ~ 등도 추가하기 api.jsx /* 비동기통신에 대한 내용을 넣는공간 */ // READ 댓글 읽기 export const getComment = async (dispatch) => { dispatch({type:'GET_COMMENT'}) try{ let response = await fetch('http://3.19.244.113/api/comment') let data = await response.json() let result = data.map(obj=>{ return{...obj, date:obj.updatedAt.substr(0,10)} }) dispatch({type:'GET_COMMENT_SUCCESS',payload:result}) } catc.. [92일차 복습] front + back React Webpack aws server로 가져오기 [ 오늘 배운 내용 ] 1. front myapp.conf 안에 설정한 값대로 www폴더, index.html파일 만들기 2. 댓글창 리액트가져오기 -> 웹팩 build 실행 *터미널 파워쉘 aws-server : 경로 : 폴더 back (또는 교수님 awsTEST) 실행 : 리눅스 Amazon 가상 인스턴트 -> aws-back-server ssh 와 연결 -> AMAZON_AWS_BACK 명의 파일로 들어가서 -> sudo node server.js local-server : 경로 : 폴더 front 실행 : npm run dev aws-front 경로 : 폴더 front 실행 : 리눅스 Amazon 가상 인스턴트 -> aws-front-server ssh 와 연결 오류 났을 때 : server.js.. [92일차]20210721 aws-back-server & local-back-server 연결 내일 또는 금욜은 : 도메인 가비아 후이즈 Front server 프론트 서버 접속 및 아래 명령어 실행 내가 실행할 폴더 : 실제 웹브라우저에 띄울 폴더 : root /home/ubuntu/www 야 www라는 폴더야 index : 어떤 파일을 읽어야해 ? index.html이랑 index.htm이야 (htm은 예전에 많이씀) root & index 앞에 쓴건 고정 ** 변수처럼 이름을 바꿀 수 없 아직 www폴더를 만들지 않음 (어제 웹에 뜬 내용은 파일이 없을경우 나오는 웰컴페이지) 이제 우리가 만든 파일을 server에서 볼 수 있게끔 만들기 root 폴더에 있는 home/ubuntu/www 폴더 만들기 -> www안에 들어가서 index.html 만들기 cp mv ln mkdir 폴더 생성 명령.. [Front server] NginX 란? Amazon Aws NginX 설치 및 기본 환경설정 세팅하기 NGINX 란 ? - 차세대 웹서버 * web server = HTTP server - 동시 접속 처리에 특화된 웹 서버 프로그램 - 비동기 처리 방식 (Event -Drive) 방식을 채택하고 있다. - 지난 20여년간 대표적인 웹서버, Apache 를 추월한 NginX - 개발의 모든 목적이 높은 성능에 맞춰져 있다. -> 인터넷 서비스 지탱에 적합 * 동시 접속자가 700명 이상이라면 서버 증설 or NginX 환경을 권장한다고 한다. - 웹 브라우저의 카운터 파트너로서 서버 쪽에서 정보를 제공하는 소프트웨어를 의미 NginX 특징 " 더 적은 자원으로 더 빠르게 데이터를 서비스" NginX (웹서버) 의 역할 1) 정적 파일을 처리하는 HTTP server 역할 HTML, CSS, JavaScri.. [91일차 복습] postman API CRUD / aws back server 올리기 / front server Nginx 설치 및 환경설정 오늘 배운 내용 목차 1. postman CRUD 2. server에 올리기 (aws-back or server-back) 3. front server - node.js / NginX 설치 , 세팅 1. postman CRUD https://blckchainetc.tistory.com/278 [ 90일차 복습 2 ] POSTMAN이란? 사용 이유 / 설치 방법 / 사용법 / restful API CRUD POSTMAN 이란 ? API 개발을 보다 빠르고 쉽게 구현할 수 있도록 도와주는 테스트 결과를 공유하며 API개발의 생산성을 높여주는 플랫폼 POSTMAN이 나오게 된 이유 post의 경우 html 클라이언트에서 form, blckchainetc.tistory.com 2. aws - back serve.. [91일차] 20210720 postman CRUD / Amazon aws back & front server 올리기 / NginX 설치, 환경설정 POSTMAN CRUD 해보기 교수님 Github clone + 아래 작성 req.params /api/comment/1 or 2 3 4 ... 여기서 특정한 값만 쓸 때 id 값 가변적으로 변함 -> /:[변수명] -> 이렇게 쓰면 변수명으로 받을 수 있다. postman url send 할 때 url 끝에 id 값을 적어주기 이제 서버에 올리기 터미널 두 개 만들기 1. local-back 2. server-back 현재 경로까지 들어와서(반드시 현재위치 back까지 들어온 후) ssh 복붙 -> 초록색 계정명@주소: 디렉토리 $ (커서) 가 나옴 ~ -> home/계정명 최상위 파일로 가는 명령어 cd ~ or (둘 중 하나 선택) cd /home/ubuntu 윈도우 -> \ 역슬래시로 경로 구분 .. [ 90일차 복습 2 ] POSTMAN이란? 사용 이유 / 설치 방법 / 사용법 / restful API CRUD POSTMAN 이란 ? API 개발을 보다 빠르고 쉽게 구현할 수 있도록 도와주는 테스트 결과를 공유하며 API개발의 생산성을 높여주는 플랫폼 POSTMAN이 나오게 된 이유 post의 경우 html 클라이언트에서 form, 버튼, 이벤트, 이벤트 등록, 등등등... 백엔드를 구현하기 전 우선 만들어져야 하는 것들이 있다. 그럼 백엔드가 프론트엔드가 구현되기를 기다려야하는 상황이 발생한다. => 이러한 불편함을 개선하기 위해 postman 탄생 POSTMAN 사용하면 좋은 점 -> postman은 가벼운 툴이다. -> Rest API를 표현할 수 있다. -> 협업할 때 팀원이 만든 url을 확인할 때 편리하다. -> 인터페이스를 구축해 놓은 툴인 Postman 을 사용하게 되면 변수 및 환경, Reque.. [ 90일차 복습1 ] Amazon AWS 리눅스 백그라운드로 서버 돌리기 / Node.js 에서 pm2 사용하기 지난 주 금요일에 배운 것 : Amazon AWS 리눅스 인스턴스 생성 , Local server와 연결 이제 연결한 것이 다른 작업을 해도 끊기지 않고 계속 백그라운드에서 연결되어 있도록 작업하기 Amazon AWS 리눅스 Background로 돌아아게 만들기 두 가지 방법 1. aws-back 터미널에서 명령어 실행 2. local server pm2 패키지 사용 리눅스 서버 백그라운드에서 계속 돌아가도록 만들기 1. aws 리눅스 인스턴스 명령어 방법 * 터미널에 aws-back, front, local-back 생성 1) 먼저 해당 경로로 들어가기 (파워셀 - aws-back) cd ~ pwd ls // 폴더확인 cd [들어갈 폴더명] 2) server 실행은 원래 아래의 명령어, 서버 실행을 끊.. [90일차]20210719 리눅스 백그라운드로 서버 돌리기 / pm2 / postman CRUD / Restful API 단계 6에서 두 가지 추가 - http, https 설정 이유 다른 외부 PC 가 80 으로 들어올 때 허용하겠다 의미 http 80이 디폴트 값 - 웹서버, 다른 pc 들어오면 미리 허용해놓기 https - 보안이 강화된 프로토골 만약 DB server를 사용하게되면 3306 port도 또 추가해주어야함 key-pair - 모든 클라우드에서 사용하지 않고 아마존에서 사용하는 것 ! 아마존판 공인인증서st (이중 보안) Ubuntu 리눅스 Background 로 돌려놓기 1. server 실행하기 SSH 클라이언트 마지막 것 복붙해서 cd ~ pwd ls (폴더 확인) cd [들어갈 폴더] sudo node server.js -> 아마존 aws에서 인스턴스 Public IP 주소 -> 브라우저에 입력 -.. [89일차 복습] 아마존 웹서버 구축 / 호스팅 / 배포 / 비용 / 방법 🧸 복잡하고 복잡스런 아마존 aws 웹서버 구축 환경설정 방법 [ CONTENTS ] 1. Amazon ec2 가상 리눅스 인스턴스 생성 2. Node.js, mySQL 설치 / 다운 3. Node.js, express에서 작성한 코드 리눅스에 연결 4. 포트 변경 1) Amazon ec2 사이트 회원가입 및 인스턴스 생성 1. AWS 홈페이지에서 회원가입하기 * 반드시 해외결제 가능 신용카드가 있어야 한다. * 무료 / 유료 여러개의 옵션이 있으므로 원하는 목적에 맞게 선택! 개발 테스트 용의 목적이므로 -> 무료 계정 생성 클릭 -> 회원가입 진행 -> AWS 관리 콘솔까지 들어가기 AWS 회원가입 url https://aws.amazon.com/ko/free/?all-free-tier.sort-by.. [89일차] Amazon AWS 웹서버 구축 / 호스팅/ 배포 설정 비용 우리는 서버를 2대 사용 예정 (리액트, express) 리액트 : html 파일 1개, JS 파일 1개, CSS 파일 1개, 이미지들 (기본적으로) => 웹팩으로 1개로 만들어줌 webpack !== server 리액트 : Single page application (페이지의 이동이 없다.) -> 페이지 여러개 있는 것처럼 보이는 것 뿐 프록시 서버 : 브라우저들이 프록시 서버에 요청하면 응답을 줌 : 프록시 서버(영어: proxy server 프록시 서버)는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 또한 외부와의 트래픽을 줄이게 됨으로써 네트워크 병목 현상을 방지하는 효과도 얻을 수 있게 된다. 리액트 -> 정적.. [88일차 복습] 리액트 댓글 수정 삭제 오늘 배운 내용 : 삭제, 수정, express server와 연결하기 삭제 0. CommentList.jsx key값 index라는 변수로 보내기 (key는 리액트 예약어라 props XXX!!) 1. CommentItem.jsx 1) Context 가져오기, 2) X 버튼 추가 -> onClick 함수 -> dispatch 실행 import React, {useContext, useState} from 'react' import Context from './store/context' const CommentItem =({key, userid, content, date, index})=>{ let {state,dispatch} = useContext(Context) let [input,setInput].. [88일차]20210715 리액트 댓글 수정 삭제 어제 context 를 사용해서 만든 댓글 추가 기능 삭제하기 CommentList.jsx const Item = list.map((v, k) => { return ( CommentItem.jsx import React from 'react' const CommentItem = ({userid,content,date, index}) => { return ( 이제 Context 사용하기 Form, List는 Context 사용한 상태 이제 Item에도 사용하기 -> useContext가져오기 import React, {useContext, useState} from 'react' import Stroe from './store/context' const CommentItem = ({userid,conten.. [87일차 복습] 리액트 Context 사용해서 댓글 추가하기 오늘 배운 것은 리액트처럼 생각해서 컴포넌트를 잘 구성하기! 댓글 추가하는 것을 예제로 배웠다. 구성과 문법에 집중해서 해보기 !! 1. 위의 파일트리처럼 파일 생성 / 코드 작성 / 연결 commentLayout은 commentForm, List, commentItem , 사용 css는 기존에 했던 파일 사용 App.jsx import React, {Component} from 'react' // import Comment from './component/comment/Comment' import Comment from './self_study/component/Comment' class App extends Component{ render(){ return( ) } } export default Ap.. [87일차]20210714 Context로 댓글 만들기 (with 리액트식으로 컴포넌트 구성하기) 오늘 Context를 사용해서 댓글 기능 만들기 ! 1. Components 구성하기 (위 파일트리대로 만들기 / 기본 코드 작성 + 서로 연결) Layout은 ul 로 감싸기 / form, List는 li tag로 ! Comment.jsx import React from 'react' import CommentLayout from './CommentLayout' import CommentForm from './CommentForm' import CommentList from './CommentList' const Comment = () =>{ return( ) } export default Comment CommentLayout은 children을 써야한다는 걸 알 수 있다. CommentLayout... 이전 1 2 3 4 5 ··· 8 다음
