개발/개발 후일담 (7) 썸네일형 리스트형 웹에서 즐기는 보드게임 만들기 서론개발 소식, 커뮤니티를 보다 보면 재미있는 기술 스택들이 많이 보이는데 이를 적용할 기회가 적었습니다. 프로덕션 레벨에서는 맘대로 기술 스택을 바꾸거나 적용하기가 어려웠고 그렇다고 이를 시험해 볼 수 있는 장기적인 사이드 프로젝트도 없었습니다. 무언가 내 맘대로 할 수 있는 테스트베드가 필요했습니다. 마블(Marble)은 웹 기반으로 진행되는 도시건설 보드게임(랜드마크 건설!)입니다. 프로젝트 첫 번째 목표는 '게임이 굴러가게 만들자'가 최우선이고 두 번째는 쿠버네티스, MSA, 이벤트 기반 아키텍처 등 진짜 관심 있는 개발론을 적용시켜 보는 게 목표입니다.⚙️ 기반 기술스택 정하기 프론트엔드는 React, 백엔드는 NestJS를 사용해서 만들었습니다.또한 프론트엔드 스타일링 도구로 tailwind.. NextJS와 Supabase로 포트폴리오 만들어보기 시작하기 전에,해당 프로젝트 이야기는 처음 개발 시작한 2021년부터 현재(2024년)의 이야기를 담고 있습니다.✏️ 서론아마도 3년 전쯤 '그래도 개발자인데 포트폴리오 웹사이트가 있어야 되지 않을까'라는 생각에 NextJS로 포트폴리오를 만들었습니다. 기능 추가나 유지보수는 한 적이 많지만 디자인, 레이아웃을 바꾼 적은 없기 때문에 이번 기회에 사이트 디자인도 만져주고 소소한 기능들을 추가해 봤습니다. 사실 개발자라고 해서 꼭 웹 형태로 된 이력서, 포트폴리오가 필요한 건 아니라고 생각합니다. 오히려 pdf와 같은 오리지널 양식이 더 나은 경우도 많았고요. 그래도 이와 관계없이 개발자인데 보여주기용이라도 하나 있으면 괜찮을 거 같아 시작한 프로젝트입니다.🖥️ 프로젝트 시작프로젝트 시작은 2021년, .. 랜덤 한글 단어 만들기 서론 학교에서 진행 중인 프로젝트 '주다'는 온·오프라인 학습에서 쓸 수 있는 보조 플랫폼입니다. 방에 입장하기 위한 초대 코드와 출석체크에 필요한 출석 코드를 만들어야 하는데 흔히 쓰이는 알파벳 코드가 아닌 한글 단어로 이루어진 코드를 만들어 보기로 했습니다. 이런 느낌으로요! 🅰 알파벳은 알겠는데... 한글? 알파벳으로만 이루어진 코드는 예전에도 해봤었고, 구글링을 통해 쉽게 자료를 얻을 수 있었습니다. 알파벳을 담은(A-Z, a-z) 문자열 변수를 만들어주고 랜덤 한 인덱스를 뽑은 뒤 이에 매칭 되는 알파벳을 골라주면 됩니다. const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; const generateCode = (.. 학교 인트라넷 프로젝트: 수정과 개발기 갑자기 인트라넷? 각 학교마다 여러 가지 행사들이 있습니다. 저희 학교의 경우 '우산대여제'라는 사업(행사)이 있습니다. 아래와 같은 프로세스로 굴러가는데, 비가 오거나 눈이 오는 등으로 우산이 필요할 때 시행합니다. 학생회에게 보증금을 2천원을 먼저 주고 우산을 받습니다. 우산을 반납하면 보증금을 돌려받습니다. 우산 반납이 연체되면 보증금을 돌려받을 수 없습니다. 또한 3일 이내에 반납이 이루어지지 않으면 블랙리스트에 등록되며 영구적으로 이용할 수 없습니다. 간단하지만 사람이 많다면 복잡한 과정이라고 생각합니다. 우산 대여자가 많아지면 학생회의 일이 커지게 되는데 이를 자동화할 수 없을까? 라는 생각에서 출발했습니다. 코로나19로 인해 원격 수업이 잦아지면서 구글 클래스룸, Zoom 등 수업 링크를 기.. 공적마스크 재고 & 온라인 개학 시간표 알림 챗봇 개발기 공적 마스크 재고 조회 한참 공적 마스크 구매가 유행일 때 마스크 재고 조회 API가 등장하였고 저희 반 디스코드 방에 있던 챗봇에 기능을 추가하게 되었습니다. 해당 봇은 원래 시간표, 급식 정보를 알려주는 봇입니다. 주의! 아래 기능들은 하루 만에 개발을 끝낸 거라 코드가 많이 더럽습니다. 😂 처음에는 React를 이용하여 웹으로 개발하려 했으나 복잡하기도 하고 시간문제가 있어 챗봇에 넣게 되었습니다. 웹 환경에서는 사용자의 위치를 가져올 수 있기 때문에 해당 기준으로 마스크 조회가 가능하지만, 디스코드에서는 현재 위치를 조회하기 어렵습니다. (개발 당시에는 방법을 몰랐는 데 있을지도 모른다) 끝내 결정한 방법은 주소를 받으면 주소 주변의 마스크 판매점을 알려주기로 했습니다. 주소 기준 판매점 조회는 .. 교내 문제풀이 사이트 개발기 자격증 시험을 보거나 연습하기 위해 CBT(컴퓨터로 문제 푸는 거) 문제풀이 방식을 사용합니다. 학교 시험공부를 CBT로 하면 어떨까라는 생각으로 시작하였습니다. (만들어놓고 거의 안씀) (아마 시험 2주전인가 1주 전에 제작했던 걸로 기억) 소프트웨어와 관련된 학교이고 반이기 때문에 "소프트" 유사 단어인(???) "수프트"로 프로젝트 이름을 결정하였습니다. 늘 만들던 데로 Front-End는 TypeScript, React로 Back-End는 TypeScript, NodeJS로 결정했습니다. 초기 계획은 관리자가 과목별로 문제를 작성하고 일부 문제는 랜덤으로 출제되는 방식입니다. 학교에서 배우는 것중 제일 간단하고 기초적인 문제는 '2진수를 10진수로 변환하기'와 같은 진수 변환입니다. 랜덤 한 숫자.. Ask 익명질문 개발기 Typescript + Vue(Nuxt) + Firebase를 이용하여 Ask페이지를 만들어보았습니다.디자인하기 위해 Bulma.io 프레임워크를 사용했습니다. 페이지에서 질문 요청을 날리면 답변을 대기하기까지 기다리는 공간 또는 답변이 완료돼서 질문이 저장될 공간(DB)를 마련해야되는데 Firebase cloudstore 을(를) 이용하였습니다. Bulma를 이용하여 디자인을 완료하였습니다.Firebase가 server-side, client-side 둘 다 지원하는 라이브러리라서 client-side를 server-side로 쓰다보니 삽질을 많이 했었습니다. 페이지에서 질문을 요청하면 HTTP(Rest) API를 통하여 서버로 요청을 하게 만들었습니다. 메인 페이지에서 질문을 클릭하면 상세 페이지로 .. 이전 1 다음
