구글 애널리틱스 API 연동을 위한 방법이 다양해서 오히려 헷갈리더라구요. 제가 연동한 방법을 소개합니다! 먼저 프로젝트에서 구글 애널리틱스 API로 데이터를 받아보기 위해서는 3가지 선행 작업이 필요합니다. > GA API를 사용하기 위해서는 GCP 콘솔에서 서

점심 메뉴 추천 서비스의 사이드 프로젝트를 기획 & 개발을 시작했습니다. 다양한 사용자들이 범용적으로 사용할 수 있는 주제여서, 검색에도 노출되게 하고 주변 지인들에게도 소개해서 사용을 유도하려고 계획했습니다. 그렇기에 실제 사용자들의 결과를 살펴보는 것이 유의미할 것

SSH 키 생성 및 사용 SSH란 무엇인가? SSH(Secure Shell)는 네트워크 상에서 안전하게 데이터를 교환하기 위한 프로토콜입니다. 특히 원격 서버에 로그인하거나 데이터를 전송할 때 보안을 강화합니다. SSH 키는 비밀번호 대신 사용될 수 있는 인증 방식

Firebase Realtime Database를 사용하여 알림을 생성하고, 비동기 처리 시 발생할 수 있는 에러를 Firestore DB에 기록하였습니다. 이 작업으로 비동기 작업에서 발생할 수 있는 에러를 기록하고 디버깅에 활용하는 방법을 구현해보았습니다.프로젝트

이번에 E2E 테스트 코드를 처음 적용해보면서, Cypress를 사용하여 자동화된 테스트를 GitHub Actions 워크플로우에 추가해봤습니다. 이를 통해 테스트 코드의 완성도 있는 과정을 체험하고, CI/CD 파이프라인에서의 자동화된 테스트 실행을 경험했습니다.이전

Cypress로 업로드 페이지 테스트하기 Next.js 환경에서 개발한 업로드 페이지에 Cypress를 이용해 E2E(End-to-End) 테스트를 구현했습니다. 이 테스트의 주요 목표는 업로드 페이지의 기본 렌더링부터 사진 등록, 장소 검색, 설명 입력, 그리고 최

대량의 데이터(예: 수천 개의 목록 항목)를 한 번에 렌더링하면 성능 문제가 발생할 수 있습니다. 가상화는 이 문제를 해결하기 위해 현재 화면에 보이는 항목들만 렌더링하고, 스크롤할 때 필요한 항목들을 동적으로 추가 및 제거하는 기술입니다.무한 스크롤을 적용했던 다른

리액트 쿼리 없이, 데이터를 갱신하려면?Next.js의 App Router와 Firebase를 백엔드로 사용하여 서버 컴포넌트 환경에서 게시물을 등록한 후, 새로운 게시물이 실시간으로 홈 페이지에 반영되도록 하는 방법입니다.서버 컴포넌트에서 위에서 정의한 데이터 가져오

GitHub에서 제공하는 CI/CD(Continuous Integration and Continuous Deployment) 플랫폼입니다. 이를 통해 개발자들은 자동화된 워크플로우를 생성하여, 코드 변경 시 자동으로 빌드, 테스트, 배포 등의 작업을 수행할 수 있습니다

CI에 Lint와 Build를 추가하고 PR를 했더니 Lint에서 오류가 나서 PR이 실패했습니다. 그러자 위와 같은 안내가 레포지토리에 뜨기 시작했습니다.main 브랜치를 보호하여 실수로 강제 푸시되거나 삭제되지 않도록 설정할 수 있습니다.세부 규칙 설정을 키고 꺼서

CI/CD 간략한 정의CI 과정에서 Lint와 Build를 설정했습니다. 버셀로 배포한 프로젝트여서 CI만 추가하였습니다.빌드 또한 버셀이 진행하지만 CI에서 빌드하면 미리 오류를 잡을 수 있는 장점이 있습니다.ESLint 설정은 아래에 따로 있습니다.루트 다이렉트의

웹 바이탈을 라이트하우스로 체크하면서 접근성과 검색엔진 최적화 점수가 각각 85점과 73점으로 낮았습니다. 이왕이면 좋은 점수를 받고 싶어서 개선을 위해 SEO의 궁금한 점을 간략히 소개하고 검색엔진 최적화를 시도한 방법들을 정리합니다.1차적으로 index.html의

lazy 로딩 적용 후 렌더링 시간 차이: 첫 번째 이미지의 렌더링 시간은 17.5ms이고, 두 번째 이미지의 렌더링 시간은 3.6ms입니다. 이는 최적화 작업 후 렌더링 성능이 크게 개선되었음을 나타냅니다. 컴포넌트 구조 및 리렌더링: 첫 번째 이미지에서는

폰트를 적용해보니, 폰트에도 최적화가 필요함을 느꼈다. 적용한 폰트가 다운로드 될 때 까지 보이지 않거나, 기본 폰트에서 추가 적용한 폰트로 변화하는게 보이는 건 유저의 경험을 떨어트린다.용량은 TTF/OTF > WOFF > WOFF2 순으로 WOFF2가 가장 작다.웹

10주 과정의 항해99 취업리부트 코스를 수료하고 작성하는 후기입니다!(할인 코드는 맨 아래 있습니다)비전공자로 1년전에 부트캠프를 수료하고서 혼자 강의를 보며 공부하고, 외부 스터디에도 참여하면서 공부를 하다가, 작년 말부터 취업을 본격적으로 준비했습니다.일단 이력서

https://apis.map.kakao.com/web/sample/addr2coord/https://apis.map.kakao.com/web/documentation/getCenter 메서드와 같은 설명은 2번째 링크 documentation를 참고

이번 주 항해 취업 리부트코스에서 내가 구현한 기능은 무엇인가요? 장바구니에 담은 상품으로 가상 결제를 구현하기.해당 기능을 구현하기 위해, 어떤 기술적 의사결정을 거쳤나요?장바구니와 결제와 관련되어 전역으로 상태를 참조하고 업데이트를 하는 경우가 많으니 Context

이번 주 항해 취업 리부트코스에서 내가 구현한 기능은 무엇인가요?카테고리 페이지에서 무한 스크롤 적용과 최신순, 가격순 정렬상품 상세 모달창장바구니 구현해당 기능을 구현하기 위해, 어떤 기술적 의사결정을 거쳤나요?이전에는 장바구니를 전역 상태로 사용하기 위해 recoi

개인 프로젝트 주차가 시작되었다!프론트엔드의 주제로는 SNS, 커뮤니티, 커머스가 있었다. 커머스가 할 것도 많고 난이도가 높아서 커머스를 선택했다! 추후에 주차별 기능 구현 과제에 결제 SDK 연결도 있어서 난이도가 있는 것 같다. 참고로 프로젝트의 기본 셋업 구성을

이 포스트는 월간 CS - React, Next 배포와 배포 자동화 A부터 Z 스터디의 참여 후 정리하는 글입니다.실습1\. CloudFront, S3 배포하기2\. GitHub Action에서 React 지속적 전달 구현하기가비아에서 가장 저렴한 도메인을 구매합니다.