전체 149

CSS - 스크롤바를 꾸며보자

CSS를 이용하여 스크롤바를 건들 수 있다! 사실 기본 스크롤바는 아주 못생겼다. 못생긴 사진 먼저 보고 가자. 이제 스크롤바를 바꿔보자! 1. 스크롤바 숨기기 가장 기초인 스크롤바 숨기기부터 해보자. .layer-pop__round.grade::-webkit-scrollbar { display: none } 2. 스크롤바 디자인 변경 - 스크롤바 너비 변경 .layer-pop__round.grade::-webkit-scrollbar { width: 5px; } - 스크롤바 헤더 부분 디자인 변경 .layer-pop__round.grade::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 10px; } - 스크롤바 바디 부분 디자인 변경..

Frontend/CSS 2021.05.10

서울시민회의 참여단 최종 선정!

예전에 인터넷 서핑 하다가 서울시민회의 참여단 모집을 한다는 글을 본 적이 있다. 재미있을 것 같아서 신청해놓고 까먹고 있었는데 합격됐다는 전화가 오더니 문자도 왔다! 5월 중순부터 환경 관련된 의제에 대해 얘기를 나눈다고 한다. 근데... 나 5월 말이면 경기도로 이사갈텐데...? 과연 서울시민회의단으로 잘 참여할 수 있을 지 기대된다.

기타/일상 2021.05.03

Socket.io를 이용한 실시간 채팅 구현 - 3. 서버에 올리자

Socket.io를 이용한 실시간 채팅 구현 - 1. 환경설정 회사 업무를 하면서 실시간 채팅 기능을 구현할 기회가 생겼다. 이사님이 솔루션 사서 개발하라고 하셨지만 예전부터 소켓 통신 관련하여 공부도 해보고 싶었던 참이고, 회삿돈이 아깝기도 해 guiyomi.tistory.com Socket.io를 이용한 실시간 채팅 구현 - 2. 기능 구현 2021.04.28 - [Project/실시간 채팅 서비스 개발] - Socket.io를 이용한 실시간 채팅 구현 - 1. 환경설정 Socket.io를 이용한 실시간 채팅 구현 - 1. 환경설정 회사 업무를 하면서 실시간 채팅 기능을 구현할 기 guiyomi.tistory.com 이제 대망의 마지막 단계이다. 순서 1. 서버 접속 후, 적당한 위치에 node.js..

Socket.io를 이용한 실시간 채팅 구현 - 2. 기능 구현

Socket.io를 이용한 실시간 채팅 구현 - 1. 환경설정 회사 업무를 하면서 실시간 채팅 기능을 구현할 기회가 생겼다. 이사님이 솔루션 사서 개발하라고 하셨지만 예전부터 소켓 통신 관련하여 공부도 해보고 싶었던 참이고, 회삿돈이 아깝기도 해 guiyomi.tistory.com 앞 파트에서 환경 설정을 포함한 기본 셋팅을 마쳤다. 오늘은 채팅 기능을 구현하기 위한 과정을 적어보려고 한다. 실시간 메시지 기능 구현 가장 핵심적인 기능이자 가장 쉬운 기능이다. 이건 그냥 구글링해도 나온다! 채팅 리스트가 업데이트 될 때마다 리스트를 가져와서 유저가 접속한 채팅방의 메시지만 화면에 보여준다. 1. Web Js 코드(일부) socket.on('chatList', (data) => { chatList = da..

PostgreSQL - 현재 시퀀스 값 변경

현재 생성된 시퀀스의 값을 변경하는 쿼리는 2가지 방식이 있다. 1. ALTER문 이용 ALTER SEQUENCE 시퀀스명 restart with 시퀀스값; 2. SELECT문 이용 select setval('시퀀스명', 시퀀스값); // default: true, 지정한 시퀀스 다음 값부터 실행 select setval('시퀀스명', 시퀀스값, false); // 지정한 시퀀스값부터 실행 그 외에 시퀀스와 관련된 SQL문을 아래에 정리했다. 3. 시퀀스 생성 CREATE SEQUENCE 시퀀스명 4. 현재 시퀀스값 조회 SELECT currval('시퀀스명') 혹은 SELECT last_value FROM 시퀀스명 5. 다음 시퀀스값 조회 SELECT nextval('시퀀스명')

Backend/Database 2021.05.03

jQuery - 동적 생성된 객체 클릭 이벤트 구현

보통 .click()으로 많이 코드를 짜는데, 자바스크립트로 동적 생성된 객체에는 저게 안먹힌다. 아래 코드처럼 수정해야 코드가 먹힌다. $(".dj-tok .mem-list > li").click(function() { $(".mem-list > li").removeClass("active"); $(this).addClass("active"); }) ↓ 수정 $(document).on("click", ".dj-tok .mem-list > li", function() { $(".mem-list > li").removeClass("active"); $(this).addClass("active"); })

Language/Javascript 2021.04.28

Socket.io를 이용한 실시간 채팅 구현 - 1. 환경설정

회사 업무를 하면서 실시간 채팅 기능을 구현할 기회가 생겼다. 이사님이 솔루션 사서 개발하라고 하셨지만 예전부터 소켓 통신 관련하여 공부도 해보고 싶었던 참이고, 회삿돈이 아깝기도 해서 구글링의 도움을 받아 기능을 만들고자 한다! 준비 node.js 설치 IDE 설치(VSCode) npm 설치 순서 1. 프로젝트 폴더 생성 후 npm init 명령어를 이용하여 초기 설정 2. npm install 명령어를 이용하여 express, socket.io 라이브러리 설치 npm install express --save npm install socket.io --save npm install cors --save 3. app.js 파일 생성 후 코드 작성 const express = require('express..

취준 1: 토스 레벨 5 이상 취득

더 이상 미룰 수 없다. 영어 점수 취득! 17년도에 처음으로 본 토익에서 쓰디 쓴 좌절을 맛 본 이후로 난 학교를 졸업할 때까지 영어점수를 만들지 못했다. 이러면 평생 중소기업을 벗어나지 못한다궁! 엣큥! 둉이쿤! 대학교 5년 간 미뤄왔던 블로그를 오늘 개설한 만큼 4년 간 미뤄 온 토스 준비를 드디어 하려고 한다. 목표는 자취방 이사 전까지 토스 따기! 결심이 흐트러지지 않게 미리 카드를 긁어놓자. 김미정! 명심해! 너의 21년도 목표는 반지하 탈출이 아니라 선도 탈출이라는 것을!

기타/자격증 2021.04.27