본문 바로가기

전체 글

 (224)
2025 리액트 기술 스택 보호되어 있는 글입니다.
[medium 번역글] Next.js 서버 액션을 사용한 1년: 배운 교훈 보호되어 있는 글입니다.
[Tailwind] Form 요소에서 사용할 수 있는 효과들 1. 기본 상호작용hover: /* 마우스 오버 */focus: /* 포커스 */focus-visible: /* 키보드 포커스만 */focus-within: /* 자신이나 자식 요소 포커스 */active: /* 클릭/탭 하는 동안 */visited: /* 방문한 링크 */target: /* URL 해시와 일치하는 요소 */  2. 폼 관련default: /* 기본 폼 요소 */checked: /* 체크된 상태 */indeterminate: /* 불확정 상태 */placeholder: /* placeholder 텍스트 */autofill: /* 자동완성된 입력 */required: /* 필수 입력 필드 */val..
[Algorithm] 알고리즘 기본 패턴 4 - Devide & Conquer 4. Devide & Conquer 여기서는 간략하게 개념만 설명하고 넘어가겠습니다.분할 정복 알고리즘의 예시로는 이진 탐색 트리 그리고 정렬 알고리즘으로 넘어가면 퀵 정렬과 병합 정렬이 대표적인 예가 될 수 있습니다.이 알고리즘은 주로 배열이나 문자열 같은 큰 규모의 데이터셋을 처리하며,링크드 리스트나 트리가 대상이 될 수도 있습니다.  이진 탐색 트리 를 보면 선형탐색으로 O(n) 의 시간을 들여 찾는 것 보다절반으로 나누어 찾아가면 O(log n) 로 훨씬 더 효율적으로 찾는 것을 알 수 있습니다. 이렇게 몇몇 케이스에서 분할 정복  패턴을 사용하면 더 효율적인 결과를 얻을 수 있습니다. function search(array, val) { let min = 0; let max = ar..
[Algorithm] 알고리즘 기본 패턴 3 - Sliding Window 3. Sliding Window 배열이나 문자열과 같은 일련의 데이터를 입력하거나 특정 방식으로 연속적인 해당 데이터의 하위 집합을 찾는 경우에 유용합니다. 창문을 하나 만들어야 합니다. 여기서 말하는 창문이란 개념은 주어진 데이터의 범위를 나타냅니다.그 창문을 만들고 데이터 안에서 창문을 여는 것처럼 이동을 시키며주어진 조건을 클리어하는 알고리즘 패턴입니다. 이 기법은 윈도우의 크기를 나타내는 변수와 하위 배열, 또는 다른 문자열이 주어지며,윈도우의 크기는 고정되거나 가변적인 크기가 될 수 있습니다. 조건에 따라 창문을 이동시키며, 시작 위치에서 시작하면 보통 왼쪽에서 오른쪽으로 이동합니다. 오른쪽에서 왼쪽으로 이동도 가능하고 가운데 위치에서 시작할 수도 있습니다. 그러나 보통 창문을 왼쪽, 즉, 요소..
[Python] 크롤링을 위한 라이브러리 ( 마우스 자동화, 엑셀 자동화 ) pyautogui 마우스 자동화xlwings 엑셀 자동화#마우스 자동화pip install pyautoguiimport pyautogui as pgimport timetime.sleep(2) #2초후 실행pg.position()pg.moveTo(1978, 29, duration=1) # 1초동안 움직임pg.click() # 엑셀 자동화 라이브러리pip install xlwingsimport xlwings as xw#엑셀 새파일 열기wb = xw.Book()# 시트 1 선택 후, A1 셀에 문자열 넣기ws = wb.sheets['Sheet1']ws.range('A1').value = 'Hello World'# A2를 시작으로 우측으로 각 셀에 값을 하나씩 넣기ws.range('A2').value = [1,..
[Next.js] svgr/webpack과 vitest를 사용한 SVG 테스트 ( vitest 에서 svg 경로를 못 읽는 이슈 ) 왜 이러는 지 한참을 삽질하다 이렇게 직접 tsx안에 적어주니  통과를 합니다...???? 이 때 깨달았습니다.@svgr/webpack 사용하면 vitest 에서 svg 경로 오류가 생기는구나 하고.... 아예 랜더링에서 막히고 있습니다... 랜더링을 못하니 아예 해당 Hear 컴포넌트 전체를 테스트 할 수가 없어졌는데요모킹으로 넘겨서 테스트 랜터링을 넘겨야겠다고 판단했습니다.  1. vite-plugin-svgr 설치npm install vite-plugin-svgr --save-dev  2. vitest.config.ts 에 vite-plugin-svg 추가// vitest.config.tsimport { defineConfig } from 'vitest/config'import react from ..
[Next.js] svg 파일 복붙 사용할 때 주의점 Invalid DOM property `stroke-width`. Did you mean `strokeWidth`?Invalid DOM property `stroke-linecap`. Did you mean `strokeLinecap`?Invalid DOM property `stroke-linejoin`. Did you mean `strokeLinejoin`?    jsx, tsx 에서는 캐멀케이스만 된다는 사실을 금새 잊어버렸다....ㅠ부끄럽습니다😌 뷰쟁이의 슬픔.... 잊어버리지 마라고 스스로 공개처형을 하겠습니다..

티스토리툴바