TS, JS/react

Css에서 font를 적용할 수 있게끔 지원하는 기능이 있습니다. 그래서 html, vue, anguler 이런 구분이 없이 적용할 수 있습니다. 필자는 React를 주로 쓰기 때문에 React에서 font를 적용하는 예시를 보여드립니다. (다른 프런트 언어를 사용하셔도 이해하기 쉬운 글입니다) -폰트 적용하는 방법 1. npm 명령어를 사용하여 React 프로젝트를 만들어줍니다. npm create-react-app font-test // 이름은 편한대로 설정해주세요. 그리고 App.js 파일로 이동하여 화면에 보이는 부분을 깔끔하게 정리해줍니다. 보기 편하기 위해 폰트 사이즈를 50px로 설정했습니다. 2. 눈누라는 무료 폰트 사이트를 이용했습니다. 원하는 폰트 하나를 정해서 클릭해주세요. 저는 산돌..

-해당 글은 streamedian 사이트의 rtsp 기술을 참조합니다. 윈도에서 개발하시는 분들이 RTSP 하시기에 적합하며 실무라면 라이선스 구매나 리눅스 환경에서 실행을 위한 공부가 필요할 수 있습니다. -필요 프로젝트 준비 React의 프로젝트 내에서 Rtsp를 실행할 수 있게끔 해야겠죠? [정말 쉬운! React에서 RTSP 사용하기 1 -YEOL]에서 사용했던 Streamedian 프로젝트를 준비합니다. 그다음 npm crate react-app [프로젝트명]을 통해 새 프로젝트를 만들어줍니다. Streamedian 프로젝트를 살펴봅시다! 이 프로젝트에서 Rtsp실행에 관계된 파일들을 React 프로젝트에 옮겨주어야 합니다. free.player.1.8.4.js 는 소켓 통신으로 Rtsp를 가능..

이번엔 react를 사용한 달력 알고리즘을 만드려고 합니다. 완성형이 예쁘다기보단 구조를 보여드리기 위함을 참고해주세요!! -Moment.js 란 javaScript에서 날짜 데이터 조작을 하기 쉽게 도와주는 라이브러리입니다. (공식 사이트를 참조하시면 학습에 더욱 도움이 됩니다.) -React.js 에서 Moment.js 사용 먼저 다음 명령어 npm create-react-app [프로젝트명]를 사용하여 react 파일을 생성해줍니다. (기존 프로젝트가 있다면 쓰셔도 무방합니다.) moment.js 는 저희가 캘린더를 만들기 위한 핵심 라이브러리입니다. CMD에서 오른쪽의 명령어를 통해 인스톨해주세요 npm install moment --save 프로젝트를 생성하셨다면 App.js 파일을 아래와 같이..

정말 간단하게 배워보는 react에서 jQuery 사용하기입니다. 1. React Project setting 먼저 안 쓰는 react 프로젝트가 있으시면 사용해주시고 없다면 아래의 이미지를 참조하세요. create react-app [파일명] 명령어를 통해 프로젝트를 생성해주세요. 프로젝트 생성을 완료하셨다면 npm i jquery --save 명령어를 사용하세요. 해당 프로젝트에 jquery가 인스톨됩니다. (구글에서 npm i jquery를 검색하셔도 나옵니다 ) 자 여러분도 프로젝트를 실행하셨나요? 그럼 바로 에디터로 해당 프로젝트를 살펴봅시다. (다들 vscode 쓰시지만 저는 atom 도 쓰는 편입니다 ㅎㅎ..) 2. react class component에서 사용법 App.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 - 이렇게하면 해당 ..

-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() {..

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