🏃구르는 개발자의 포트폴리오

풀스택 개발자 김민섭 입니다.

주니어 개발자는 한가지 분야를 공부하는게 좋다고 들었지만, 어느덧 풀스택 공부를 한지 1년이 되었습니다.

아직 배워야할 점이 많지만, 저만의 플랫폼을 개발한다는 꿈을 안고 나아가고 있습니다.

기술

프로젝트

Alleys

open_in_new

24.06 ~ 진행중

Typescript

React

RemixJS

CSS

PostgreSQL

Monorepo

국내 전시회를 아카이브하고 리뷰를 공유하는 플랫폼입니다.

React에 대해 배워가기 시작할 때, 완성도 높은 프로젝트를 경험해보는 것을 목표로 시작했습니다.

노력한 부분

스크래핑

클라우드 환경에서 미술관의 웹페이지를 탐색하고, 정보를 스크레이프하는 프로그램을 작성했습니다.

동시에 생성할 수 있는 브라우저 인스턴스 개수에 제한이 있기 때문에 Message Queue를 활용했습니다.

전시회 종류가 많아야 하므로 확장성을 위해 각 사이트의 스크레이프 코드를 모듈화 했습니다.

상세 검색

대부분의 웹사이트에서 상세 검색을 할 때, URL에 반영되지 않아 불편한 경험이 많았습니다. 이런 점을 해결하기 위해 클라이언트가 직접 API로 요청을 하게 만들고, URL은 상세 검색 상태만 반영하도록 만들었습니다.

실수로 다른 페이지로 이동해도 검색 필터 정보가 남아있도록 상태를 Local Storage와 동기화하는 Hook를 작성했습니다. 유저가 URL을 공유하는 상황에서는 URL의 정보를 우선하도록 했습니다.

적용 기술

Monorepo 필요한 프로그램이 너무 많아서 4개월차에 적용했습니다. 개발 경험이 상당히 개선됐습니다.

RemixJS 처음 적용할 땐 Cloudflare 배포에 가장 적합하다는 이유였습니다. 하지만 써보고 나니 NextJS보다 폴더 구조 관리가 쉬웠고, 성능도 더 좋았습니다.

놓친 부분

디자인 시스템의 부재로 인해 컴포넌트를 재사용하거나 새로 만들기가 어려웠습니다. CSS와 관련된 기술을 공부하면서 디자인 토큰/시스템 구축을 시도하고 있습니다.

Drin.cc

open_in_new

24.04 1개월

HTML

AstroJS

TailwindCSS

DaisyUI

Python

URL Shortener 툴입니다.

웹 기본 지식을 배우기 위해 구현한 간단한 웹페이지와 API 서버입니다.

기술적으로 특별한 점은 없습니다.

하지만 특별한 기능을 추가해서 재미있는 URL Shortener를 구현했습니다.

미리보기

미리보기 옵션을 선택하면 나중에 이 URL을 사용할 때 리디렉션하기 전에 링크 값을 확인할 수 있습니다.

발표할 때와 같은 상황에서 페이지가 사람들에게 보여지기 전에, 한번 더 확인할 수 있습니다.

URL 키 생성 방법

세 가지 옵션이 있습니다.

short 대문자로 된 최소 4글자의 키를 생성합니다. 예: https://drin.cc/OXWO

micro 대문자, 소문자, 숫자로 된 최소 3글자의 키를 생성합니다. 예: https://drin.cc/eyk

words 최소 2개의 영어단어로 키를 생성합니다. 예: https://drin.cc/strawminute

혹시 어떻게 영어 단어 사전을 구현했는지 궁금하지 않으신가요?

처음에는 Github에서 English Words를 검색해서 나오는 오픈 소스를 쓰려고 했습니다.

그런데 이런 자료는 사용 빈도가 높은 기준으로 만들어졌기 때문에 안전하지 않았습니다. 비속어가 자주 보였고, 원어민만 아는 의미불명의 비속어도 있을지도 몰랐습니다.

그래서 저는 직접 영어 단어 사전을 구현하기로 했습니다. 어떤 영어 텍스트가 비속어 없는 예쁜 단어만 갖고 있을까요? 바로 동화였습니다.

그리고 파이썬 spaCy NLP 모델을 사용해서 형용사와 명사를 추출했습니다. 또한 사용하기 적당한 3~6자 길이의 단어만 골랐습니다.

동화 4권을 합치니 단어 2000개를 확보할 수 있었습니다. 단어 두 개면 2M, 세 개면 2000M가지 경우의 수가 나오므로 충분했습니다.