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-02-04 04:45

전체 (148)

2d

2025.02.02

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

000

20d

vscode prettier 동작 안할 때

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

000

1M

GTM -> GA user_id 보내기

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

000

1M

2024.12.13 (작성중)

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

000

1M

GA vs GTAG vs GTM

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

000

1M

2024.12.27

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

000

1M

2024.12.26

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

000

1M

2024.12.16

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

000

2M

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

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

000

2M

2024.11.29

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

000

2M

SEO 기본 체크리스트

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

000

2M

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

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

000

2M

2024.11.14 (작성중)

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

000

2M

2024.11.11

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

000

2M

2024.11.08

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

000

2M

2024.11.07

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

000

2M

2024.11.06

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

000

3M

2024.11.01

padding 상대값
패딩의 상대값은 부모의 너비값을 따른다.
<div class="parent" style="position: relative; width:1000px;">
<div class="child" style="po

000

3M

2024.10.30

Image 압축
이미지는 웹성능개선에 있어서 가장 큰 영향을 미친다고 생각한다.
lazy loading 이나 가상 스크롤 혹은 preconnect를 통한 네트워크 요청/속도를 개선하는 것도 중요하지만 애초에 이미지를 최대한 압축하

000

1y

2024.01.17

채용과제를 진행함, 간만에 개발해보면서 느낀것들 간단히 적기
스캐폴딩
디렉토리 구조를 어떻게 가져갈까에 대한 고민이 항상 있다.
뭔가 공식처럼 패턴화해서 나만의 노하우를 갖고 싶었다.
처음에는 Atomic Design Patter

001