winhwi

정확히 말하면 미디어쿼리의 조건문에 css변수를 사용할 수 없을까 입니다. 최근 프로젝트에서 module.css를 사용하면서 CSS 변수를 적극적으로 활용하려고 했습니다.일관된 스타일을 유지하기 위해 breakingPoint 변수도 정의하여 반응형 레이아웃을 일정하게 관리하려 했습니다.:root { --breaking-point-sm: 468px;}.container { width: 100%;}@media (max-width: var(--breaking-point-sm)) { .container { width: 90%; }}하지만 위와 같이 CSS 변수(var(--breaking-point))를 미디어쿼리의 조건문에서 사용하는 것은 브라우저에서 지원되지 않았습니다.하지만 위 코드에서 var(..

위지윅 에디터로 부동의 1위인 Quill을 사용했습니다.Quill 1버전을 사용하면 ,  [Deprecation] Listener added for a synchronous 'DOMNodeInserted' DOM Mutation Event. This event type is deprecated (https://w3c.github.io/uievents/#legacy-event-types) and work is underway to remove it from this browser. Usage of this event listener will cause performance issues today, and represents a risk of future incompatibility. Consider usi..

컴퓨터와 코드 실행 방식: 컴파일과 인터프리터컴퓨터는 0과 1로 구성된 기계어만 이해할 수 있습니다. 그렇기 때문에 사람이 작성한 프로그래밍 코드를 컴퓨터가 이해할 수 있도록 컴파일하거나 인터프리트하는 과정이 필요합니다.  컴파일 방식컴파일(Compile)이란, 프로그래밍 언어로 작성된 코드를 미리 기계어로 번역하는 과정입니다. 실행 전 번역 작업을 통해 컴퓨터가 바로 이해할 수 있는 형태로 변환해두며, 이로 인해 실행 속도가 빠르고 번역 과정에서 많은 오류를 걸러낼 수 있습니다.C 계열 언어들과 자바가 여기에 속하지만, 자바는 다른 C 계열 언어와 다르게 JVM(Java Virtual Machine)을 사용하여 운영체제에 독립적인 방식으로 실행됩니다. 자바 코드가 바이트코드로 변환된 후 JVM에서 실행..

Trie 자료구조란 입력받은 문자열들을 트리형태로 저장하는 자료구조입니다.주로 문자열 탐색이나 자동 완성 기능 등에 자주 사용됩니다. ["abc", "ab", "bc", "b", "cd"] 를 Trie자료구조로 표현해보면, 이러한 구조를 가지므로, a를 검색했을때 하위요소인 b를 자동완성기능으로 보여주고, ab를 검색했을때, 하위요소 c와 d를 추가해서 보여줄 수 있습니다. Trie자료구조를 이용하는 leetcode 문제를 소개해드리겠습니다. 14. Longest Common Prefix문자열 배열 중에서 가장 긴 공통 접두사 문자열을 찾는 함수를 작성하세요.공통적인 접두사가 없으면 빈 문자열을 반환합니다.입력: strs = ["flower","flow","flight"]출력: "fl"입력: strs =..

LeetCode의 5. Longest Palindromic Substring medium단계의 문제입니다. Given a string s, return the longest palindromic substring in s. Example 1:Input: s = "babad"Output: "bab"Explanation: "aba" is also a valid answer. Example 2:Input: s = "cbbd"Output: "bb" 해당 문제는 주어진 문자열 s 에서 가장 긴 회문을 찾는것입니다.회문이란 문자열을 뒤집었을 경우에도 같은것을 의미합니다.  예시) aaa, 우영우시작index와 끝index로 투포인터로 나눠서, 끝index를 하나씩 늘려가며, 모든 단어에 대해 회문검사를 실시하고, ..

위에서 아래로 흘러가는 정방향의 무한스크롤에서와 달리, 역방향의 무한스크롤을 구현할때는 조건에 맞춰 스크롤을 직접적으로 이동시켜줘야한다는 차이가 있었다. 구현중 겪었던 버그를 설명해볼까 합니다. 에러발생 채팅방에 접속했을때, api요청을 통해 데이터를 제공받을때 스크롤의 움직임을 전포스팅을 통해 설명했습니다. 채팅방입장시 스크롤이 제일 하단에 위치해야하지만, 간헐적 작동을 안하거나, 중간에 멈추는 현상이 발생했습니다. 에러발생의 원인 가상화를 위해 Tanstack Virtual라이브러리의 useVirtualizer를 사용해. parent박스의 높이는 useVirtualizer의 getTotalSize함수를 통해 지정합니다. 실행결과를 본다면, totalSize가 계속 변화하는것을 볼수있습니다. dataF..

무한스크롤을 구현할때 빼놓을 수 없는것이 가상화 라고 생각합니다. 아이템의 높이가 다르기때문에 해당 과정에서 어려움이 있었습니다. 해당 과정을 매끄럽게 만들기위해 TanStack Virtual 라이브러리를 사용했습니다. 일반적인 무한 스크롤은 최신 데이터가 위쪽에 위치하고, 스크롤이 하단에 도달하면 데이터를 불러와 보여주는 방식입니다. 하지만 채팅방 같은 경우는 반대방향입니다. 채팅방의 무한 스크롤 구현에 어려움을 겪은 부분을 적어보겠습니다. 채팅방에 입장할 때 스크롤을 맨 아래 부터 시작해야하며, 스크롤이 맨위에 도달하며 데이터를 불러왔을때, 스크롤은 현재아이템에서 유지되어야합니다. 스크롤이 제일 아래, 즉 최신 데이터를 보고 있을땐 채팅이온다면 스크롤을 맨 아래로 유지시켜주고, 이전 데이터를 보고 있..

프로그래머스 LV1 달리기경주 JavaScript 순차적으로 calling의 원소에대해 players에서의 index를 찾고, players배열에서 해당index와 index-1 의 자리를 바꿔주는 방식으로 코드를 짰습니다. function solution(players, callings) { callings.map((e) => { const index = players.indexOf(e); const temp = players[index]; players[index] = players[index - 1]; players[index - 1] = temp; }); return players } 하지만 , 시간초과 발생.. 문제에선 시간제약에대해 안적혀있었는데 .. indexOf로 배열을 순회해 index를..

React-Query 공식문서의 최신 버전(v5)에 대한 설치 방법입니다. React-Query를 사용하기 위해서는 QueryClient 와 QueryClientProvider 를 사용하여 전역으로 상태를 관리하는 코드를 작성해야 합니다. QueryClient 일반적으로 애플리케이션의 최상위에서 QueryClient를 생성합니다. QueryClient 는 캐시와 상호 작용하는데 사용할 수 있습니다. QueryClientProvider React 애플리케이션에서 QueryClient를 사용할 수 있도록 하는 컴포넌트입니다. 애플리케이션의 최상위에서 한 번만 렌더링 되어야 합니다. prop을 통해 QueryClient 인스턴스를 전달하여 하위 컴포넌트에서 Reacy-Query를 사용할 수 있도록 합니다. u..

React -Query는 React 애플리케이션에서 데이터를 효과적으로 관리하기 위한 라이브러리입니다. 주로 서버에서 비동기 데이터를 가져오고 관리하는 데 사용됩니다. SWR , Apollo , Redux 와 같은 라이브러리도 이와 유사한 목적으로 사용됩니다. 이중에 React-Query의 장점은 쉽게 사용 가능한 문서와 다양한 예제가 많아 쉽게 익힐 수 있습니다. 쿼리와 뮤테이션은 비슷한 구조를 공유하여 코드 일관성을 제공하며, 이는 개발자가 쉽게 이해하고 유지보수 할 수 있도록 도와줍니다. 데이터를 캐싱하고 관리하며, 데이터가 변경될 때 자동으로 리렌더링 등 다양한 기능을 제공합니다. 데이터를 주기적으로 업데이트해야 하는 상황에서 유용한 인터벌 쿼리 기능을 제공합니다. React Hooks를 기반으로..