전체 글

안하려고 했는데, 또 했네나는 이전에 312기 포텐데이에 참여했던 경험이 있다. 당시에 '오때(Otte)'를 만들고 네이버 클라우드 수상까지 하면서 느낀 점이 많았었는데 회고를 쓰지 못했던 게 너무 아쉽다. 그 때도 좋은 팀원들과 함께 기획하며 짧은 시간 내 몰입해서 완성했기에 뜻 깊은 경험이었다. 좋았던 경험이었음에도 불구하고 10일이라는 짧았던 기간 탓에 사실 포텐데이에 또 참여하고 싶지 않았다. 단기가 아닌 장기적인 사이드 프로젝트를 하고 진행하고 싶었다. 10일 동안 간단한 MVP구현은 할 수 있었지만 코드 퀄리티가 매우 떨어졌었기 때문이다. 실제로 많은 팀들이 기한 내에 서비스 배포를 하지 못한 경우도 다수 존재한다. 나는 우리가 구성한 기능만큼은 완성하고 싶었고, (당시에는 이게 내 실력의 척..

사이드프로젝트 시작에 앞서 개발환경 세팅하면서 배포를 먼저 시도했는데 문제가 발생했다. 오가니제이션에 있는 레포지토리는 프로 요금제로 변경해야 배포할 수 있다. 이전에 오때 사이드 프로젝트를 진행할 당시에는 조직 계정도 무료로 배포할 수 있었으나 최근에 정책이 변경된 듯 하다.. 검색해보니 다들 우회하여 무료로 배포하고 있었다. 우회하는 플로우는 대충 아래와 같다. 오가니제이션에 레포지토리를 생성한다.개인 계정에 해당 레포지토리를 fork한다.vercel에는 개인 계정에 레포지토리를 연동하여 배포한다.오가니제이션에 있는 레포지토리에서 Github Actions을 통해 프록시를 사용해 배포한다.위 순서에서 마지막이 핵심이다.즉, 깃헙액션에서 제공하는 runner(가상머신)을 이용해 직접 vercel에 소스..

NextJS로 블로그를 만들고 있는데 Tailwind CSS만으로는 전역 폰트 설정이 되지 않는 문제가 생겼다. 알고보니 Next에 기본적으로 폰트가 설정되어 있었고 css로 body에 폰트를 적용해도 덮어씌워지지 않았다. Next.js의 폰트 최적화에 대해 알아보고 동시에 전역 폰트 설정을 해보자. NextJS의 폰트 최적화NextJS에서는 기본적으로 next/font를 사용한 폰트 최적화 기능을 제공한다. npx create-next-app을 했을 때 기본 layout.tsx파일을 확인해보면 아래와 같이 설정되어 있다.import type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";con..

요즘 이펙티브 타입스크립트 스터디를 진행하고 있다. 벌써 절반 정도 읽었는데, 타입스크립트도 제대로 안써본 내게는 어려운 내용이지만, 실제로 사용하게 되면 도움될만한 내용들이 많았다. 이제 프론트엔드에게 타입스크립트가 필수가 되어버린 시대인데 아직 제대로 써본 경험이 없어 조금 부끄럽다.. 이전 회사에서도 안정성을 위해 무작정 써보자고만 했었지, 정확한 이유를 설명하진 못했다.(물론 클라이언트사에서 거절 당해 결국 써보진 못했지만 말이다..) 이펙티브 타입스크립트와 별개로 실제 코드에서 어떻게 활용하면 되는지 궁금해서 우아한 타입스크립트 with 리액트 책도 구매해서 보는 중이다. 책을 읽다 보니 문득 타입스크립트를 왜 쓰는지 그 이유를 명확히 이해하고 넘어가는 것이 중요하다는 생각이 들었다. 더 이..

최근에 멘토링을 받고 있는데 멘토님과 공부 시간과 관련된 얘기를 하다 스톱워치 얘기가 나왔다. 최근에 내가 사용하던 스톱워치가 망가져 새로 구매해야겠다고 말했는데 멘토님이 직접 만들어보라고 하셨다.. 생각해보니 나 개발자였지! 순간 여러 아이디어가 떠올랐다. 단순하게 구현해서 나만 쓸거면 그냥 로컬로 띄워서 사용해도 되겠지만 크롬 확장프로그램으로 띄워서 사용해도 재밌겠다는 생각이 들었다. 그래서 일단 도전! 간단하게 내가 생각한 기능 리스트를 작성해봤다스톱워치 페이지(기본)재생 버튼 - 누르면 타이머가 재생된다. 타이머가 동작 할 때는 disabled버튼으로 표시한다정지 버튼 - 누르면 타이머가 정지된다. 타이머가 동작 하지 않을 때는 disabled버튼으로 표시한다리셋 버튼 - 누르면 타이머가 리셋된..

내가 개발자가 된 후에 처음 가본 컨퍼런스는 멋쟁이사자처럼에서 주최한 DDC 2023이었다. 이 때 들었던 발표들이 인상 깊었음에도 불구하고 회고를 작성하지 못했다(노트북을 안가져갔던 탓이라도 해야지..) 이후에도 INFCON 2023, WOOWACON 2023 등 대형 컨퍼런스를 신청했으나 하는 족족 전부 떨어졌다. 현생이라도 열심히 살아야지 하며 그렇게 2023년이 지나갔다 스터디에서 우연히 인프콘 얘기를 듣고 너무 가고 싶어 참가 신청도 하고, 여러 이벤트도 참여했다(블로그 작성, 강의 구매 등)참가 신청 발표날 결국 떨어져서 결제했던 금액이 모두 환불 처리 되어버렸다. 원래 이런 대형 컨퍼런스는 경쟁률이 너무 높아서 기대를 안하고 있긴 했지만, 하필 이 날 기분 좋지 않은 일이 있었는데 인프콘까지..

앱 최적화# 이미지 컴포넌트NextJS는 라는 특정 이미지 컴포넌트를 제공한다. 이미지는 웹 사이트 성능에 꽤 무거운 부분을 차지하기 때문에 이미지에 대한 부분만 최적화를 시켜도 페이지의 성능을 높일 수 있다. 이 컴포넌트의 역할은 로드된 이미지 파일의 사이즈나 포맷 형태를 자동으로 최적화 시켜주어 사이트 성능과 속도 향상에 도움을 준다. width / height 프로퍼티width와 height 속성은 컴포넌트에 반드시 들어가야 할 속성이다. 해당 이미지가 들어갈 적합한 공간을 미리 마련해 레이아웃 이동을 방지해야 하기 때문이다. 만약 로컬 파일에 있는 이미지를 사용한다면 src 속성에 import한 이미지의 .src를 제거하고 사용해야 Next가 logo의 width와 height 속성을 인식할 ..

드디어 정보처리기사 끝장을 봤다! 작년에 필기 한 번에 합격하고 실기만 2번이나 떨어졌었는데 어제 드디어 마음 한 구석에 있던 숙제를 끝낸 기분이었다. 아직 합격자 발표는 안났지만 가채점 결과 80점 이상이라 안정권으로 합격이다. 2회차는 역대급 합격률이 나올만큼 늘 어렵게 낸다는 소문이 있어서 전날까지도 너무 불안했다. 원래 불안하면 집중을 잘 못했었는데 요즘 명상을 시작해서 그런지 확실히 불안할수록 집중이 더 잘 되는 효과를 봤다! (예민하고 집중 잘 못하시는 분들 꾸준히 명상 한 번 해보세요) 실기 준비는 퇴사하고 Next스터디와 병행하면서 6월 중순부터 본격적으로 시작했다. 작년에 이미 공부했던게 있었지만 올해 다시 보니 새로운 기분이었다.. 확실히 회사 다니면서 공부할 때는 꼼꼼하게 보지 못..