모바일에서 클릭했을 때, 사용자의 기기에서 앱이 깔려있으면 앱으로 이동하고, 앱이 깔려있지 않으면 앱스토어로 이동하게하는 배너를 최근 구현했다. 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()’ 명령어를 활용하여 터미널인지..

오픈소스 컨트리뷰션 아카데미 발대식이 끝나고, Fedify에 기여를 해보기로 다짐했다. Fedify의 Issue 탭에 들어가 내가 시작해볼만한 이슈가 있는지 찾아보았는데, ‘good first issue’ 태그가 붙어있는 이슈들을 발견했다. 그 중 괜찮아 보이는 이슈를 발견해서 댓글로 이 이슈를 맡고 싶다고 했다. 이미 이 이슈를 맡고 계신분이 있나? 하는 생각이 잠시 들었지만, 잠시 후 멘토님께서 진행해도 된다는 댓글을 남겨주셨다. 이제 기여를 시작해보자. 1. 먼저 CONTRIBUTING.md를 읽어보자발대식에서 오픈소스 기여자들을 위한 문서가 있다는 사실을 알게 되었다. 바로 CONTRIBUTING.md인데, 들어가자마자 전부 영어로 된 문서에 잠시 긴장을 하긴했지만 어렵지 않게 작성되어 있어서..

정말 감사하게도 2025 오픈소스 컨트리뷰션 참여형 프로젝트 fedify의 멘티로 참여하게 되었다. 참여가 결정된 날, 멘토님으로부터 fedify에 대한 설명이 담긴 메일을 받았다. 첨부된 링크에는 fedify에 대한 설명과 함께 fedify를 활용하여 마이크로블로그를 만드는 튜토리얼을 볼 수 있었다.🔗 https://hackers.pub/@hongminhee/2025/fedify-tutorial-ko fedify에 대한 사전지식이 많지 않았기 때문에 잘 따라갈 수 있을까 걱정했지만 설명이 매우 자세하게 써져있었기 때문에 어렵지 않게 따라갈 수 있었다. 튜토리얼을 진행하며 fedify와 연합우주 그리고 개발에 필요한 내용들을 알 수 있게 되었고, 이 지식들은 앞으로 오픈소스 컨트리뷰션을 할 때 많은 도..