ginameee.log - mysetting

7:09 8/01

velog.io

mobile screenshot relative

7:09

velog.io

mobile screenshot

ginameee.log
https://velog.io/@ginameee

멍청합니다. 오늘 먹은 음식도 기억이 안납니다. 그래서 모든걸 기록합니다.

저작도구: velog

최종 피드 수집: 2025-05-18 06:15

전체 (151)

5d

2025.05.13

간만에 모바일 환경개발을 하니 많은 부분을 까먹었다.
더군다나 최근에는 매번 AI에 습관적으로 물어보긴만하니 점점 습득하는 지식이 휘발성으로 변하고 멍청해져가는 기분이다.
AI를 잘 활용하는 방안을 찾되 그래도 경험들은 간단히라도

000

18d

2024.04.30

최근 많은 프로젝트들을 접하고, 처음에 불편하다고 생각했던 디렉토리구조에 익숙해지다보니 불편함을 잊고 일을하게된다.
다시한번 나만의 프로젝트 구조기준을 정하고, 사이드프로젝트나 혹은 지금 프로젝트를 개선할 수 있는 기회가생겼을때

000

1M

2024.04.12 (작성중)

MCP가 핫하다.
AI를 이용해서 다양한 작업들을 손쉽게 하기 위해 등장한 개념인데, 사용해보기전에 관련된 개념들을 간단하게 검토해보자.
Generative AI
컨텐츠를 생성할 수 있는 AI
모든 AI가 생성형 (Generati

001

3M

2025.02.02

yarn berry + monorepo 에서 prettier가 동작안할 때
VSCode에서 yarn berry로 구현한 pnp 프로젝트의 경우,
VSCode가 일반적인 vscode내부의 extension설치 경로가 아닌 .yar

000

4M

vscode prettier 동작 안할 때

VS Code → preference → settings
“default foramtter” 검색
Default Formatter를 Prettier로 세팅
(optional) format on save 켜기
저장할 때 포맷팅을 원

000

4M

GTM -> GA user_id 보내기

user_id 가 넘어가질 않네...
gtm -> ga 로 이벤트를 넘길 때, 희한하게 user_id 값이 GA 에 남지않는 이슈가 있었다.
gtm 이벤트 로그를 확인해보았을 땐 모든게 정상적으로 동작하고있었다.
처음에는 user

000

4M

2024.12.13 (작성중)

다국어처리
NEXT_LOCALE cookie 값을 활용한 다국어 처리
next.config.js 에 i18n 필드 추가
Reference
https://nextjs.org/docs/pages/building-your-applica

000

4M

GA vs GTAG vs GTM

GA
사용자의 액션을 추적하기 위해 데이터를 쌓고 분석해주는 도구
GA를 사용하려면 계정 생성 후, 제공해주는 스크립트를 프로젝트에 심어야 함
GA 버전에 따라 제공되는 스크립트가 다르기때문에 주의
구버전
analytics.js

000

4M

2024.12.27

value union type
객체의 필드의 values 값들을 유니언타입으로 설정하고 싶을 경우
export const events = {
GET_EXTENSION_ID: "HORSY_GET_EXTENSION_ID",
S

000

4M

2024.12.26

Component cannot be used as a JSX component
clerk을 사용하는데 이런 이슈가 발생했다.
typescript version을 5버전이상으로 올리면 괜찮아진다.
"typescript": "^5.0

000

5M

2024.12.16

URLSearchParams.toString 은 자동으로 파라미터에 대해 URIEncoding을 수행한다.

000

5M

모노레포 구축/이관 (작성중)

yarn berry (with pnp) 를 사용해 모노레포를 구축하고, 기존프로젝트들을 migration 해본다.
프로젝트 생성
모노레포 프로젝트 생성
npm i -g yarn
cd {monorepo_directory}
yarn

000

5M

2024.11.29

비동기 함수의 이슈는 콜스텍이 없다.
비동기로 호출된 함수에서 이슈가 발생할경우, 콜스텍이 없다.
함수자체의 호출은 성공했다고 볼 수 있고, 비동기함수가 동작하는 순간 독립적인 context, callStack 을 갖게되기 때문.

000

5M

SEO 기본 체크리스트

쉽게 확인/수정할 수 있는 순으로 정리해본다.
lighthouse의 SEO 점수 체크
lighthouse 를 통하면 SEO 측면에서 어떤부분이 잘못됐는지, 기본적인 개선점은 무엇인지 알려준다.
이미지 체크
이미지에는 <img> 태

000

5M

접속한 사용자 위치 알아내기

해외에 있는 사용자들에 한해서 팝업을 보여주고 싶었다.
사용자가 해외인지 아닌지를 판별하기 위해 진행한 작업을 간단하게 정리해본다.
2가지 과정으로 이뤄진다.
IP 주소를 얻어내기
IP 대역을 참고하여 위치를 알아내기
모든 페이지

000

6M

2024.11.14 (작성중)

Nextjs 의 빌드 최적화 처리
nextjs 에서는 빌드과정에서 최적화과정을 수행한다.
이 결과로 종종 local과 다르게 동작하는 부분이 생길 수 있다.
api
Swallow route
최초 요청시 서버사이드에서 랜더링을 한

001

6M

2024.11.11

hydration
hydration 이슈가 발생했을때 해결방안
mounted 조건 추가
const Modal: React.FC = ({ isHide }) => {
const [isMounted, setIsMounted] = use

000

6M

2024.11.08

ip 주소 얻어오기
nextjs 에서 request 객체를 통해 주소를 얻어오고 싶다면,
이 때는 x-forwarded-for 라는 헤더값을 사용하면된다.
사실 request.ip 나 request.geo 등 다양한 값들을 제공하

000

6M

2024.11.07

AI 기반의 서비스를 어떻게 만들지?
생각보다 별개없었다.
준비물
사용하려는 LLM 의 api key 를 준비한다.
제공하려는 서비스를 위한 프롬프트를 준비한다.
현재의 질문이 어떤 서비스의 답변으로 사용되는지
어떤형태로 답변을

000

6M

2024.11.06

localization
사용자의 환경에 따라 특별한 동작을 수행하고 싶을 때, 두가지 방법을 생각해볼 수 있다.
(ex 해외에서 접속 시, 영문페이지 보여주기)
지역기반
geoip 를 사용하여 ip 기반으로 지역을 판단할 수 있다

000