웹 개발 공부

# HTML 준비중 준비중 준비중 # CSS .menu-columns{ position: fixed; left: -75px; } 살짝 감추고 있다가 마우스를 대면 나타나는 효과와 스크롤 내려도 같이 이동하게 하기 위해 position:fixed를 사용합니다. .menu-columns__ul__item{ width: 120px; height: 50px; border-radius: 5px; background-color: white; /* -- item마다 아래 간격주기 -- */ margin-bottom: 15px; /* -- 마우스가 올라가면 커서 모양이 바뀜 -- */ cursor: pointer; /* -- span text 중앙 정렬 -- */ text-align: center; line-heigh..

cookie도 배웠습니다..! php로 이렇게 간단히 setcookie를 할 수 있다니 알게 돼서 너무 좋습니다. 자동 로그인에 cookie가 주로 사용된다 하던데 다음 번에 구현해봐야겠습니다.

php를 배웠습니다..!! 그래서 php 예시로 잘 나타내는 코드를 블로그에 올려두려고 합니다. # PHP 아이디 # login.php 추가로 현재 날짜 / 시간 출력하기 # php * PHP를 이용하여 실시간 표시하기 참고 사이트 [JS] 서버시간을 화면에 실시간으로 표시하기 by 편리 https://chicpro.dev/js-%EC%84%9C%EB%B2%84%EC%8B%9C%EA%B0%84%EC%9D%84-%ED%99%94%EB%A9%B4%EC%97%90-%EC%8B%A4%EC%8B%9C%EA%B0%84%EC%9C%BC%EB%A1%9C-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0/

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