구글 클라우드(apps script)로 GA4 맞춤정의 항목 자동으로 넣는 방법
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/인프라_네트워크/구글 클라우드(apps script)로 GA4 맞춤정의 항목 자동으로 넣는 방법.md
Tag
#블로그/개발
36개의 포스트 · doo-blog
Tagged Posts
36개의 공개 문서가 이 태그를 포함합니다.
Next.js의 캐싱 메커니즘
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/Next.js의 캐싱 메커니즘.md
Best Practice - Next.js useSearchParams 는 안쓰는게 좋다
개요 회사에서 Next.js를 사용하는데 블로그/개발
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/Best Practice - Next.js useSearchParams 는 안쓰는게 좋다.md
중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성
멤버십 앱을 개발하면서 웹 접근성은 반드시 고려해야 할 요소 라는 생각이 들어 강연을 듣게 되었다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성.md
스벨트를 통해 리액트 더 잘 이해하기
FE 커뮤니티에는 늘 수상할정도로 스벨트를 열정적으로 사랑하는 개발자들이 있다. (생각해보니 대부분은 이사람임)
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/스벨트를 통해 리액트 더 잘 이해하기.md
슈퍼 클로드코드 사용자 가이드
겉보기엔 복잡해 보이지만, 실제로 SuperClaude는 아주 쉽게 쓸 수 있어요.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/개발 환경과 도구/슈퍼 클로드코드 사용자 가이드.md
슈퍼 클로드코드 사용자 가이드 요약본
빠른 요약 슈퍼 클로드코드를 쓰면 기존 클로드코드보다 더 정교하게 코드를 작성할 수 있다. 특히 거대한 시스템에서 기능 추가 시 여러 사이드이펙트를 고려해주고 기존 코드와 호환성을 고려한 기능추가를 해준다. 또한 시니어 레벨에 근접한 코드 퀄리티를 보여준다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/개발 환경과 도구/슈퍼 클로드코드 사용자 가이드 요약본.md
GitHub Actions로 CI CD 파이프라인 구축하기
개발 프로젝트를 진행하다 보면 CI/CD 파이프라인을 구축하는 일이 필수적이다. 최근 모노레포 구조의 프로젝트에서 GitHub Actions를 활용해 자동 배포 워크플로우를 설정하는 과정에서 몇 가지 트러블슈팅 경험이 있었다. npm에 패키지를 배포할 의도는 없었는데 GitHub Actions 워크플로우에서 자꾸 npm
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/개발 환경과 도구/GitHub Actions로 CI CD 파이프라인 구축하기.md
WireGuard VPN에서 VS Code 원격 SSH 연결 문제 해결 가이드
간만에 마음에 드는 카페를 찾았고, 기분 좋게 맥을 켰는데, 원격 서버에 접속이 안된다. 내 환경은 macOS 에서 WireGuard VPN 을 통해 사설 네트워크의 RHEL 서버(192.168.0.2)에 접속하는 구성이었다. 지금까지 정상 작동하던 원격 SSH 접속이 갑자기 불안정해졌다. 문제 발생부터 해결까지의 과정을...
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/개발 환경과 도구/WireGuard VPN에서 VS Code 원격 SSH 연결 문제 해결 가이드.md
효과적인 리액트 컴포넌트 유지보수 방법론
리액트 애플리케이션에서 컴포넌트의 설계와 유지보수는 장기적인 코드 품질과 개발 효율성에 큰 영향을 미칩니다. CenterMap 컴포넌트 리팩토링 사례를 통해 알아본 효과적인 컴포넌트 유지보수 방법론을 소개합니다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/효과적인 리액트 컴포넌트 유지보수 방법론.md
어렵게 만든 차트를 react기반 프로젝트에서 재사용할 수는 없을까
개요 현재 nuxt로 만들어진 chartJS기반 컴포넌트를 next 기반 시스템에서 재사용하려는 니즈가 있다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/어렵게 만든 차트를 react기반 프로젝트에서 재사용할 수는 없을까.md
jotai vs zustand
핵심 컨셉 Jotai는 기존의 우리가 쓰던 일반적인 전역 상태 라이브러리와는 조금 다른 패턴을 사용하는 라이브러리이다. 일반적으로 Primitives라고 하는 이름을 쓰는데, atom이라는 가장 작은단위를 생성, 관리, 제어 하는 여러가지 함수를 통해 전역으로 상태를 관리한다. React의 useState와 매우 유사하게...
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/jotai vs zustand.md
Best Practice - EC2에서 지속적인 메모리 및 디스크 문제 개선을 위한 방법
$1 블로그를 AWS로 직접 운영하다보니 위와같은 문제가 있었다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/인프라_네트워크/Best Practice - EC2에서 지속적인 메모리 및 디스크 문제 개선을 위한 방법.md
읽을거리 - 자바스크립트와 타입스크립트에서 메모이제이션란 무엇인가요
자바스크립트와 타입스크립트에서 $1란 무엇인가요? $1란 무엇인가요? 암시적 $1 $1를 위한 $1 함수 재귀와 피보나치 수열 스택 추적
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/읽을거리 - 자바스크립트와 타입스크립트에서 메모이제이션란 무엇인가요.md
서버에서 raw data를 받아 client에서 가공하는 것은 적절한가
현재 상황 서버에서 raw 데이터를 클라이언트로 전달 클라이언트에서 데이터 가공 후 화면 렌더링하는 구조
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/서버에서 raw data를 받아 client에서 가공하는 것은 적절한가.md
코드리뷰를 잘할 수 없을까
개요 코드리뷰는 꼼꼼하게 보려고하면 정말 한도끝도없이 긴 작업이다. 개인적으로 코드는 볼수록 좋아지고, 고칠수록 좋아진다고 생각하기 때문에 더 그렇다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/개발 환경과 도구/코드리뷰를 잘할 수 없을까.md
EC2 서버에 도메인 연결하고 https 적용하기
EC2 기반 웹서비스 HTTPS 적용 과정
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/인프라_네트워크/EC2 서버에 도메인 연결하고 https 적용하기.md
코드리뷰 pull request 템플릿
변경하려는 상황과 이유를 설명하세요. 해결하려는 문제가 무엇인가요? 어떤 경우에는 문제가 없는 경우도 있으며 이것이 변화의 동기라고 생각할 수 있습니다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/개발 환경과 도구/코드리뷰 pull request 템플릿.md
pull request - SSR 로그인
로그인 기능 및 로그인 별 권한 처리를 SSR로 구현한다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/pull request - SSR 로그인.md
next 15 업데이트 관련 내용 정리
Next.js가 버전 15가 출시되었다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/next 15 업데이트 관련 내용 정리.md
JWT가 모바일 친화적인 이유
개요 $1.md)가 모바일에 친화적인 이유는 JWT의 특수성 때문이다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/JWT가 모바일 친화적인 이유.md
react query를 써야 하는 이유
개요 기존 우리의 $1 앱은 상당히 치명적인 문제가 있다. $1 꽤 오랜 시간을 간단한 코드로 해결하려고 했으나, 결과적으로는 실패했다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/react query를 써야 하는 이유.md
FE개발자의 SaaS 도입을 위한 기술 검증 및 고려사항
회사에서 SaaS 비즈니스를 운영함에 따라, SaaS를 어떻게 개발해야 하는지, 프론트엔드(FE) 개발자의 관점에서 어떤 기술을 활용할 수 있는지, 그리고 실제로 어떤 방식으로 접근해야 할지에 대한 고민을 정리해보았다..
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/FE개발자의 SaaS 도입을 위한 기술 검증 및 고려사항.md
AWS 프리티어로 웹서비스 배포 - ECS 구성
$1를 개발하면서, 작업한 내용을 aws에 배포하고싶어졌다. 집에 RHEL 서버가 있지만 트래픽이 몰리면 네트워크가 아예 끊어지기도하는 등 안정적이지도 않고 회사에서 사용하던 AWS를 이참에 공부해보고싶기도 해서 AWS 프리티어로 배포해보았다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/인프라_네트워크/AWS 프리티어로 웹서비스 배포 - ECS 구성.md
AWS 프리티어로 웹서비스 배포 - EC2 인스턴스 설정하기
$1를 개발하면서, 작업한 내용을 aws에 배포하고싶어졌다. 집에 RHEL 서버가 있지만 트래픽이 몰리면 네트워크가 아예 끊어지기도하는 등 안정적이지도 않고 회사에서 사용하던 AWS를 이참에 공부해보고싶기도 해서 AWS 프리티어로 배포해보았다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/인프라_네트워크/AWS 프리티어로 웹서비스 배포 - EC2 인스턴스 설정하기.md
Web - App 브릿지 활용을 통한 네이티브 내비게이션 구현
본 문서는 웹과 앱 환경에서 일관된 사용자 경험을 제공하기 위해 구현된 커스터마이징된 라우터 시스템에 대해 설명한다. 이 시스템은 웹뷰(WebView)를 직접 제어하며, 네이티브 애플리케이션과 웹 애플리케이션 간의 원활한 통신을 가능하게 한다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/Web - App 브릿지 활용을 통한 네이티브 내비게이션 구현.md
왜 React.FC를 사용하지 않는가
요새 코드를 보면(특히 GPT가 만든) 이런식으로 React.FC를 쓰는 경우가 많다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/왜 React.FC를 사용하지 않는가.md
유틸리티 타입
Partial<T : 모든 프로퍼티를 선택적(optional)으로 만드는 유틸리티 타입이다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/유틸리티 타입.md
리터럴
추가 설명 대충 추가설명 블로그/개발
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/리터럴.md
iOS 웹뷰에서 결제 후 리다이렉트 문제 해결하기 - 도메인 불일치 사례
2024년 9월의 어느 평화로운 오후, 우리 팀은 갑작스러운 장애 보고로 인해 긴장 상태에 돌입했다. "iOS에서 결제 완료 후 로그인 페이지로 리다이렉트됩니다."
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/iOS 웹뷰에서 결제 후 리다이렉트 문제 해결하기 - 도메인 불일치 사례.md
Vue 2에서 Vue 3로의 변화
Vue.js는 프론트엔드 개발 생태계에서 중요한 위치를 점유해 왔으나, Vue 2는 몇 가지 주목할 만한 한계가 존재했다. Vue 3는 이러한 한계를 극복하고 현대적 웹 개발의 요구사항을 충족시키기 위해 근본적인 변화를 도입하였다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/Vue 2에서 Vue 3로의 변화.md
React에서 Next.js로의 전환 과정
React는 프론트엔드 개발에 혁명을 가져왔고, 어느덧 출시 후 10년을 넘게 해먹고있지만, 웹 애플리케이션의 복잡성이 증가함에 따라 새로운 도전 과제들이 등장했다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/React에서 Next.js로의 전환 과정.md
ActiveX와 WebAssembly
과거에는 복잡하고 고도화된 업무 처리를 위해 브라우저와 JavaScript만으로는 한계가 있었기 때문에, ActiveX 와 같은 플러그인이 도입되었다.
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/ActiveX와 WebAssembly.md
Best Practice - 정적 타입 분석을 통한 데이터 텍소노미 구조화하기
현대 서비스 기업에서 데이터 분석과 사용자 행동 추적은 필수적인 요소로 자리잡고 있다. 그러나 이러한 중요성에도 불구하고, 많은 스타트업에서 Google Analytics(GA)의 주요 관리 권한은 마케팅 조직이 보유하고 있는 실정이다. (우습게도, 마케팅 조직에서는 개발자와 협업하는 것 자체가 피로하다는 이유로, 적극적...
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/Best Practice - 정적 타입 분석을 통한 데이터 텍소노미 구조화하기.md
Best Practice - Next.js Router Events 페이지 접속 시 GA 이벤트 발생시키기
Next.js Router Events: 페이지 접속 시 GA 이벤트 발생시키기
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/JavaScript/Best Practice - Next.js Router Events 페이지 접속 시 GA 이벤트 발생시키기.md
Best Practice - Obsidian Vault와 Next.js 블로그의 자동 동기화 구현
개요 Next.js를 사용하여 Obsidian vault를 블로그로 활용하는 웹서비스를 개발했다. 이 시스템에서 Obsidian vault의 변경사항을 자동으로 웹서비스에 반영하는 방법을 구현해보자. 기존 시스템 구조 Obsidian vault는 GitHub 저장소에 호스팅됨 웹서비스의 로컬 환경에서 Obsidian 저장...
PARA/03_Resources/R001_개발_레퍼런스(참고문서)/개발 환경과 도구/Best Practice - Obsidian Vault와 Next.js 블로그의 자동 동기화 구현.md