전체 오늘 어제
주제 전체 Learning

전체 글

5개

트러블슈팅

Chrome은 오는데 Edge는 0건… 사라진 웹푸시는 어디갔을까??

8월 3일까지 잘 오던 웹푸시가 다음 날 Edge에서만 감쪽같이 사라졌다. 그사이 배포한 코드는 없었다. 서버도 정상이고 FCM Token도 그대로였다. 더 이상한 건 같은 계정으로 Chrome을 열면 알림이 바로 왔다는 점이었다.마침 Edge가 150에서 151로 자동 업데이트된 직후였다. 처음에는 그래도 우리 코드를 의심했다. 웹푸시 문제는 권한, Token, Firebase 설정, Service Worker처럼 확인할 곳이 워낙 많아서 브라우저 탓이라고 단정하기가 더 어려웠다.앞 글에서는 FCM 웹푸시가 브라우저까지 오는 흐름을 정리했다. 이번에는 그 흐름 중 정확히 어디에서 알림이 사라졌는지 찾은 기록이다.일단 우리 코드가 범인인지부터 잘랐다처음 확인한 건 서버 발송 결과와 Token이었다. 둘 ..

kimjusnu 읽기

Frontend

프론트엔드 2년차에 처음 알았다… FCM 웹푸시는 어떻게 브라우저까지 올까

프론트엔드 개발 2년 차가 될 때까지 웹푸시가 어떻게 오는지 제대로 몰랐다. Notification.requestPermission()으로 권한을 받고 FCM Token을 만들면 끝인 줄 알았다. 막상 직접 붙여 보니 알림 하나가 화면에 뜨기까지 Frontend, Backend, FCM, 브라우저, Service Worker, OS가 차례로 움직이고 있었다.알림 권한만 받으면 끝인 줄 알았던 2년 차 Frontend 개발자.Notification과 Push는 같은 말이 아니었다먼저 헷갈렸던 건 Notification과 Push였다. 둘 다 사용자 눈에는 화면 오른쪽 아래에 뜨는 알림이라 같은 기능처럼 보였다. 브라우저 안에서는 맡은 일이 다르다.Notification API는 알림을 화면에 표시한다. 페..

kimjusnu 읽기

공모전

수십 번 내고 커피쿠폰만 받았다… 첫 상금 100만원을 만든 기사 작성법

8월 12일 오후 5시 1분, 메일함에 ‘우수상 수상 안내’가 떠 있었다. 수십 번 공모전에 냈지만 그동안 받아 본 건 커피쿠폰이나 네이버페이 1만원 정도였다. 이번에도 그런 건가 싶어서 메일을 열었는데 상금 100만원과 상장을 준다고 적혀 있었다. 공모전을 계속 내다 보니 이런 날도 왔다.상장에 적힌 학교명은 가렸다. AI로 처리해서 자세히 보면 조금 티가 난다.이 공모전이 눈에 들어온 이유솔직히 처음부터 교육 기사에 큰 뜻이 있었던 건 아니다. 공모전 공고를 보다가 ‘교육 기사 작성’이라는 말이 눈에 걸렸다. 2026년 2월 컴퓨터공학 전공을 졸업했고 지금은 개발자로 일하고 있어서 AI는 익숙했다. 입시 데이터를 기사처럼 써 본 적은 없었다. 그래서 한번 해보고 싶었다.분량은 1,500~4,000자,..

kimjusnu 1 읽기

트러블슈팅

주석이라 안심했는데… Jinja2가 서버를 500으로 터뜨린 이유

농장이 없는 일부 계정에서만 발생한 500 error의 원인은, 실행되지 않을 거라 믿었던 HTML 주석 속 한 줄이었다.“분명 주석 처리했는데, 이 코드가 왜 실행되지?”특정 계정으로 리포트 페이지에 접근할 때만 500 Internal Server Error가 발생했다. 대부분의 계정에서는 멀쩡했고, 농장이 없는 일부 계정에서만 재현됐다.HTML 주석은 browser를 위한 주석이다. Jinja2는 HTML이 만들어지기 전에 template을 먼저 해석하므로, 안의 {{ }}와 {% %}도 그대로 실행한다.HTML 주석 안의 expression도 Jinja2 parser는 먼저 평가한다.특정 계정에서만 500이 발생했다GET /WEBSITE/report 500 (Internal Server Error..

kimjusnu 읽기

AI & Agents

코드는 Agent가 짜는데… Frontend 개발자는 대체 뭘 해야 할까

“이 에러 고쳐줘.”나는 화면에 떠 있는 빨간 error overlay를 보며 Coding Agent에게 그렇게 말했다. 사람에게는 너무나 명확한 요청이었다. 하지만 잠시 뒤 돌아온 답은 엉뚱했다. 그제야 당연한 사실을 깨달았다. 나는 에러를 보고 있었지만, Agent는 아무것도 보고 있지 못했다.처음에는 그저 도구의 한계라고 생각했다. error log를 복사해서 붙여 주면 될 일이었다. 그런데 최근 Next.js의 변화를 찾아보다가, 이 작은 불편이 생각보다 훨씬 큰 변화의 출발점이라는 걸 알게 됐다.Next.js는 이제 사람이 쓰기 좋은 Framework를 넘어, Agent가 읽고 판단하고 행동하기 좋은 Framework로 바뀌고 있었다.조금 섬뜩했던 한 문장2026년 2월 Next.js 팀은 Bu..

kimjusnu 읽기

트러블슈팅

Chrome은 오는데 Edge는 0건… 사라진 웹푸시는 어디갔을까??

8월 3일까지 잘 오던 웹푸시가 다음 날 Edge에서만 감쪽같이 사라졌다. 그사이 배포한 코드는 없었다. 서버도 정상이고 FCM Token도 그대로였다. 더 이상한 건 같은 계정으로 Chrome을 열면 알림이 바로 왔다는 점이었다.마침 Edge가 150에서 151로 자동 업데이트된 직후였다. 처음에는 그래도 우리 코드를 의심했다. 웹푸시 문제는 권한, Token, Firebase 설정, Service Worker처럼 확인할 곳이 워낙 많아서 브라우저 탓이라고 단정하기가 더 어려웠다.앞 글에서는 FCM 웹푸시가 브라우저까지 오는 흐름을 정리했다. 이번에는 그 흐름 중 정확히 어디에서 알림이 사라졌는지 찾은 기록이다.일단 우리 코드가 범인인지부터 잘랐다처음 확인한 건 서버 발송 결과와 Token이었다. 둘 ..

kimjusnu읽기

Frontend

프론트엔드 2년차에 처음 알았다… FCM 웹푸시는 어떻게 브라우저까지 올까

프론트엔드 개발 2년 차가 될 때까지 웹푸시가 어떻게 오는지 제대로 몰랐다. Notification.requestPermission()으로 권한을 받고 FCM Token을 만들면 끝인 줄 알았다. 막상 직접 붙여 보니 알림 하나가 화면에 뜨기까지 Frontend, Backend, FCM, 브라우저, Service Worker, OS가 차례로 움직이고 있었다.알림 권한만 받으면 끝인 줄 알았던 2년 차 Frontend 개발자.Notification과 Push는 같은 말이 아니었다먼저 헷갈렸던 건 Notification과 Push였다. 둘 다 사용자 눈에는 화면 오른쪽 아래에 뜨는 알림이라 같은 기능처럼 보였다. 브라우저 안에서는 맡은 일이 다르다.Notification API는 알림을 화면에 표시한다. 페..

kimjusnu읽기

공모전

수십 번 내고 커피쿠폰만 받았다… 첫 상금 100만원을 만든 기사 작성법

8월 12일 오후 5시 1분, 메일함에 ‘우수상 수상 안내’가 떠 있었다. 수십 번 공모전에 냈지만 그동안 받아 본 건 커피쿠폰이나 네이버페이 1만원 정도였다. 이번에도 그런 건가 싶어서 메일을 열었는데 상금 100만원과 상장을 준다고 적혀 있었다. 공모전을 계속 내다 보니 이런 날도 왔다.상장에 적힌 학교명은 가렸다. AI로 처리해서 자세히 보면 조금 티가 난다.이 공모전이 눈에 들어온 이유솔직히 처음부터 교육 기사에 큰 뜻이 있었던 건 아니다. 공모전 공고를 보다가 ‘교육 기사 작성’이라는 말이 눈에 걸렸다. 2026년 2월 컴퓨터공학 전공을 졸업했고 지금은 개발자로 일하고 있어서 AI는 익숙했다. 입시 데이터를 기사처럼 써 본 적은 없었다. 그래서 한번 해보고 싶었다.분량은 1,500~4,000자,..

kimjusnu읽기

트러블슈팅

주석이라 안심했는데… Jinja2가 서버를 500으로 터뜨린 이유

농장이 없는 일부 계정에서만 발생한 500 error의 원인은, 실행되지 않을 거라 믿었던 HTML 주석 속 한 줄이었다.“분명 주석 처리했는데, 이 코드가 왜 실행되지?”특정 계정으로 리포트 페이지에 접근할 때만 500 Internal Server Error가 발생했다. 대부분의 계정에서는 멀쩡했고, 농장이 없는 일부 계정에서만 재현됐다.HTML 주석은 browser를 위한 주석이다. Jinja2는 HTML이 만들어지기 전에 template을 먼저 해석하므로, 안의 {{ }}와 {% %}도 그대로 실행한다.HTML 주석 안의 expression도 Jinja2 parser는 먼저 평가한다.특정 계정에서만 500이 발생했다GET /WEBSITE/report 500 (Internal Server Error..

kimjusnu읽기

AI & Agents

코드는 Agent가 짜는데… Frontend 개발자는 대체 뭘 해야 할까

“이 에러 고쳐줘.”나는 화면에 떠 있는 빨간 error overlay를 보며 Coding Agent에게 그렇게 말했다. 사람에게는 너무나 명확한 요청이었다. 하지만 잠시 뒤 돌아온 답은 엉뚱했다. 그제야 당연한 사실을 깨달았다. 나는 에러를 보고 있었지만, Agent는 아무것도 보고 있지 못했다.처음에는 그저 도구의 한계라고 생각했다. error log를 복사해서 붙여 주면 될 일이었다. 그런데 최근 Next.js의 변화를 찾아보다가, 이 작은 불편이 생각보다 훨씬 큰 변화의 출발점이라는 걸 알게 됐다.Next.js는 이제 사람이 쓰기 좋은 Framework를 넘어, Agent가 읽고 판단하고 행동하기 좋은 Framework로 바뀌고 있었다.조금 섬뜩했던 한 문장2026년 2월 Next.js 팀은 Bu..

kimjusnu읽기