최근 피드백 서비스 피드줍줍을 개발하면서 꽤 흥미로운 문제를 발견했습니다. 같은 코드인데 Chrome에서는 쿠키가 잘 저장되는데, Safari에서는 쿠키가 전혀 저장되지 않는겁니다. 게다가 localhost에서는 잘 동작해서 원인을 추적하는 데 더 혼란스러웠습니다.결론적으로, 문제의 핵심은 Safari의 쿠키 정책(ITP) 과 쿠키의 Domain 설정이었습니다.시작하게 된 계기피드줍줍의 주요 기능인 ‘좋아요’와 ‘나의 피드백 조회’는 사용자 식별을 위해 쿠키(visitorId)를 사용합니다. 그런데 테스트 중 Safari에서만 visitorId가 저장되지 않아 기능이 정상 작동하지 않았습니다.Chrome✅ 저장됨Safari❌ 저장 안 됨localhost Safari✅ 저장됨개발 환경에서는 proxy 설정..

LCP가 뭐지?LCP(Largest Contentful Paint)는 사용자가 페이지를 열었을 때 가장 큰 의미 있는 콘텐츠가 실제로 화면에 그려지는 시점이다. 기준은 다음과 같다.Good: ≤ 2.5sNeeds Improvement: 2.5–4.0sPoor: > 4.0s 대부분의 실제 페이지에서는 이 가장 큰 콘텐츠가 메인 배너나 히어로 이미지처럼 이미지로 잡힌다. 그래서 이미지 로딩이 느리면 LCP도 같이 늦어진다. LCP는 네트워크, 디코딩, 레이아웃, 페인트가 모두 끝난 뒤 기록되기 때문이다.네트워크 : 이미지를 서버에서 가져옴디코딩: 압축이미지 데이터를 픽셀 데이터로 변환하는 CPU/GPU 작업레이아웃: 페이지 요소 위치와 크기를 계산하는 과정 (크기 정보를 모르면 레이아웃 제계산 발생)페인트:..

왜 이 자동화를 하게 되었나저희 피드줍줍 팀 프론트는 이번에 성능최적화를 진행하게되었습니다. 그런데... 개발자마다 환경이 달라 점수가 들쭉날쭉했고, 바쁠수록 수동 측정은 자연스럽게 밀렸습니다. 이번엔 최적화했겠지 하고 지나갔다가 뒤늦게 라이트하우스 점수가 별로라는 걸 확인하기도 했어요! 장기적으로 서비스 품질을 지키려면 사람의 의지에 기대지 않고 자동으로 측정하고, 자동으로 공유하고, 자동으로 기록하는 흐름이 필요하다고 느꼈어요. 팀원들이 불편해하는걸 빨리 개선해보고싶기도 했습니다! 그래서 목표를 이렇게 정했습니다.개발서버에는 merge될때 구글 스프레드 시트에 성능 기록을 쌓고.프로덕션 서버에는 PR이 올라갔을때 코멘트로 성능 내용을 남기고, 구글 스프레드 시트에 성능기록을 쌓자고! 이 목표를 만족시..

최근에 피드줍줍 서비스를 우아한테크코스 캠퍼스내에 QR을 부착해서 사용자들을 유입시키고있습니다ㅎㅎ 우테코 캠퍼스의 건의사항을 근로 팀원이 코치님들에게 전달한다는 느낌으로요! 생각보다 많은 분들이 사용해주셨는데요! 그만큼 사용자에게 발생하는 오류를 재빠르게 해결할 필요성도 크게 느껴졌습니다. 사용자에게 오류가 발생했을때 그 사실을 파악하고, 해결하기위한 방법으로 Sentry를 도입하기로 했습니다. 이번에는 Sentry를 어떻게 세팅했는지, 어떤 결과를 얻었는지를 기준으로 글을 써보려고 합니다. 시작하게 된 계기- 사용자가 에러를 제보해도 정확히 언제, 어떤 상황에서 발생했는지 모르겠음 (실제로 크루가 이거 안돼요! 했는데 너무 잘돼서 울고싶었던 적이 있습니다.)- 에러가 얼마나 많은 사용자에게 영향을 미치..

이번에 우아한테크코스에서 피드줍줍 서비스를 구현하면서 서비스를 s3, cloudFront로 배포하는 과정을 겪었습니다. 그런데 실제로 배포를 하려면 s3에 파일을 올리고, cloudFront로 가서 캐시 무효화를 작동시켜야했는데 이 과정이 너무 오래걸리는 문제가 있었습니다ㅠㅠ또 저희가 개발서버와 프로덕션 서버를 나눴었는데 개발서버로 빌드한 파일을 프로덕션 S3에 업로드 하고.. 와 같은 휴먼에러도 있었습니다. 그래서 Github에 푸시만 하면 알아서 배포가 되도록 구축해보았습니다! 기본 지식 알고가기Amazon S3 Simple Storage Service의 줄임말로, 클라우드에 파일을 저장하는 서비스입니다. 버킷이라는 개념이 있는데 이는 전 세계에서 유일한 이름을 가져야 한다고 해요. S3는 데이터를..

최근 피드백 서비스 '피드줍줍'의 프론트엔드는 성능 최적화 작업을 진행했습니다. 목표는 Lighthouse의 점수를 더 좋게(ㅎㅎ)만드는것이었는데, 목표를 이루진 못했지만 충분히 의미있는 개선들이 있었어서 공유해보고자합니다! 이번에는 Lighthouse에 반영되지 않았던 개선들과 왜 반영되지 않았는지에 대해서 설명해보려고 합니다.시작하게 된 계기피드줍줍을 사용해주시는 분들께서 가끔 버벅거린다는 피드백을 해주셨습니다. 실제로 확인해보니 main.js 파일이 무려 11.5MB나 되더라구요! 이건 분명히 문제가 있다고 생각해서 본격적인 최적화 작업에 들어갔습니다. 문제가 여기에만 있지 않을테니 할수있는한 문제를 찾아보고 최적화 작업들을 순서대로 진행해보았습니다. 시도한 성능 최적화들1. 요청크기줄이기소스코드..

최근에 React PWA 프로젝트에 FCM(Firebase Cloud Messaging)을 이용한 푸시 알림 기능을 구현했는데, 생각보다 고려할 점들이 많았어서 경험을 공유해보려고 한다. 이 글의 목표는 FCM알림에 대해서 대략적으로 이해하고, 세팅할수 있으며 각 오류에 대응할 수 있는 기본적인 정보를 얻는 것! 구현 목표웹 브라우저에서 푸시 알림 받기포그라운드(탭 열린 상태)와 백그라운드(탭 닫힌 상태) 모두 지원사용자가 알림 ON/OFF를 쉽게 설정할 수 있는 토글 기능PWA 환경에서도 푸시 알림 받을 수 있게 하기 전체 흐름 이해하기FCM 알림의 기본 흐름은 다음과 같다 1. 사용자 알림 권한 요청브라우저에서 Notification.requestPermission() 실행.사용자가 허용해야 이후..

안녕하세요! 우테코 7기 분주입니다. 레벨2가 끝나가는 지금, 그동안 어떻게 지냈는지 한번 돌아보려 해요. 🔧 미션별 기술 성장기페이먼츠 Component - React 첫 도전이 미션은 처음으로 제대로 React를 써본 미션이었어요. TSX는 HTML이랑 비슷한 듯 하면서도 전혀 달라서 초반엔 엄청 어색했는데… 익숙해지고 나니까 은근 재밌더라고요.Storybook도 생소했는데, 컴포넌트를 따로따로 볼 수 있다는 게 되게 신기했어요. 카드 번호 넣으면 자동으로 Visa인지 MasterCard인지 보여주는 로직 만들면서 "아~ 상태가 바뀔 때마다 이렇게 화면이 다시 그려지는구나!" 싶었던 것 같습니다! 페이먼츠 Module - 사용자 입장에서 생각해보기npm 배포를 처음 해봤는데, 깨닫는게 많았어요. 처..

해당 내용은 우아한테크코스 7기 프론트엔드를 진행하면서 페이먼츠 1단계 - Component & Storybook를 진행하면서 제 코드의 의도를 설명하고, 복습하는 의미의 글입니다!학습목표?재사용 가능한 Input Component를 개발하기StoryBook으로 컴포넌트의 다양한 상태를 테스트하기상태관리를 경험하기전체 파일 구조📦src ┣ 📂component ┃ ┣ 📂card ┃ ┃ ┣ 📂util ┃ ┃ ┃ ┗ 📜maskingNumber.ts ┃ ┃ ┗ 📜Card.tsx ┃ ┣ 📂cardDetails ┃ ┃ ┣ 📜CVCInput.tsx ┃ ┃ ┣ 📜CardNumberInput.tsx ┃ ┃ ┗ 📜ExpiryDateInput.tsx ┃ ┣ 📜Descr..

Level1동안 뭘 했을까?일단 아래와 같은 일정으로 level1이 진행됐습니다. 항상 어떤 미션이 나왔을때 3일정도는 페어프로그래밍을 하고, 남은 일주일동안은 혼자 프로그래밍을 했습니다! GitHub - bunju20/javascript-movie-review: 우아한테크코스 레벨1 영화 리뷰 미션우아한테크코스 레벨1 영화 리뷰 미션. Contribute to bunju20/javascript-movie-review development by creating an account on GitHub.github.com  GitHub - bunju20/javascript-lunch: 우아한테크코스 레벨1 점심 뭐 먹지 미션우아한테크코스 레벨1 점심 뭐 먹지 미션. Contribute to bunju20/ja..