CategoryList

Jsp와 Jquery를 사용해본 사람이 React로 넘어오면 저처럼 습관적으로 쓸지도 모릅니다. 발단 React를 사용하다 마우스 이벤트를 사용해야 할 타이밍이 왔습니다. mouseup 기능이었는데 예전에 Jquery에서 사용한 기억이 문득 났습니다. React에서 Jquery사용방법을 찾아 mousedown과 mouseup을 React에 적용하였습니다. 이후 React에서 dom을 직접 수정하는 것을 별로 좋아하지 않는다는 글을 보게 되었습니다. (Jquery는 React를 거치지 않고 document를 직접 수정합니다) 문서를 찾아 돌아다니다 보니 Vanilla Js와 Jquery를 비교하며 성능을 논하는 글도 보였고요. Jquery를 개발하신 개발자분도 트위터에서 Jquery가 Js를 대체할 수는 ..

[컴파일 언어 vs 인터프리터 언어] -영어 뜻을 알면 훨씬 이해가 용이합니다.- 컴파일 언어(Compile Language)란 프로그래밍된 코드를 실행할 때 모든 코드를 컴파일러를 통해 기계어로 변환한 후에 파일을 생성하여 그 파일을 실행하는 언어를 말합니다. 컴파일러란 프로그래밍 언어를 다른 언어로 번역해주는 프로그램으로 VisualStudio 나 Eclipse 등도 포함됩니다. 만약 컴파일이 4시간이 걸렸는데 에러가 있다면 수정하고 확인하기 위해 다시 컴파일 4시간을 해야 합니다. 하지만 올바르게 프로그래밍된 코드라면 컴파일된 후의 실행 속도는 인터프리터 언어보다 빠릅니다. 대표적인 언어로 C, C++, Java, C#, Go 등이 있습니다. 인터프리터 언어(Interpreter Language)란..

-PuTTY 서버에 접속할 때 물리적 단말기가 아닌 윈도 등의 운영체제에서 가상의 단말기를 사용하여 ssh, Telnet, raw tcp 방식으로 원격 접속을 제공하는 무료 응용프로그램입니다. 단말기 -> 컴퓨터 등의 시스템에서 데이터를 입력하고 표시하는 데 사용되는 전자기기를 말합니다. -다운로드 방법 putty를 구글에서 검색해줍니다. (구글 선생님은 다 알려주십니다) 해당 사이트를 접속하면 아래와 같은 화면이 뜹니다. 화살표를 클릭해주세요 아래와 같은 화면이 잘 나오셨나요? 빨간 줄로 위치를 표시했습니다. (한 칸 더 내려가시면 이미지 더 확대해놨습니다) 일반적으로 윈도우를 쓰신다면 64bit putty.exe를 클릭해서 다운로드해주세요. -사용법 1. putty에서 통신과관련된 세부적인 기능들입니..

-해당 글은 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 파일을 아래와 같이..

-html 이란 웹페이지를 표현하기 위한 프로그래밍 언어입니다. -약자를 해석해보자면- -> HyperText 링크를 걸 수 있는 텍스트를 말합니다. yeolceo.tistory.com 이런 느낌의 링크 글 말이죠! (제 블로그 링크는 훼이크... ) -> Mark up 문장 이런 식으로 표시 위에 글자를 얹습니다. 이게 마크업 언어입니다. 태그를 이용해서 문서 위에 데이터를 표현하는 언어를 말합니다. -> Language 위에 두 가지 언어를 합친 언어라는 표현을 하기 위해 마지막에 language를 붙여줍니다. 말하자면! 링크를 걸 수 있는고 아래처럼 마크업으로 표시하는 프로그래밍 언어입니다. 이렇게 링크 걸어서 페이지를 이동할수있기 때문에 하이퍼 텍스트입니다. document에 내용이 보이는 부분입..

정말 간단하게 배워보는 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를 보고 있는 ..

PG admin을 사용하기 때문에 배우기 쉬운 백업 및 리스토어 방법입니다!! 1. postgresql db 만들기 먼저 pg admin을 실행해줍시다. (미리 설치는 해 두셔야되용...!) 아래의 이미지를 따라 우클릭 -> Create -> Database... 를 순서대로 클릭해줍니다. 데이터베이스의 명칭은 forbackup으로 했습니다. 백업용이란 의미를 부여하고 싶었습니다. 자 이제 forbackup db 가 손쉽게 완성되었습니다! 바로 테이블을 만들어줍시다. 저희는 쿼리를 사용하여 테이블을 만들어주겠습니다. 아래의 이미지를 따라 테이블-> 우클릭을 통해 쿼리툴을 클릭해줍니다. 아래의 코드를 사용해서 바로 테이블을 만들어줍니다. CREATE TABLE tb_test ( "seq" SERIAL no..

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