기록

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

1. setTimeout() 시간지연함수. 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용한다. setTimeout(function() { // Code }, delay); 지연시간은 밀리세컨드 단위로 설정해야한다. (1000은 1초) *delay는 실행전 대기 시간이지만 호출 시점이 정확히 몇초 후라는 것을 보장하지 않는다. 2. 작동원리 (delay 0) 그런데 지연시간에 0을 넣거나 아무것도 넣지않아도 setTimeout함수는 다른코드가 실행된 후 마지막에 실행된다. 브라우저가 자바스크립트를 실행할 때 Call Stack(LIFO)에 넣는데 setTimeOut은 Task Queue(FIFO)에 넣음. Stack이 비워야 Queue에 있는걸 꺼내기 때문에 (아래 3번에서 설명) 지연시간으로 0초를..

보통 setCell 함수를 이용할 때 $('#Grid').jqGrid('setCell', rowId, cellName, value); 이때 value가 ""이면 cell이 셋팅되지 않는다! 4번째 value파라미터 자리에 아무것도 넣지 않으면 공백으로 세팅됨. $('#Grid').jqGrid('setCell', rowId, cellName, );

1. $watch() watch 함수는 스코프변수의 변화를 감지하는 함수이다. 2. 기본적인 형태 data값이 변화면 자동으로 watch함수가 실행된다. $scope.data = ""; $scope.$watch('data', function(newVal, oldVal){ }, true); 파라미터 1. $scope에 등록된 변수 이름 2. 콜백함수 콜백함수는 변경 후, 변경 전 값을 들고올 수 있다. 3. ture or false false : 변수의 레퍼런스 변화 체크 true : 실제 변수 값 변화 체크 (defalut) 3. 예시 만약 이런식으로 함수를 따로 작성하면 data가 변경되지 않을 때도 함수 수동으로 호출가능. $scope.data = ""; $scope.$watch('data', dat..