기록

react js를 위한 css framwork 1. MaterialUI 2. React Bootstrap 3. Semanitic UI 4. Ant Design 5. Materialize 등.. 그중 Ant Design을 이용! 1. 설치 npm install antd --save 2. import stylesheets https://ant.design/ Ant Design - The world's second most popular React UI framework ant.design

ConCurrently는 명령어를 동시에 사용할 수 있게 해주는 라이브러리다. 이전에는 터미널을 2개 열어서 프론트엔드와 백엔드를 각각 실행시킴. 이를 한번에 실행하기 위해 ConCurrently사용!! 1. 설치 npm install concurrently --save 2. 사용 package.json "dev"를 추가하여 command와 arg 입력 npm run start는 client안에서 실행되야 하기 때문에 prefix를 붙여줌 "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" https://www.npmjs.com/package/concurrently concurrently Run commands concu..

Proxy Server 유저와 인터넷 사이에 Proxy Server가 있음 1. 아이피를 Proxy Server에서 임의로 바꿀 수 있음 User IP를 받는 사람은 모르게 2. 보내는 데이터 임의로 바꿀 수 있음 1. 방화벽 기능 2. 웹 필터 기능 3. 캐쉬 데이터, 공유 데이터 제공기능 사용 이유 1. 사용자마다 인터넷 사용 제어 2. 캐쉬를 이용해 더 빠른 인터넷 제공 3. 보안 4. 이용 제한된 사이트 접근 가능

client를 구현하기 전에는 postmen 이용하여 request 보냈는데 이제 client가 있기 때문에 axios를 이용하여 요청 보냄. axios(엑시오스)는 jquery에서 ajax 같은것. 1. axios 설치 npm install axios --save 2. 테스트 라우터 생성 LandingPage.js import React, { useEffect } from 'react' import axios from 'axios' function LandingPage() { useEffect(() => { axios.get('/api/hello')//서버측으로 주는 엔드포인트, 서버측 index.js에 get라우터 구현 .then(response => console.log(response.data))..

리액트 같은 싱글 페이지 어플리케이션(SPA)에서 페이지를 이동하지 않고 페이지에 필요한 컴포넌트를 불러와서 보여준다. 이때 필요한 것이 리액트 라우터 돔이다. 1. 설치 react-router-dom을 모듈로 사용하기 위해 npm에서 설치 npm install react-router-dom --save 설치확인 2. 기본 코드 아래 주소 코드를 참고하여 app.js 수정 단, 예전과 변경된 점이 있음 1. 'Switch' is not exported from 'react-router-dom' 에러 Switch가 Routes로 바뀜 2. route 등록방식 변경 전 //or 변경 후 https://v5.reactrouter.com/web/example/basic Declarative routing for..

관리를 편하게 하기위해 client와 server폴더를 생성하여 코드를 나눔 기존 코드는 server로 옮기고 client에는 react 코드를 넣음. 0. 기본 구조 생성 package.json 변경된 구조에 따라 index.js의 경로를 수정해줌. 1. extensions 다운 스니펫을 다운받고 functional component 을 만들 때, rfce를 치면 리액트 기본코드가 제공됨.

*예전에는 react 설치위해 아래의 설정 필요했음 이제 설정없이 npx create-react-app 커맨드 사용하여 자동 설정! Babel 최신 자바스크립트 문법을 지원하지않는 브라우저를 위해 구형 브라우저에서 돌 수 있게 ES5문법으로 변환시켜줌. Webpack 많은 모듈들을 bundle시켜서(묶어서) 간단하게 만들어줌. 0. 리액트 설치에 앞서 기존에 만들어둔 코드 정리 client와 server 폴더를 만들어 sever폴더에 기존 서버측 코드 다 넣음. 1. 설치 npx create-react-app . 설치 확인 *npm vs npx 원래 create-reate-app을 사용할때 npm install -g create-reate-app 으로 global 디렉토리에 다운 받았는데 이제 npx를 ..

react 페이스북에서 개발한 라이브러리 components module과 비슷하게 재사용서이 뛰어남 Virtual DOM 여러 리스트 중 하나의 리스트만 update 됐을때 한가지 아이템만 DOM에서 바꿀 수 있음 cf) Real DOM 전체 리스트를 reload해야함. 1. JSX를 렌더링 -> Virtual DOM Update 2. Virtual DOM이 Snapshot을 찍어뒀다가 업데이트 이후 비교하여 변경된 부분 찾음(diffing) 3. 찾은 부분만 Real DOM에서 바꿔줌

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%A9%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%85%B8%EB%93%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EB%B3%B8/dashboard [무료] 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의 - 인프런 | 강의 이 강의를 통해서 리액트와 노드를 어떻게 사용하는지 기본적인 내용들을 배울 수 있습니다., - 강의 소개 | 인프런... www.inflearn.com 해당폴더 글은 인프런 무료강의를 들으며 정리한 것입니다! 예전강의라 지금과 다른점이 많은데 따라하면서 그런부분 수정하여 올릴 예정

methos 객체의 인스턴스를 만들어야만 사용이 가능 statics 객체의 인스턴스를 만들지 않아도 사용이 가능 const user= new User() 로 선언하고난 뒤 user.(메소드) 이런식으로 호출해야만 쓸 수 있는 것이 메소드 User.(스태틱) 이런식으로 호출할 수 있는 것이 스태틱 스태틱은 user.(스태틱)을 형태로도 호출이 가능합니다. 둘을 구분짓는 건 인스턴스가 존재해야만 기능이 원할하게 지원되는 함수인데 스태틱으로 만들어서 프로그래머의 실수로 호출을 해서 발생되는 에러를 미연에 방지 스태틱은 인스턴스와 무관하게 공용적으로 자주 쓰이는 함수가 필요할 때 쓰이는 것 https://www.inflearn.com/questions/30860 methods, statics 차이 - 인프런 |..