개발 블로그🐶🐾

테스트용 API가 필요했는데,다른 팀에 요청 드리기 애매한 상황에 추천 받은 Google Sheets API ! 1분도 안걸릴 정도로 간단해서 포스팅하러 가져왔숩니다 .. Google Sheets API 만드는 법1. 구글시트를 켜서 원하는 필드와 데이터를 입력한다. 2. 탭 이름을 설정한다. 3. 공유하기를 눌러서 링크가 있는 모든 사용자로 변경한다. 4. 링크를 복사 한다. 링크 복사를 누르면,https://docs.google.com/spreadsheets/d/1BU1@@@@@@@/edit?usp=sharing 이런 링크가 복사되는데저기서 빨간색으로 표시한 부분이 시트 ID 이다. 그리고 시트의 탭 이름은 위에서 설정한 Info https://opensheet.vercel.app/시트ID/시..

단순하게 get 요청은 useQuey, useSuspenseQuery / post 요청은 useMutation이라고 생각했었는데,이번 작업을 하면서 생각 해볼 일이 있어서 포스팅하게 됐다 ㅎㅎ 기존 이슈를 해결하기 위한 QA 작업을 진행하다 발견한 케이스이다 ㅎㅁㅎ클릭 시점으로 데이터의 상태를 받아와야했는데, 훅에서 API를 호출하다보니페이지 렌더링을 하면 훅이 호출되었고, 이후 refetch를 호출하게 하는 방식을 활용해도오래된 기존 데이터 표출 후, 최신 데이터를 받아오는 문제..ㅎㅎ... 캐싱이 필요 없는 데이터이고, 클릭 시점의 상태를 받아와야 했기 때문에 useMutation으로 변경하니 잘 동작했다. 그런데 의문이 든 점!1. get data 인데 useMutation으로 받아오는게 맞을까?2..

리프레시 토큰 재발급 작업을 진행하면서, Next.js 미들웨어에 대해 좀 더 깊게 공부를 하게 되어 정리할 겸 9월 포스팅 👀사실 .. 이 작업은 7월에 해서 .. 7월에 작성해둔 글인데 이제서야 올려요 ㅎ 미들웨어를 활용하면 Request 단계에서 인증/인가를 처리하거나, 특정 경로로 리다이렉트하는 작업을 손쉽게 구현할 수 있음! 1. 미들웨어 실행 범위페이지 요청 API 요청 클라이언트가 API를 호출하면 Next.js 서버에 요청이 도착하기 전에 미들웨어가 먼저 실행됨 (여기서 인증 토큰 검사, IP 필터링, 로깅 등을 수행할 수 있음.)서버 코드에서 내부 API를 호출할 때도 미들웨어가 동작(단, 서버 내부 요청은 브라우저 컨텍스트가 아니므로 쿠키가 자동으로 넘어가지 않음 -> 필요한 경우 ..

8/23 토요일 세종대에서 열린 FE콘에 다녀왔다!사실 이 전부터공부하고 싶었는데 바쁘다는 핑계로 미뤄왔던 SEO ...ㅎㅎ 그래서 가장 재미있게 들은 세션이 강남언니 SEO 전략 세션이었다 ㅎㅎ새로 듣는 개념들과 단어들이 많아서, 정리 전에 용어들부터 정리하고 가려고 한다. 1. 크롤링 버짓- 검색 엔진 로봇이 내 사이트에서 소비할 수 있는 시간과 리소스- 로봇이 오래 머물수록 많은 페이지를 수집해가고, 그만큼 검색 노출 기회가 늘어남 -> 페이지 수집량을 늘리는 방식- 대표적인 크롤링 버짓 확보 방법 : 로딩 속도 개선(LCP 개선), 불필요한 페이지 줄이기 * 페이지 수집량 늘리는 방식 1. 페이지 크기(페이지 로딩하는데 걸리는 시간) 줄이기-> LCP 개선이 도움 되는 이유 2. 크..

6월에 상반기 회고를 진행했는데, 하반기 목표와 같이 기록해두려고 쓰는 글이다 ㅎ..ㅎ 써야지 써야지 하다 시간이 한 달이나 흘렀는데, 그 전에 공부하면서 사용했던 노트북을 백업 후 초기화 하다가 과거 기록들을 마주해서 ..ㅎㅎ 이런 저런 마음에 글을 작성한당 무튼 .. 그럼 레츠 고 🦀💡 1월1. 개발 스터디를 다시 시작했다! 작년까지 스터디를 주에 3-4개씩 진행하다가 취업 이후 취업 목적의 스터디를 그만두게 되며 회사 스터디 외에 거의 진행하지 못했다.물론 회사 들어온 지 한 달 밖에 안됐을 시기라서 적응하기도 바빴지만 ㅎㅎ무튼 스터디를 안하니 강제성도 사라지고, 다양한 사람들의 의견을 들어볼 기회가 사라진 것 같아서 예전 스터디원 멤버들에게 여쭤보아 스터디를 진행했다. 회사 스터디와는 별개로 ..

평소처럼 .. 배포를 진행하였는데 배포 실패했다.Error: Too many requests - try again in 12 seconds (more than 400, code: "api-projects-list"). (429)라는 이유와 함게 .. 내가 추측한 해당 현상이 일어나는 이유Vercel CLI가 api-projects-list를 과도하게 요청해서 rate limit에 걸림Article, DB를 동시에 배포했을 때 이렇게 실패모노레포에서 여러 패키지를 동시에 배포하여, Vercel 에서 각 패키지마다 api-projects-list를 반복 호출하게 되어 해당 현상 발생하는 것으로 파악Vercel 요금제에 따라 rate limit이 달라지는데, 최근 업데이트 이후 제한이 더 엄격해진 것 ??? ..

평소와 같이 개발서버에 배포를 했는데 빌드 실패했다 ㅠ 로컬에서 빌드 되는 것까지 두 번이나 확인하고 진행한 배포였기 때문에 타입 문제는 아닌거 같아서 확인해보니,처음보는 "Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" 너 누군데? 저 원인에 대해 찾아보니,빌드 시 사용되는 의존성 패키지의 메모리 사용량 과다 때문일 거라는 추측 .... 커서가 예상한 원인은 무거운 라이브러리들이라서 어느정도 맞는 것 같기는 하지만, .. 무튼.,..찾아보니 해결할 방법은 Node.js 기본 메모리보다 크게 늘려주는 것!기본이 1.5GB 정도래서 4GB로 늘려주었다. 로컬 빌드는 성공하지만, Githu..

자주 오고 싶지만 .. 어쩌다보니 한 달에 한 번씩 오는 개발 블로그 .....ㅎㅎ...이번에는 너무 재밌는 작업을 해서 포스팅으로 남기려고 방문했습니당~! 카톡으로 회사 서비스를 공유하는 경우, 구글 로그인을 하는 경우 403 오류가 발생하며 차단되는 현상이 발생해서 해결이 필요했어요. oauth 사용해보신 분들이라면 많이 마주해보셨을 거 같은데요,구글 내부에서 자체적으로 막아두었기 때문에 인앱에서 구글로그인이 막히는 지극히 당연한 현상 입니다..ㅎㅎ 그래도 서비스 특성상 해결되면 좋을 것 같다 하셔서 다른 서비스의 케이스들 탐구하기 ...~! * 해결을 위해 참고한 서비스 : 원티드 ios 안드로이드 카카오톡// 기본브라우저 열리며 표출// 지원 안함링크드인// alert만 표출// intent 방..

요즘은..이라고 하기에는 몇 주 지났지만 ,, Sentry 관련 작업을 했다. Sentry는 사실 부트캠프 하던 시절에 멘토님께서 말씀해주셔서 알게 되었는데, 사용해 본 적은 없어서 개념적으로만 알고 있었다. 기존 프로젝트에 세팅은 되어있어 에러 알람은 잘 오는 상태였다.하지만, 일부 에러들은 알람이 울리지 않게 해주어야 했고, 일부 API 에러들에 한해서는 sentry가 울리게 설정해주어야 했다. 넥스트와 리액트 프로젝트 세팅 내부에서 전역에서 예외 처리도 하고, 각 컴포넌트 별 예외처리도 하면서 생각보다 다양한 속성을 지원한다는 점을 알게되어 포스팅을 하게됐당. Application Performance Monitoring & Error Tracking SoftwareApplication perfo..

정말 오랜만에 작성하는 블로그 ..ㅎㅎ몇 달 전 에러바운더리에 대해서 글을 작성했었는데, 이번에 관련된 작업을 하게 되었다. 에러바운더리는 상단 컴포넌트에 설정해두어야 하고, 해당 영역에 에러가 발생한 경우에 대체 ui로 가려지는 역할을 한다.이 기능을 통해서 깨진 ui만 대체되어, 유저는 다른 기능들 사용이 가능하다. 하지만, 이 기능이 동작하면 안되는 경우가 존재했다.해당 ui로 가려지지 않고, 그 버튼 하나만 보여지지 않으면 되는 부분이었는데 중요도 낮은 기능 하나 때문에 페이지 진입 문제가 발생했다.설상가상으로, 분리할 수 없는 부분이어서 이 기능이 포함된 컴포넌트 전체 영역에 에러바운더리가 표출되는 문제까지 발생했다. 그래서, 이 버튼 하나만 비활성화 되게 하는 로직으로 변경하였다.방법은 리액..