백준 온라인 저지(일명 BOJ)가 얼마 전에 서비스를 종료했다는 소식을 전해 들었다. 내가 대학교를 다니는 4년 동안 가장 열심히 시간을 투자했던 활동이 바로 BOJ에서 알고리즘 문제를 푸는 일이었는데 안타깝게도 사라져버렸다. 운영자가 콕 집어서 서비스 종료 사유를 밝히지는 않았지만, 최근 몇 년 새 AI봇이 자동으로...

오늘날은 AI시대다. 키보드만 딸깍하면 나 대신 AI가 생각을 대신 해준다. 글도 써주고 코드도 짜주고 번역도 잘 해준다. 이제 인간이 직접 문제에 대한 생각과 고민을 하는 일은 사치가 되었다. 사람들은 AI에게 생각을 의탁함으로써 복잡한 생각을 피하려 하고 있다. 즉 AI를 통해 꿀을 빨고 있지만, 이는 곧 인간이...

엔카 웹사이트에서 사용할 수 있는 크롬 확장앱을 개발했다. 이 앱은 기존 엔카에서 중고차 매물의 정보(보험이력, 성능이력 등)를 일일이 찾아보지 않고 한 화면에서 모두 확인할 수 있도록 하여 수고로움을 덜어낼 수 있다. 또한 각 정보들을 토대로 0~100점 범위로 점수를 산정했다. 최근 엔카에서 중고차를 많이 찾아보고...

목요일에 기말고사를 끝으로 대학원에서의 첫 번째 학기를 마쳤다. 첫 학기이기 때문에 앞으로 무엇을 연구해야 할 지 탐색하는 것에 초점을 맞췄다. 운이 좋게도 내가 참여할 만한 연구 주제들을 몇 가지 제안 받음으로써 생각보다는 빨리 연구를 시작하게 되었다. 아직 연구라고 하기엔 미약한 수준이기는 하지만 당장 눈앞에 해야할...

오랜만에 글을 쓴다. 그동안 '많은 일'들이 있었고, 개인적으로 생각을 정리하느라 블로그에 소홀해졌다. '많은 일'이 무엇인지에 대해선 차차 설명할 것이고, 결론부터 말하자면 대학원에 진학하기로 결정했다. 9월부터 석사 과정을 시작할 예정이며, 분야는 LLM으로 큰 방향성을 정했다. 뜬금없는 전개일 수 있다. 그렇다고...

지난 포스팅에서 언급했던 4가지 예외 처리를 고려해보자. 현재 서비스에서는 업로드 도중 네트워크가 끊기게 될 경우 무한 로딩 상태에 빠지게 된다. 사용자는 네트워크에 문제가 생겼다는 걸 인지하기 전까지는 하염없이 로딩을 기다려야 하기 때문에 UX에 악영향을 끼치게 된다. 이를 해결하기 위해서 timeout 시간을...

현재 개발 블로그에서 사용되는 각종 asset 파일(이미지, 움짤 gif 등)들을 저장하는데 크게 2가지 방식을 사용하고 있다. 각각의 장점과 단점을 가지고 있다. 가장 쉽고 간단한 방법은 개발 블로그 레포지토리(Gatsby 기반)에 asset 파일을 그대로 저장하는 것이다. 이 방식의 장점은 내가 Github에 제때...

fingerprint 기법은 브라우저에서 유저를 식별하는 방법 중 하나로 유저의 브라우저 정보, 운영체제, 화면 해상도, 폰트 등을 조합하여 유저를 식별해준다. 신뢰성을 100% 보장할 수는 없기 때문에 식별에 실패하더라도 큰 지장이 없는 광고 타겟팅을 위한 용도로 사용되곤 한다. fingerprint 기법을 구현한...

언제부터인지 수인분당선 출구에 대문짝만하게 출구 번호가 써져 있었다. 첨부한 사진은 미금역의 모습인데, 미금역 뿐만 아니라 수인분당선의 모든 역 출구에 큼지막하게 마킹되어 있다. 원래 지하철 출구 번호는 출구 앞 표지판에 자그마한 글씨로 써져 있기 때문에 반대편에서는 번호를 읽기 어렵다는 불편함이 있었다. 요즘은 대부분...

Vue의 3.2 버전부터 추가된 신규 디렉티브인 v-memo 에 대해서 살펴보도록 하자. 공식문서 상의 설명은 아래와 같다. 템플릿의 하위 트리를 메모합니다. 엘리먼트와 컴포넌트 모두에 사용할 수 있습니다. 디렉티브는 메모이제이션을 위해 비교할 의존성 값의 고정된 길이의 배열을 요구합니다. 배열의 모든 값이 마지막...

지난 포스팅에서 프론트엔드와 백엔드를 연동하고 실제 그림을 그려서 문제를 맞추는 것까지 구현했다. 다만 내가 의도한 그림의 정답을 맞추지 못했는데, 다른 그림을 더 그려보고서 무엇을 잘 맞추고 못 맞추는지 경향성을 파악해보고 개선해보고자 한다. 다행히도 사과는 잘 맞췄다. 포도도 맞췄다. 수박은 못 맞춘다. 자동차를...

고전 게임 중에서 캐치마인드 라는 그림을 그리는 게임이 있다. 매턴마다 돌아가면서 그림을 그리는 사람이 정해진다. 자기 차례가 돌아오면 특정 키워드가 랜덤으로 주어지며, 그 그림에 맞게 그림을 그리는 것이다. 나머지 사람들은 그 그림을 보고 키워드를 맞추면 점수를 얻는 방식이다. 출처 : 캐치마인드 개드립 걸작선 게시판...

내가 신분당선을 오랫동안 타오면서 매번 느끼는 점은 속도제한 90km를 정말 악착같이 지키려고 한다는 점이다. 신분당선은 무인으로 운영되기 때문에 가속과 감속 방식은 미리 프로그래밍되어 있으리라 추측한다(물론 일부는 사람이 직접 중앙통제 하겠지만). 이 부분에 크게 불편함을 느껴본 적은 없지만 속도제한에 대해서는...

자바스크립트의 내장함수인 fetch를 사용하여 데이터를 갖고 오기 위해서는 아래 코드와 같이 await를 두번 사용해야 한다는 번거로움이 있다. 왜 굳이 이렇게 만들었을까 하는 의문이 생긴다. 처음부터 한 번의 await로 데이터를 갖고오게끔 만들면 더 편리했을텐데 말이다. 그 이유는 HTTP 요청의 특성을 생각해보면...

조금 뒷북이지만 지나간 2023년을 되돌아보고 2024년은 어떻게 보낼 지 정리해보려고 한다. 2022년 6월부터 학생 인턴으로 다니기 시작했던 회사는 1년을 다니다가 지난 6월에 퇴사하였다. 대단한 이유 때문은 아니고, 단지 내가 더 넓고 깊은 경험이 필요하다고 판단해서였다. 회사의 프로젝트는 시간이 지나고 나의...

Vue를 공부하다보면 Global API의 한 종류로서 nextTick()이라는 함수를 접하게 된다. Vue 공식문서에서는 이렇게 설명하고 있다. When you mutate reactive state in Vue, the resulting DOM updates are not applied synchronously....

어린 시절에 나는 컴퓨터를 아주 좋아하는 아이였다. 당연히 주 컨텐츠는 게임이었다. 메이플스토리, 카트라이더, 그랜드체이스를 열심히 했던 기억이 난다. 하지만 그 무렵 대부분의 내 또래가 그렇듯 하루에 사용할 수 있는 컴퓨터 시간은 정해져 있었다. 그래서 나는 어떻게 하면 컴퓨터를 원하는만큼 할 수 있을까 고민에...

2023-03-09에 작성된 원문을 수정한 버전입니다 웹사이트를 이용하다 보면 모달창을 마주하게 된다. 일반적인 모달은 화면이 어두워지면서 기존의 화면은 fade out되면서, 화면 한가운데에서 focus되는 alert창과 같은 형태이다. 이를 vue로 어떻게 구현하는지 살펴보자. vue로 모달을 구현하는 방법에는...

객체의 속성의 개수가 정해져 있지 않다면 인덱스 시그니쳐를 사용하는 게 좋다. 기본적인 enum은 컴파일 시, [속성이름]=값을 연결해주는 별도의 객체를 생성한다. 하지만 enum 앞에 const를 붙이면 컴파일 시 객체를 생성하지 않고 [속성이름]을 직접 값으로 치환해버리기 때문에 컴파일 코드의 양을 줄일 수 있다....

2023-04-04에 작성된 원문을 수정한 버전입니다 지난 포스팅에서 v-model의 작동원리와 커스텀 컴포넌트를 만드는 방법에 대해서 살펴보았다. 이번 포스팅에서는 만들어진 컴포넌트에다 각각의 input 특성에 맞는 로직을 구현해보도록 하겠다. 부모 컴포넌트인 MainPage.vue와 전화번호를 위한...

2023-05-05에 작성된 원문을 수정한 버전입니다 vue에서는 vue-router에서 제공하는 <router-link> 컴포넌트로 페이지 이동을 하려면 크게 두 가지 방법이 있는데, 하나는 해당 페이지의 pathname을 직접 적는 방법과 다른 하나는 router에서 미리 정의해둔 route name을 적는...

2023-04-04에 작성된 원문을 수정한 버전입니다 vue로 프론트엔드 개발을 하던 도중, App.vue 에서 router-view안에 들어있는 특정 DOM에 접근해야 할 일이 생겼다(정확히 말하자면 태그에 특정 class가 존재 유무를 확인해야 했다). 따라서...

2023-03-09 에 작성된 원문을 수정한 버전입니다 SPA(Single Page Application)에서 이전 페이지의 스크롤 위치를 기억해두었다가 재방문 했을 때 그 자리에 위치해야 하는 경우가 있다. 이를 구현하기 위한 방법을 알아보자. vue-router의 createRouter()함수의 인자로...

2022-11-12 에 작성된 원문을 수정한 버전입니다 다들 온라인이나 오프라인에서 룰렛(회전판)을 돌려서 나온 상품을 추첨받는 경험 한 번씩 있을 것이다. 현실에서의 룰렛은 공평한 물리법칙에 내 운명을 맡기면 되지만, 웹페이지(프론트엔드)상에서 구현할 때는 룰렛을 어떻게 돌아가게 만들고 어떤 영역을 가리키도록...

기존에 4년 반 동안 운영하던 티스토리 블로그에서 이곳 Gatsby 블로그로 이사하였다. 이사하게된 배경에는 여러가지가 있지만, 가장 중요한 이유는 '개발과 관련된' 포스팅에 더 집중하기 위해서다. 티스토리 블로그는 이름과 URL에서부터 짐작되다시피, PS(Problem Solving)를 하면서 얻은 지식이나 문제 풀이...

얼마 전에 메일이 하나 왔다. 2년 전에 프론트엔드 개발자로 지원했다가 떨어진 회사로부터 포지션 제안이 온 것이었다. 나조차 잊고 있었는데, 원래 대학원을 오기 전에는 프론트엔드 개발자로 일했던 시절이 있었다. 여러가지 사건을 겪으면서 프론트엔드 업무는 놓아주고 커리어 전환을 하기로 결정하여 대학원으로 온 지도 벌써...

요즘은 AI 활용 능력에 따라서 개인의 업무 생산성이 급격하게 증가하고 있다. 예전이면 일주일이 넘게 걸릴 작업을 프롬프트 딸깍으로 1분 만에 처리하는 사례는 더 이상 과장이 아니라 현실이 되었다. 그런데 AI가 항상 생산성을 높여 주기만 할까? 그리고 그 증가 폭은 모든 사람에게 동일하게 적용될까? 내가 생각하는 AI...

우리 학교 대학원에서 전일제 대학원생은 학부 과목 TA(조교)로 배정된다. 내가 배정된 과목은 '컴퓨터 프로그래밍 및 실습(컴프실)' 과목으로 기본적인 C언어 문법을 숙지하는 과목이다. 주로 소프트웨어학과 신입생들이 1학기에 수강하는 과목이며 타과에서 종종 들으러 온다. 컴프실 과목 TA가 하는 역할은 일주일에 한 번...

오늘은 첫 학기가 시작되는 날이다. 학부생 시절에 이미 여러번 겪어왔지만 개강은 여전히 설렘과 착잡함으로 인해 싱숭생숭한 마음은 여전히 적응이 안된다. 게다가 이제 학부생이 아닌 대학원생으로서 맞이하는 개강이다. 학교에서 마지막으로 수업을 들었던 때가 2022년도 1학기였으니 3년반 만에 다시 학생으로 돌아간 셈이다....

Cloudinary 관련 컨텐츠로 글을 무지막지하게 뽑아내고 있다. 처음에는 소소하게 시작했는데, 하다보니깐 재미가 붙어서 계속 살을 덧붙이고 싶어진다. 지금까지 내가 블로그에 올린 asset 파일들은 이 포스팅에서도 설명했다시피 두 가지 방식으로 저장했었는데, 이제는 이 파일들을 모두 Cloudinary로 마이그레이션...

지난 포스팅에서 언급했다시피 기본으로 제공하는 업로드 기능에서 다음 5가지 기능을 추가해보고자 한다. 먼저 1,2,3번의 기능을 구현해보자. 3개의 기능이 모두 연관되어 있으므로 한번에 구현할 것이다. 파일을 업로드 하는 로직들은 useFileUploader.ts hook으로 분리하여 작성했다. 이 안에서 로컬 파일을...

2024년 반기 회고 포스팅에서도 언급했다시피 7월에 회사로부터 권고 사직을 통보 받았다. 상당히 착잡한 심정이었다. 내가 인생을 살아가면서 갖고 있는 신조 중 하나는 '세상에 쓸모없는 경험이란 없다'이다. 아무리 힘든 시련일지라도 나중에 돌아보면 그 경험이 나에겐 소중한 자산이 되리라는 믿음이다. 일종의 자기 합리화...

한글은 영어와 같은 언어와 달리 조합형 언어이기 때문에 글자를 입력할 때 조합이 완성되기 전까지는 글자가 화면에 표시되지 않는다. 이러한 특성 때문에 한글 입력 시 몇 가지 이슈가 존재한다. 예를 들어 사용자가 안전 이라는 글자를 입력하려는 상황을 가정해보자. 사용자는 키보드로 'ㅇ' - 'ㅏ' - 'ㄴ' - 'ㅈ' -...

Vue에서 제공하는 내장 컴포넌트 중에서 <Suspense> 가 있다. 비동기 setup 혹은 비동기 컴포넌트의 데이터가 준비 완료되기 전까지 fallback 템플릿을 보여주는 기능으로, React 진영의 <Suspense> 와 사실상 동일하다고 볼 수 있다. Vue 버전 3.5.13 기준으로 아직까지는...

개발자라는 직업은 무엇일까. 단순하게 생각해보면 개발을 직업으로 삼은 사람을 일컫는다. 한국에서는 코로나 사태를 겪으면서 개발자란 직업의 사회적인 위상이 최근 몇 년새 급격히 올라갔다. 자연스레 이를 선망하는 사람들이 생기고, 많은 사람들이 개발자 취업 시장에 뛰어들었다. 현재도 개발자는 2,3년 전만큼은 아니지만...

지난 포스팅에서는 프론트엔드에서 Canvas API를 활용하여 그림판 페이지를 만들었다. 이번 포스팅에서는 OpenAI API와 Express 기반의 백엔드 서버와 연동하는 과정을 다루고자 한다. OpenAI와 연동하기 위해서 공식 사이트로 들어가서 가장 먼저 가격정책을 확인해보았다. 생성형 AI 모델의 API를...

이 포스팅은 Comparing Nuxt 3 Rendering Modes: SWR, ISR, SSR, SSG, SPA를 기반으로 재구성했습니다. 이 프로젝트의 데모 페이지는 이곳 에서 확인할 수 있습니다. 이번 프로젝트에서는 Nuxt3가 제공하는 5가지의 렌더링 모드를 살펴보고자 한다. 각 페이지마다 2종류의...

HTML상에 이미지를 첨부하는 방법에는 크기 <img> 태그와 CSS의 background-image 속성을 부여하는 2가지 방법이 있다. 이 둘의 차이점에 대해서 찾아보았다. stackoverflow 에 검색을 해보면 예전에도 비슷한 주제로 여러 사람들이 질문을 올린 글들을 찾아볼 수 있다. 그 중에서 가장...

부끄럽지만 이전 글이었던 '2023년 회고' 다음으로 쓰는 글이 올해 반기 회고 글이다. 일에 치이다보니 개발 블로그에 글 쓰는 일에 소홀했다. 작년 10월에 입사하여 온보딩 기간을 거친 후, 올해 초부터 본격적으로 실제 개발 업무에 투입이 되었다. 처음 맡은 일은 SEO 개선 작업이었다. 개발자도구 Lighthouse...

2022-02-20에 작성된 원문을 수정한 버전입니다 지난 1월 15일, '2021 경인지역 6개대학 연합프로그래밍 경시대회'인 shake! 가 열렸다. 지금 글을 쓰는 시점과는 시간이 꽤 흐르긴 했는데 나름대로 고통스러운 흥미로운 경험을 하기도 했고, 회고할 만한 일도 있었다고 생각하기에 지금이 되어서야 후기를 남기게...

지난 주에 드디어 대학교를 졸업했다. 2017년 2월에 입학한 나의 대학생활은 장장 6년 6개월에 걸친 여정 끝에 막을 내리게 되었다. 이대로 나의 대학 생활이 아득한 추억 속에서 휘발되기에는 아쉽다고 생각해서 내가 대학교에 다니면서 들었던 강의들, 그 외에 의미있었던 활동들을 기억 깊숙한 곳에서 끄집어내서 박제하려고...

2023-03-09에 작성된 원문을 수정한 버전입니다 모바일 환경에서 모달창이 떠 있는 상태에서 모달을 닫는 방법은 여러가지가 있을 수 있다. 첫 번째 방법은 모달 창 내부에 별도의 X버튼을 표시해서 이 영역을 터치하면 닫히게 하는 방법이 있다. 가장 직관적인 방법이지만 버튼을 위한 별도의 공간을 확보해야 하기 때문에...

이번 프로젝트(커머스)에서 드디어 벼르고 벼르어왔던 기술을 도입하게 되었다. 바로 typescript와 pinia이다. 원래는 더 빨리 도입하고 싶었으나, 이전 프로젝트가 생각보다 늘어짐 + 숙련도 이슈로 인하여 늦어진 감이 있다. 하지만 그만큼 더 철저하게 준비해서 도입 안하느니만 못한 상황이 벌어지지 않게끔...

기존 vue의 전역 상태관리 라이브러리는 거의 vuex가 독점하다시피 한 시장이었다. 옆 동네 react만 하더라도 redux,recoil,MobX,zustand와 같이 여러 라이브러리 중에서 선택할 수 있었지만, vue에서는 선택권 없이 사실상 99% vuex를 써야했다. 오히려 이 점이 학습에 대한 부담(여러...

2023-04-04에 작성된 원문을 수정한 버전입니다 사용자에게 입력을 받기 위해서는input태그가 필요한데, 입력 받는 데이터의 종류와 특성에 따라 제공되는 기능이 달라질 수 있다. 예를 들어 '오늘의 집'의 주문 페이지를 살펴보자. 이름이나 주소같은 단순한 텍스트 : <input type="text"> 문자가 아닌...

2023-04-24에 작성된 원문을 수정한 버전입니다 react에서는 페이지 이동 시 state를 전달하기 위해서는 react-router-dom에서 <Link> 컴포넌트 또는 useNaviate() 훅을 통해 전달이 가능하다. 반면에 vue에서는 직접적인 전달 방법이 존재하지 않아 개발자 자체적으로 방법을 찾아야...

2023-03-09에 작성된 원문을 수정한 버전입니다 vue3 환경에서 chart.js 라이브러리를 사용하여 차트 데이터를 화면에 그리려고 한다. 그냥 바닐라 JS를 활용할 수도 있겠지만, 더 편리한 방법으로는 vue 기반으로 래핑해놓은 vue-chart-3를 활용하려고 한다. 그래서 공식문서 데모 페이지에 나와있는...

2023-02-18에 작성된 원문을 수정한 버전입니다 '어 이거 안되는데요? 프론트에서 확인 좀 해주세요' 이런 말을 프로젝트하면서 일주일에 10번도 넘게 들었다. 에러의 원인이 차라리 내(프론트) 문제라면 오히려 낫다. 하지만 백엔드 문제, 혹은 네이티브 문제인 경우도 있다. 하지만 사용자에게 가장 앞단에 보이는...

블로그를 이제 막 개설해서인지 아직은 gatsby 프레임워크가 어떻게 동작하는지 파악하고 있는 단계다. 그러면서도 블로그 꾸미기는 빼먹을 수 없는데, 이는 역시 내가 프론트엔드 개발자이기도 하고 velog나 medium 같은 플랫폼보다 커스텀할 수 있는 폭이 넓은 gatsby를 기술 블로그로 선택한 이상 꾸미기는 선택이...