웹 개발 공부

# EJS ( * 랜덤 음악만 구현한다면 꼭 ejs가 아니어도 됩니다. * ) # JS const musicPlay = document.querySelector('.audio-columns__music--play'); const musicStop = document.querySelector('.audio-columns__music--stop'); const audio = document.querySelector('.audio-columns__audio'); const audioList = document.querySelector('.audio-columns__audio-list'); var musicList = ["1.mp3", "2.mp3", "3.mp3"]; var musicTitleList = ["..

음... 아이콘은 fontawesome에서 구했습니다. 음.. 누르면 사라지게하고 다른 요소가 나타나게하는 건 간단합니다. # HTML send 제가 짠 HTML 코드는 이렇습니다. JS 파일로 따로 다뤄서 jQuery로 진행했습니다. # jQuery const $chatDiv = $('#chatDiv'); const $chatWindow = $('#chatWindow'); const $chatClose = $('#chatClose'); $chatDiv.hide(); // 미리 사라지게 함. $(document).ready(function(){ $chatWindow.click(function(){ $chatDiv.toggle(); // hide()상태이면 sho..

구글 클라우드를 사용해서 배포까지 완료된 상태입니다. 이것은 강의를 수강하고 그 토대로 제 입 맛(?)에 맞게 구성한건데, 보다시피 정말 간단합니다... 제가 이 사이트를 만들면서 짠 기능들을 소개할까합니다만.. 막상 소개를 구상을 해보니 음.. 민망스럽지만.. 일단은 제가 게시글에 올릴 기능과 수정, 업데이트 할 사항을 언급한 다음에 건들지 않은 영역과 이유를 설명하고 시작하겠습니다. # 진행할 기능 구현들 1. 익명 실시간 채팅 - 채팅 구현은 앞 게시물에서 다뤘었습니다. https://helloihopeyoulikeit.tistory.com/30 [js/socket.io] socket.io를 사용하여 익명/실시간 채팅 구현하기 ejs 파일에 send ... # SERVER 역할의 JS 파일 우선 s..

html 파일에 send ... # SERVER 역할의 JS 파일 우선 socket.io 셋팅합니다. * 참고로 express 설치 & 연결 상태입니다. const express = require('express'); const app = express(); const http = require('http').createServer(app); const { Server } = require("socket.io"); const io = new Server(http); // css 적용을 위해서 var path = require('path'); // process 부분 / env 파일에 따로 다뤄서 변수로 진행하는 것뿐이다. MongoClient.connect(process.env.DB_URL, functi..

앞서 socket에서 언급했듯이 배포하고 진행하려고 했는데.. 변수가 생겨서 좀 늦어질 것 같습니다. 그래서 일단은 실시간 채팅 기능부터 다루려고 합니다. 혹시나 해서 언급하는 건데 댓글 기능을 다루지 않는 이유는 제가 듣고 있는 강의 방식으로 진행한 데다가 구글에 잘 안 알려져 있기 때문입니다.. 그에 비해 socket.io은 강의 방식으로 진행했긴 했으나 구글에 치면 댓글보다 구현 정보가 많습니다. 일단 여기서는 실시간 채팅 기능 사이트를 구현하면서 갖춘 셋팅들을 다루겠습니다. # 설치 1. express 설치 - npm init해서 package.json 생성&설정 - vs code 터미널에 npm i express 2. mongoDB atlas 로그인 & 설치 & 셋팅 (** 실시간 채팅만 구현할..

드디어.. 댓글 + 채팅 페이지를 만들었습니다! 와아! 보완 & 추가해야할 기능들이 남아있어서 미완성이지만 확장할 토대를 만들었다는 점에서 만족스럽습니다. 카카오 채팅처럼 '나' 일 경우 방향을 다르게 해서 출력하고 싶고, 댓글은 페이징하고 싶습니다. 이 부분들은 이 지식으로 1시간만에 하기에는 좀 걸릴 것 같고 또 더 공부해서 더 좋은 방법으로 하고 싶어서 잠시 패스했습니다. 그런데 페이징은 조만간 하지 않을까 싶습니다. 채팅 + 댓글 중에서 댓글은 강의 내용 일부에 가까워서 아마 채팅 기능만 다룰 것같습니다. 배포까지 마치고 블로그에서 다루려고 했는데 시간이 늦어지기도 하고 해서 배포는 다음 게시글에 언급하겠습니다. (지식 부족 + 보안 문제 이유로 다루지 않은 기능들이나 차차 업데이트할 기능들도 다..

전에 생활코딩에서 js 강의 듣다가 알게 된 기능입니다. (계속 신경 쓰이게 한 기능 2) 클릭하면 id를 지정한 문단으로 이동합니다. 목록을 누르면 해당 문단으로 이동하는 기능 구현에 유용할 것 같아서 게시글에 다룹니다. # HTML where? #은 id를 뜻합니다. * 아래 긴 글 주의 * Hacks Blog Read more at hacks.mozilla.org WebAssembly and Back Again: Fine-Grained Sandboxing in Firefox 95 In Firefox 95, we're shipping a novel sandboxing technology called RLBox — developed in collaboration with researchers at th..

생활코딩에서 arguments 파트 수강했었을 때, arguments로 입력받아야 하는 값 그리고 입력한 값 개수를 비교할 수 있다는 점이 인상(?) 깊었는데 공부하는 내내 계속 떠나가질 않아서 이렇게 블로그에 다룹니다. 참고로 배열 복사나 배열로 foreach같은 메서드를 쓸 때는 arguments보다는 전개 구문&Rest 문법(...)을 쓰는 게 좋습니다. arguments는 진짜 배열이 아니기 때문입니다.. arguments로 출력할 경우 [0 : 2, 1 : 2, 2 : 4]로 인덱스 값 또한 포함합니다. 그런 반면에 전개 구문은 [2, 2, 4]입니다. # JS function arr3 (arg1){ if(arr3.length !== arguments.length){ console.log(`받을..

저번 게시글에서 다룬 정규표현식을 응용하여 적용했습니다. 사용자가 입력한 값과 정규표현식을 비교해서 만일 true가 아니면 경고문 내보내는 파일로 특정 값을 보냅니다. 그럼 그 html 파일에선 if문으로 그 값을 확인하여 있으면 alert로 경고문을 출력합니다. 바로 res.wirte('')로 하지 않고 왜 이렇게 했냐면.. 문자가 깨지기 때문입니다. 이 부분 때문에 이것저것 삽질해보다가 구글 검색해서 찾은 코드를 응용했습니다.. * 참고로 여기선 ejs 템플릿 엔진을 사용합니다. 그리고 데이터 저장은 mongoDB를 이용했었습니다. # ejs 전송을 위한 form과 사용자에게 이메일 받을 input를 만듭니다. email 이어서 미리 또 경고문을 출력할 ejs 파일 생성과 생성한 파일에 코드를 작성했..

ejs를 알기 전까지는 html에서 중복되는 부분은 pug 같은 템플릿 엔진으로 하는 거라고 알고 있었습니다.. (extends, include..) 그런데 ejs도 include가 가능하네요? (ejs도 템플릿 엔진이지만.. 하지만 ejs는 를 씁니다) 다른 분들은 어떨지 몰라도 제게는 희소식이었습니다. 그래서 js 파일의 변수도 받아 쓸 수 있고 js를 html 요소에 바로 그 자리에서 적용 수 있게 해 주는 고마운 ejs설치 방법과 js view 셋팅.. 등 다루고자 합니다. ejs는 ejs형식으로 작성된 html을 fs로 읽어서 html로 출력해주는 엔진 모듈입니다. # vsCode terminal 설치 방법은 정말로 간단합니다. 설치하고자하는 폴더 경로의 vsCode 터미널에 npm instal..