밝을희 클태

프로젝트를 진행하다가 상품 업로드를 하고 상품을 조회할 때 옛날의 데이터가 미리 렌더링 되고 그 이후에 최신 데이터로 바뀌는 게 너무 별로라서 왜 그런지 궁금했다. 일단 상품을 렌더링 하는 로직이const getProducts = async queryString => {... const res = await fetch(url);...};export default getProducts;서버 사이드에서 react query를 사용해서 data prefetching(getProduct)클라이언트 사이드에서 useQuery를 사용해 서버에서 미리 받아온 데이터를 렌더링react query 내부적으로 백그라운드에서 데이터 재검증이 일어나 최신 데이터를 다시 렌더링  원인은 위에 로직을 봐서 알겠지만 서버 사..

프로젝트를 진행하던 도중 테스트를 하고 있는데 아이폰에서 찍은 사진을 맥북으로 받아와 업로드하려고 하는데서 문제가 생겼다.  기존에 아래처럼 accept props에 이미지의 모든 확장자를 다 받게 설정을 해뒀는데 HEIC 이미지는 여기에 해당이 되지 않아서 이미지들이 선택이 되지 않았다. 아래처럼 image/heic를 추가해 주면 HEIC 이미지들도 input에서 선택이 가능하다. 그리고 이제 HEIC 파일들을 jpeg로 변환해 주기 위해 heic2any 라이브러리를 다운로드해야 한다. 해당 라이브러리는 HEIC 파일을 JPEG 또는 PNG로 변환할 수 있다.$ npm install heic2anyhttps://www.npmjs.com/package/heic2any heic2anyConverting ..

환경Next.js 14 APP RouterAWS SDK for Javascript v3 https://gaebarsaebal.tistory.com/79 [ AWS ] S3 버킷(bucket) 생성, 사용자 추가, 액세스 키 만들기전에 작성한 글이 있는데 너무 대충 설명한 거 같아서 다시 써야겠다.버킷 만들기1. aws에서 s3를 검색해서 들어와 버킷 만들기로 들어간다.2. 버킷 이름을 적는다.3. 나는 현재 계정에서만 사용할gaebarsaebal.tistory.comS3 bucket 설정은 이 전 포스팅에서 다룬다.  나는 S3 이미지 업로드를 서버에서 할 것이다. 클라이언트에서 할 수도 있지만 클라이언트에서 하면 AWS key가 노출될 위험이 있고 Presigned URL을 사용해 key의 노출을 막을..

전에 작성한 글이 있는데 너무 대충 설명한 거 같아서 다시 써야겠다.버킷 만들기1. aws에서 s3를 검색해서 들어와 버킷 만들기로 들어간다.2. 버킷 이름을 적는다.3. 나는 현재 계정에서만 사용할 거 기 때문에 ACL 비활성화를 체크4. 이미지를 저장하고 외부에서 읽기 위해 모두 체크 해제5. 객체가 삭제되거나 했을 때 복구 할 수 있도록 하능 기능이라는 거 같은데 따로 비용이 든다고 한다.. 나는 비활성화 6. 버킷에 저장되는 객체들을 자동으로 암호화해주는 기능인데 기본으로 선택된 것들로 했다.버킷을 만들었으면 이제 버킷을 관리하는 사용자를 만들어줘야 한다.사용자 만들기1. 보안 자격 증명으로 이동2. 권한 탭으로 이동해서 버킷 정책 클릭3. 사용자 탭으로 이동후 사용자 생성 클릭4. 사용자 이름 ..

환경Next.JS 14 APP route 지금 진행 중인 프로젝트가 있는데 Next.js로 하고 있다. 해당 프레임워크를 사용하는 이유 중 하나가 Image 최적화 때문인데 중고거래 사이트에서 가장 중요한 건 많은 양의 이미지를 다루는 만큼 Image 최적화가 중요하다 생각이 들어 Next.js를 골랐다. Next.js에서 어떻게 이미지를 최적화할 수 있을까?sizes 이미지의 크기를 설정할 때 width, height를 줄 수 있는데 이미지를 반응형으로 만들기 위해서는 해당 props를 사용할 수 없다. 그러면 fill을 사용해야 하는데 fill은 이미지를 부모의 크기를 기반으로 생성이 된다. fill을 사용하기 위해서는 부모는 반드시 relative 속성을 줘야 함 부모의 크기를 채우기 위해서는 페이..

vscode -> cmd + shift + p (Mac기준) -> preference:Open User settings(JSON) 에 추가 "files.associations": { "*html": "html", "*.css": "tailwindcss" }, "editor.quickSuggestions": { "strings": true },

npm 패키지를 만들다가 로컬에서 테스트를 할 일이 생겨서 npm link를 사용하여 로컬의 글로벌에 심볼릭 링크(바로가기)를 만들고 다른 프로젝트에서 해당 프로젝트를 받아와서 사용하면 에러가 발생한다.에러 내용Cannot read properties of null (reading 'useRef') TypeError: Cannot read properties of null (reading 'useRef') at useRef (http://localhost:3000/static/js/bundle.js:3541:25) at ImageSlider (http://localhost:3000/static/js/bundle.js:359:73) at renderWithHooks (http://localhost:3000..

dependencies: 이 패키지를 사용하려면 반드시 설치되어야 하는 의존이다. 패키지를 설치할 때, dependencies에 나열된 패키지들도 함께 설치된다. 이 설정은 보통 런타임에 필요한 패키지를 정의한다. dependencies에 styled-components 프로퍼티가 있다면 패키지를 설치할 때 styled-components도 함께 설치가 된다."dependencies": { "styled-components": "^6.1.11"},peerDependencies: 이 패키지를 사용하려면 설치되어 있어야 하지만, 설치하지 않으면 경고만 발생하고 자동으로 설치되지는 않는다. 보통 호환성을 확인하는 데 사용됨 예를 들어, 특정 버전의 react가 필요하지만, 이 패키지를 사용하는 프로젝트에서 이..

폴더 구조우선 폴더 구조부터 보면 lib 폴더 내에서 배포할 컴포넌트를 작업해준다. 이렇게 하는 이유는 명확한 분리: 배포할 컴포넌트를 다른 코드와 명확히 분리함으로써, 컴포넌트 개발 및 유지보수가 용이해진다.재사용성: lib 폴더 내의 컴포넌트는 독립적으로 설계되기 때문에 다른 프로젝트에서도 쉽게 가져다 사용할 수 있다.테스트 용이성: lib 폴더 안의 컴포넌트를 따로 테스트할 수 있어서 전체 프로젝트를 테스트하기가 더 쉬워진다.배포 편의성: lib 폴더 내의 컴포넌트는 쉽게 빌드하고 배포할 수 있다. tsconfig.json 파일에서 outDir 설정을 통해 lib 폴더 내의 코드만을 빌드 대상에 포함시키면, 불필요한 파일이 포함되지 않도록 할 수 있다. TypeScript타입스크립트로 작성된 코드는..

가장 최신 커밋 삭제하기$ git reset --soft HEAD^$ git reset --mixed HEAD^ && 동일한 명령어$ git reset HEAD^$ git reset --hard HEAD^ HEAD부터  n개의 commit을 삭제하기$ git reset HEAD~n

Debounce는 일정 시간 동안 이벤트가 발생하지 않았을 때 함수를 호출한다. 예시로window.addEventListener('resize', function(){ console.log('hello');}); 위의 resize 이벤트가 발생할 때마다 "hello"가 콘솔에 찍힌다고 하면 뷰포트의 크기를 조절할 때 엄청 많은 양의 콘솔이 찍히게 된다. resize 이벤트마다 코드를 실행해야 하는 경우가 있겠지만, 그렇지 않은 경우라면 매우 비효율적이다. 꼭 필요한 경우가 아니라면 Debounce를 사용해서 적절하게 함수 호출 횟수를 조절하는 게 좋다.   debounce 함수의 주어진 매개변수를 보면 콜백 함수(func), 지연 시간(wait)을 가지고 있다. debounce 함수 내부에서 클로저..

클로저를 공부하는 도중 렉시컬 스코프와 렉시컬 환경은 사전 지식이기 때문에 다시 공부를 하는 겸 정리를 해보려고 한다.렉시컬 스코프다른말로 정적 스코프라고 하며 함수의 스코프를 결정할때 함수가 호출 될 때가아닌 선언이 될때 스코프를 결정한다. 이 렉시컬 스코프를 기반으로 렉시컬 환경의 외부 렉시컬 환경이 결정된다.렉시컬 환경렉시컬 환경에는 두가지 객체가 있다. 환경 레코드와 외부 렉시컬 환경이 있다.환경 레코드 - 코드 실행 전에 지역 번수, 함수, 매개변수 등이 환경 레코드에 선언이 되고 코드가 실행이 될때 변수들의 초기화가 이루어진다외부 렉시컬 환경 - 렉시컬 스코프를 기반으로 함수 선언이 될때 외부 렉시컬 환경이 결정이 된다. 함수가 코드 내에서 선언이 될때 자신이 선언된 위치의 렉시컬 환경을 참조..

포트폴리오를 만드는 중인데 외부 라이브러리 없이 만드는 중이라 직접 구현한 이미지 슬라이더를 블로그에 정리를 하려고 한다.구현 방법이미지가 보이는 고정된 영역, 해당 영역 밖으로 넘어가는 요소들은 overflow: hidden을 사용해서 숨김위의 영역 뒤에 이미지들을 삽입버튼을 클릭할 때마다 이미지들의 위치를 옮겨준다. container├── slider-container│ ├── button (left arrow)│ ├── slider-img-container│ │ └── img-inner-container│ │ └── Image│ └── button (right arrow)└── circle-container 사용하는 변수들와 훅 const [imgWidth, setI..

자바스크립트에서 DOM 객체는 각자 다른 타입을 가진다. querySelector : Element (HTMLElement, SVGElement 등)querySelectorAll : NodeListgetElementById : HTMLEelemtgetElementByClassName : HTMLCollectiongetElementByTagName : HTMLCollection Element:모든 DOM 요소를 나타내며, 이는 HTMLElement 또는 SVGElement와 같이 더 구체적인 요소 타입으로 좁혀질 수 있다. Element는 기본적인 DOM 메소드를 포함하고 있어, 속성 접근이나 자식 요소 관리 등이 가능하다.NodeList:querySelectorAll 메소드로 반환되며, 노드의 집합을 나..

별들을 담을 컨테이너를 우선 만들어줘야 한다 ... ... 그러고 나서 해당 컨테이너에 원하는 만큼 별을 찍고useEffect(() => { const makeStars = () => { const starContainer = starRef.current; if (starContainer) { starContainer.innerHTML = ""; for (let i = 0; i  여기서 만약 브라우저의 크기가 변경될 때마다 새로 별들을 찍으려면useEffect Hook 맨 밑에 아래의 코드를 넣으면 브라우저의 크기가 줄거나 늘어나면 새로 별들의 위치를 계산해서 찍을 수 있다. ..

JavaScript의 프로토타입이 무엇인지 궁금해서 MDN 사이트에 정리된 내용을 조금 더 간추려서 정리를 해보아야겠다. 프로토타입 기반 언어? JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메서드와 속성들을 상속받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또다시 상위 프로토타입 객체로부터 메서드와 속성을 상속받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메서드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다. 정확히 말하자면 상속되는 속성과 메서드들은 각 객체..

LM(): Layer ModLM(layer, mod) 함수는 특정 키를 누를 때 수정자(modifier) 키와 함께 레이어를 전환하는 기능을 한다. 여기서 layer는 활성화할 레이어를, mod는 사용할 수정자 키(예: MOD_LALT, MOD_LSFT 등)를 의미한다. 이 함수를 사용하면, 예를 들어, 특정 키를 누르는 동안에만 Shift 키가 활성화되면서 다른 레이어로 전환할 수 있다. MOD_LCTLLeft ControlMOD_LSFTLeft ShiftMOD_LALTLeft AltMOD_LGUILeft GUI (Windows/Command/Meta key)MOD_RCTLRight ControlMOD_RSFTRight ShiftMOD_RALTRight Alt (AltGr)MOD_RGUIRight GU..

pongGame에서 requestAnimationFrame() 를 사용해서 탁구채를 움직이는데 문제가 있다 사용자의 모니터 환경에 따라 탁구채의 움직이는 속도가 달라진다. https://gaebarsaebal.tistory.com/58 탁구채 속도가 환경에 따라 다르게 움직임(requestAnimationFrame) 지금 Pong 게임의 탁구채 움직임을 구현 중인데 내 노트북에서 게임을 할 때랑 팀원의 노트북으로 게임을 할 때 탁구채의 움직이는 속도가 달랐다. 처음에는 setInterval() 로 60 fps으로 구현을 하다 gaebarsaebal.tistory.com 그래서 다양한 모니터 환경에서 공평함을 유지하기 위해 60FPS로 고정을 시켜줄려고 한다. 이렇게 되면 requestAnimationFr..

문제- 게임 플레이시 프레임 드랍이 일어남원인- setInterval() 사용 : 기존에 아래와 같이 60FPS설정을 setInterval()로 구현을 했다. 이 방법은 JavaScript 이벤트 루프 내에서 비동기적으로 실행되며 정확한 타이머주기를 보장하지 않는다. 지연이 누적되다 보면 프레임 드랍이 생긴다. setInterval(() => { if (isMovingUp) { coor = Math.max( parseInt(style.top) - 30, this.myPingpongStick.offsetHeight / 2, ); this.update(coor); } else if (isMovingDown) { coor = Math.m..

인증되지 않은 유저가 URL을 통해 직접 페이지로 접근하는 걸 막아보자. 아이디어 : 로그인된 유저는 메모리에 accessToekn 을 가지고 있다. url 로 직접적으로 접근을 할 때 메모리에 accessToken 이 없다면 loginPage 로 리다이렉션 시켜준다. 어디서 할까 고민을 했는데 모든 페이지에서 공통적으로 제일 처음 connetionWebScoket 의 연결 상태를 확인하는데 이때 accessToken 이 사용되므로 이 과정에서 정상적인 유저인지 판단을 할 것이다. 구현 : 기존의 accessToken 을 재발급받는 함수가 있는데 기존의 로직에서 token 재발급에 실패를 하면 loginPage 로 리다이렉션을 시켜준다. export const refreshAccessToken = asy..

[level 3] 길 찾기 게임 - 42892 문제 설명 길 찾기 게임 전무로 승진한 라이언은 기분이 너무 좋아 프렌즈를 이끌고 특별 휴가를 가기로 했다. 내친김에 여행 계획까지 구상하던 라이언은 재미있는 게임을 생각해냈고 역시 전무로 승진할만한 인재라고 스스로에게 감탄했다. 라이언이 구상한(그리고 아마도 라이언만 즐거울만한) 게임은, 카카오 프렌즈를 두 팀으로 나누고, 각 팀이 같은 곳을 다른 순서로 방문하도록 해서 먼저 순회를 마친 팀이 승리하는 것이다. 그냥 지도를 주고 게임을 시작하면 재미가 덜해지므로, 라이언은 방문할 곳의 2차원 좌표 값을 구하고 각 장소를 이진트리의 노드가 되도록 구성한 후, 순회 방법을 힌트로 주어 각 팀이 스스로 경로를 찾도록 할 계획이다. 라이언은 아래와 같은 특별한 규..

문제 : 웹소켓 연결이 끊겨 버리고 서버가 터져버림 사실 수집 : 게임을 하다가 뒤로 가기 동작을 하면 가끔씩 웹소켓 연결이 끊기고 서버가 터져버리는 현상이 발생 서버 로그를 확인해보니 같은 에러 로그가 반복적으로 발생 게임 페이지에서 뒤로가기를 통해 다른 페이지로 이동한 후 방향키를 누르면, 이전에 등록된 이벤트 리스너가 계속 실행되는 현상이 발생 원인 추론 : VanillaJS로 SPA 방식의 게임을 구현했는데, SPA는 페이지가 새로고침되지 않기 때문에, 기존에 등록된 이벤트가 따로 제거되지 않으면 그대로 남아있게 된다. 방향키로 탁구채를 움직이는 동작을 할 때, 이 이벤트 리스너가 실행되면서 서버로 현재 탁구채의 좌표(int 형)를 웹소켓을 통해 보내는데, 여기서 뒤로 가기 동작을 할 경우 게임 ..

지금 Pong 게임의 탁구채 움직임을 구현 중인데 내 노트북에서 게임을 할 때랑 팀원의 노트북으로 게임을 할 때 탁구채의 움직이는 속도가 달랐다. 처음에는 setInterval() 로 60 fps으로 구현을 하다가 프레임 드랍이 있어서 requestAnimationFrame() 함수를 사용해서 탁구채의 움직임을 구현했는데 당시 구현을 할 때 대충 다른 사람의 블로그를 보고 구현을 해서 환경에 따라 탁구채의 속도가 다른 이유를 한참 찾아 헤맸다.. 이유는 모니터의 hz 차이였다. - MacBook pro 16 - MacBook air 15 이렇게 두 대의 노트북으로 테스트를 했는데 일단 pro의 경우 모니터 hz(재생율) 을 ProMotion 을 사용하고 있었고 팀원은 60hz 를 사용하고 있었다. Pro..

지금 SPA 방식으로 프로젝트를 구현 중에 있는데 같은 경로를 클릭 시 해당 컴포넌트가 리렌더링이 일어난다. 단점이 너무 많다 성능 저하: 페이지의 내용이 변하지 않음에도 불구하고, 렌더링 과정을 다시 수행해야 하므로 추가적인 자원을 소모함. 이는 특히 리소스가 제한적인 모바일 기기에서 더 큰 문제가 될 수 있다 사용자 경험 저하: 불필요한 페이지 로딩으로 인해 사용자는 같은 내용을 보기 위해 더 많은 시간을 기다려야 할 수 있다. 이는 사용자 경험을 저하시킴 서버 부담 증가: 클라이언트 측에서만 처리할 수 있는 렌더링을 서버에 요청함으로써, 서버에 불필요한 부담을 줄 수 있다. 정적 리소스나 API 호출이 많은 웹 애플리케이션의 경우, 이러한 요청이 누적되어 서버 성능에 부정적인 영향을 줄 수 있다. ..

환경 : 바닐라JS SPA 방식 문제 : 안 읽은 메세지 카운터 기능을 구현중에 메세지를 읽지 않았는데 안 읽은 메시지 갯수가 뜨지 않음 사실 수집: A 채팅방에 들어갔다가 다른 컴포넌트로 이동해서 A가 메세지를 보내면 안 읽은 메세지 갯수가 떠야하는데 뜨지 않음을 확인 원인 추론: 1 :1 채팅방에 들어갈때 WebSocket send를 날리고 다른 컴포넌트로 이동을 할때 Webscoket 에 나갔다고 다시 send를 날려야하는데 하지 않아서 이런 버그가 난걸로 예상 조치 방안 및 구현: document.querySelectorAll('a[data-spa]').forEach(link => { link.addEventListener('click', () => { this.leaveWebSocket(); }..

프로젝트를 진행 중 WebSocket이 닫히는 현상이 생겼다. 채팅을 구현하는데 채팅방에 들어가지 않고 메세지를 입력해서 WebSocket에 Send 를 하면 오류가 나서 웹소켓이 닫혀버린다. 이거는 채팅방에 들어가지 않았을 때 그냥 채팅을 입력하지 못하게 하면 그만이지만 이 외에도 WebSocket이 닫혀버린 채로 있다면 싱글톤 패턴으로 WebSocket을 사용하고 있기 때문에 나중에 큰 문제가 될 수 있기 때문에 닫히면 다시 연결하는 로직을 구현을 하기로 했다. 첫 번째 방식 import BaseWebSocket from './BaseWebSocket.js'; import {getToken, refreshAccessToken} from '../tokenManager.js'; import {checkC..

프로젝트를 진행하면서 하나의 WebSocket으로 여러 컴포넌트에서 각기 다른 onmessage 이벤트를 등록해야 하는 일이 생겼다. 그래서 어떻게 로직을 작성할지 고민하다가 싱글톤 패턴의 WebSocket 클래스를 구현하기로 했다. 일단 위처럼 구현을 하게 되면 장점은트래픽과 서버 부하를 줄일 수 있다구현이 단순해진다단점은하나의 웹소켓에 의존을 하면 해당 WebSocket에 문제가 생기면 프로젝트 전체에 문제가 생길 수 있다사용자가 많거나 데이터가 많아지면 병목 현상이 생길 수 있다등이 있다. 그런데 일단 우리는 WebSocket으로 큰 데이터를 다룰 일이 없을 거 같아서 구현이 단순한 싱글톤 패턴의 WebSocket 방식을 택했다. 일단 BaseWebSocket Class를 만들어준다. 공통적으로 변..

문제 : 전체채팅 페이지에서 한 유저를 골라서 1 : 1 채팅으로 넘어가서 새로고침시 대화방의 내용이 다시 렌더링이 안된다. 다른 페이지에서 웹소켓을 연결을 하고 채팅방 페이지로 오면 문제가 없지만 채팅방 페이지에서 새로고침해서 최초로 웹소켓 연결시 문제가 발생 사실 수집: 문제 재현 과정에서 WebSocket 연결 후 메시지 송수신 과정에서 비동기 처리의 순서 문제를 확인. 새로고침 시 웹소켓 재연결 과정에서 이전 채팅 내용을 fetch하기 전에 웹소켓으로 메시지를 보내려 하였으나, 웹소켓 연결이 완료되지 않은 상태였음. 원인 추론: await checkConnectionSocket(this.socketEventHendler.bind(this)); const $chatRoom = document.que..

전역 객체는 코드 실행이 되기전에 어떠한 객체보다 가장 먼저 생성이 되는 객체이다. 어떠 객체에도 속하지 않는 최상위 객체이다. 전역 객체의 이름은 브라우저, node.js 제각각이다. 브라우저 환경에서는 window, node.js 환경에서는 global이 전역 객체를 가르킨다. 하지만 ES11에서 도입된 globalThis를 사용하면 환경에 제약받지 않고 전역 객체를 가르킬 수 있다. console.log(globalThis); {/* Object [global] { global: [Circular *1], clearImmediate: [Function: clearImmediate], setImmediate: [Function: setImmediate] { [Symbol(nodejs.util.prom..

일단 차이를 정확하게 이해하기 전에 실행 컨텍스트에 대해서 알아야 한다 실행 컨텍스트는 두가지 주요 단계로 나누어지는데 코드 평가 단계 코드 실행 단계 이렇게 총 두 단계로 구분된다 코드 평가 단계는 코드를 실행하기 앞서 Lexical Environment 에 변수 및 함수 선언 등이 바인딩되고 스코프에 등록이 된다. 이 단계에서 호이스팅이 발생한다. 코드 실행 단계는 코드 평가 단계에서 준비한 과정을 실행한다. 여기서 필요는 없지만 코드 실행 단계에서 실행 컨텍스트 스택이란게 있는데 코드를 실행하면서 현재 실행되고 있는 함수를 실행 컨텍스트 스택에 PUSH 하고 함수가 종료되면 POP 하는 방식으로 이루어져 있다 var console.log(x); // undefined var x = 3; var 키워..