개발 창고

[티스토리 스킨 만들기] 2. 개발 환경 세팅하기(Typescript, TailwindCSS, Webpack)

시작하며 티스토리 스킨 적용에 필요한 파일에는 index.xml, skin.html, style.css, script.js가 있습니다. 이 파일들을 빌드하기 위해 개발 환경을 세팅해보겠습니다. 이 글은 타입스크립트와 tailwind css의 사용 설정과 webpack을 이용해 이들을 한번에 빌드하는 과정에 대해서 작성하였습니다. 티스토리 스킨 개발을 위한 파일 디렉토리는 다음과 같습니다. tistory_skin |- index.xml |- skin.html |- style.css |- /images |- script.js Typescript로 개발하기 우선 개발을 진행할 src폴더를 만들어 script.ts파일을 생성합니다. 이 파일에서 스킨에 적용할(사이드바 동작, TOC 등) 기능을 개발하면 됩니다...

[티스토리 스킨 만들기] 1. 구조 파악하기

개요 어느날 내 티스토리에 적용할 블로그 테마를 찾는 중에 마음에 드는 테마가 없어서 내 입맛대로 스킨을 만들어 보기로 했다. 하지만 어떻게 만들어야 할 지 몰라서 찾아보는데 시간 투자를 많이했는데, 처음 개발하는 사람들을 위한 정리된 가이드 글이 있으면 좋겠다 싶어서 글을 작성한다. 스킨 제작 가이드 스킨 개발을 위해서 티스토리에서는 스킨 제작 가이드를 제공한다. 하지만 제작 가이드가 친절하게 설명되어있지 않아서 앞으로 해당 문서를 토대로 최대한 이해하기 쉽게 설명하도록 하겠다. 스킨을 적용하기 위해 필요한 파일에는 skin.html, index.xml, style.css와 추가적으로 js, image 파일이 있다. 스킨의 메인 템플릿 파일인 skin.html과 스킨 정보 파일인 index.xml에 대..

개인 프로젝트 - 동네마켓

프로젝트 시작 동기 프론트 개발을 공부하면서 개인적으로 토이 프로젝트를 진행하고 싶었는데, 한날 당근마켓 채용공고를 보다 문득 나도 당근마켓과 비슷한 기능을 조금 쉽게 다듬으면 이정도는 나 혼자서도 개발할 수 있지 않을까? 라는 생각에 프로젝트를 시작했다. 사용 기술 스택 선정 이 프로젝트는 어짜피 혼자하는 프로젝트니까 내가 지금껏 사용해보지 않은 기술을 사용하여 경험을 쌓자! 는 목적으로 진행했다. 따라서 언어를 제외하고는 거의 처음 사용하고, 사용해보고싶었는데 못했던 스택 위주로 선정하였다. 예전부터 Next.js를 한번 사용해보고 싶었기 때문에 Next.js와 편리한 Tailwind css를 사용해보기로 했다. 그리고 백엔드는 이전에 사용해본 적 있는 파이어베이스를 이용하여 구축했다. 기능명세서와 ..