Project 8

[티스토리 블로그 테마] - 2. 티스토리 본문에 목차 추가

오늘은 티스토리 블로그 글 상세 페이지에 목차를 추가해보자. 기본 제공 티스토리 테마는 보다시피 본문 목차가 없다. 구글링을 해보니 jQuery의 toc 라이브러리로 간단하게 목차를 생성하는 방법도 있었지만, 직접 자바스크립트로 페이지를 파싱해서 만들어 보기로 했다. 목차 레이아웃 구성 코드를 작성하기에 앞서, 목차 컨텐츠 및 레이아웃을 구성해 보자. 목차는 본문시작 지점 가운데에 위치하며, 사용자가 스크롤을 내려서 목차가 보이지 않는 경우에는 사용자 화면의 오른쪽 영역에 미니 목차가 표출되도록 구현할 것이다. 모바일 기기로 접속한 사용자의 경우에는 목차를 표출할 충분한 공간이 없으므로, 목차 열고 닫기 버튼을 우측에 대신 표출하기로 했다. 또한 티스토리 에디터에서는 제목 1, 2, 3과 본문 1, 2,..

[티스토리 블로그 테마] - 1. 코드 블록 디자인을 mac 코드 스타일로 바꾸기

글을 읽기 전 미리 보는 완성본은 다음과 같다. 어떻게 만들었고 적용했는지 궁금하신 분들은 아래로 스크롤! See the Pen tistory code block by MiJeong Kim (@sap03110) on CodePen. 발단 여느 날과 다름없이 회사 맥북으로 공부하면서 블로그 글을 작성하고 있는 도중, 갑자기 내 티스토리 블로그 코드 블록 디자인이 무척이나 거슬리기 시작했다. 구글링을 하다 보면 여러 기술 블로그들을 엿보게 되는데, 대부분의 블로거 분들이 기본 코드 블록을 사용하기 보다는 디자인을 커스텀해서 사용하고 있는 것이었다. 난 참고로 기본 블로그 테마를 사용한다. 그렇다. 디자인이 민둥하다. 그 중에서도 이쁘다고 느꼈던 코드 블록 디자인은 carbon이라는 코드 이미지화 사이트에서 ..

Kakao Map API - 카카오맵 사용법

어쩌다 보니 기회가 생겨서 드디어 생애 첫 지도 기능 개발을 하게 되었다. GIS 개발이라기엔 넘나 기초적인 기능이지만... 난 카카오가 좋으니까 카카오 지도를 사용하여 개발을 진행했다. 이건 내가 까먹을까봐 정리하는 카카오 지도 연동 및 사용법이다. Step 1 API 키 발급 및 도메인 추가 먼저, kakao developers console에 접속하여 로그인 후 내 애플리케이션 메뉴로 들어가서 애플리케이션 추가를 해야 한다. 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 추가가 완료되면 내가 추가한 어플리케이션을 클릭하여 요약 정보에 들어간다. 요약 정보 메인 화면에 앱 키가 있는데, 여기서 웹 개발을 할 것이라면 JavaScript 키를 사용하면 된다. (안드..

Geoserver - 1. ubuntu 환경에서 geoserver 설치 및 환경설정

웹 지도 서비스를 만들기 위해 먼저 geoserver 설치를 진행하려고 한다. geoserver란? Java 기반 오픈 GIS 소프트웨어로, 지리공간 데이터를 공유하고 편집할 수 있는 데이터 관리 웹 인터페이스를 제공 다양한 공간정보 데이터(point, line, polygon)를 서비스할 수 있음 geoserver에서 *.shp 파일이나 쿼리를 이용하여 레이어를 작성하면, web 어플리케이션에서 openlayers를 사용하여 geoserver와 통신하여 웹 브라우저에서 지도 데이터를 표출할 수 있다. 작성된 레이어 데이터는 DB에 저장되는데, 주로 Postgresql이나 Tibero를 사용한다. 아래에 DB, openlayers, geoserver의 각 역할과 관계를 이미지로 정리했다. geoserve..

ElasticSearch - Text fields are not optimised for operations that require per-document field data like aggregations and sorting, so these operations are disabled by default. Please use a keyword field instead 에러 해결

어느 날 이클립스로 검색엔진 관리자 기능을 개발하다가 다음과 같은 오류에 직면했다. 오류 전문은 다음과 같다. 간단히 해석을 해보면 text 필드는 sorting이 안되므로 keyword 필드를 사용하라는 것 같다. Text fields are not optimised for operations that require per-document field data like aggregations and sorting, so these operations are disabled by default. Please use a keyword field instead. 해결법은 다음과 같다. 1. 해당 필드의 type을 keyword로 변경 이미 매핑된 필드의 type은 변경이 불가하다. 따라서 인덱스를 삭제하고 다..

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

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