본문 바로가기

전체 글

(90)

웹에서 즐기는 보드게임 만들기 서론개발 소식, 커뮤니티를 보다 보면 재미있는 기술 스택들이 많이 보이는데 이를 적용할 기회가 적었습니다. 프로덕션 레벨에서는 맘대로 기술 스택을 바꾸거나 적용하기가 어려웠고 그렇다고 이를 시험해 볼 수 있는 장기적인 사이드 프로젝트도 없었습니다. 무언가 내 맘대로 할 수 있는 테스트베드가 필요했습니다. 마블(Marble)은 웹 기반으로 진행되는 도시건설 보드게임(랜드마크 건설!)입니다. 프로젝트 첫 번째 목표는 '게임이 굴러가게 만들자'가 최우선이고 두 번째는 쿠버네티스, MSA, 이벤트 기반 아키텍처 등 진짜 관심 있는 개발론을 적용시켜 보는 게 목표입니다.⚙️ 기반 기술스택 정하기 프론트엔드는 React, 백엔드는 NestJS를 사용해서 만들었습니다.또한 프론트엔드 스타일링 도구로 tailwind..

댓글 작성 안내 안녕하세요. 현재 하늘빛의 다채로운 이야기는 티스토리 기본 댓글 시스템을 사용하지 않고 GitHub을 사용하여 제공하고 있습니다. 기존 티스토리 시스템을 이용해 작성한 댓글이 있는 경우 본문에 읽을 수만 있도록 표시하고 있으며 신규 작성은 불가합니다.(최근 게시글은 댓글 작성을 막아뒀기 때문에 상관없으나 오래된 글은 티스토리 앱에서 작성이 가능한 경우가 있습니다.) 댓글 작성이 필요하시면 GitHub 로그인 후 작성이 가능합니다. (Markdown 문법을 지원합니다.) 익명 댓글이 필요하시면 combbm [at] gmail [dot] com 으로 메일 부탁드립니다.다만, 질문의 경우 이 블로그를 방문하는 모두가 볼 수 있도록 가급적 공개 댓글로 달아주시면 감사하겠습니다 😊

NextJS와 Supabase로 포트폴리오 만들어보기 시작하기 전에,해당 프로젝트 이야기는 처음 개발 시작한 2021년부터 현재(2024년)의 이야기를 담고 있습니다.✏️ 서론아마도 3년 전쯤 '그래도 개발자인데 포트폴리오 웹사이트가 있어야 되지 않을까'라는 생각에 NextJS로 포트폴리오를 만들었습니다. 기능 추가나 유지보수는 한 적이 많지만 디자인, 레이아웃을 바꾼 적은 없기 때문에 이번 기회에 사이트 디자인도 만져주고 소소한 기능들을 추가해 봤습니다. 사실 개발자라고 해서 꼭 웹 형태로 된 이력서, 포트폴리오가 필요한 건 아니라고 생각합니다. 오히려 pdf와 같은 오리지널 양식이 더 나은 경우도 많았고요. 그래도 이와 관계없이 개발자인데 보여주기용이라도 하나 있으면 괜찮을 거 같아 시작한 프로젝트입니다.🖥️ 프로젝트 시작프로젝트 시작은 2021년, ..

시놀로지 NAS를 멋지게 모니터링 해보기 (제목은 뭔가 거창하게 썼긴 하지만)이번 글에서는 오픈소스 프로젝트인 dashdot을 사용해서 Synology(시놀로지) NAS를 모니터링해보겠습니다. 시놀로지에서는 Active Insight라는 모니터링 서비스를 이미 제공합니다.기본적으로 서버 3대까지 무료로 사용할 수 있으며, 여러 대의 시놀리지를 쓸 경우 한 번에 모니터링을 할 수 있는 기능을 제공합니다. 당연히 좋은 서비스이긴 한데, 일부 커뮤니티에서 Active Insight를 활성화하면 하드디스크 읽기 작업이 늘어난다는 이야기가 있습니다. 이 때문에 자연스럽게 하드디스크 소음이 늘어나고요. 시놀로지를 헤비하게 쓴다면 Acitve Insight를 고려해 볼 만 하지만 저는 그렇지 않기 때문에 가벼운 모니터링 서비스를 대신하여 올려보겠습니다.⚙..

code-server로 어디서든 개발하기 서론태블릿(갤럭시 탭, 아이패드 등)에서는 코딩할 수 있는 환경이 데스크톱과 비교하면 열악합니다.갤럭시 탭의 경우 태블릿 자체에서 리눅스를 띄울 수는 있다고 하는데 아이패드를 사용하고 있는 저는 코딩을 할 수 있는 방법이 없었습니다. code-server(코드서버)를 사용하면 웹 환경에서 vscode를 사용할 수 있는데 이를 사용하여 태블릿에서 코딩하는 방법을 소개해보겠습니다.✏️ TL;DRDocker를 기반으로 code-server를 설치합니다.PWA로 아이패드에 code-server를 설치하면 단축키를 사용할 수 있습니다.Docker mods를 사용해 Docker 기반의 code-server에서도 JDK, Node 등의 패키지를 설치할 수 있습니다.🖥️ code-server 설치하기해당 글에서는 c..

24년까지 하루가 남았습니다 : 2023년 회고록 어느덧 24년이 하루 남았습니다. 매번 느끼지만 23년 역시 빠르게 지나간 것 같습니다. 글을 쓰고 있는 지금은 30일인데, 글이 올라가는 시점은 31일이 되지 않을까 싶어서 제목을 저렇게 정해봤습니다. 🖥️ 고등학교 그리고 대학교에서도 이어집니다 2년 전, 고등학교에서 학과 인트라넷을 만드는 프로젝트를 진행했습니다. 학교와 함께 클라우드 서버와 도메인을 지원받고 정식 동아리로 발전시켜 서비스 오픈까지 했었습니다. 이번에는 대학교입니다. IT동아리에 들어가서 백엔드 파트로 프로젝트를 진행하게 됐습니다. 어쩌다 보니 다른 과를 지원하게 됐는데, 학과 졸업인증 관리 서비스입니다. 기존 졸업인증(졸업 신청 및 심사)은 엑셀과 수기로 관리하고 있고 자료가 파편화돼 있는데 이를 합치고 웹으로 관리할 수 있게 만드..

졸업 그리고 입학 : 2021~2022 회고록 졸업 그리고 입학 매년 쓰던 글인 회고록을 작년에는 건너뛰었습니다.(큰 이유는 없고 그냥 깜빡했습니다) 2021년은 짧게 다루고 2022년으로 넘어가 보겠습니다. 🐂2021년부터 출발해 봅시다 🖥️수정과와 수프트를 되돌아보면... 2021년, 고등학교를 다니면서 수프트(수프트 개발기)와 수정과(수정과 개발기)라는 이름으로 실서비스 프로젝트를 했었습니다. 각각 CBT(문제은행) 서비스와 교내 인트라넷입니다. 수프트는 시험기간에 공부하려고 간단하게 만든 프로젝트였습니다. 졸업하면서 서서히 잊혔고 지금은 제 테스트베드로 사용하고 있습니다. 수정과는 교내 인트라넷으로 급식 확인, 우산 대여, 고교학점제 수강신청 등의 기능을 제공합니다. 첫번째 목표가 학교의 대부분 사람들이 서비스를 이용하게 하는 것이고, 두번째..

pfSense 와 함께 인터넷 사용하기 📡 pfSense 알아보기 pfSense는 오픈소스 방화벽 소프트웨어입니다. 데스크톱이 될 수도 있고, 서버 또는 VM 등 컴퓨터에 설치해서 사용하는 방화벽입니다. pfSense의 모든 기능을 쓰지는 않지만.. DHCP 서버, NAT 등 가정에서 쓰는 공유기 이상의 기능을 지원합니다. 제 경우 미니 PC를 구입하여(알리익스프레스에서 구매) pfSense를 올린 후 사용하고 있습니다. [pfSense는 공식 문서]가 존재하고, 영어만 가능하다면 최고의 설명서입니다. 다만, 한국어 자료는 부족했고 2021년 5월부터 지금까지 겪었던 시행착오를 정리하고자 합니다. 보안 또는 네트워크와 관련된 전문적 지식을 가지고 쓰는 글이 아닙니다. 더 나은 방법이나 잘못된 지식이 있다면 댓글로 알려주세요! 🤣 시작하기 전에..

랜덤 한글 단어 만들기 서론 학교에서 진행 중인 프로젝트 '주다'는 온·오프라인 학습에서 쓸 수 있는 보조 플랫폼입니다. 방에 입장하기 위한 초대 코드와 출석체크에 필요한 출석 코드를 만들어야 하는데 흔히 쓰이는 알파벳 코드가 아닌 한글 단어로 이루어진 코드를 만들어 보기로 했습니다. 이런 느낌으로요! 🅰 알파벳은 알겠는데... 한글? 알파벳으로만 이루어진 코드는 예전에도 해봤었고, 구글링을 통해 쉽게 자료를 얻을 수 있었습니다. 알파벳을 담은(A-Z, a-z) 문자열 변수를 만들어주고 랜덤 한 인덱스를 뽑은 뒤 이에 매칭 되는 알파벳을 골라주면 됩니다. const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; const generateCode = (..

학교 인트라넷 프로젝트: 수정과 개발기 갑자기 인트라넷? 각 학교마다 여러 가지 행사들이 있습니다. 저희 학교의 경우 '우산대여제'라는 사업(행사)이 있습니다. 아래와 같은 프로세스로 굴러가는데, 비가 오거나 눈이 오는 등으로 우산이 필요할 때 시행합니다. 학생회에게 보증금을 2천원을 먼저 주고 우산을 받습니다. 우산을 반납하면 보증금을 돌려받습니다. 우산 반납이 연체되면 보증금을 돌려받을 수 없습니다. 또한 3일 이내에 반납이 이루어지지 않으면 블랙리스트에 등록되며 영구적으로 이용할 수 없습니다. 간단하지만 사람이 많다면 복잡한 과정이라고 생각합니다. 우산 대여자가 많아지면 학생회의 일이 커지게 되는데 이를 자동화할 수 없을까? 라는 생각에서 출발했습니다. 코로나19로 인해 원격 수업이 잦아지면서 구글 클래스룸, Zoom 등 수업 링크를 기..

벌써 2021년? 2020년은 2019년보다 더 빠르게 지나간 것 같습니다. 많은 일들이 있었지만 가장 생산력 있는 해였습니다. 아무리 블로그 글은 안 올려도 회고글은 항상 올렸기에 2020년에도 한 해를 회고해보려고 합니다. SW마에스트로 합격 SW마에스트로가 뭔지 알고만 있었는데, 주변 지인을 통해 11기 모집한다는 소식을 듣고 지원해봤습니다. 매우 감사하게도 11기에 최종 합격했습니다! 🎉 SW마에스트로는 오프라인 행사로 이루어져 있었으나... 코로나로 인해 대부분 행사가 온라인으로 바뀌었고 프로젝트 또한 온라인으로 진행하게 되었습니다. 사람들은 많이 못 만난 건 아쉽지만 고등학생이기 때문에 편하게 참여하기는 했습니다 😀 코딩 테스트 또한 오프라인 테스트에서 온라인 코테 2번으로 변경되었습니다. 10기에서는 모든 문..

GitHub Actions와 SFTP로 React 프로젝트 배포하기 예전에는 Jenkins, Travis CI와 같은 써드파티를 이용하여 배포를 했다면 요즘에는 GitHub Actions으로 이전보다 쉽게 배포를 할 수 있게 되었습니다. 개인적으로 React 프로젝트를 배포하기 가장 쉬운 방법은 아마존 S3라고 생각합니다 S3를 썼으면 좋겠지만.. 여러 사정으로 인해 진행하는 프로젝트에서는 S3를 이용할 수가 없었기 때문에 SFTP를 이용해서 React 프로젝트를 배포해보겠습니다. Workflow 작성하기 SFTP를 쓸 수 있는 Action입니다. https://github.com/SamKirkland/FTP-Deploy-Action SamKirkland/FTP-Deploy-Action Deploys a GitHub project to a FTP server using ..

Git 사용시 한글 깨지는 오류 해결하기 Git을 이용해 commit을 확인하려고 하니까 한글이 깨지는 이슈가 발생하였습니다. (똑같지는 않았는데 비슷한 문구였다) 혹시 clone을 잘못한 게 아닌가 싶어 다시 해봤고 재부팅도 해봤으나 결국은 인코딩 문제였습니다. 해결 방법은 두 가지인데, 1. Git Bash를 사용하자 2. 환경변수로 인코딩을 바꿔주자 입니다. 1번은 금방 해결되고 여기서는 2번을 다뤄보겠습니다. 환경변수 LC_ALL 을(를) 추가해주고 값에 ko_KR.UTF-8 을(를) 넣어주면 됩니다. 이후 저장해주고 터미널을 재시작해주면 해결됩니다.

공적마스크 재고 & 온라인 개학 시간표 알림 챗봇 개발기 공적 마스크 재고 조회 한참 공적 마스크 구매가 유행일 때 마스크 재고 조회 API가 등장하였고 저희 반 디스코드 방에 있던 챗봇에 기능을 추가하게 되었습니다. 해당 봇은 원래 시간표, 급식 정보를 알려주는 봇입니다. 주의! 아래 기능들은 하루 만에 개발을 끝낸 거라 코드가 많이 더럽습니다. 😂 처음에는 React를 이용하여 웹으로 개발하려 했으나 복잡하기도 하고 시간문제가 있어 챗봇에 넣게 되었습니다. 웹 환경에서는 사용자의 위치를 가져올 수 있기 때문에 해당 기준으로 마스크 조회가 가능하지만, 디스코드에서는 현재 위치를 조회하기 어렵습니다. (개발 당시에는 방법을 몰랐는 데 있을지도 모른다) 끝내 결정한 방법은 주소를 받으면 주소 주변의 마스크 판매점을 알려주기로 했습니다. 주소 기준 판매점 조회는 ..

백준 #6581 HTML 오로지 , 태그와 그 외 평문으로만 주어지는 HTML 문서가 있을 때, 그 결과를 보여주는 코드를 작성하시오. 한 줄에는 80자보다 많은 글자가 출력되어서는 안 된다. https://www.acmicpc.net/problem/6581 정답 뜨자마자 정리하는 따끈한 글! 해당 문제는 입력으로 HTML 코드가 들어오면 파싱해서 결과를 출력해주면 되는 문제이다. 단, 조건이 있는데 한 줄에는 80자 이상을 출력할 수 없고 80줄이 넘으면 줄바꿈 후 출력한다. 태그가 주어지면 줄바꿈을 한다. 태그가 주어지면 줄바꿈 후 라면 - 문자 80개를 출력하고 아니라면 줄바꿈 후 출력한다. 위 조건에 맞게 구현을 해주면 된다. 처음 접근 방식은 vector에 \n (newline) 기호를 넣어주고 출력해보면 되지 않을까 ..

이전 1 2 3 4 ··· 6 다음

티스토리툴바