The HamSter Developer

소켓.IO는 웹 페이지에서 클라이언트와 서버의 소켓 통신을 위한 라이브러리다.실질적으로 web에서는 서버에 요청을 보내고 응답을 받으면 통신이 끝나기 때문에 실시간 통신이 불가능하지만, socket.io는 특정 ms마다 계속 서버와 요청 응답 통신을 하기 때문에 실시간 통신이 된다.. (서버에서 계속 요청과 응답을 받기 때문에 부하가 좀 걸리게 되니 참고하는게 좋다.) 웹 페이지만 구현하다 보면 실시간 통신을 직접 다루는 일은 별로 없지만, 결국에는 개발 시 socket은 계속 사용하게 된다.서버 코드import { Server } from "socket.io";export default (server) => { //서버를 인자로 받을거다. 여기서 서버는 app.listen의 return 값이다. co..

블로그 정리는 굉장히 힘들다..점점 설명이 짧아져도 이해해주길 바란다.우선 mySQL 다운로드와 데이터 베이스 생성, 계정 생성, 계정 권한 부여까지 다 했다는 가정하에 설명을하겠다.sequelize 사용하기npm i sequelizenpm i -D sequelize-clinpx sequelize initsequelize-cli는 npx sequelize init을 사용하기 위해 다운로드 한다.init을 하면 뭔가가 생기는 것을 볼 수 있을것이다.우선 config.json부터 수정하자{ "development": { "username": "계정", "password": "비밀번호", "database": "사용할 데이터베이스 이름", "host": "127.0.0.1", "d..

1. JS에서 특정 Elem을 지정하기자주 사용하는 방법은 크게 3가지가 있다.ID로 찾기, Elem으로 찾기, querySelector을 사용하기여기서 querySelector은 거의 만능인데, a 태그에서 특정 href를 가진 Elem을 반환받고 싶으면 아래처럼 사용해도 된다.const Elem = document.querySelector(`[href="${id}"]`) // 클래스를 찾으려면 .classname 아이디를 찾으려면 #idname 처럼 . # 을 붙여주면 된다.//아무것도 붙이지 않으면 tagName을 찾는데, 가장 큰 예시로 body를 넣어 사용해보자다만 단점은 CSR은 사용자의 성능에 따라 영향을 받아서 잘 사용하지 않는 방법인데, querySelector은 HTML을 거의 다 뒤져..

클라이언트에선 import, require가 불가능하기 때문에 외부 라이브러리를 추가하기 위해서는 아예 해당하는 코드를 HTML head 부분에서 불러와야 한다.나중에 프론트용 프레임워크를 쓰게 된다면 build 과정에서 알아서 추가되기에 npm i 하면 신경 쓸 일이 없지만..순수 HTML CSS JS로 만든 프로젝트에서는 따로 방법이 없기 때문에 해당 코드를 head부분에 추가하자.1. Promise 리턴값axios는 Promise 를 return하기 때문에 비동기를 동기적으로 처리하는 async와 await을 사용할 필요가 있다.Promise는 쉽게 말하면 JS가 코드를 비동기적으로 처리하기 때문에, 응답을 기다려야 값을 알 수 있는 함수들은 Promise를 반환하게 된다.더 간단히, 코드를 전부 ..

프로젝트 코드는 워낙 개판이라 올리는게 의미가 없을 것 같아서 주로 사용한 메인스택들의 사용방법을 정리하기로 했다.먼저 Observer, 아마 대부분이 JS로 처음 넣게되는 시각적 이벤트가 아닐까 싶다.1. 옵저버 클래스 생성기본적으로 IntersectionObserver는 아래와 같이 생성할 수 있다. const observer = new IntersectionObserver(콜백함수,옵션);1-1. 콜백함수옵저버에는 기본적으로 entries를 뱉어내는데, 이를 통해 옵저버를 컨트롤할 수 있다. (구조분해 할당이 아니기 때문에, 이름은 마음대로 해도 상관없다.)(entries) => { console.log(entries) //대충 forEach로 뽑아 확인해보자. 주로 사용하는 값들은 아래와 같..

함수를 선언하는 방법은 크게 2가지가 있다.일반 함수function 을 사용한 함수 선언 방법이다.function 방법 1function 이름 (매개변수){코드} 예시 : function funcName (a){console.log(a)};function 방법 2const 이름 function (매개변수){코드} 예시 : const funcName2 = function (a){console.log(a)};일반 함수는 어떻게 선언하든 큰 차이는 없다화살표 함수()=>{} 을 사용한 함수 선언 방법이다.화살표 방법 1const 이름 = (매개변수) => {코드} 예시 : const funcName = (a) => {console.log(a)};const 없이 선언해도 작동을 하긴 하지만 절대로 사용하지 말자..

자바스크립트는 크게 두가지 Scope 개념이 있다.블록 레벨 스코프(block-level scope)함수 레벨 스코프(function-level scope)코드로 작성하게 된다면{ console.log("{} 내부가 하나의 지역(범위)이다.") }{스코프}를 object와 착각하면 안된다!{}는 = 연산자와 같이 사용할 때만 object가 되는 것이다.그 외에는 지역을 나타낸다!스코프, 어떻게 사용해야 하는가?우리는 이전에 변수를 선언하는 방법을 알아보았다.어째서 var를 사용하지 말라고 적어놨는지, 그 이유가 여기서 나온다.자바스크립트는 기본적으로 함수 레벨 스코프를 지원하는데 그것이 var다.ECMAScript 6 통칭 ES6 표준이 나온 이후 let,const 가 추가되는데, 이를 사용하..

JS에서 쓰는 대표적인 자료형은StringNumberArrayObjectNullBoolean이 있다!어따 쓰는가?나중에 TypeScript 라는 JS의 확장판에서 쓴다..일단 지금은 JS를 사용하니 어떻게 선언하는지 사용법의 기본만 알고 넘어가자!string우리가 평소에 쓰는 어떤 글자든 "" 안에 쓰면 문자열이 된다.const a = "나는 문자다. 여기에 1, 2, 3을 넣어도 문자로 인식한다."const b = "1"numbernumber 타입의 값 만이 산술 연산이 가능하다.const a = 1Nullundefined과 비슷한데 다르다..undefined는 값이 지정되지 않은 경우를 의미하지만, null 의 경우에는 해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미한다.똑같은 소리 아닌가?..

이번에선 변수를 선언하는 3가지 방법을 설명하겠다.변수 선언의 문제아 varvar가능하면 쓰지 말아야 하는 변수 선언 방법이다.만약 첫 입문으로 이 글을 읽고있는 사람이라면, 이해할 수 없을테고아니라면 왜 쓰면 안되는지 알고 있을테니 간단하게 설명만 하고 넘어가겠다.var는 선언되는게 조금 지멋대로다.var는 let,const와 다르게 똑같은 이름으로 선언해도 빨간줄이 나타나지 않는게 보이는가?즉, 변수 이름이 겹칠 수도 있다!또 다른 문제는 var로 선언한 변수는 block scope가 아닌 function scope단위기 때문에..이해하기 힘들다면 그냥 한단계 위로 올라가 거기까지 영향을 미친다고 보면 된다.대표적인 예로 var 변수는 window에 선언된다해당 코드를 실행하고콘솔로 윈도우를 찍어 열..

변수란?컴퓨터 언어는 말 그대로 우리의 언어를 컴퓨터가 알아들을 수 있게 변환해야 한다.즉 개발자는 , 컴퓨터 입장에서 사람과 소통하게 해주는 일종의 번역가라고 생각하면 된다.그럼 해당 만화처럼 컴퓨터 언어(자바스크립트)로 번역 하려면 어떻게 해야할까?사람 : 나는 오늘부터 "햄스터"를 ham이라 부를거야번역 :const ham = "햄스터"컴퓨터 : 아! ham은 "햄스터" 구나!이렇게 이해했다면 지금부턴 변수 선언에 대해 설명하겠다.변수의 중요 개념으로 선언, 초기화, 할당이 있다.1.선언이란?let a;a라는 변수를 선언했다.전부다.2.초기화란?변수가 선언될 때 값을 지정해주는 것을 초기화 라고 한다.즉, let a; 만 했을 때 a가 undefined를 가지는 것 또한 초기화의 개념에 들어간다.간..