기록

1. 개념 Redux : 상태관리 라이브러리, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용. Props 1. porperties의 줄임말 2. 부모 컴포넌트에서 자식 컴포넌트한테 보낼 수 있음. 3. immutable 변할수 x (바뀌려면 다시 부모에서 자식에게 props를 덮어씌워야함) State 1. 컴포넌트안에서 데이터를 전달 2. mutable 3. state가 변하면 re-render 된다. 2. 사용 이유 리액트 프로젝트에서는 대부분의 작업을 할 때 부모 컴포넌트가 중간자 역할을 한다. (ref 를 사용해서 포넌트 끼리 직접 소통 하는 방법은 있긴 하지만, 그렇게 하면 코드가 굉장히 많이 꼬여버리기 때문에 권장하지 않는 방식임.) Redux를 사용하면 상태..

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

unable to get property'_focusTabbable'of undefined or null reference dialog popup을 이용할 때 나는 에러 1. $(this).dialog("close");로 닫을 때 알람창이나 다른 팝업이 떠있으면 this가 달라지기 때문에 직접 dialog창의 ID를 넣어줌 $("dialog").dialog("close") 2. close로 닫았을 때 에러가 나면 $("dialog").dialog("destroy")로 팝업자체를 삭제 이건 html에서 요소 자체를 지워주기 때문에 dialog를 오픈할 때 html에 자리만 만들어두고 append해줘야함 3. 일반적으로 팝업창의 버튼(Ok, Cancel)을 눌러 close할 때는 버튼 click 함수안서 d..

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에서 바꿔줌