분류 전체보기

keyDown/keyUp 이벤트를 사용할때, 영어는 괜찮지만 한국어로 입력하면 이런 문제가 발생하는 경우가 있다. 🤔 Why? 이 문제는 한글의 조합형 입력 방식 때문이라고한다. 한글 입력은 여러 키 입력이 조합되어 하나의 글자를 완성하는 과정을 거치기 때문에, key Event가 발생하는 시점에는 입력이 완전히 완성되지 않을 수 있다고 한다.  e.nativeEvent.isComposing  이 속성은 사용자가 텍스트 입력 중에 문자 조합(예: 한글 자음과 모음 조합)이 진행 중인지 여부를 나타냅니다. 이를 사용하면 키 이벤트가 발생할 때 입력이 완성된 상태인지를 확인하여, 입력의 완성이 된 경우에만 검색처리를 실행하도록 한다. const handleKeyDown: Keyboar..

예전에 코딩알려주는누나의 채팅앱 만들기 영상을 보고 이번 프로젝트에 적용해보고 싶단 생각에,2주 배운 모자란 백엔드 실력이지만... 온전한 기능을 다하진 못해도 간단한 채팅앱 만들기에 도전을 해보았다! [BackEnd]HTTP단방향(클라이언트 요청시만)연결 지속성 ❌ 웹소켓양방향(각자대화를 원할때 요청 가능)연결 지속성⭕️ 👉🏻 웹소켓으로 지속적인 실시간 양방향 통신을 할 수 있고, 서버가 새로운 메시지가 있을때 클라이언트에게 즉시 메시지를 보낼수있다.  https://github.com/Yuiii0/chat-server GitHub - Yuiii0/chat-serverContribute to Yuiii0/chat-server development by creating an account on Git..

좋아요한 상품들을 프론트단에서 관리하기 위해, zustand 스토어에 productId를 배열로 관리하고 있다. 마이페이지에서, 좋아요한 상품 productList들을 위해서, zustand에서 관리하고있는 productId들의 배열을 순회하면서, 해당 productId로 getProduct 쿼리문을 수행해야한다.  useQueries여러개의 비동기 쿼리를 동시에 실행할 수 있게 해주는 훅으로, 각각의 쿼리를 배열 형태로 받아 각 쿼리의 결과를 배열로 반환한다. 또한 각 쿼리의 로딩 상태나 에러상태 등을 개별적으로 관리할 수 있다.  동적 병렬 쿼리 작업을 위해 사용하기에, 주로 여러 개의 비동기 쿼리를 동시에 실행해야 할 때 적합하다. const results = useQueries(..

브랜드 카테고리별로 브랜드별 상품을 브랜드페이지에서 보여주려고 하는데, brandId에 따라 조건부 쿼리를 통해 fetch가 달라진다. brandId⭕️ : 브랜드별 상품 fetch (useQueryGetBrand)❌ : 전체상품 fetch (useQueryGetProducts)  조건문과 useEffect❗️React 훅은 컴포넌트의 최상위 수준에서만 호출되어야 하며, 조건문이나 반복문 내부에서 호출할 수가 없다. 훅의 동작이 예측할 수가 없어지기 때문이다. React는 컴포넌트의 상태 변화나 props에 따라 리렌더링 되기때문에, 조건문이나 반복문 내부에서 호출하게되면, 해당 조건이나 반복에 의해 리렌더링으로 쿼리 인스턴스가 생성되고 이전 쿼리가 새로운 쿼리로 대체될수 있고, 예기치..

유저가 좋아요한 상품을 관리하는 방식으로 크게 두가지 방식이 있다. 1. 서버 API로 관리하기서버측에서 데이터를 관리하기때문에, 데이터의 일관성, 보안, 데이터가 많아도 효율적으로 관리 할 수있다. 2. 프론트엔드 전역 상태로 관리하기서버의 네트워크 요청없이 진행하기 때문에 UI가 빠르게 반응할 수 있지만, 일관성, 캐시를 지우거나 다른 기기를 사용할때 좋아요 상태 정보를 잃어버릴수 있는 문제점이 발생할 수있는 단점이 존재한다. ✨ 일반적으로 상업적인 웹앱에선 서버 API를 통한 관리 방식을 선호한다!   사용자가 좋아요 버튼을 토글하여 , 좋아요 누른 상품들의 productId를 zustand로 전역관리하여,마이페이지에서 좋아요한 상품들의 productId을 가지고 api호출을 통해 가져와서 띄우는 ..

[Lv2] 타겟넘버 function solution(numbers, target) { var answer = 0; function dfs(idx,sum){ if(idx 0) { let [x, y, distance] = queue.shift(); // 현재 위치 및 이동 거리 // 목표 지점에 도달한 경우 if (x === n - 1 && y === m - 1) { return distance; // 현재까지의 이동 거리를 반환 } // 상하좌우로 이동 시도 for (const [dx, dy] of dir) { let newX = x + dx; let newY = y + dy; // 이동 가능한 위치이고, 방문하지 않은 경우 if (newX >= 0 && newX = 0 && new..

[Lv1] 같은 숫자는 싫어 function solution(arr) { const answer = [arr[0]]; //첫번째 원소는 항상 포함 for(let i=1;iarr[i]!==arr[i+1]) } 정확성: 71.9, 효율성: 28.1 [Lv2] 기능개발 function solution(progresses, speeds) { var answer = []; const work=[] //1. 작업일 배열 생성 for(let i=0;i< progresses.length;i++){ let left=100-progresses[i]; left=Math.ceil(left/speeds[i]) work.push(left) } //2. 순회 let deploy=work[0]; let count=0; for(let..

Express.js CR GET //file Data GET app.get("/posts", async (req, res) => { res.json(posts); //JSON형식으로 응답보내기 }); app.get("/posts/:postId", (req, res) => { const postId = req.params.postId; const post = posts.find((post) => post.id === Number(postId)); res.json(post); }); //axios로 GET app.get("/todos", async (req, res) => { const response = await axios.get( "https://jsonplaceholder.typicode.com/to..