티스토리 블로그의 최대 장점은 내가 마음대로 스킨을 꾸밀 수 있고 원하는 기능적인 부분을 자바스크립트로 구현 가능하다는 점이다. 무료로 제공되는 티스토리 스킨도 있고 여러 사람들이 제작하고 무료로 배포하는 스킨들도 많아 선택의 폭이 넓다. 처음에는 Odyssey, Apost, 고래 스킨 등 여기저기 난민처럼 옮겨다니면서 나름 커스텀으로 만들어서 사용했지만 이 참에 그냥 내가 하나 만들어 보기로 했다. 우선 내가 만들고 싶은 스킨의 느낌은 한 문장으로 말할 수 있다. Simple is Best! 스킨 기획 정말 심플하고 단순한 스킨이 필요했다. 광고로 도배되어 있는 블로그가 아닌 정말 컨텐츠에 중심이 쏠리도록 레이아웃을 구성하려고 했다. 블로그 사이드바는 좌측 아이콘 형태로 기본 닫혀있게 배치해 카테고리나..
2021.12.12
마인크래프트 1.17.1 서버 만들기 오늘은 AWS ec2를 사용해 마인크래프트 서버를 열어보도록 하겠습니다. 저는 마인크래프트 게임을 해본 적이 없었는데, 16년도쯤, 군대에 입대하기 전 동생에게 사주었던 마인크래프트 계정이 생각나 한 번 플레이를 해보았습니다. 그 이후 동생과 같이 즐기고 싶은 마음에 Realm이랑 하마치 등 알아보았지만 네트워크 속도나 아까운 비용 문제로 그냥 서버를 하나 만들기로 했습니다. 클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services 개발자, 데이터 사이언티스트, 솔루션스 아키텍트 또는 AWS에서 구축하는 방법을 배우는 데 관심이 있는 모든 사용자용 무료 온라인 교육 AWS 전문가가 구축한 500개 이상의 무료 디지털 교육 과정 aws.amazo..
2021.10.02 4
자바스크립트 캔버스 이미지 자바스크립트를 사용해 태그에 선택한 이미지를 넣는 방법입니다. HTML에 이미지를 선택할 수 있는 file 타입의 태그와 태그를 넣을 태그만 작성해두겠습니다. HTML JS const input = document.querySelector('#targetImg'); const res = document.querySelector(".res"); input.addEventListener('change', (e)=> { const file = e.target.files[0]; const canvas = document.createElement('canvas'); //캔버스 생성 const ctx = canvas.getContext('2d'); //캔버스 그리기 const reader..
2021.09.18 2
brower-image-compression 자바스크립트를 사용한 이미지 압축 라이브러리로 brower-image-compression을 사용하면 손쉽게 이미지의 파일 사이즈를 효과적으로 압축할 수 있다. 요즘은 스마트폰 카메라 성능이 날이 갈수록 좋아져 사진 한 장을 찍어도 10MB가 넘어버린다. 사진을 서버로 전송할 때, 서버의 부담을 줄이기 위해서 클라이언트 단에서 사진을 압축해 전송하면 서버의 부담을 크게 줄일 수 있다. browser-image-compression Compress images in the browser www.npmjs.com Install NPM > npm i browser-image-compression CDN Usage // you should provide one of ..
2021.09.16
자바스크립트 압축 파일 생성하기 자바스크립트를 사용해 브라우저나 Nodejs에서 ZIP 압축파일을 만드는 방법이다. 대표적으로 JSZIP 라이브러리를 사용해서 만들 수 있고 다운로드 기능은 file-saver 라이브러리를 사용해도 되고 간단하게 a태그를 만들어서 사용해도 된다. 라이브러리 설치 > npm i jszip file-saver jszip Create, read and edit .zip files with JavaScript http://stuartk.com/jszip www.npmjs.com file-saver An HTML5 saveAs() FileSaver implementation www.npmjs.com import JSZip from "jszip" import FileSaver fro..
2021.09.13
자바스크립트 파일 용량 표현하기 function getfileSize(size) { var s = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; var e = Math.floor(Math.log(size) / Math.log(1024)); return (x / Math.pow(1024, e)).toFixed(2) + " " + s[e]; };
2021.09.13
Next.js 프로젝트에서 Styled-Components를 사용해 CSS를 적용하면 로컬에서는 스타일에 전혀 문제가 없어 보였다. 로딩 시 워낙 빠르기 때문인 듯하다. 하지만 Vercel을 통해 배포 후 페이지에 접속해보면 첫 화면에 잠깐 CSS가 적용되지 HTML 요소들이 보이고 화면이 깜빡이고 나서 적용한 CSS 스타일로 돌아간다. 이 문제는 _documnets.js 파일에 styled-components SSR 설정을 안 해두면 styled-components로 작성된 CSS 코드는 SSR 적용이 안되에 HTML 로딩이 끝나고 JS 로딩이 완료될 때, 스타일이 적용되기 때문이다. 작성한 CSS 코드까지 SSR 적용을 하는 방법은 아래와 같다. > npm i -D babel-plugin-styled..
2021.09.10
가로 스크롤 구현하기 모바일 환경에서 가로 형태의 스크롤을 구현해야 했는데, 보통 세로 방향의 스크롤이 기본적이기 때문에 가로 형태의 스크롤을 구현할 때는 overflow-x 속성을 auto로 만 적용하면 될 줄 알았지만 비교적 잘 안됐다. 아래의 이미지처럼 카테고리를 나열했을 때, 데스크톱에서는 width의 길이가 충분하기 때문에 별다른 조치가 필요 없지만 모바일의 경우 width 길이가 좁기 때문에 높이를 늘리지 않고 가로 형태의 스크롤바의 행태로 구현해야 했다. 세로 스크롤은 간단하게 HTML 부모 태그에 overflow 속성에서 auto나 hidden을 적용하면 간단하게 세로 스크롤을 구현할 수 있다. 하지만 가로 스크롤의 경우 하나의 CSS 속성이 더 필요했다. 가로 스크롤 예시 See the ..
2021.09.05
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev