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

최종 피드 수집: 2024-12-25 08:45

전체 (141)

9d

2024.12.16

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

000

23d

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

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

000

27d

2024.11.29

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

000

1M

SEO 기본 체크리스트

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

000

1M

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

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

000

1M

2024.11.14 (작성중)

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

000

1M

2024.11.11

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

000

1M

2024.11.08

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

000

1M

2024.11.07

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

000

1M

2024.11.06

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

000

1M

2024.11.01

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

000

1M

2024.10.30

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

000

11M

2024.01.17

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

001

11M

2024.01.15

구직활동을 위해 거진 3달만에 개발을 손에 잡는다.
문법도 기억이 안나고 큰일이다.
그동안 일하면서 갖고있던 생각들을 복기하고 정리해본다.
개발전에 데이터구조를 먼저 확인/논의하자
정석대로라면 데이터설계 및 API가 먼저 개발된

001

1y

private github repo 접근안될때

회사레포의 경우 직원들만 접근이 가능하고, 접근권한이 없는 경우 permission denined 와 같은 에러가 아닌 not found 에러를 내뱉는다.
레포 접근시 사용되는 인증정보가 잘못되었을 확률이 높다.
1. 어디에 저장

000

1y

2023.08.09

GA가 동작안하는 경우
iframe 내부에서는 동작 안함
iframe 에서의 network request라고 하더라도, first-part cookie (부모페이지의 쿠키)를 사용하기 때문에, 부모페이지에서 GA 관련 쿠키가 없다

000

1y

2023.08.03

웹뷰 프로젝트를 진행하고있다.
할때마다 느끼는건데, 웹뷰는 프론트만 잘 구현한다고 되는게 아닌 것 같다.
회사별, Android, IOS 플랫폼별 웹뷰 정책이 너무 천차만별이라 어디선 되고 어디선 안되는게 너무 많다.
일단 진행하

000

1y

input file 같은파일 두번 onChange 무반응

input file에서 동일한파일을 연속으로 입력하게되면 onChange 이벤트가 발생하지않는다.
같은파일을 등록했을때도 onChange 이벤트를 발생하고싶다면 value를 초기화해주어야한다.
const handleUploadIm

0015

1y

2023.07.26

리펙토링
컴포넌트의 상태를 줄이는게 중요
상태를 줄일 수 있는 방법으로는 특정 상태와 관련된 로직들을 별도의 훅으로 분리시키는 것도 좋은 방법이다.
특정 패턴들을 일관화해서 하나로 묶어보자.
코드가 간결해지고 분기가 필요했던 부분

000

1y

2023.07.20

x-cache response header
x-cache는 CDN과 관련된 정보를 담고 있다.
다양한 정보가 있지만 주로 확인하는 정보는 cache hit 유무에 대한 정보로 볼 수 있다.
aws cloudfront 에서의 x-c

000