Window

<img src="https://image.until.blog/morethanmin/article/1716045513650" alt="until-71"><p>항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.</p><h2>fnm이란?</h2><p>노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.</p><h2>winget으로 fnm 설치하기</h2><p>파워쉘에서 아래와 같이 입력하여 설치할 수 있다.</p><pre spellcheck="false"><code>winget install Schniz.fnm</code></pre><h3>0x8a15000f 오류가 발생하는 경우</h3><p>마이크로소프트 스토어에서 앱 설치 관리자를 업데이트 해주면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716045690970" alt="until-72"><h2>fnm으로 node 설치하기</h2><h3>프로필 설정</h3><p>우선 <code spellcheck="false">PowerShell</code>프로필에 환경변수를 등록해야한다.</p><p><code spellcheck="false">~\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1</code> 경로에 아래와같이 입력 해주면 된다.</p><pre spellcheck="false"><code>fnm env --use-on-cd | Out-String | Invoke-Expression</code></pre><h3>PowerShell 실행시 PSSecurityException 오류가 발생하는 경우</h3><p>기본적으로 스크립트 삽입하는 것이 막혀있기 때문에 설정을 바꿔줘야한다.</p><p>관리자 권한으로 <code spellcheck="false">PowerShell</code> 을 실행해서 아래와 같이 입력한다.</p><pre spellcheck="false"><code>Set-ExecutionPolicy RemoteSigned</code></pre><h3>node 설치</h3><p>이제 <code spellcheck="false">PowerShell</code> 을 재부팅하고 아래와 같이 입력해 노드를 설치하면된다.</p><pre spellcheck="false"><code>fnm use --install-if-missing 20</code></pre><hr><p>그럼 이제 node를 사용할 수 있다! 근데 PowerShell도 그렇고 여러 이슈들도 그렇고 좀 귀찮은 것 같다. 좀 더 사용해보다가 정 안되면 wsl을 사용해야겠다.</p><p></p><p></p><p></p><p></p>

항상 맥북만 사용하다가 이번에 데스크탑을 맞추게 되면서 개발환경을 윈도우에서 세팅하게 되었다.fnm이란?노드 버전을 관리할 수 있게 해주는 매니저로 nvm과 유사하지만 윈도우에서는 nvm이 지원되지 않기 때문에 fnm를 사용해보려고한다.winget으로 fnm 설치하기파워쉘에서 아래와 같이 입력하여 설치할 수 있다.winget install Schniz.fn

윈도우에서 winget으로 fnm 설치하기 (Fast Node Manager)

Develop

<img src="https://image.until.blog/morethanmin/article/1718723304750" alt="until-541"><p>개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.</p><p>멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.</p><p>기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.</p><h1>마우스를 활용한 멀티 커서 단축키</h1><h2>클릭하여 하나씩 추가</h2><p>우선 가장 기초적인 방법부터 알려드릴게요.</p><p>맥에서는 <code spellcheck="false">Option</code> 키, 윈도우에서는 <code spellcheck="false">Alt</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터로 클릭하여 여러 커서를 추가할 수 있습니다.</p><p>이 상태에서 키보드로 타이핑을 하시면 모든 커서에서 동일하게 타이핑이 됩니다.</p><p>제거하기 위해서는 커서에 <code spellcheck="false">Option</code> 또는 <code spellcheck="false">Alt</code> 키를 누르신 체로 다시 클릭해주시면 됩니다.</p><p><code spellcheck="false">esc</code> 를 눌러서도 멀티커서를 제거할 수 있어요.</p><h2>그래그하여 추가</h2><p>클릭이 아닌 드래그해서 추가하는 방법도 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift</code> 키, 윈도우에서는 <code spellcheck="false">Alt+Shift</code> 키를 누른 상태로 vscode 화면에서 다른 영역을 마우스 포인터를 드래그하여 여러 커서를 추가할 수 있습니다.</p><h1>키보드를 활용한 멀티 커서 단축키</h1><h2>일치하는 텍스트 모두 선택</h2><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+Shift+L</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+Shift+L</code> 키를 누르면 동일한 텍스트들에 모두 커서가 추가됩니다.</p><h2>순차적으로 일치하는 텍스트 선택</h2><p>위 기능의 경우 모든 텍스트가 선택된다면 해당 단축키를 사용하면 순차적으로 원하는 텍스트에 하나씩 커서가 추가됩니다.</p><p>선택하고자 하는 내용을 드래그한다음, 맥에서는 <code spellcheck="false">Command+D</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+D</code> 키를 누르면 드래그한 텍스트와 일치하는 다음 텍스트에 커서가 생기고 또 누르면 그 다음 텍스트에 커서가 추가되어요.</p><p>만약에 다시 되돌리기 위해서는 맥에서는 <code spellcheck="false">Command+U</code> 키, 윈도우에서는 <code spellcheck="false">Ctrl+U</code> 키를 눌러서 마지막으로 선택된 곳을 취소할 수 있어요.</p><h2>현재 커서 위 또는 아래 줄에 추가</h2><p>현재 커서 위치에서 위 또는 아래 방향으로도 멀터 커서를 연속으로 추가할 수 있어요. 맥에서는 <code spellcheck="false">Command+Option+Up/Down</code>, 윈도우즈에서는 <code spellcheck="false">Ctrl+Alt+Up/Down</code>키를 누르시면 됩니다.</p><h2>그래그한 여러 줄의 맨 마지막에 멀터 커서 추가하기</h2><p>여러줄을 드래그한 상태에서 각 줄의 마지막 라인에 커서를 추가할 수 있어요.</p><p>맥에서는 <code spellcheck="false">Option+Shift+I</code>, 윈도우에서는 <code spellcheck="false">Alt+Shift+I</code>를 키를 눌러 적용할 수 있어요.</p><p></p>

개발자에게 생산성은 곧 비용이기에 생산성을 높이는 것은 매우 중요한 일인데요.멀티커서 기능을 잘 활용하면 생산성을 높일 수 있습니다. 저 또한 잘 활용하고 있지만 매번 활용하고 있는 기능들만 사용하게 되는 것 같아 이번 기회에 어떤 기능들이 있는지 정리해보려고 합니다.기본적으로 마우스를 활용한 방식과 키보드를 활용한 방식이 있어요.마우스를 활용한 멀티 커서

VSCode 멀티 커서로 생산성 높이기

<img src="https://image.until.blog/grandff/article/1718942598885" alt="until-638"><p></p><h2>나처럼 육아에 바쁜 아빠들을 위한 앱.</h2><hr><p>주말에 아이랑 집에만 있으면 "정말" 시간이 안간다. 집밖에 아이와 갈만한 곳을 찾는 것도 생각보다 복잡하고 어려운 과제가 된다. 나같은 경우, 여러 포털사이트나 소셜미디어를 뒤져보곤 한다. 물론 유용한 정보를 자주 찾진 못했다. born to be 집돌이 태생이여서 어느 지역에 뭐가 유명한지도 모르고, 네비를 봐도 길을 헤매는 내가 여기가 어딘지 정확히 찾을리가... 이렇게 모르다 보니 장소를 찾는데도 시간이 많이 걸리고 후기까지 찾으면 주말이 다 지나가버렸다.</p><p>언제인지 기억은 안나지만, '어렸을 때부터 아이와 여행을 많이 다니고, 아빠의 육아참여가 자녀의 발달에 더 좋다'는 글을 봤다. 그래서인지 더더욱 아이와 어디 갈지를 고민하던 찰나에 나와 같은 생각을 가진 부모님들이 있지 않을까 싶었다. 아이와 함께 할 수 있는 활동에 관심이 많음에도 불구하고, 필요한 정보를 찾는 데 있어서 어려움을 겪는 경우가 많은 분들을 위한 서비스를 만들어볼까하고 시작한게 <strong>아랑아랑</strong> 프로젝트다. <strong>아이와 함께 갈 만한 여행지나 놀이 공간 정보를 모아 손쉽게 찾을 수 있는 앱</strong>을 목표로 시작하게 되었다.</p><p></p><h2>1인 팀 결성.</h2><hr><blockquote><p>나에겐 참 안타까운 일이지만 내 주변에 사이드 프로젝트를 하는 사람도 없고, 육아를 하는 사람도 없다. 강제로 1인 팀을 할 수 밖에 없었다.</p></blockquote><p>당시 회사에서 개발 사업이 WBS 기준 중후반 정도 왔을 때고, 개발 완료 시기까지 7개월 가량 남은 시점이었다. 아직 개발 사업이 진행 중이고, 육아와 집안일까지 해야해서 사이드 프로젝트에 사용할 시간을 그야말로 쥐어짜내야했었다. (출근 전 1시간, 점심시간 1시간, 애들 재우고 30분)</p><p></p><h2>시장분석.</h2><hr><blockquote><p>'<strong>오늘 하루</strong>' 갈 수 있는 여행지를 제공하되 공공데이터와 나만의 데이터를 결합하는 방향으로 잡았다.</p></blockquote><p>내가 생각하는 서비스는 시장에 이미 3~4개 정도 있었다. 장단점이 각각 있겠지만, 내가 주목한건 <strong>혼자서 만들고 운영할 수 있는 서비스인가</strong> 라는 것이다. 다른 서비스들처럼 주변 숙박업소의 할인정보를 제공하고, 예약 시 추가 할인 혜택을 주거나, SNS 홍보 자료도 작성하고.. 이런 작업을 본업을 하면서 하기엔 불가능인게 뻔했다. 그래서 아래처럼 방향을 잡고 시작했다.</p><h3>1. 무조건 당일 치기</h3><p>우리 가족은 일단 1박을 선호하지 않는다. 여름휴가나 겨울방학이나 특별한 시즌이 아니면 무조건 차로 갈 수 있는 당일치기 장소를 선호했다. 그래서 '오늘 하루'에 다녀올 수 있는 곳 위주로 정보 제공과 추천을 하려했고, 당연히 위치 정보 기반으로 서비스를 구성했다.</p><h3>2. AI 활용</h3><p>이번 사이드프로젝트를 하면서 유독 공공데이터를 많이 봤는데, 지자체마다 운영하는 공공데이터는 정확도가 너무 떨어졌다. 물론 관광공사에서 제공하는 데이터를 가지고 어느정도 활용이 가능했으나 실시간으로 변하는 정보(예를 들어 꽃구경이나 휴관일 정보 등)는 실시간 정보가 필요했다. 일일이 찾을 수는 없기에 자동화 프로세스가 필요했고, Langchain을 이용해 정보를 찾아 요약하는 프로세스를 구성했다.</p><h3>3. 디자인은 무리무리무리무리무리무리</h3><p>초등학생 때 미술학원을 다녔는데, 당시 선생님이 하셨던 말이 아직도 기억 난다.</p><p><em>" 색칠만 하면 그림이 이상해지네 ... ? "</em></p><p>색조합만 했다하면 카레가 똥이 되는 마법을 부렸고, 성인이 되어서도 나아지진 않았다. 그래서 디자인시스템을 참고하는 방향으로 했고, 스포카 디자인 가이드를 많이 참조했다. 화면은 와이어프레임만 그리고, dribble, mobbin, wwit 등 참고할만한 화면을 보면서 자체 디자인을 했다.</p><p></p><h2>시~작!</h2><hr><p>사이드 프로젝트가 처음은 아니지만 그렇다고 계속 유지해본 사이드 프로젝트가 있는 것도 아니였다. 지난번 부족한 점이 무엇인고하니 <strong><u>문서화</u></strong>를 전혀 하지 않았다. 그때만 하더라도 주니어(지금도 마음만은 주니어)여서 문서의 중요성을 얕잡아보고 코드만 바라보는 바보천치였다.</p><p>이번에는 동일한 실수를 하지 않겠다는 의미에서 기획부터 시작해서 사소한것 하나하나 문서로 시작해서 문서로 끝나는 작업을 많이 했다. 당시 회사 프로젝트가 진행 중이였고, 사이드 프로젝트 개발 기간이 길어지면 출시하기 어렵다고 판단해서 '<strong>8개월</strong>'로 개발 기간을 잡았다.</p><img src="https://image.until.blog/grandff/article/1718948390050" alt="until-641"><p>앱 이름은 '<strong>아빠와 아이가 함께 하는 여행</strong>' 이라는 의미로 '<strong>아랑아랑</strong>' 이라고 지었다.</p><img src="https://image.until.blog/grandff/article/1718948374179" alt="until-640"><p>지금 다시 보니 시스템 구성도가 참 저렴하게 그렸지만 아무튼 위와 같았다.</p><blockquote><h3>Front-end</h3><p>flutter를 사용하고 앱만 제공할거라 웹 버전은 고려하지 않았다.</p><h3>Back-end</h3><p>Spring Boot를 주로 사용하고 (MVC), LLM, 데이터 수집 등은 FastAPI를 사용했다.</p><h3>Cloud Infra</h3><p>최초 구축 시 NHN Cloud를 사용했고, CI/CD는 github action을 사용했다.</p></blockquote><p>개발하는 중간에 디자인을 바꿔 재개발하거나 테스트 중 발견한 수많은 오류 때문에 이거 진짜 가능? 이라는 생각까지 들었지만 정신 단디 차리고 최초 버전을 출시하는데 성공했다.</p><p></p><h2>아랑아랑 출시.</h2><hr><img src="https://image.until.blog/grandff/article/1718948746716" alt="until-642"><p>최초 출시 화면이다. 출시 후 노마드코더와 렛플에도 홍보글을 올렸다. 보통 내가 만든 서비스는 내 주변 지인한테 츄라이츄라이를 하는게 국룰이던데, 육아를 하는 사람이 나 혼자더라... 그래서 서비스 홍보를 직접 해야했었는데 이때부터 사이드 프로젝트를 벗어나 제2업무를 하게 된 것 같다. (그것도 수익이 거의 발생 안하는) 늘어나지 않는 사용자를 보며 추가 개발과 버그 수정을하며 앱을 계속 고쳐나갔다.</p><p></p><h2>출시 했다고 끝난게 아니란다.</h2><hr><h3>1. 비용 줄이기</h3><p>처음에 NHN Cloud로 백엔드 단을 배포해서 사용했는데, 유지비용이 너무 많이 들었다. 대안을 찾다보니 Serverless로 가능한 <strong>Google Cloud Run</strong>을 알게 되서 인프라를 이쪽으로 옮겼고, 현재까지도 만족하며 사용 중이다. Cloud Run에서 도커로 배포하는 옵션을 설정하면 레포지토리에 있는 도커파일을 읽어다가 자동으로 배포해줘서 특히 편했다.</p><h3>2. 직접 홍보하기</h3><p>홍보 채널을 찾으면서 인스타그램만한게 없었다. 인스타그램같은 SNS에서 여행지 정보 찾는걸 대체하기 위해 만들었지만 아이러니하게 홍보를 인스타그램에서 해야하는 상황이 왔다. 단순히 홍보 채널로만 이용하기엔 뭔가 심심한 면이 있어서 아이랑 다녀온 여행 후기도 같이 올리면서 아랑아랑의 창구로 사용하고 있다. 물론 인스타와 앱 서비스 운영을 병행하니 할일도 두배로 늘어났지만 이를 통해 유입되는 신규 사용자도 있어 홍보 효과를 톡톡히 봤다.</p><h3>3. UI/UX 개편</h3><p>최초 출시에는 여행지 카테고리가 20개였는데, 이게 사용자 입장에서 선택도 애매하고, 관리하는 입장에서도 확인 어려워 카테고리를 8개로 압축시켰다. 직접 사용을 계속 하다보니 사용자에게 계속 터치를 강요하는 UX로 구성되어 있었다. 그래서 사용자가 찾기 전에 서비스에서 위치나 취향에 맞게 데이터를 제공하는 방식으로 변경했다. 위치 기반은 유지하면서 날씨에 맞는 여행지를 추천하거나, 지역별로 특정 테마에 맞게 여행지를 취합해 정보를 제공하게 수정했다.</p><h3>4. AI 기능 강화</h3><p>처음에는 Chat-gpt를 사용해 해당 여행지 정보를 찾거나 검색 API를 사용해 정보를 요약하는 수준으로만 활용했는데, 할루시네이션 이슈가 심했고 답변을 생성하는데 너무 오래 걸렸다. 그래서 랭체인으로 사용자가 자주 접속하는 시간대 직전에 자주 찾는 여행지에 대한 최근 정보를 요약해서 제공하는 걸로 수정했다.</p><h3>5. 사용자 참여 유도</h3><p>사용자가 사용을 하지 않으면 아무리 질좋은 서비스라도 의미가 없기에 마일리지 서비스를 통해 활동에 대한 보상을 부여해서 참여를 유도했다.</p><p></p><h2>계속 개발하고 고치고 유지하며 느낀점.</h2><hr><img src="https://image.until.blog/grandff/article/1718950471330" alt="until-643"><img src="https://image.until.blog/grandff/article/1718950485876" alt="until-644"><p>마일리지 기능까지 추가하고나서야 최소한으로 구현이 필요한 것들은 모두 추가했다. 첫 출시 이후 7개월이나 더 시간을 썼으니 1년 넘게 운영하면서 개발을 해왔다. 아직까지 많은 유저수를 확보하진 못했지만 내가 끝까지 만들고 유지하는 서비스라 그런지 애착이 가서 끊임 없이 들여다보고 개선하고 있다.</p><p></p><p>이 사이드 프로젝트를 하면서 내 스스로 기회를 만들었다고 생각이 든다.</p><p>어떻게 하면 아이디어를 구체화할지, 어떻게 하면 더 효율적인 환경을 구축할지, 어떻게 하면 사용자들이 클릭하게 되는 서비스나 포스팅을 올릴지, 어떻게 하면 서비스 품질을 높일지.. 다양한 고민을 하면서 이것저것 찾아보게 되고, 보는 시야를 어제보다 더 넓어지는 기회를 얻었다고 생각한다.</p><p>나보다 훨씬 뛰어난 분들이 많아 감히 왈가왈부 하긴 그렇지만, 그래도 감히!! 말할 수 있다.</p><p><strong><u>사이드 프로젝트.. 당장해!!!</u></strong></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><hr><p></p><p></p>

사이드프로젝트를 개발하고, 런칭하고, 운영하고, 개선하면서 느낀 점을 주저리주저리 적어봤습니다.

아랑아랑 개발 후기(+1년간 유지하면서)

<h2>도메인이 뭐냐면..</h2><blockquote><p>개발을 할때도 도메인, 데이터베이스 구조를 설계할 때도 도메인, 프로젝트 기획할때도 도메인, 여기저기서 다 도메인이라는 단어를 쓰는데 개념이 명확하지 않아 헷갈려서 정리해봤슴다</p></blockquote><h3>1. 프로젝트 구조(Architecture):</h3><ul class="tight" data-tight="true"><li><p>프로젝트 구조에서 도메인은 주요 <code spellcheck="false">비즈니스 개체</code>를 나타냅니다. 일반적으로 소프트웨어 시스템에서 도메인은 해당 시스템이 다루는 <code spellcheck="false">중요한 주제 영역</code>을 반영합니다. 도메인은 프로젝트의 핵심 부분이며, <code spellcheck="false">이를 기반으로 비즈니스 로직을 구현</code>하게 됩니다. 예를 들어, 전자상거래 웹 애플리케이션의 도메인은 상품, 주문, 사용자 등과 같은 주요 개체들로 구성될 수 있습니다.</p></li></ul><h3>2. 스프링(Spring):</h3><ul class="tight" data-tight="true"><li><p>스프링에서의 도메인은 주로 <code spellcheck="false">엔티티 클래스</code>로 표현됩니다. 엔티티 클래스는 데이터베이스의 테이블과 매핑되는 객체를 나타냅니다. 스프링 애플리케이션에서 도메인 클래스는 주로 비즈니스 로직을 구현하고, <code spellcheck="false">데이터베이스와의 상호 작용</code>을 담당합니다. 스프링의 ORM(Object-Relational Mapping) 기술인 Hibernate를 사용하면 도메인 객체와 데이터베이스 테이블 간의 매핑을 쉽게 구현할 수 있습니다.</p></li></ul><h3>3. 데이터베이스(Database):</h3><ul class="tight" data-tight="true"><li><p>데이터베이스에서의 도메인은 해당 <code spellcheck="false">데이터베이스가 다루는 데이터의 유형</code>을 정의합니다. 도메인은 데이터의 <code spellcheck="false">속성과 제약 조건을 정의</code>하는 데 사용됩니다. 예를 들어, 사용자 이름이나 이메일 주소와 같은 속성은 데이터베이스에서의 도메인에 해당할 수 있습니다. 또한 데이터의 유효성을 검사하기 위한 제약 조건(예: NOT NULL, UNIQUE)도 도메인에서 정의됩니다.</p></li></ul><h3>4. 기타 도메인 개념들:</h3><ol class="tight" data-tight="true"><li><p><strong>도메인 주도 설계(Domain-Driven Design, DDD)</strong>: 소프트웨어 개발 방법론 중 하나로, 비즈니스 도메인을 중심으로 설계하는 방법론입니다. 도메인 주도 설계는 비즈니스 요구 사항을 반영하고 복잡성을 줄이기 위해 도메인 모델을 사용합니다.</p></li><li><p><strong>도메인 객체</strong>: 소프트웨어에서 특정 도메인을 나타내는 객체를 의미합니다. 도메인 객체는 비즈니스 로직을 포함하고 해당 도메인에 특화된 행위를 수행합니다.</p></li><li><p><strong>도메인 서비스</strong>: 특정 도메인과 관련된 비즈니스 로직을 제공하는 서비스입니다. 도메인 서비스는 도메인 객체와는 달리 특정 개체에 속하지 않는 독립적인 로직을 수행합니다.</p></li><li><p><strong>도메인 이벤트</strong>: 도메인에서 발생하는 중요한 사건을 나타내는 이벤트입니다. 도메인 이벤트는 비즈니스 로직의 흐름을 추적하고 기록하는 데 사용될 수 있습니다.</p></li></ol><p></p><blockquote><p>혹시 틀린 부분이 있다면 댓글 부탁드립니다.</p></blockquote>

도메인이 뭐냐면..개발을 할때도 도메인, 데이터베이스 구조를 설계할 때도 도메인, 프로젝트 기획할때도 도메인, 여기저기서 다 도메인이라는 단어를 쓰는데 개념이 명확하지 않아 헷갈려서 정리해봤슴다1. 프로젝트 구조(Architecture):프로젝트 구조에서 도메인은 주요 비즈니스 개체를 나타냅니다. 일반적으로 소프트웨어 시스템에서 도메인은 해당 시스템이 다루

[띵로그: Thing-Log]

연락처