웹사이트들을 돌아다니다보면, 내린만큼 화면이 스크롤 되는 것이 아니라 특정구간마다 탁탁 걸리면서 정지하는 스크롤을 이용한 사이트들이 많이 보인다. 이 사이트는 스크롤을 내릴때마다 화면 전체의 배경색이 바뀌면서 극적인 효과를 준다. 눈으로 보면 쉽지만, 말로 설명하자면 어려운 이런 스크롤 방식을 "scroll snap"이라고 부른다.Scroll SnapCSS의 scroll-snap-type을 이용해서 구현된다. 스크롤이 멈출 수 있는 지점을 지정하는 것이다. 이 멈춤 지점을 앵커(anchor)라고 부른다. 예를 들어, tailwind 에서는 가로로 이미지를 스크롤하는 예시를 보여준다.비슷한 용어로 "Full Page Scroll"이라는 표현이 있다. 이는 scroll snap을 활용해 구현되며, 페페이지 ..

새로운 터미널 환경에서 새로운 레포지토리(repository)라도 클론(clone)받으려고 하면 인증이 참 귀찮다. 웹에서 쓰는 비밀번호를 입력하면, 아래의 이미지처럼 비밀번호 인증(Password Authentication)이 종료되었다는 오류로 실패하게 되기 떄문이다. 따로 깃헙의 개인 액세스 토큰(Personal Access Token)을 발급받거나, SSH key를 생성해야 하는데, 토큰의 권한도 관리해줘야하고, 여러모로 복잡하다.  그래서 나는 Github CLI로 로그인하는 방법을 선호한다. Github CLI를 이용하면 여러가지 편리한 방법으로 터미널에서 로그인을 할 수 있다.brew install gh // macOSapt install gh // Linuxgh auth login이 대화형..

게시글 작성 화면을 구현하려면, WYSIWYG 에디터를 사용하게 된다. ChatGPT의 추천으로 나는 TinyMCE라는 에디터를 선택했다. 이 에디터를 이용해 게시판 작성 화면을 구현하면서, 이미지와 파일을 다루는 방법에 대해 내가 작업한 내용을 이 글에서 소개한다. 나도 대부분의 코드 작성을 claude-3.5-sonnet(cursor AI)이라는 친구에게 맡기고, 이후 생긴 버그들을 디버깅한 정도라, 코드에는 개선의 여지가 더 많을 수 있다. 1. 사진/파일 업로드 하기문제상황TinyMCE의 이미지업로더(ImageUploadPicker)와 파일업로더(FileUploadPicker) 기능을 활용하고자 한다면, 이미지/파일을 어딘가에 업로드하고, 그 업로드된 URL을 반환해주는 핸들러 함수가 필요하다. ..

결론부터 적자면 주민등록등본을 내니까 성공했다.Google 플레이스토어에 내가 만든 앱을 업로드하려면, 개발자 계정을 추가해야한다.일단 개발자 계정을 생성하는데에 25달러를 요구했고(하필 환율도 높을 때...), 주소지 입력, 결제계정 생성 등 꽤나 답답한 과정을 거친 후에 도착하는 최종관문이 바로 "본인인증"이다. 이 본인인증이 답답한 이유는 아래와 같다. 1. 실제 거주지의 전기/수도 요금 명세서나 은행 명세서 등의 서류를 요구한다.2. 캡쳐/스크린샷이면 안된다.3. 서류에 반드시 실제 본인의 이름과 주소지가 들어가 있어야한다.4. 90일 이내여야 한다.5. 아마 사람이 직접 승인하는 구조라, 근무일에만 승인된다. 처음에는 대충 되겠지 생각하고, 도시가스 명세서 화면을 캡쳐해서 보냈는데, 반려당했다...

약 한 달간 Cursor AI를 사용해보았습니다. 간단한 React 웹 페이지와 NestJS CRUD 서버, 그리고 React-Native 앱의 거의 개발 착수 단계에 사용하였습니다. 결론부터 말하자면, 새로운 프로젝트를 시작할 때에 있어서는 너무나도 편리하고, 압도적으로 생산성을 늘려줄 수 있는 도구라고 느꼈습니다. Gpt나 Github Copilot을 처음 경험했을 때보다도 큰 충격을 준 도구였습니다. 이 글에서는 Cursor AI에 대한 간단한 소개와 느낀 점들을 다룹니다. Cursor AI란Cursor AI는 VScode의 포크 프로젝트이며, 갖가지 AI 기능이 탑재되어 있습니다. 제가 주로 사용한 기능들은 아래와 같습니다.Tab - line 수정 제안코드를 작성하다보면 Cursor가 특정 라인의..

안드로이드 개발을 할 때, 안드로이드 휴대폰을 맥북과 연결해서 사용합니다. 하지만 유선연결은 여러가지 이유로 불편하죠.이 글에서는 두 기기를 무선으로 연결해보겠습니다. 아래의 과정을 따라갑니다.미리 말하자면, 휴대폰과 맥북이 같은 와이파이 위에 있어야합니다.adb(Android Debugger Bridge) 설치휴대폰 무선 디버깅 켜고 페어링/연결1. adb 설치adb는 Android Debugger Bridge의 약자로, 안드로이드 개발환경과 안드로이드 실기기의 연결을 도와주는 cli 입니다.안드로이드 스튜디오를 설치하고, 설치 과정 중 sdk도 정상적으로 설치되었다면, 이미 설치가 되어있을것입니다.터미널에 adb 를 입력했을 때, adb의 버전넘버와 매뉴얼이 나온다면 이미 사용가능한 상태입니다.만약,..

쿠버네티스와 kubectl 커맨드 관련 작업을 행복하게 만들어주는 보조 도구들을 소개합니다. 쿠버네티스를 처음 사용하거나, 새로 개발 환경을 세팅해야 할 때, 읽어보세요. k9s https://k9scli.io/ K9s - Manage Your Kubernetes Clusters In Style Who Let The Pods Out? K9s is a terminal based UI to interact with your Kubernetes clusters. The aim of this project is to make it easier to navigate, observe and manage your deployed applications in the wild. K9s continually watches..

엑셀 또는 스프레드시트 파일을 Node.js 환경에서 다루고자 할 때, csv 파일을 사용합니다. Csv 파일은 여러 필드가 쉼표와 줄바꿈으로 표현된, 간단한 파일이므로, fs 모듈을 이용하여 쉽게 읽고쓰기 구현이 가능합니다. 하지만, 저는 아래의 라이브러리의 도움을 자주 받는 편입니다. https://csv.js.org/ CSV Project - Node.js CSV package This is a full-featured CSV parsing tool running entirely on your browser. No data leave your computer ! Use it also to learn how to use our packages and to test the various options ..