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

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

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

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

기능 추가하기 지난 포스팅에서 언급했다시피 기본으로 제공하는 업로드 기능에서 다음 5가지 기능을 추가해보고자 한다. 파일 동시에 여러개 업로드 허용 업로드 전에 파일 미리보기 파일명 수정할 수 있도록 하기 업로드 후 이미지 경로 받아오기 이미지 경로를 마크다운 문법으…

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

문제의 원인 한글은 영어와 같은 언어와 달리 조합형 언어이기 때문에 글자를 입력할 때 조합이 완성되기 전까지는 글자가 화면에 표시되지 않는다. 이러한 특성 때문에 한글 입력 시 몇 가지 이슈가 존재한다. 예를 들어 사용자가 이라는 글자를 입력하려는 상황을 가정해보자…

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

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

지난 포스팅에서는 프론트엔드에서 Canvas API를 활용하여 그림판 페이지를 만들었다. 이번 포스팅에서는 OpenAI API와 Express 기반의 백엔드 서버와 연동하는 과정을 다루고자 한다. OpenAI API 연동 OpenAI와 연동하기 위해서 공식 사이트로 …

이 포스팅은 Comparing Nuxt 3 Rendering Modes: SWR, ISR, SSR, SSG, SPA를 기반으로 재구성했습니다. 이 프로젝트의 데모 페이지는 이곳 에서 확인할 수 있습니다. 기본 환경설정 이번 프로젝트에서는 가 제공하는 5가지의 렌더링 …

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

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

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

대학생활 회고(라 쓰고 '추억팔이'로 읽는다) 지난 주에 드디어 대학교를 졸업했다. 2017년 2월에 입학한 나의 대학생활은 장장 6년 6개월에 걸친 여정 끝에 막을 내리게 되었다. 이대로 나의 대학 생활이 아득한 추억 속에서 휘발되기에는 아쉽다고 생각해서 내가 대학…

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

1. pinia와 typescript의 도입 이번 프로젝트(커머스)에서 드디어 벼르고 벼르어왔던 기술을 도입하게 되었다. 바로 와 이다. 원래는 더 빨리 도입하고 싶었으나, 이전 프로젝트가 생각보다 늘어짐 + 숙련도 이슈로 인하여 늦어진 감이 있다. 하지만 그만큼 더…

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

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

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

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

2023-02-18에 작성된 원문을 수정한 버전입니다 1. 프론트는 항상 맨 먼저 쳐맞는다. '어 이거 안되는데요? 프론트에서 확인 좀 해주세요' 이런 말을 프로젝트하면서 일주일에 10번도 넘게 들었다. 에러의 원인이 차라리 내(프론트) 문제라면 오히려 낫다. 하지만…

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

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

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

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

예외 처리 지난 포스팅에서 언급했던 4가지 예외 처리를 고려해보자. 파일 업로드 실패 처리(네트워크 문제) 중복되는 파일 처리 파일 포맷 검증 파일 크기 검증 1. 파일 업로드 실패 처리 현재 서비스에서는 업로드 도중 네트워크가 끊기게 될 경우 무한 로딩 상태에 빠지…

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

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

1. 큼지막한 지하철 출구 번호 수인분당선 출구 번호 언제부터인지 수인분당선 출구에 대문짝만하게 출구 번호가 써져 있었다. 첨부한 사진은 미금역의 모습인데, 미금역 뿐만 아니라 수인분당선의 모든 역 출구에 큼지막하게 마킹되어 있다. 원래 지하철 출구 번호는 출구 앞 …

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

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

배경 고전 게임 중에서 캐치마인드 라는 그림을 그리는 게임이 있다. 매턴마다 돌아가면서 그림을 그리는 사람이 정해진다. 자기 차례가 돌아오면 특정 키워드가 랜덤으로 주어지며, 그 그림에 맞게 그림을 그리는 것이다. 나머지 사람들은 그 그림을 보고 키워드를 맞추면 점수…

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

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

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

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

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

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

인덱스 시그니쳐 객체의 속성의 개수가 정해져 있지 않다면 인덱스 시그니쳐를 사용하는 게 좋다. 유니온타입 인터섹션 타입 타입 alias enum 숫자형 enum 문자형 enum const enum 기본적인 enum은 컴파일 시, 을 연결해주는 별도의 객체를 생성한다.…

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

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

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

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

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

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