📀 환경 Mac M1 Node 16 VsCode 🔖 개요 Node에서 axios를 사용할 때 response값이 euc-kr일 경우 utf-8로 바꾸기! 📒 목차 decode 할 소스 만들기 결과 확인하기 - decode 할 소스 만들기 필요한 lib를 추가해줍시다. restApi와 decode를 위한 lib입니다. npm install express --save npm install axios --save npm install iconv-lite --save node 환경에서 axios를 request 할 수 있는 상황을 만들어줍니다. const config: object = { method: 'post', url, headers: { 'Content-Type': 'application/json..
TS, JS
환경 Mac m1, VScode, node 16 개요 typescript를 할 때 debug를 돌리려고 하다 보면 모듈을 못 찾거나 다른 방식으로 하려 하면 손이 좀 갑니다. - VScode Debug Setting 괜히 내부에서 돌리지 말고 package.json 에서 돌립시다. 먼저 server 돌려줄 scripts 하나를 만들어줍시다. 아래와 같이 디버그 모드에서 디버그를 내가 설정한 스크립트로 실행합니다. 별거 아닌 거에 좀 걸렸네요 후... 성실한 코딩 하세요.
개요 Node 개발을 하며 Node이벤트 루프에 대해 알아봅니다. 공식문서의 글을 많이 참조했습니다. javascript eventloop를 모른다면 이분 영상이 괜찮으니까 보면 좋습니다. 링크 참조 목차 Node 란 Node Event Loop 기본 Node Event Loop 심화 - Node 란 Node는 Chrome V8JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Single-Thread이며 non-blocking I/O 이벤트 기반 비동기 방식으로 동작합니다. - Node Event Loop 기본 JavaScript가 싱글 스레드이지만 Node의 이벤트 루프는 가능하다면 언제나 시스템 커널에 작업을 떠넘겨서 Node.js가 논 블로킹 I/O 작업을 수행하도록 해줍니다. ..
장비가 한번에 통신을 여러개 받으면 안되는 기이한 상황이 발생해서 저도 사용해보게됬습니다. 실행을 동기적으로 사용하게해주는 라이브러리입니다. 예를들어 restApi 를 통해 2가지의 요청을 보낸다면 하나를 마치고 다음 요청을 보내주는 것을 말합니다. 이걸 쓰면 처리가 하나의 일처리를 순서대로 처리하는 방식입니다.
Css에서 font를 적용할 수 있게끔 지원하는 기능이 있습니다. 그래서 html, vue, anguler 이런 구분이 없이 적용할 수 있습니다. 필자는 React를 주로 쓰기 때문에 React에서 font를 적용하는 예시를 보여드립니다. (다른 프런트 언어를 사용하셔도 이해하기 쉬운 글입니다) -폰트 적용하는 방법 1. npm 명령어를 사용하여 React 프로젝트를 만들어줍니다. npm create-react-app font-test // 이름은 편한대로 설정해주세요. 그리고 App.js 파일로 이동하여 화면에 보이는 부분을 깔끔하게 정리해줍니다. 보기 편하기 위해 폰트 사이즈를 50px로 설정했습니다. 2. 눈누라는 무료 폰트 사이트를 이용했습니다. 원하는 폰트 하나를 정해서 클릭해주세요. 저는 산돌..
-javascript Type 설명 javascript에서 데이터 타입은 2가지로 나뉩니다. 원시 타입과 참조 타입입니다. 원시 타입은 number(숫자), boolean(논리), string(문자), undefined(초기화 안 함), null(없다고 초기화)가 있습니다. 참조 타입은 array(배열), function(함수), object(객체)가 있습니다. 왜 javascript 는 데이터 타입을 크게 2가지로 나누었을까요? 차이는 저장 방식에서 나옵니다. -javascript 메모리 저장 방식 javascript는 값을 저장할 때 변수와 값을 나누어 저장해줍니다. 이 말이 어떤 말이냐면 x= 2 라면 변수 x를 저장하는 메모리 따로 값 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를 가능..
-JavaScript 란 html과 css를 동적으로 표현하기 위한 script 언어입니다. html, css만 있으면 웹페이지는 미동도 하지 않습니다! 하지만 네이버 급상승 검색어 같은 걸 보시면 순위가 바뀌는 걸 보실 수 있는데 이런 게 동적인 것이고 JavaScript입니다. 로그인 시에 비밀번호가 틀릴 경우 그에 따라 붉은 글씨로 표현되거나 경고창이 뜨는 경우도 JavaScript입니다. -History 처음에는 LiveScript라는 명칭을 사용했으나 당시 Java 위상이 상당했기에 홍보 목적으로 명칭을 비슷하게 JavaScript라고 변경하게 됩니다. 동적인 웹페이지가 필요하게 되면서 점점 개발자들에게 사용되고 후에는 ECMA스크립트라는 표준화된 버전이 존재하게 될 정도 성장합니다! -사용 방..
이번엔 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를 보고 있는 ..
