개발

원문: https://blog.logrocket.com/css-in-2026/한동안 웹사이트를 만들어 왔다면, CSS에 대해 어느 정도 확고한 의견이 있을 겁니다. 디자인과 레이아웃에는 당연한 선택이지만, 기본 애니메이션을 넘어 더 인터랙티브한 기능이 필요해지면 대부분의 개발자는 본능적으로 자바스크립트에 손을 뻗습니다. 하지만 끊임없이 발전하는 플랫폼 덕분에 웹 기능을 구현할 때 "CSS는 디자인, 자바스크립트는 인터랙션"이 더 이상 기본값일 필요가 없어졌습니다.모던 CSS는 이제 커스텀 스크립트가 필요했던 복잡한 애니메이션과 사용자 인터렉션을 처리할 만큼 강력합니다. 이 글에서는 CSS에 새로 도입되는 최신 기능들을 살펴보고, 자바스크립트로 익숙하게 구현하던 수준의 인터랙티비티를 유지하면서도 개발 워크..

원문: https://www.jonoalderson.com/conjecture/its-time-for-modern-css-to-kill-the-spa/네이티브 CSS 트랜지션은 클라이언트 사이드 라우팅의 가장 강력한 근거를 조용히 무너뜨렸습니다. 그런데도 사람들은 성능 좋은 웹사이트 대신 끔찍한 앱을 계속 만들고 있습니다.앱처럼 보여야 한다는 착각"앱처럼 느껴지게 만들어 주세요."기획 단계 어딘가에서 누군가 이 말을 꺼냅니다. CMO일 수도, 디지털 리드일 수도, 브랜드 매니저일 수도 있습니다. 그리고 이 한마디로 아키텍처가 결정됩니다. SPA로 가겠다고요. 아마 리액트겠죠. 뷰일 수도 있습니다. 거의 확실히 Vercel이나 Netlify에 배포될 것이고, 헤드리스 CMS와 GraphQL API도 곁들여..

원문: Lessons From 9 More Years of Tricky Bugs2002년부터 저는 제가 마주친 모든 까다로운 버그를 추적해왔습니다. 9년 전, 그때까지의 버그에서 얻은 교훈을 담아 블로그 글을 작성했습니다. 그 이후로 기록해온 버그들을 이번에 전부 다시 돌아봤습니다. 첫 번째 회고에서 정리했던 교훈들을 실제로 잘 실천해왔는지 확인하고 싶었고, 그사이 어떤 유형의 버그들을 마주쳤는지도 살펴보고 싶었습니다. 이전과 마찬가지로 교훈을 코딩, 테스팅, 디버깅의 카테고리로 나눠 정리했습니다.코딩1. 빈 케이스. 다섯 개의 버그가 빈 줄, 빈 파일, 공백, 또는 값이 0인 경우와 관련이 있었습니다. 예를 들어, 공백 한 칸(0이 아닌)이 있는 줄은 비어있는 것으로 건너뛰어야 했지만 그렇지 않았습니다..

이번 글은 내가 지난 두 달여간 교회 수련회에서 사용할 웹 어플리케이션을 만들었던 개발기이며 그 과정에서 배웠던 점들과 느꼈던 점들을 적어 보려고 한다. 지난 25년 12월 나는 한 교회 친구의 콜링을 받고, 교회 수련회에서 사용할 웹 어플리케이션을 개발하게 되었다.12월 초에 콜링을 받았고 수련회는 1월 23일이어서 기획과 개발을 다 7주 정도의 시간 안에 해야 하는 상황이었다.다행히 내가 혼자서 해야 하는건 아니었고 기획자 2명과 개발자 2명과 같이 총 5명이 팀으로 개발을 할 수 있는 팀이 있었다. 프로젝트 구조 : 웹 FE + BE 모노레포프로젝트 구조는 프론트엔드와 백엔드를 하나의 레포로 관리했다. 개발을 할 때는 프론트엔드 서버와 백엔드 서버를 각각 띄워서 작업했다. 사용했던 기술스택은 다음과..

최근에 인프런에서 프론트엔드 테스트에 대한 강의를 들으면서 생각한 내용을 주절주절 적어보려고 한다.프론트엔드에서 테스트가 필요한지? 에 대해서는 과거에는 논쟁이 있었던 것으로 기억한다. 누군가는 필요하다, 누군가는 필요하지 않다.내가 이전에 다니던 회사는 프론트엔드 테스트 코드가 없었고, 지금 회사는 있다. 하지만 테스트 코드가 있다고 크게 더 나은 점이 있는지는 잘 모르겠다. 가끔씩 프론트엔드 측에서 코드만 수정했을 때 테스트를 수정해 주지 않아서 테스트 CI가 깨지는 일이 몇 번 있었는데 오히려 번거롭다는 생각이 들 때도 있었던 것 같다.그런데 이번에 강의를 들으면서 프론트엔드에서도 테스트 코드가 필요하다 는 생각이 강하게 들었다. 어떠한 이유들로 테스트 코드의 필요성에 대해 느끼게 되었는지 이번 글..

원문: https://www.jonoalderson.com/performance/http-caching/캐싱은 웹의 보이지 않는 중추입니다. 캐싱 덕분에 사이트는 빠르고 안정적이며 저렴하게 운영될 수 있습니다. 제대로 구현된 캐싱은 지연 시간을 대폭 줄이고, 서버 부하를 감소시키며, 취약한 인프라도 갑작스러운 트래픽 급증을 견딜 수 있게 합니다. 반면, 잘못 구현되거나 완전히 무시될 경우 웹사이트는 느리고 불안정하며, 유지보수 비용이 많이 들게 됩니다.근본적으로 캐싱은 불필요한 작업을 줄이는 것입니다. 브라우저, CDN 또는 프락시가 변경되지 않은 리소스를 서버에 요청해야 할 때마다 시간과 대역폭이 낭비됩니다. 서버가 동일한 콘텐츠를 다시 빌드하거나 재전송해야 할 때마다 부하와 비용이 추가됩니다. 블랙 ..

AI 시대, '잘 쓴다'는 것의 의미매일같이 새로운 AI 도구와 모델이 쏟아져 나오는 시대다. 우리는 인공지능(AI)을 통해 아이디어를 얻고, 코드를 작성하며, 문서를 요약하는 등 다채로운 방식으로 업무 효율을 높이고 있다. 하지만 정작 "AI를 얼마나 잘 활용하고 있는가?"라는 질문에는 선뜻 답하기 어렵다. 어떤 부분에서 AI의 도움을 받는 것이 효율적인지, 그리고 사람 대비 얼마나 효율이 나아지는지에 대한 객관적인 측정은 아직 부족한 실정이다.단순히 최신 AI 도구를 많이 아는 것을 넘어, 실제 업무 현장에서 유의미한 성과를 창출하기 위해서는 'AI 활용 능력'을 제대로 이해하고 체계적으로 개발할 필요가 있다. 본 글에서는 AI가 업무에 활용되는 영역을 나누어, 각 영역에서 필요한 핵심 역량이 무엇인..

나는 평소에 개발 관련 서적을 많이 읽는 편이다. 서점에 가서 보기도 하고 지인들에게 추천을 받아 읽기도 한다. 그러던 중 최근에 눈길을 끄는 제목의 프론트엔드 개발 서적 한 권을 우연히 만나게 되었다. 바로 이 책이다. 나는 현재 회사에서 타입스크립트와 리액트로 웹 프론트엔드 개발을 하고 있다. 사실 이 스택은 나 뿐만 아니라, 굉장히 많은 회사에서 이미 표준으로 자리잡고 있는 스택이라 웹 프론트엔드 개발자로 취업을 하길 희망하는 취준생에게는 필수적이라고 보아도 과언이 아닐 것이다. 하지만 시중에 많은 리액트, 타입스크립트 책을 봐온 나로서는 아쉬운 점이 있었다. 크게 두 가지인데 첫 번째는 책이 너무 두꺼웠고, 두 번째는 책이 너무 어려웠다. 대부분 아쉬운 점은 1번 아니면 2번, 아니면 둘 다였다...