본문 바로가기

전체 글

(257)
[C#] byte와 16진수 문자열 간의 변환 (1) 1바이트 - 16진수 문자열 변환  ToString("X2");// (1) 바이트를 16진수 문자열로 변환하는 방법byte singleByte = 0xAD;string hexValue = singleByte.ToString("X2"); // 결과: "AD"Console.WriteLine($"바이트 값 {singleByte}의 16진수 표현: {hexValue}");(2) 바이트배열 - 16진수 문자열로 변환1. 첫번째 예제 StringBuilder를 활용하여 foreach반복문에서 byteArray를 16진수 문자열로 변환 후 StringBuilder에 Append 2. 두 번째 예제 Array.ConvertAll과 String.Concat을 활용하여 각 Array의 요소를 16진수 문자열로 변환..
useEvent 제안의 배경과 중단된 이유 📌 1. useEvent란- 참조 안정성 - 최신의 상태- 함수 참조 변경 불필요 이벤트 핸들러에서 상태값을 항상 최신의 상태로 유지할 수 있도록 도와주는 훅. useEvent로 감싸면 dependency에 특정 상태를 넣지 않아도 내부의 state가 항상 최신의 상태를 유지하며, useCallback에서 처럼 dependency에 상태를 넣어 재선언하지 않아도 된다.  📌 2. useEvent제안의 배경 https://github.com/facebook/react/issues/14092#issuecomment-435907249 getState() hook proposal · Issue #14092 · facebook/reactuseState() provided state value currently..
jsdom과 jest-dom 그리고 testing-library jsdom과 jest-dom 그리고 testing-library 차이jsdomjs에서 DOM을 사용가능하게 하는 것vite에서 설정하려면 test의 environment를 설정할 것export default defineConfig({ plugins: [react()], test: { environment: "jsdom", globals: true, setupFiles: "./setupTests.ts", },});testing library핵심 라이브러리인 DOM 테스팅 라이브러리는 웹 페이지를 테스트하기 위한 경량 솔루션으로, DOM 노드를 쿼리하고 상호 작용하여(JSDOM/Jest로 시뮬레이션하든 브라우저에서 시뮬레이션하든) 웹 페이지를 테스트합니다. 이 라이브러리가 제공하는 주요..
정규표현식 1. 정규표현식이란? 문자열 중 특정 규칙을 가지고 있는 문자열을 검색하기 위해 사용하는 식.  2. 생성하는 방법 1. 정규표현식 리터럴을 활용한 생성 const regStr = /abc/;console.log(regStr) // /abc/ 2. RegExp객체를 활용한 생성const regStr = new RegExp("abc");console.log(regStr) // /abc/  3. 기본형태 const regEx = /pattern/flag Pattern은 일치하는 문자를 찾기 위한 식을 쓴다. flag는 검색 설정을 변경할 수 있다.  4. Pattern 상세- 문자열 찾기/문자열/ 슬래시 안에 문자열을 입력하게 되면 해당 문자열이 존재하는 것을 찾게 된다.즉 지금 /문자열/이라고 입력했으므로..
[espree] espree를 사용해서 jsx를 파싱 해보기 목표 : jsx를 espree를 활용해 AST로 파싱된 코드를 직접 눈으로 확인해보자 ESLint 소개를 읽는 중이었다.정적 분석 도구인 ESLint는 espree라는 파서를 사용하는데,이것은 자바스크립트를 AST로 구조화하여 트리를 기준으로 각종 규칙과 대조하게 된다.  들게 된 의문점들 - AST구조는 어떻게 생긴 것일까?- npm install해서 espree를 쓰면 내가 직접 console로도 찍어볼 수 있을까?   실험 과정- vite를 활용해 typescript  프로젝트 하나를 생성한다 $ npm create vite@latest use-espree  - 자동 생성된 초기 코드를 Sample.tsx파일로 옮긴다. - espree를 설치 후 import하여 parse메서드를 사용하여 conso..
createRoot CreateRootconst root = createRoot(domNode, options)- 서버에서 렌더링 되는 경우 hydrateRoot()- 컴포넌트 자식이 아닌 DOM트리의 다른부분을 렌더링 할 경우 createPortal사용 createRoot에 domNode를 넣어 호출하면 브라우저 DOM 엘리먼트 안에 콘텐츠를 표시할 수 있는 React루트를 생성한다.루트를 생성한 후 root.render를 호출해 그 안에 React컴포넌트를 표시하는 작업이 필요하다.  createRoot를 호출하면 두 가지 메서드를 사용할 수 있게 된다.  1. root.render(reactNode) //root.render()2. root.unmount() 1. root.renderrender메서드를 통해 react..
TIL pub sub 패턴 export const broker = { listeners: {}, publish: (key, message) => broker.listeners[key]?.forEach(listener => listener(message)), subscribe: (key, listener) => { if(!broker.listeners[key]) { broker.listeners[key] = [listener] return } broker.listeners[key].push(listener) }}  Toast가 axios interceptor에서 이벤트 리스너를 등록하여 구독하게 하는 기능도 구현이 가능  export ..
TIL location.hash, history, router location.hash location 인터페이스 (BOM 메서드)hash는 URL decoded되지 않고 만일 hash가 없다면 이 프로퍼티는 empty string이 될 것.  // location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-containerconst loc = document.location;console.log(loc.href); // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-containerconsole.log(loc.protocol); // https:console.log(loc.host); ..