기억 설명서

함수: 명령 덩어리, 정해진 동작을 하는 것 // 함수 선언식 function sum(a, b) { console.log(a + b); } sum(2, 5); // 7 function sum(a, b) { console.log("계산 ㄱㄱ"); return a + b; // 결과값 반환 } let result = sum(2, 5); // result = 7 console.log(result); // "계산 ㄱㄱ" => 7 조건문: 특정 조건을 부여하는 것 function isAdult(age) { if(age > 20) { console.log("성인 입니다."); } else { console.log("청소년 입니다."); } } isAdult(15); // 청소년 입니다. isAdult(20); //..

JS 자료형 // number let a = 2; let b = "2"; // string let word = "HongGillDong" 자체 함수 알아보기 (메서드 활용) // e-mail에서 gmail만 추출하고 싶다면? let myEmail = 'sparta@gamil.com'; myEmail.split("@"); // ['sparta', 'gmail.com'] // 어?? List..잖아..?? myEmail.split("@")[1]; // ['gmail.com'] myEmail.split("@")[1].split("."); // ['gmail', 'com'] myEmail.split("@")[1].split(".")[0] // ['gmail']

부트스트랩 v5.0 https://getbootstrap.com/docs/5.0/components/buttons/ Buttons Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. getbootstrap.com 부트스트랩 시작 템플릿 이걸로 시작해보죠! 구글 폰트 링크 CSS 정리 .my-post { /* 반응형: 500까지 클 수 있고, 이후 넓이는 95% */ max-width: 500px; width: 95%; /* 위, 오른쪽, 아래, 왼쪽 (시계방향) */ margin: 20px auto 0 auto; }

2단계는 브라우저에 "Wellcome to chat"이라는 메세지를 보내보자. 목표 server 1. 브라우저 console에 연결 되었다는 "Connected to Browser" 라는 메세지를 보낸다. 2. 브라우저에 "hello" 메세지를 보낸다. 3. 브라우저에서 연결이 끊기면 "Disconnected from Browser" 라는 메세지를 보낸다. server.js const server = http.createServer(app); const wss = new WebSoket.Server({ server }); wss.on('connection', (soket) => { console.log('Connected to Browser ✅'); soket.on('close', () => { cons..

WS를 사용해서 back-end와 front-end 사이에서 첫번째 connection(연결)을 만들어보자. 참고: MDN server.js const http = require('http'); const WebSoket = require('ws'); const express = require('express'); const app = express(); // pug로 view engine을 설정, express에 template이 어디 있는지 지정 app.set('view engine', 'pug'); app.set('views', __dirname + '/views'); // public url을 생성해서 유저에게 파일을 공유 app.use('/public', express.static(__dirna..

WebSoket framework를 다루기 전 WS에 대해 알아볼 것이다. WebSoket core 즉, WebSoket 기반이고 기초이기 때문이다. ws: a Node.js WebSocket library 말 그대로 WebSocket 라이브러리이다. 여기에서 WS의 사용법에 대해 기록하려 한다. https://www.npmjs.com/package/ws#installing ws Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js. Latest version: 8.8.0, last published: a month ago. Start using ws in your project by running..

실시간(real-time) 기능을 구현 하기 전, 어떤 것이 실시간을 가능하게 해주는지 알아보자 실시간 기능을 위해 사용할 것은 WebSoket 이라는 것인데, WebSoket 덕분에 실시간 chat, notification 같은 실시간(real-time)기능을 구현 할 수 있다. WebSoket이 어떻게 작동하는지 알아보기 전에 HTTP가 무엇인지 살펴보자. 같은 이미지에 있는 이유는 둘 다 protocol(프로토콜)이기 때문이다. [프로토콜: 복수의 컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약] HTTP HTTP란? 모든 서버들이 작동하는 방식이다. 위의 그림을 보고 설명하자면 사용자가 요청(request)을 보내면, 서버가 반응(response)한..

지금 껏 한 것을 정리해본다. 1. 개발환경 구축 Nodemon을 설정하기 위해 nodemon.json을 생성했다. { "ignore": ["src/public/*"], "exec": "babel-node src/server.js" } nodemon은 프로젝트를 살피고 변경사항이 있을 시 서버를 재실행 해주는 프로그램이다. public 안의 코드 변화가 있을 때는 반응하지 않도록 설정했다. 서버를 재시작하는 대신 babel-node를 실행하게 된다. Babel은 작성한 코드가 일반 NodeJS 코드로 컴파일 해주는데 그 작업을 src/server.js에서 해준다. { "presets": ["@babel/preset-env"] } server.js 파일에서는 express를 불러와 express를 통해 어..

server.js const express = require('express'); const app = express(); // pug로 view engine을 설정, express에 template이 어디 있는지 지정 app.set('view engine', 'pug'); app.set('views', __dirname + '/views'); // public url을 생성해서 유저에게 파일을 공유 app.use('/public', express.static(__dirname + '/public')); // home.pug를 render 해주는 router handler를 만든다. app.get('/', (req, res) => res.render('home')); // router handler co..

클론 코딩에 앞서 server setup을 위해 먼저 src 폴더를 생성한다. 이후 `server.js`파일을 생성한다. 프로젝트 루트 폴더 안에 `babel.config.json`, `nodemon.json`를 생성한다. 이후 아래의 라이브러리를 받는다. $npm install @babel/cli @babel/core @babel/node nodemon @babel/preset-env -D 1. nodemon.json { "exec": "babel-node src/server.js" } - nodemon은 "exec"의 명령어를 이용해서 이거 하나만 실행되도록 한다. 2. babel.config.json 여기에서는 "presets"을 설정할건데, `npm install @babel/preset-env`..

javascript를 통해 개발을 하던 중 채용공고를 보니 대부분의 기업에서 typescript를 일정부분 또는 필수로 요구하는 곳이 많았다. 때문에 typescript를 알아보았고 정리를 해보자한다. typescript 란? TS는 무엇이냐? 그냥 간단한게 JS의 대용품 같은 언어라고 간단하게 보면 되겠다. 조금 더 자세히 말하자면, 정적 타입 검사자 (TypeScript: A Static Type Checker)라고 하는데 프로그램을 실행시키지 않으면서 코드의 오류를 검출하는 것을 말한다. 완전 다른 언어는 아니고 JS를 그대로 이용 가능한데 type 부분을 업그레이드해서 쓰는 JS 업그레이드 버전으로 보면되겠다. JS는 dynamic typing을 제공하는 언어이기 때문에 아래의 구문이 정상적으로 ..

1. HTML Log In 2. JS // querySelector const $loginInput = document.querySelector('#login-form input'); const $loginButton = document.querySelector('#login-form button'); // 변수 let name = ''; // function function handleChangeLoginInput(e) { userName = e.target.value; } function handleLoginBtnClick() { console.log(userName); } // addEventListener $loginInput.addEventListener('input', handleChangeL..

Window에 쓰일 수 있는 메서드를 구글링 할 수 있다. 구글링: window mdn, Window - Web API - MDN Web Docs - Mozilla https://developer.mozilla.org/ko/docs/Web/API/Window Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. developer.mozilla.org Document에 쓰일 수 있는 메서드를 구글링 할 수 있다. 구글링: Document - Web API | MDN https://developer.mozilla.org/en-US/docs/Web/API/Document Document - Web APIs | MDN The Document interface r..

Boolean은 true와 false를 말한다. 즉, 참이냐 거짓이냐를 뜻한다. 아래의 코드를 보면 null과 undefined가 나온다. JS에서 null은 object를 반환한다. null은 의도적으로 값이 없다를 설정한 것이고, undefined는 아무것도 하지 않은 상태를 의미한다. 의도적으로 값을 비어있는 상태로 하는 것이 아니라면, undefined 사용은 부적절하다. JS에서 일치연산자(==)와 동등연산자(===)가 있는데, 동등연산자는 자료형까지 엄격하게 비교해준다. 때문에 동등연산자를 활용하는 것이 좋다. null과 undefined를 비교하기 위해선 동등연산자(===)를 통해 엄격하게 비교해주는 것이 좋다. console.log('Boolean'); // Boolean const tes..

JS에서 변수를 선언할 때 var 라는 키워드를 사용했다. 현재도 사용은 가능하나 비추다. ES6에서 const와 let이 추가됐는데 이를 사용하기를 권장한다. 그렇다면 var, let, const의 차이는 무엇인지 알아보자. 변수선언 먼저 JS에서 변수 선언은, 선언 -> 초기화 단계를 거친다. 1. 선언단계: 변수명을 등록하여 JS 엔진에 변수의 존재를 알린다. 2. 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다. 호이스팅 JS 엔진은 소스코드를 한 줄씩 순차적으로 실행하기에 앞서, 변수 선언을 포함한 모든 선언문을 찾아내 먼저 실행한다. 즉, 변수가 어디에 있는 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting)이라고 한..