Welcome ! (441) 썸네일형 리스트형 [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 프록시 서버)는 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해 주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다. 또한 외부와의 트래픽을 줄이게 됨으로써 네트워크 병목 현상을 방지하는 효과도 얻을 수 있게 된다. 리액트 -> 정적.. [GitHub] .gitignore 가 안될 때 / git에서 해당 파일의 변화를 감지하고 트래킹할 때 멈추게 하는 방법 .gitignore 안에 넣은 파일이 계속해서 github에 트래킹이되어질 때, 변화가 update 될 때 문제 : github에 해당 폴더를 업데이트 이후에 .gitignore 파일 생성 또는 새로운 파일을 .gitignore 안에 추가 했을 때 이미 git에서는 해당 파일 트래킹 중이어서 계속 이어지게 된다. 해결 방법 : 트래킹 기록을 싹 지워주기 ! -> 그리고 다시 commit 하기 아래 명령어를 차례로 실행하기 ** . 쩜까지 잘 입력하기 ! $ git rm -r --cached . $ git add . git commit -m 'fixing' 그리고 다시 git push ---> 확인해보면 gitignore 안의 파일들은 더이상 트래킹되지 않는다! 만약 이후에도 안되면 .gitignore를 .. [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... [React 연습 5일차] 리액트 TicTacToe Game 구현 with Hooks API 오늘 수업시간에 한 틱택토 게임 함수형 Hooks API 써서 만들기 연습 ! useReducer 함수를 따로 빼는 것과 useEffect 부분 이 아직 안익숙하다. 일단 연습은 계속 해보기 ! 오늘 처음 본(?) useEffect useEffect(()=>{}) 을 사용해서 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지 말함. 리액트는 우리가 넘긴 함수를 기억했다가 (요 함수가 'effect'라고 불림) DOM 업데이트 수행 수 불러낸다. useEffect를 꼭 컴포넌트 안에서 불러내는 이유는 ? -> 내부 state 상태 변수들, props 들에게 접근할 수 있게 된다. 함수 범위 안에 있어서 API 없이 값을 얻을 수 있기 때문 ! useEffect는 최초 렌더링에 실행되고 이후 모.. [86일차 복습] React useReducer Context syled-component로 TicTacToe만들기 useReducer useState처럼 상태를 관리할 때 쓰는 hook, useState와 다르게 상태 업데이트 로직을 컴포넌트 밖에 작성 할 수도 있고 다른 파일에 작성 후 불러 올 수도 있다. 때문에 컴포넌트의 상태를 따로 잘 관리할 수 있는 용이함이 있다 ! 1. +1 -1 버튼 누르면 가감되는 기본 코드 작성 (useReducer 사용 없이) import React from 'react' const Counter =()=>{ const [number, setNumber] = React.useState(0) const onUp =()=>{ setNumber(preNumber=>preNumber+1) } const onDown =()=>{ setNumber(preNumber=>preNumber-1) .. [86일차]20210713 리액트 useReducer Context styled-component Ref Css TicTacToe 만들기 useReducer useState와 비슷한 상태관리 담당, useReducer의 장점은 상태 변경하는 로직을 다른 곳에서 처리할 수 있음. 즉, 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 먼저 카운터 만들고 useReduce 를 사용해보고 비교해보기 ! 1. 어제 만든 webpack 폴더에 - components 폴더 - counter 폴더 - Counter.jsx 파일 생성 및 아래 코드 작성 Counter.jsx import React from 'react'; const Counter = () =>{ return( hi ) } export default Counter App.jsx import React from 'react'; import Memo from './memo/me.. [85일차 복습] React Hooks useMemo useCallback 1. React Class 형으로 버튼을 눌러서 up down 되도록 만들기 up and down btn 클래스형은 바뀐부분이 생기면 render() 부분만 재 랜더가 된다. 2. 위의 내용을 함수형 Function으로 다시 만들어 보기 up and down btn 함수형의 경우 setState의 일부분이 바뀌면 전체가 모두 재랜더링이 된다. (연관없는 함수들, 코드까지) -> 함수형으로 많은 연산을 포함하게되면 안좋음 -> 이제 요거를 커버할 수 있는 Hooks 를 배울 것 ! Memoization 메모이제이션이란 ? 컴퓨터가 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산을 할 필요가 없어져 실행 속도가 빨라지는 기술 -> 동적 계획법(DP)의 핵심 기술 하지만 .. [85일차]20210712 React hooks API useMemo useCallback 이번 주 배울 것 : 함수형 컴포넌트 hooks 5가지 (총 10가지 존재) useMemo useCallback useReducer useContext useEffect 이전에 함수의 state를 선언할 때 쓰고있던 useState도 hooks API 중 하나였다. 이전 내용 복씁 원래 위의 주석처리된 코드이지만 babel 덕분에 아래 stat={} 요렇게 간단히 가능했다. 이제 버튼 클릭해서 number가 변하게 만들기 !! state={ number:0 } handleClick1 = ()=>{ this.setState({ number: this.state.number +=1 }) } handleClick2 =()=>{ this.setState({ number: this.state.number -=1 .. [84일차]20210708 [83일차]20210708 React 기본 개념 복습 React (webpack 없이!) 복습 시간 ! 1. 기본 React 코드 준비 2. loginBox Component 를 App 에 달기 --> JSX 원래 태생은 JS 이다. {React.createElement(LoginBox)} 위의 두 코드는 같은 의미 ! LoginBox 를 사용하겠다 ~ { } 괄호를 쓰는 이유 : jsx에서 js문법을 사용하겠다. nunjucjs를 사용하겠다 라고 한 코드는 위에 return() 이걸 쓰게되면 React.createElement... 는 TEXT 일 뿐 JS로 실행시키고 싶으면 { }로 감싸주기 nunjucks 안에 JS 문법을 사용하고싶으면 = 괄호 { } 를 쓴다. 3. App 주석처리의 모양을 보면 나온다 !! class Login extends Re.. [81일차 복습] css 반응형 햄버거 (삼선) 메뉴 만들기 / 리액트 라우터 react-router-dom 반응형 main 햄버거 삼선 메뉴 만들기 + onClick 1. 기존의 react-icon 에서 가져온 Fabars삭제 -> label 사용해서 직접 삼선 그릴 예정 / 코드가 길어질 것 같아서 Component ("NavToggle") 사용! {/* logo */} LOGO 2. NavToggle component > NavToggle.jsx 생성 / 코드 작성 import React, {Component} from 'react' class NavToggle extends Component{ render(){ return( ) } } export default NavToggle checkbox를 클릭하게되면 nav-toggle id를 가진 아이를 향하게 된다. label 과 for 가 세트인데 jsx .. [81일차]20210707 웹팩, 리액트 header 반응형, router 라우터, 경일 홈페이지 상담게시판 page 구현 오늘 목표 : react, webpack 으로 components로 구성된 페이지 만들기 어제 만든 header 소스코드 까지 준비! 반응형 main - 오른쪽의 햄버거를 X 로 만들기 1. NavToggle Component 생성 및 button 대체 Narbar.jsx react-icon에서 가져온 button 쪽, FaBars를 삭제하고 직접 만든 햄버거를 넣을 예정 코드가 길어질 것 같아서 component 로 만들어서 넣기 아래처럼 import 해오고 그 다음에 NavToggle 파일 만들기 ! import React, { Component } from 'react' import '../css/navbar.css' import { FaFacebook, FaInstagram, FaBars, FaT.. [80일차 복습] React 리액트, 웹팩, CSS 연결, 반응형 / Header 만들기 기본 세팅 어제 만든 webpack 환경 설정 을 바탕으로 아래 파일들을 복사해서 새로운 파일에 넣기! 1. package.josn 2. webpack.config.js 그리고 새로 아래의 파일들을 만들어 기본 코드 작성하기 3. index.html 4. index.jsx index.html index.jsx (entry ----> output 은 App.js 로 설정 - 개발 환경에서는 dist / App.js 가 보이지는 않지만 돌아가고 있음!) import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return ( Hi ! ) } } ReactDO.. [80일차] 20210706 React, Webpack, CSS 웹팩으로 Header 만들기 어제 만들거를 복사해서 다시 만들기 1. package.json / webpack.config.js 복사 (package.json 복사한 이유 - 다시 설치 위해 by 'npm install' 2. index.html /index.jsx 3. terminal - 새로만든 directory 로 들어가 있는지 확인 4. 아래 명령어 실행 (packages 다운) $ npm install -> webpack까지 다 설치 됨 webpack config만 실행시키면 됨 -> 근데 아래 명령어 실행 전 오류가 남 ! $ npm ren dev ERROR C:\Users\saeee_z18xmwt\OneDrive\문서\react_first_lesson0628\0706webpack>cd .. C:\Users\saeee_z.. [React 연습 4일차] 리액트 TicTacToe Game 구현 승자 결정하기까지 완료 앞으로 시간여행 추가하기가 남았는데 뭔가 두렵다,,, 요건 내일 시작해봐야겟다! function Square(props){ return( {props.value} ) } class Board extends React.Component{ constructor(props) { super(props) this.state = { squares: Array(9).fill(null), xIsNext: true, } } handleClick = (i) => { const squares = this.state.squares.slice(); if (calculateWinner(squares) || square[i]) { return; } square[i] = this.state.xIsNext ? .. [Webpack] 웹팩 CRA 없이 React 개발 환경 구축 및 핫리로드 & CRA 사용버전 79일차 복습 내용 https://blckchainetc.tistory.com/255 이전 1 ··· 6 7 8 9 10 11 12 ··· 19 다음
