안녕하세요 상훈입니다.
Javascript에서 데이터의 한글 유무를 정규표현식으로 확인하고 싶을 때 사용하시면 될 것 같습니다.
저는 split을 이용해 한글을 기점으로 자르는 함수를 생성하기도 하였습니다.
const korean = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/
// 사용 사례 : 한글을 기준으로 문자열 자르기
koreanData = '124515가123124'
const data = koreanData.split(korean) // [ 124515, 123124 ]
"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."
안녕하세요 상훈입니다.
Javascript의 기초 중의 기초를 공부하게 되어 포스팅하게되었습니다.
1. 변수 선언
2. 황금규칙 (2/5)
3. 식별자
4. 산술연산자
5. Null & Undefind
6. Template Literal
- 자바스크립트에서 변수는 형식을 가지지 않는다.
- 자바스크립트에서는 ' ; ' 세미콜론을 사용하지 않아도 된다.
- const, let 을 사용하자
→ var 는 구시대의 유물
: 변수명을 잘못입력하게 되면 새로운 변수가 선언됨, 전역변수로 등록이 되어 사방팔방에서 나의 변수를 사용하게 된다.
1. var 대신 let, const 를 사용하자
2. 엄격모드(strictmode) 를 사용하자 - var와 키워드 없이 사용하는 변수선언은 자제하자
- 변수명은 반드시 식별자(identifier)의 일반 문법을 준수해야 한다.
- 식별자는 [ 유니코드 문자, 숫자, 언더바, $ ] 등으로 구성된다.
- 숫자는 첫번째 문자가 될 수 없다.
- ' $ ' 로 시작하는 이름은 보통 도구, 라이브러리 에서 자주 사용한다.
- ' _ ' (로우바) 를 변수명 앞이나 뒤에 붙여 비공개 임을 표시하기도 한다.
- ' _ ' 를 사용하는 것보다 Camel Case 를 사용하는 것을 지향한다.
- ' ++ ', ' -- ' ...
- 산술연산자를 사용하는 것을 지양하자. 후위연술자 빼고
- 산술연산자의 자동형변환 에 의존하지 말자.
- ' null ' 혹은 ' undefind ' 중 하나만 선택해서 사용하자
- ' null ' 은 예약어, ' undefind ' 는 예약어가 아니다.
- 추가적으로 ' NaN, Infinity ' 라는 지역변수도 선언을 지양하자.
- ' ${ } '
- ' <pre> ' 처럼 개행이 가능하다
- 중첩이 가능하다.
const greeting = `${id.length > 0 ? `${age[0]}. ` : '' } ${id}`const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server, {
cors: { origin: "*" }
});
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});// websocket으로 데이터 받아오기
const socket = io('ws://localhost:3000');
io.on('connection', (socket) => {
console.log('a user connected');
});
공인 아이피로 접속해야하는데 자꾸 접속이 안됐었다. 서버를 돌려도 안되었고, 등등..
원인은 포트포워딩이었다. 과거에 서버를 설치하는데 내가 직접 건들지 않았던 부분이었기 때문에 신경 자체를 쓰지 못했다.
내 능력부족일 뿐,, ㅠㅠ
그리고 이번 기회로 네트워크 단의 공부를 잘 하게 되었다. 어떤 식으로 흘러가는지 대충 알았던 모습을 그림도 그려가면서 공부하며 이해를 할 수 있었다. ㅂㄷㅂㄷ.. 시간 잡아먹은거 생각하면 치가 떨림.
프론트엔드 개발자들이 가장 자주 보고 친숙한 에러 중의 하나라고 하는데, 이해가 된다.
걸핏하면 CORS에러에요~ 뿌잉뿌잉하면서 빨간 글씨로 나타나는 녀석이다.
서버에서 분명히 아래와 같이 주었는데도, 계속 에러나고 ㅋㅋㅋ 열받아 죽겠다.
cors: { origin: "*" }ORIGIN * 는 함부로 주면 안된다.
그래도 어느정도 해결해서 다행이다. 전체적인 프로세스도 잘 알았고, 역시 부딪히는만큼 알게 되는 법
그래도 위의 두 녀석보다는 훨씬 애를 덜 먹였다. 왜냐하면 기존에도 자주 사용하는 방식이었기 때문.
RESTFUL API 환경구성을 하기 위해 프론트와 백을 일부로 구분하여 사용하였다.
기존에는 Legacy였기 때문에 코드를 직접 보기 너무나도 끔찍하여 토할 것 같았으나, PHP를 백으로 놓고 데이터만 내뱉게 만들어놓고, Javascript로 나머지를 충당했다. 쓴 라이브러리 등은 ajax를 처음에는 사용하였으나, vue.js를 공부하면서 axios에 대해 알게되었고, 이제는 axios위주로 사용한다.
axios에 대해서는 과거에 작성한 내용을 참고 바랍니다.
[ React.js ] Axios 사용하는 방법
안녕하세요 상훈입니다. 리액트에서 Axios 요청을 사용하는 방법(chart ... etc)을 알아보도록 하겠습니다. $ npm install axios react-chartjs-2 --save 터미널에 복사 붙여넣기 해주시면 됩니다. Axios는 js의 A..
code-hoon.tistory.com
[ Vue.js ] Axios 사용하는 방법 / json
안녕하세요 상훈입니다. Vue.js 에서 Axios를 사용하여 화면에 출력하는 예제를 작성해보도록 하겠습니다. 비동기 통신 방법으로는 Axios와 Ajax 등이 있는데, 이 중 Axios를 사용하도록 하겠습니다. 생
code-hoon.tistory.com
$ npm install wsvar WebSocketServer = require('ws').Server;
var wss = new WebSocketServer( { port: 8900 } ); // 포트번호는 자유롭게 작성해주세요.
wss.on( 'connection', function(ws){
console.log("connected");
// 클라이언트가 메시지를 전송했을 때 수신하여 다시 보내는 과정.
ws.on( 'message', function(msg){
console.log("msg[" + msg + "]" );
ws.send( msg );
});
});$ node server.js<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input id="Send" type="text" autofocus> <!--메시지 작성 영역-->
<button type="button" onclick="sendMessage();" >Send</button> <!--전송버튼-->
</form>
<div id="Recv"></div> <!-- 보낸 메시지가 기록되는 곳 -->
<script>
$( document ).ready( function() {
var txtRecv = $('#Recv');
ws = new WebSocket("ws://localhost:8900");
// websocket 서버에 연결되면 연결 메시지를 화면에 출력한다.
ws.onopen = function(e){
txtRecv.append( "connected<br>" );
};
// websocket 에서 수신한 메시지를 화면에 출력한다.
ws.onmessage = function(e){
txtRecv.append( e.data + "<br>" );
};
// websocket 세션이 종료되면 화면에 출력한다.
ws.onclose = function(e){
txtRecv.append( "closed<br>" );
}
});
// 사용자가 입력한 메시지를 서버로 전송한다.
function sendMessage() {
var txtSend = $('#Send');
ws.send( txtSend.val() );
txtSend.val( "" );
txtSend.focus()
}
</script>
</body>
</html>
[JavaScript] WebSocket echo 클라이언트/서버 예제
WebSocket 기반 echo 서버를 node.js 기반으로 개발하는 방법은 다음과 같습니다. 1. ws 패키지 설치 아...
blog.naver.com
Canvas.js 를 사용하는 와중 특정한 조건에 의해 새로운 차트를 비동기로 재출력하는 상황,
아래와 같은 에러가 발생하였다.
이유인즉슨, 기존의 차트가 존재하기 때문에 새로운 차트를 적용할 수 없다는 것이다.
그렇기 때문에 기존의 차트를 제거하는 수순을 밟아야한다.
const ChartName = new Chart(
document.getElementById('generalList'), // canvas의 id 호출
ChartNameConfig // Config로 기본 설정했던 변수 호출
);
ChartName.destroy() // ★★destroy로 기존의 canvas를 제거
}destroy()를 new Chart 함수의 마지막에 작성한다.
https://pretagteam.com/question/canvas-is-already-in-use-chart-with-id-0-must-be-destroyed-before-the-canvas-can-be-reused-chatjs
pretagteam.com
해당 페이지 참고
Javascript로 select box 내의 option들을 특정 조건에 의해 함수를 호출하여 제거하려고 한다.
검색 기능으로 사용하면 유용하다.
물론 select box 말고도 p, span, div...등등 부모-자식 관계의 태그들이라면 모두 가능하다.
Node . removeChild 를 사용한다.
const item_name = document.querySelector('#item_name') // item_name이라는 부모 요소
while (item_name.firstChild) { // 첫번째 자식 태그가 존재하면 무한 반복
item_name.removeChild(item_name.firstChild); // 첫번째 자식 태그를 제거한다.
}
item_name 이라는 id를 가진 태그를 querySelector로 가져온다.
가져온 태그 내 자식 태그가 1개 이상일 때 반복문이 실행된다.
그리고 removeChild를 통해 자식요소를 제거한다.
Node.removeChild() - Web APIs | MDN
The removeChild() method of the Node interface removes a child node from the DOM and returns the removed node.
developer.mozilla.org
querystring을 받아왔는데 JavaScript get 방식으로 값을 받아오는 방법
// Query String 데이터 출력
function searchParam(key) { // key를 매개변수로 받고, value를 리턴
return new URLSearchParams(location.search).get(key)
}함수로 생성해놓고 사용하는 것이 편합니다.
// url = www.example.com?page=12
const page = searchParam('page')
console.log(page) // 12 출력
key: value 형태이다보니, key 값을 매개변수로 넘겨주어야 value가 출력됩니다.
html <input> 태그 내에서 enter 를 입력 시 javascript로 원하는 이벤트를 발생시키는 방법
input 태그 내에
<input type="text"
onkeypress="if(window.event.keyCode==13){ function name() }"
/>를 작성해주도록 한다.
enter = keyCode 13