Algoroot's space

안녕하세요. 지난 글 「내가 선언적인 코드를 좋아하는 이유 (Feat. React) – 1」에서 저는 선언적인 코드를 작성하는 방식이 어떻게 코드 품질의 방향키가 되어 주었는지, 그리고 React 렌더링 과정에서 그 철학이 어떤 식으로 구현되는지 살짝 살펴봤습니다. 혹시 1편을 아직 못 보셨다면, 먼저 읽고 오시면 흐름이 조금 더 자연스러울 거예요. 이번 글에서는 선언적 프로그래밍과 깊이 연결된 함수형 프로그래밍(FP, Functional Programming)에 대해 이야기하려 합니다. 1편에서 설명한 것처럼 저는 선언적 프로그래밍은 "제가 알아야 하는 컨텍스트가 적어지는 코드"라고 정의했는데요, FP는 바로 이 개념을 한층 더 깊이 있게 다루는 패러다임입니다. FP를 처음 접했던 순간사실 FP를 처..

안녕하세요. 오늘은 제가 코드를 작성할 때 추구하는 프로그래밍인 선언적 프로그래밍에 대해 기술하고자 합니다. 1년 차에는 개발을 할 때 어떻게 구현할지를 고민했다면, 경험이 쌓이면서는 어떻게 짜야할지 고민을 더 많이 하게 되는 것 같습니다. 하나의 알고리즘 문제를 풀 때도 풀이 법이 수십 가지이듯, 하나의 기능 구현에도 개발자마다 중요도와 스타일에 맞게 다르게 작성됩니다. 그렇기에 "유지보수가 쉽고, 보기 좋고, 디버깅이 편한 코드"를 작성하는 건 더 이상 단순한 선택이 아닌 좋은 개발 습관이자 필요조건이라 생각합니다. 저 역시 처음엔 좋은 코드를 위해 "추상화"라는 개념부터 차근차근 익혀나갔습니다. 하지만 경험이 쌓이면서 점점 더 넓은 컨텍스트에서 코드를 바라보게 되었고, 단순한 추상화를 넘어서 코드..

안녕하세요! 지난 2월 27일, “AI로 뭘 해볼까?”라는 고민에서 출발해 자기소개 챗봇을 만들어보자! 는 다짐으로 첫 글을 남겼습니다.서비스는 한 달 후 3월 말에 완성이 되었지만, 글을 이제서야 쓰게 되었습니다. 이 글에서는 그동안 챗봇을 개발하며 겪은 기술적 고민과 구현 과정, 그리고 구조 개선의 흐름까지 정리해보려 합니다. 해당 서비스는 GPT-4o-mini 모델의 API 호출 비용 문제로 인해 이름과 주소를 공개하지 않고 있습니다. 혹시 저와 같이 AI Chatbot을 개발해보고 싶은 분들은 이메일(algoroot524@gmail.com)로 보내주시거나 댓글을 남겨주시면, 제가 아는 선에서 최대한 도움을 드리겠습니다. 개발 기간 및 기술 스택개발 기간: 약 1개월AI: LangGraph.js, ..

개인 프로젝트를 해보고 싶어 모노레포는 미리 구축해두었습니다. 꼭 모노레포일 필요는 없었지만, 몇 개의 서비스를 만들더라도 UI와 컴포넌트는 통일감 있게 유지하고 싶었고, 여러 프로젝트를 효율적으로 관리할 수 있을 거라 생각해 자연스럽게 그런 구조로 출발했습니다.하지만 막상 무얼 만들지에 대해서는 쉽게 결정하지 못했습니다. 처음부터 AI를 염두에 두고 있었던 건 아니었고, 오히려 개인 패키지나 문서 자동화처럼 이미 손에 익은 것들부터 다뤄보고 싶다는 생각이 더 컸습니다. docs 구조도 어느 정도 정리되어 있었고, 웹 프로젝트도 하나쯤 만들어보고 싶었지만, 딱 꽂히는 주제가 없었습니다. 그러다 문득 예전에 만들었던 포트폴리오를 열어보게 되었습니다. 당시에는 회사에 재직 중이었고 시간 여유가 없어서 Git..

안녕하세요. 오랜만에 찾아왔습니다. 저는 지난 2년 6개월 동안 똑똑한개발자라는 외주 개발사에서 프론트엔드 개발자로 근무했습니다. 처음에는 외주 프로젝트를 담당하며 다양한 프로젝트의 프론트엔드 개발을 수행했고, 이후에는 사내 시스템 팀에 합류하여 약 20명의 프론트엔드 개발자들의 작업 효율성을 높이는 사내 시스템 툴과 보일러플레이트를 개발·개선하는 일을 했습니다. 퇴사를 결심한 이유똑똑한개발자는 신입이었던 저에게 좋은 기회를 주었고, 훌륭한 동료들과 협업하며 값진 경험을 쌓을 수 있었던 고마운 회사입니다. 그렇다면, 저는 왜 퇴사를 결심했을까요?1. 프론트엔드 시스템 팀의 경험이 너무 좋았습니다. 그러나..시스템 팀은 프론트엔드 리더 한 분과 저, 두 명으로 구성된 팀이었습니다. 원래 리더분께서 혼자 ..

안녕하세요. 오늘은 코드와 주석을 기반으로 문서 자동화한 경험을 공유하고자 합니다. 보일러플레이트에서 응집되어 있던 utils, hooks을 용도에 맞게 패키지로 분리하면서, 관리적과 성능적으로는 이점이 있었지만, 실무진 분들이 어떠한 함수를 가져오기 위해 참고할 수 있는 문서가 필요했습니다. 21개가 넘는 패키지들, 총 100개는 넘을 듯한 컴포넌트나 함수들을 개발하는 것을 떠나서 또 문서작업을 해야 한다는 게 굉장히 부담으로 다가왔습니다. 따로 md파일을 생성하여 관리하는 것이 아닌, 명령어만으로 문서가 자동생성 되게 하면 얼마나 편할까요? 다행히도, 아주 다행이도 이미 잘 개발된 라이브러리를 발견했습니다. 바로 MicroSoft 에서 개발한 오픈소스도구인 api-extractor인데요. 해당 ..

안녕하세요. 오늘은 제가 현재 현업에 종사하고 있는 똑똑한개발자의 시스템 팀으로서 모노레포(Monorepo) 환경에서 효율적인 배포 플로우를 구축한 경험들을 공유하고자 합니다.   제목이 조금 심심해서 고민하던 중, 어릴 적 즐겨보던 [무서운게 딱 좋아] 시리즈가 생각이 났어요.. 스물아홉의 전 [귀찮은게 질색이야] 편으로 써볼까 합니다.  조금 개인적인 이야기를 쓰자면 어릴 적 제 별명이 √2(루트2, 2의 제곱근) 였어요. 친구들과 코너 길에서 길을 걸을 때 "대각선으로 걸어다니면√2를 절약할 수 있어" 라고 했더니 이후로 친구들이 그렇게 부르고는 했었습니다. 학교가는 길도 신호등 시간까지 기억하고 시간 맞춰 등교하기도 하고요. 유난이었죠.. 지금은 윤리적인 사고가 쌓여서 그렇게까지 하지는 않지만 ..

안녕하세요. 오늘은 JavaScript의 Proxy 객체를 활용하여 벨리데이션 체크를 하는 방법에 대해 소개해드리려고 합니다. 조금 지난 얘기이지만 지난 3월 보일러플레이트의 의 Analytics(GA, 카카오 픽셀 등 분석도구 모음) class로 리팩토링한 후, 테스트를 하지 않아서 문제가 발생했습니다. 그래서 이슈 픽스 할 겸, 리팩토링 과정을 거쳤는데 그 과정에 Proxy를 사용한 경험을 소개하고자 합니다. Proxy란 무엇일까요??Proxy는 JavaScript에서 객체에 대한 동작을 가로채거나 수정할 수 있는 강력한 도구입니다. 객체의 속성에 접근하거나 값을 설정할 때, 이를 중간에서 처리할 수 있습니다. Proxy 기본 사용법1. Proxy 객체 생성먼저, Proxy 객체를 생성해보겠습니다.c..