TS, JS

이 미친 에러를 알게 되었습니다. 저는 react에서 이문제가 일어났습니다. 코드 2에서 위와 같은 에러가 떴고 찾아본 결과 코드 1이 있으면 해결이 됩니다. React App -코드 1 - 해결용 코드 -코드 2 - 문제의 스크립트 - 알아본 결과 base 요소는 페이지 내의 모든 상대 url의 기준을 잡아주는 요소입니다. 제 경우에는 url을 변경하면 다른 페이지를 실행하는 기능이 있었는데 그중 한 페이지만 이런 문제가 나왔습니다. 내부 코드를 전부 지워도 같은 결과가 나오더군요. 다른 react 파일은 이런 경우가 없었습니다. 즉 특수한 경우에 일어나고 모든 url이 아닌 미정의 url 에서 base url 이문제가 되는 경우가 생깁니다.

이설명만 하고 바로 리액트 설치하겠습니다! react에서 express로 값을 넘겨주려면 2가지 라이브러리를 react에 설치해야 합니다. 바로 axios와 http-proxy-middleware입니다. -axios React에서 express로 get이나 post를 사용하여 값을 넘겨야 하는데 그때 필요한 라이브러리가 axios입니다. -http-proxy-middleware react에서 express로 restAPI (ex: get이나 post를 사용하여 값 전달하는 기능) 사용하여 값을 넘겨줄 때 node.js 와 react.js는 포트 숫자가 다릅니다. 이경우에 http-proxy-middleware를 사용하여 다른 포트여도 값을 받아줄 수 있게 설치해줍니다. -CRA를 통한 React 파일 생..

-해당 글은 streamedian 사이트의 rtsp 기술을 참조합니다. 윈도에서 개발하시는 분들이 RTSP 하시기에 적합하며 실무라면 라이선스 구매나 리눅스 환경에서 실행을 위한 공부가 필요할 수 있습니다. -RTSP Real time streaming protocol의 스트리밍 서버를 실시간으로 제어하기 위해 설계된 프로토콜입니다. 예를 들면 cctv 같은 실시간 영상을 재생할 때 RTSP나 HLS 등의 프로토콜이 적용됩니다. -Streamdian Streamdian이란 개발자의 편의성을 위해 웹소켓을 통한 rtsp 스트리밍을 지원해주는 비디오 플레이어입니다. 바로 검색해서 공식 홈페이지를 참조해줍니다. 먼저 소켓통신을 위한 준비를 시작합시다. 홈페이지의 첫 화면은 아래와 같을 것입니다. 붉은 선이 그..

Saga란 react redux 패턴에서 redux가 서버값을 가져오는 부분을 실행하면 서버는 값을 토해낼 때까지 지연이 생깁니다. 그래서 그지 연을 기다렸다가 값을 받으면 전달하게끔 동기 처리를 해야 하는데 그 행위를 saga가 대신해줍니다. 능통한 이해를 위해선 js의 generator 문법을 숙지할 필요가 있습니다. Saga 함수 목록 put : type에 선언된 action을 dispatch 합니다. ex ->CHECK 라는 이름을 가진 action을 dispatch 합니다. yield put({ type:'CHECK', payload:response.data, }); delay : 시간을 설정하고 시간이 지나면 resolve를 실행하는 promise 객체를 반환합니다. ex - 이렇게하면 해당 ..

ECMA스크립트(ECMAScript, 또는 ES[1])는 Ecma 인터내셔널의 ECMA-262 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어이다. 자바스크립트를 표준화하기 위해 만들어졌고 지금도 자바스크립트가 제일 잘 알려져 있지만, 액션스크립트와 J스크립트 등 다른 구현체도 포함하고 있다.[2] ECMA스크립트는 웹의 클라이언트 사이드 스크립트로 많이 사용되며 Node.js를 사용한 서버 응용 프로그램 및 서비스에도 점차 많이 쓰이고 있다. 라고 나무위키에서 말한다. 참고로 es2015가 es6고 es5는 그밑이다. js에서 연도별로 저렇게 밀어간다고 한다. (2016이면 es7) es6가되면서 `(백틱)사용이 가능하게됬다고한다. 필자는 구분없이 그냥 사용했다. var만 있던게 const let..

-개요 node.js를 토대로 한 웹 프레임워크 중에 가장 유명한 프레임워크 2개는 express와 koa로 입니다. 이 둘의 차이에 대해 소개해보려고 합니다. -내용 . Express *장점 1. express는 많은 기능을 내장하고 있습니다. 기능이 많기 때문에 기능을 사용할 때 번거로움 없이 사용할 수 있습니다. 예를 들면 app.get( '/', , (req, res)=>{ } ); 이런 기능을 바로 사용 가능합니다. -> koa는 안 그렇습니다. route 기능을 npm으로 추가해줘야 사용 가능합니다. 2. 유명하고 기간이 오래되었습니다. 정보량이 정말 많이 차이 납니다. express는 많은 사람들이 본인들의 문제에 관한 글을 이나 궁금증에 대한 글들을 수없이 남겨왔고 그 글들이 인터넷에 잘 ..

-input이란 키보드 입력을 가능하게 해 주는 html 태그 -JSX에서의 사용법 input의 값을 변경하고 변경값을 알기 위해서는 절차가 필요합니다. 그중에서 아래와 같은 경우는 input의 e.target.value로 입력한 값을 받아주는 동시에 handleChange를 통해 state값을 이용하여 입력받은 값을 value 값에 대입하고 setState를 통해 바로 변경해주는 코드입니다. import React from 'react' export default class App extends React.Component { state = { value:'' } handleChange = (e) => { this.setState({ value: e.target.value }); } render() {..

koa를 간단히 설명하자면 express와 같은 node.js에서 서버를 실행하기 위해 사용하는 웹 프레임워크입니다. express의 개발자분들이 만드셨고 특징은 가벼움과 비동기 작업을 정식 지원하는 부분입니다. 써 내려가면서 설명하겠습니다. (큰 차이는 잘 느껴지지 않았습니다.) - 초기 설정 yarn init -y를 실행하여 본인이 원하는 폴더에 파일을 생성합니다. yarn add koa를 통해 해당 프레임워크를 다운로드합니다. https://www.npmjs.com/package/koa koa Koa web app framework www.npmjs.com src폴더를 생성하고 index.js 파일을 폴더 내부에 생성합니다. const Koa = require('koa'); const app = n..

지금까지 잘 따라와 주셔서 감사합니다. 이제 카운터의 컨테이너를 만들 것입니다. 그전에 흐름을 한 번 더 살펴봐주세요. 이해가 잘 간다면 다음으로 진행해주세요. #데이터의 흐름 컴포넌트(View)의 버튼(어떤 기능)을 클릭합니다. 그러면 컴포넌트의 데이터를 관리하는 용도의 컨테이너에서 클릭된 기능을 dispatch (action)합니다. 클릭된 기능은 액션 타입으로 구분해줍니다. 액션이 실행됐다면 그에 맞는 타입의 리듀서가(모듈) 클릭된 기능을 이행합니다. 이행한 값은 스토어에 저장됩니다. 스토어에 새로운 값이 저장되면 View를 리 렌더링 해줍니다. #카운터 컨테이너 가장 처음 만들 것은 폴더입니다. src경로에 containers 폴더를 만들어줍니다. 만들었을 때 컴포넌트, 컨테이너, 모듈 폴더가 각..

이번 프로젝트는 리액트에서 주로 사용되는 데이터 구조인 리덕스에 대해서 알아보려 합니다. 이해하기 쉬운 카운터를 이용해서 설명할 예정입니다. 제가 느낄 때 기본 패턴보다 Ducks 패턴이 더 편리하여 Ducks패턴을 사용하였습니다. *Ducks 패턴이란 리듀서 함수, 액션 타입 변수, 액션 생성 함수를 하나의 파일에 작성하는 방식입니다. (이번 프로젝트에서는 모듈이라는 폴더를 생성합니다. counter 컴포넌트가 있다면 위의 3가지를 하나의 파일에 몰빵 합니다. ) # 데이터 구조 및 흐름 기초적인 구조를 먼저 설명하고 넘어가겠습니다. 자세한 부분은 진행하면서 풀어가겠습니다. 컴포넌트 : 모든 웹에 보이는 뷰를 담당합니다. 보이기만 하는 껍데기입니다. 컨테이너 : 컴포넌트에서 보이는 기능들을 여기서 처리..