전체 글 (441) 썸네일형 리스트형 [타입스크립트 vs 자바스크립트] TypeScript 사용법 / 컴파일 JavaScript는 보통 다들 잘(?) 알고 있는 언어이고 그 다음으로 Typescript를 접하는 것 같다. 자바스크립트의 변수 선언은 var, let, cont 가 있는데 모두 안에 담는 자료를 구별하지 않고 쓴다. 처음 배우는 입장에서는 편했지만 나중에 큰 프로젝트를 진행하게되면 불편한 점이 생긴다고 한다 ! 예를 들면, 컴파일러가 어디를 틀렸는지 알려줄 수 없고 어떤 자료가 들어있는지 알려주지않기 때문에 이로 인한 디버깅 시간이 오래 걸릴 수 있다. TypeScript 타입스크립트는 말 그대로 "TYPE" 이 정해져 있는 언어이다. 코드로 알아보는 TypeScript 의 특징 const myname="emily", yourname = "elon musk" , rel = "friends"; con.. [React Native] 이중 Navigation Container / Keyboard tabBar Options 이중 Navigation Container 해결 각자 만든 파일을 합치려다 보니 각각 만든 NavigationContainer / Nvigator 가 존재해서 이중 오류가 떴다 가장 최상위 Component 말고 그 안에 감싸져있는 NavigationContainer 에 아래 옵션을 넣어주면 해결! independent={true} Keybaord 에 TabBar가 함께 뜨는 경우 -> TabBar 없애기 TextInput 등 Keyboard 사용하는 element 를 감싸는 Tabs.Navigator 에 아래 옵션 넣기 tabBarOptions={{keyboardHidesTabBar:true}} ex) //MainApp로 이름 변경 export default function MainApp({naviga.. [100일차] Next 배포 방법 / https 도메인 연결 프론트 서버 amazon ec2 사용 올리기 1 대의 pc에서는 똑같은 port no를 사용할 수 없다. ex) server.js 두 파일 모두 port:80 이라면 -> 에러 오늘 올릴려는 환경 : Next.js (React로 만들어진 프레임워크) 우리는 React 배포는 해봤음 React와 Next 다른 점 : Next 사용 이유 : SSR이 가능하기 때문 (express와 같은 서버가 존재 - db접속과 같은 용도가 아닌 코드를 실행시켜주는 서버) 리액트의 경우 배포할 때 server가 필요했었다 -> NginX (웹서버) '/' NginX 가 요청을 받음 -> /home/ubuntu/[git 저장소명]/index.html NginX 가 할 수 있는 기능은 모두 express에서도 가능! 리액트 특.. [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.. [React Native] Bottom tab에 아이콘 추가하기 expo/vector-icons 1) npm 설치 npm i @expo/vector-icons 2) 가져올 아이콘 선택 https://icons.expo.fyi/ @expo/vector-icons directory icons.expo.fyi 3) 코드 작성 import {Ionicons, MaterialIcons, FontAwesome} from '@expo/vector-icons' export default function App() { return ( () }} /> [React Native expo] chatting app 만들기 tutorial 1) expo settings npm install -g expo-cli expo init [project 명] ---> blank 선택 cd [project명] 으로 들어가기 npm start & emulator 실행 firebase - new project - 설정 - sdk key? 코드들 복사해서 firebase.js 파일에 일단 붙여넣기 2) 아래 react navigations 설치 npm install @react-navigation/native expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context 3) App.js 가장 위에 아래 명령.. [React] 리액트 CRUD App.jsx > TodoList > TodoForm, Todo.jsx TodoList - state : todos ([]) TodoForm - state: input ('') Todo - state : edit ({id:null, value:''}) 1. 기본 세팅 https://blckchainetc.tistory.com/259 [80일차 복습] React 리액트, 웹팩, CSS 연결, 반응형 / Header 만들기 기본 세팅 어제 만든 webpack 환경 설정 을 바탕으로 아래 파일들을 복사해서 새로운 파일에 넣기! 1. package.josn 2. webpack.config.js 그리고 새로 아래의 파일들을 만들어 기본 코드 작성하기 3. index.. blckchainetc.tistory.com.. [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의 뜻 :.. [React native] 기초 다지기 - view / 버튼 / Image / flex 세로 가로 설정 / 정렬 등 CSS only for ios (해당 요소들을 핸드폰의 구조, 메뉴에 닿지않게 padding을 자동으로 넣어줌) android 의 경우에는 자동으로padding 넣어주기 import { StyleSheet, // CSS Text, TouchableWithoutFeedback, // 효과없음 TouchableOpacity, // 투명도 0되었다가 복구됨 TouchableHighlight, // 하이라이트됨 TouchableNativeFeedback, // 클릭한 곳으로부터 파장 View, // div와 같은 기능 Image, SafeAreaView, Button, Alert, Platform, // padding 주기 위해 StatusBar, } from 'react-native'; Platform 가져와서 ->.. [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.. Amazon EC2 Linux 인스턴스 호스팅 / 배포 / 리눅스 명령어 정리 aws Linux back server 생성 - 터미널(sws-back) 연결 - node.js, mysql 설치 local express 코드 작성 -> github 올리기 aws back server github에서 코드 clone -> port, mysql pw, 변경 aws front server 생성 - 터미널(front)연결 - node.js, Nginx 설치 1. Amazon ec2 리눅스 인스턴스 생성 및 연결 1) 생성 -> 회원가입 -> 가상머신 시작 -> ubuntu server 20.02LTS 선택 -> 6번 모안 그룹 구성 - http, https 두 개 추가 -> 시작 -> 키페어 생성 (기존 것 사용ok) -> vs 폴더 back 안에 복사, .gitignore 파일로 gith.. [webpack ERROR] $RefreshSig$ is not defined npm run dev 명령을 실행하고 터미널에는 successfully 라고 뜨고 브라우저에 아래와 같은 $RefreshSig$ is not defined ERROR 가 나왔다 My guess is that you've included the react-refresh/babel plugin to process node_modules. This will break because some code (as used by Webpack and WDS) will inevitably run before the plugin 출처 :https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/92 이유가 node_modules를 처리하기위해 react-refresh/b.. [webpack error] code: 'ERR_INVALID_ARG_TYPE' npm run build 를 실행하다가 나타난 code: 'ERR_INVALID_ARG_TYPE' 에러 메세지 배포용으로 빌드할 때의 webpack.config.js 설정은 개발 설정과 다르게 plugin의 ReactRefreshWebpackPlugin 이 있으면 안된다고 한다. 배포용으로 만들 때 제거해야할 것 ↓↓ ReactRefreshWebpackPlugin React-refresh/babel 개발일 때는 가능 / 배포용일 때는 주석처리하기 ->아래처럼 주석처리를 하고 다시 npm run build를 하니깐 되었다 ! const path = require('path') //const RefreshwebpackPlugin = require('@pmmmwh/react-refresh-webpack-plu.. [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 주소 -> 브라우저에 입력 -.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음
