0. 웹 프론트엔드 모의고사?돌이켜보면 학창시절 때 정말 많은 모의고사를 풀었었다. 더 많은 모의고사, 다양한 문제를 접할수록 수능을 잘 볼거라 믿어 의심치 않던 시절이었다. 익숙하지 않은 유형의 문제를 틀리고 해설을 보며 외우는 과정의 반복. 이 반복된 행동을 괴로워하면서도 꽤나 즐겼던 것 같다. 이렇게 계속하다보면 수능에서 무슨 문제가 나와도 당황하지 않겠지라고 생각하며, 모의고사를 풀 때만큼은 잠시 불안에서 벗어날 수 있었다. 그리고 몇년이 지나, 모의고사와는 연을 끊은지 오래된 나에게 우연히 웹 프론트엔드 모의고사가 실시된다는 소식을 들었다. 웹 프론트엔드도 모의고사가 있다고? 트윗을 살펴보니 토스 프론트엔드 채용에서 실제로 사용했던 과제를 모의고사로 출제한다고 써져있었다. 토스에 지원해본적이 없..

지난 주, 나는 개인 사이트에 게시글을 올리기 위해 MySQL RDS를 생성하고 Next.js에서 라우팅을 설정했었다. 하지만 Vercel은 고정 IP를 제공하지 않아 RDS의 인바운드 규칙을 설정할 수 없는 문제가 발생했고, 결국 현재 구조로는 RDS에 접근하지 못한다는 사실을 알게 되었다. (이전 작성 글: https://quickchabun.tistory.com/191 ) 어떻게 하면 Vercel로 배포하면서 RDS에 접근할 수 있을까?Vercel의 Static IP 기능을 활성화해서 고정 IP를 생성한다. (구매 필요)AWS Lambda를 VPC 내부 DB 프록시로 두고 HTTP로 호출한다.데이터베이스를 AWS RDS에서 고정 IP 없이 접근이 가능한 데이터베이스로 마이그레이션한다.어떤 방법을 쓸..

모바일에서 클릭했을 때, 사용자의 기기에서 앱이 깔려있으면 앱으로 이동하고, 앱이 깔려있지 않으면 앱스토어로 이동하게하는 배너를 최근 구현했다. iOS, 안드로이드마다 적용해야되는 로직이 다르기 때문에 각자 다르게 설정을 해줘야하고 또 여러 가지 방법으로 구현할 수 있기 때문에 글로 정리해보려 한다.1. iOSa. Smart App Banner - 사파리에서만 가능가장 간편한 방법은 ‘스마트 앱 배너’인데, 사용자의 기기에 해당 앱이 깔려있으면 사파리에서 해당 앱이 해당하는 도메인에 접속하면 웹 사이트 상단에 자동으로 배너를 띄워준다. 구현 방법도 간단하다. HTML 헤더에다 다음과 같이 추가하면 된다.구현이 쉽고 간단하지만, 사파리에서만 볼 수 있다는 점과 커스터마이징을 할 수 없다는 단점을 가지고 있..

1. 개인 웹 사이트를 다시 디자인해보자기존 웹 사이트에 접속하면 맨 처음에 내 사진과 자기소개가 뜬다. 그리고 프로젝트와 내가 좋아하는 노래들을 소개하는 페이지가 있다. 사이트를 둘러보다가, 문득 전부 갈아엎어야겠다는 다짐을 했다. 일단 무엇보다 처음에 들어가자마자 내 사진이 뜨는게 좀 부담스러웠고, 블로그에 올린 글을 개인 사이트에도 보여주고 싶었다. 그리고 데이터들을 HTML에 하드코딩해서 표시하지 않고, 데이터베이스에 저장해서 API를 통해서 보여주고 싶었다. 나는 개인 웹 사이트를 Next.js를 활용해서 구현했다. 서버 컴포넌트와 SSG를 활용하긴 했지만 Next.js의 라우팅 기능을 활용한 data fetching은 활용하지 않았기 때문에, 이번 기회에 데이터베이스를 만들어서 data fet..

1. 분명히 코드를 업데이트했는데지금 작업 중인 리액트 프로젝트는 pnpm의 Workspace 기능을 활용한 모노레포로 구성되어 있다. 리액트 프로젝트에서 pnpm build 명령어를 입력하면 php 프로젝트로 빌드된 js, css 파일이 올라가는 구조이다. 리액트 프로젝트에는 common 디렉토리가 있는데, 타입스크립트 코드를 트랜스파일링 해서 모듈로서 다른 프로젝트가 공용으로 사용할수 있도록 작동한다. 따라서 공용 모듈을 작성하고 싶다면 common 에 가서 작성후 export 한후 해당 디렉토리 내부에서 pnpm build 명령어를 실행하면 된다. (프로젝트 루트의 package.json에는 다음과 같이 명령어가 설정되어 있었다.){ "name": "@something/root", "privat..

저번에는 NestJS의 Controller, Provider, Module에 대해서 정리했었다.https://quickchabun.tistory.com/188 [‘NestJS로 배우는 백엔드 프로그래밍’ 정리] Controller, Provider, Module사실 백엔드를 공부하고자 하는 의지는 예전부터 있었다. 그래서 백엔드 강의도 구매해서 70% 넘게 들었었는데, 다른 일과 겹쳐서 완강을 못했던 기억이 난다. 그리고 다가온 추석 연휴, 교보문quickchabun.tistory.com 이번에는 요청이 제대로 전달되었는지 유효성 검사를 하는 파이프, 요청 처리 전에 부가 기능을 수행하는 미들웨어, 권환 확인을 위한 가드, 요청과 응답을 수정하는하는 인터셉터, 예외를 처리하는 예외 필터, 그리고 이 요..

사실 백엔드를 공부하고자 하는 의지는 예전부터 있었다. 그래서 백엔드 강의도 구매해서 70% 넘게 들었었는데, 다른 일과 겹쳐서 완강을 못했던 기억이 난다. 그리고 다가온 추석 연휴, 교보문고의 개발자 코너에서 무슨 책을 읽을까 고민하다가 ‘NestJS로 배우는 백엔드 프로그래밍’ 책이 눈에 들어왔다. 이번 연휴 때 이 책 하나만 다 읽고 정리해도 보람찬 연휴를 보낸 거라 자부할 수 있지 않을까. 그런 생각이 들어 책을 구매하고 본가에 내려갔다. 그리고 며칠에 걸쳐 틈틈이 책을 읽었고 머지않아 책의 끝 페이지까지 다다를 수 있었다. 이제 읽은 내용을 정리해보며 배운 내용을 복기해보려한다.1. Node.js 특징Nest는 Node.js를 기반으로 하는데, Node.js는 단일 스레드에서 구동되는 논블로킹 ..

Issue 🔗 https://github.com/fedify-dev/fedify/issues/376 Remove deprecated APIs for Fedify 2.0 · Issue #376 · fedify-dev/fedifyOverview This issue tracks the removal of all deprecated APIs that need to be removed in Fedify 2.0.0 as part of the major version cleanup. APIs to Remove 1. Federation Configuration Remove documen...github.com Fedify 2.0을 대비해 사용하지 않는 API들을 정리하는 이슈가 올라왔다. 해당 이슈를 확인해보면 없애..

KUIT 6기 랜딩페이지 🔗 https://www.konkuk-kuit.com/6/introduce0. GSAP를 써보자2025년 2학기를 맞이하여, 운영진으로 참여했던 KUIT(건국대학교 기획/개발 동아리)도 이제 6기를 맞아 부원들을 모집해야되는 시기가 다가왔다. 저번 4기와 5기 부원 모집 때에는 framer-motion 라이브러리를 활용하여 풀 페이지 스크롤 애니메이션 랜딩페이지를 구현했었는데, 이번 6기 모집 때 똑같은 템플릿을 활용할지 아니면 새로운 인터랙션을 구현할지 고민이 되었다. 4기 랜딩페이지 🔗 https://www.konkuk-kuit.com/4/introduce풀페이지 스크롤 애니메이션 구현기 🔗 https://quickchabun.tistory.com/131 부원 모집까지 ..

0. 터미널이 아닌 곳에서는 색상을 빼야하는 이유는?이슈 링크: https://github.com/fedify-dev/fedify/issues/257PR 링크: https://github.com/fedify-dev/fedify/pull/341 이슈에서는 먼저 ‘Color and TTYs’라는 글을 읽어보기를 권한다. 저 글의 내용을 요약하자면, 터미널에서 색상코드를 출력하는 프로그램을 만들 때, 표준출력이 TTY(=Terminal)에 연결되어있을 때에만 컬러코드를 써야한다고 한다는 내용이다. 터미널이 아닌 곳에서는 색상코드가 제대로 출력되지 않고 깨지기 때문이다. Fedify CLI에서는 Deno를 활용하는데, Deno에서는 ‘Deno.stdout.isTerminal()’ 명령어를 활용하여 터미널인지..