구현 5

[css] 하트 클릭 시 날아오르는 Animation

이 블로그 시작할 때 말투에 대해서 고민을 했었는데, 제 책상이 두두두 타자 울리기도 해서 조금이라도 줄일 겸, 그리고 "~다"로 해보니 편해서 "~했다." "~했었다."라는 투로 진행했었습니다. 근데 하다 보니 뭔가 이 투는 거만한 투가 아닌데도 거만한 느낌이 들더군요. 아마도 누군가에게 가르치는 수준도 안 되는 제 실력으로 인해 생긴 이질감인 듯합니다.. 이 투로 쓰면 또 뭔가 가르치는 것 같기도 해서 존칭을 쓰기로 정했습니다. 오늘 안에 게시글 다 수정하려고 했으나 블로그에 제 하루를 쓰기에는 공부하고 취업준비를 해야 하는 입장으로서 너무 초조함도 들어 이전 게시글을 하루에 2개씩 해서 차차 수정 해갈 계획입니다. 하루에 2~4개씩 수정해서 완료했습니다. 하트 클릭 시 나타나게해서 날아오르게도 할 ..

JS와 친구들 2021.12.27

[js/mongodb] 연습할 겸 만든 익명 댓글/실시간 채팅 사이트

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

Java script 2021.12.23

[js/socket.io] socket.io를 사용하여 실시간 채팅 구현하기

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..

Java script 2021.12.21

[js] localStorage로 가볍게 회원가입 구현하기 & localStorage 보는 법

DB로 하는 것이 옳습니다. 그러나 DB를 배우기 전에 사이트에 틀이라도 회원가입을 구현하고싶어서 localStorage를 사용해봤습니다. 실전에서는 회원가입은 localStorage로 진행하면 절대 안됩니다. 민감한 정보들을 다루기 때문입니다. 또한 localStorage는 개발자도구에서 저장한 데이터를 볼 수 있습니다. #HTML 추가로 name하고 싶다면 type, id, plascholder 값만 다르게 지정하시면 됩니다. name의 type은 "text"로 하시면 됩니다. # JS const singUpForm = document.querySelector('.singUp-form'); const email = document.getElementById('email'); const password..

Java script 2021.11.13

[js] if문과 유효성검사__정규표현식을 사용하여 회원가입 구현

회원가입 구현 부분도 로그인과 같이 업데이트할 예정입니다. # HTML 이렇게 form과 input를 만들었습니다.(* 참고로 서버에 전송하지 않고 js 파일에서 불러와 비교하고 브라우저에 실행하는 방식이기에.. method, action를 사용하지 않았습니다.) 정말로 이 password로 할 것인지 한번 더 입력을 받았습니다. 그럼으로써 오타 같은 실수를 방지시켜줄 수 있습니다. (제가 password 한 칸이 더 있고 없고의 차이를 느꼈었기에 압니다..) # JS 그리고 필요한 태그들을 JS 파일에 불러옵니다. const signUpForm = document.querySelector(".signUp-form"); const upName = document.getElementById("signUp-..

Java script 2021.11.11