티스토리

로맨테크
검색하기

블로그 홈

로맨테크

romantech.net/m

앱&서비스 리뷰, 생산성 향상 팁, 중국 관련 정보를 다루는 블로그입니다.

구독자
60
방명록 방문하기
공지 블로그 도메인 변경 안내 모두보기

주요 글 목록

  • [JS] 자바스크립트 6줄로 이미지 비교 슬라이더 만들기 이미지 비교 슬라이더는 핸들을 좌우로 움직여서 두 이미지를 비교할 수 있는 UI 패턴으로 쇼핑몰이나 제품 소개 페이지 등에서 자주 볼 수 있다. 이러한 이미지 비교 슬라이더는 range 타입의 input 태그와 6줄 정도의 자바스크립트 코드만으로 구현할 수 있다. range 타입의 input은 슬라이드바를 조정하여 범위 내 숫자 값을 선택할 수 있는 입력 필드다. 기본적으로 브라우저에서 제공하는 스타일이 적용되어 있다. 이 기본 스타일을 모두 제거하고 이미지의 너비/높이만큼 크기를 확장하면, 슬라이더 영역을 클릭 혹은 드래그할 때마다 (스타일을 제거해서 화면에 보이지 않는) 핸들이 해당 위치로 이동해서 값이 변경된다. 기본적인 구현 방법은 다음과 같다.이미지 1, 이미지 2를 감싸는 마스크 요소, ran.. 공감수 9 댓글수 0 2025. 4. 17.
  • 무료 이미지 호스팅 구축하기 (Cloudflare R2 + PicGo + WebP Cloud) 이미지 호스팅은 이미지 파일을 웹 서버에 저장하고 인터넷을 통해 접근할 수 있도록 해주는 서비스다. 이미지를 저장/관리/공유하거나 블로그/웹사이트를 운영한다면 이미지 호스팅이 필요할 수 있다. 기존 클라우드 서비스나 전문 이미지 호스팅 서비스는 용량이 늘어날수록 비용 부담이 증가하고 이미지 최적화를 위한 별도의 관리가 필요하다. 서비스 제공업체의 정책 변경이나 서비스 종료 같은 위험성도 존재한다. 오늘은 Cloudflare R2, PicGo, WebP Cloud를 이용해 이미지 호스팅을 직접 구축하는 방법을 소개할까 한다. 개인적인 용도로 사용한다면 각 서비스의 무료 요금제(Free tier)로도 충분히 사용할 수 있다. 특히 Cloudflare R2는 330개 이상 데이터 센터로 구성된 글로벌 네트워크.. 공감수 9 댓글수 0 2025. 4. 6.
  • [HTTP] Cache-Control 헤더 Cache-Control 헤더: 클라이언트와 중간 서버(Proxy, CDN 등)가 어떤 방식으로 응답을 캐싱할지 지정하는 헤더(특정 응답을 얼마동안, 어떻게 캐싱할지 지정). 정적인 리소스잘 변하지 않는 정적인 리소스는 장기간 캐시Cache-Control: public, max-age=31536000, immutablepublic: 브라우저와 중간 서버(프록시, CDN 등) 모두 응답을 캐싱할 수 있도록 허용.max-age=31536000: 캐시 생성 후 1년(31, 536,000초) 동안 fresh 상태 유지.immutable: 한 번 캐시 된 후 변경되지 않음(불필요한 재검증 요청 방지).  동적인 리소스동적인 리소스는 항상 최신 상태를 유지할 수 있도록 매번 서버에 재검증Cache-Control: .. 공감수 8 댓글수 0 2025. 3. 31.
  • Perplexity Pro 1년 무료로 사용하기 ($200 절약) Perplexity는 AI 기반 검색엔진으로 입력한 질문과 연관된 자료를 실시간으로 검색한 뒤 이를 바탕으로 답변을 생성한다. 모든 답변은 출처와 함께 제공되므로 올바른 정보인지 여부를 쉽게 검증할 수 있다. 요즘엔 구글 검색보다 Perplexity를 먼저 찾을 정도로 편리하다. Perplexity 요금제는 크게 Free/Pro로 나뉜다. Pro 회원은 하루 300회 이상 프로 검색(복잡한 쿼리 처리)을 이용할 수 있고, Claude 3.7 Sonnet, o3-mini 같은 고급 모델을 선택할 수 있다. 덤으로 월 $5 API 크레딧도 제공한다. 실시간 검색 결과는 선택한 AI 모델을 통해 처리되기 때문에 어떤 모델을 선택했느냐에 따라 답변 퀄리티가 달라진다.  Perplexity Pro 가격은 한 달 .. 공감수 8 댓글수 0 2025. 3. 30.
  • [Next.js] API 라우트 보호하기 - Unkey OpenAI 같은 LLM(대형 언어 모델) 기반 API로 기능을 개발하다 보면, 자연스럽게 사용량 제한이 필요해진다. Unkey라는 API 관리 플랫폼을 이용하면 API 키 관리, 요청 빈도 제한, 사용량 분석 같은 기능을 손쉽게 구현할 수 있다. API 엔드포인트별로 요청량을 제한하거나 사용자마다 다른 제한 정책을 설정할 수도 있다. Unkey 무료 요금제(Free Tier)는 API 키 1000개, 월 15만 건의 요청까지 사용할 수 있기 때문에 개인 프로젝트에 사용하기 딱 좋다. Next.js를 사용한다면 Unkey에서 제공하는 SDK를 이용해서 더 편하게 통합할 수 있다. 예를 들어 서버 액션이나 API 라우트에 미들웨어처럼 적용하여 인증된 요청만 처리하거나 사용량 제한을 적용할 수 있다. Unk.. 공감수 12 댓글수 0 2025. 3. 30.
  • [Next.js] dnd-kit을 활용한 칸반(Kanban) 보드 드래그 앤 드롭 구현 일반적으로 칸반 보드는 드래그 앤 드롭을 통해 컬럼이나 태스크 카드의 순서를 자유롭게 변경할 수 있다. 이러한 드래그 앤 드롭 상호작용은 dnd-kit 이라는 라이브러리에서 제공하는 Sortable 프리셋을 이용하면 더 쉽게 구현할 수 있다. dnd-kit은 코어 크기가 10kb 정도로 가볍고 외부 의존성이 없는 장점이 있다. 드래그 제한, 애니메이션, 충돌 감지 등을 커스터마이징 할 수도 있다. dnd-kit을 이용해 칸반 보드를 구현하면서 비교적 까다롭다고 느꼈던 부분들을 정리해 봤다. 코드는 아래 레포지토리에서 확인할 수 있다.레포지토리: https://github.com/romantech/simple-kanban데모 페이지: https://kanban.romantech.net    칸반 데이터 모.. 공감수 10 댓글수 0 2025. 3. 18.
  • Cloudflare를 활용한 무료 브랜디드 링크(단축 URL) 만들기 브랜디드 링크는 도메인을 활용한 맞춤형 단축 URL이다. 예를 들어 abc.com/123... 같은 긴 주소를 자신의 도메인을 이용해 짧고 직관적인 링크로 변환할 수 있다. bit.ly 같은 주소 단축 서비스에서도 브랜디드 링크 기능을 제공하지만, Growth 유료 플랜(월 $29) 이상에서만 사용할 수 있다. Cloudflare에 도메인을 등록했다면 Sink 라는 무료 오픈소스를 통해 자신만의 짧은 주소 서비스를 구축할 수 있다. 브랜디드 링크뿐만 아니라 애널리틱스, 링크 유효기간 설정 등 다양한 기능을 제공하며, 현재도 활발하게 개발이 진행 중인 프로젝트다.  브랜디드 링크 - 도메인 연동 및 맞춤형 단축 URL 생성애널리틱스 - 방문수, 리퍼러, 지역, 디바이스, 언어, OS 등 통계 제공링크 유효.. 공감수 13 댓글수 0 2025. 3. 15.
  • [시놀로지 나스] 와일드카드 인증서 적용하기(acme.sh) / Plex 인증서 설정 와일드카드 인증서는 단일 도메인과 모든 하위 도메인을 보호할 수 있는 SSL/TLS 인증서로(*.domain.com), 여러 서브도메인을 한 번에 관리할 수 있다. 와일드카드 인증서를 발급하려면 DNS-01 챌린지를 통해 도메인 소유권을 인증해야 한다. 아쉽게도 시놀로지 나스의 기본 기능만으로는 DNS 레코드를 직접 조작할 수 없기 때문에 와일드카드 인증서를 발급할 수 없다. 이 문제는 acme.sh를 사용하면 해결할 수 있다. acme.sh는 DNS 인증 과정을 자동화하여 와일드카드 인증서를 손쉽게 발급하고 갱신할 수 있도록 지원한다. 특히, 시놀로지 나스에서 인증서를 갱신하려면 80/443 포트를 개방해야 하지만, acme.sh는 이러한 포트 개방이 필요 없어서 보안상 훨씬 유리하다. acme.sh의.. 공감수 15 댓글수 0 2025. 3. 10.
  • [UI] Shadcn DropdownMenu에서 Dialog 자동 닫힘 문제 해결 Shadcn의 드롭다운(Dropdown)은 특정 동작이나 기능 등을 Popover 형태로 표시하는 컴포넌트다. 드롭다운 메뉴 아이템(DropdownMenuItem)을 클릭했을 때 다이얼로그(혹은 AlertDialog)를 띄우려는 의도로 메뉴 아이템의 자식으로 다이얼로그를 추가할 수 있다. 하지만 이렇게 작성하면 다이얼로그가 제대로 열리지 않는다. 메뉴 열기 {/* ... */} ; Radix의 메뉴 아이템은 클릭했을 때 드롭다운이 자동으로 닫히도록 설계되어 있다. 때문에 다이얼로그를 띄우는 메뉴 아이템을 클릭하면, 드롭다운이 닫히는 기본 동작에 의해 다이얼로그가 열리지 마자 닫히는 문제가 발생한다. 위 문제로 StackOverFlow를 찾아보면 Dr.. 공감수 9 댓글수 0 2025. 3. 9.
  • 검색엔진 바이두를 위협하는 SNS 샤오홍슈(RedNote, 小红书) 2025년 1월 미국에서 틱톡 금지법이 발효되자 1억 명이 넘는 이용자가 샤오홍슈로 옮겨가는 이례적인 현상이 벌어졌다. 샤오홍슈는 이 기간 앱스토어 다운로드 순위 1위를 차지하면서 큰 화제가 됐다. 해외에서 RedNote로 불리는 샤오홍슈는 흔히 '중국판 인스타그램'으로 소개되곤 하지만 사실 인스타그램, 도우인(틱톡)과는 생각보다 결이 많이 다르고 가장 저평가된 서비스이기도 하다(2025년 1분기 기준 기업가치 약 29조, 출처: Sacra). 샤오홍슈는 다른 어떤 플랫폼보다 생생한 사용자 경험과 리뷰가 많은 곳이다. 그래서 그런지 요즘 중국인들은 바이두 대신 샤오홍슈 검색을 더 선호한다(2024년 4분기 기준 샤오홍슈 일일 검색량 6억 건, 바이두 10억 건, 출처: Sina Finance). 이러한 .. 공감수 20 댓글수 0 2025. 3. 7.
  • [CSS] :focus, :focus-visible 차이점 focus, focus-visible:focus: 모든 포커스 상황(키보드, 마우스, 터치)에 적용:focus-visible: 키보드 포커스 또는 브라우저에서 포커스 표시가 필요하다고 판단할 때만 적용Tab 키로 포커스 이동 시(키보드 포커스)키보드 입력을 지원하는 요소(텍스트 입력 필드 등)… 일반적으로 마우스 사용자에게 불필요한 외곽선은 숨기면서 키보드 사용자의 접근성을 보장하기 위해 :focus와 :focus-visible 선택자를 조합해서 사용하는 경우가 많다./* 기본 포커스 스타일 리셋 */button:focus { outline: none;}/* 키보드 포커스 시 스타일 적용 */button:focus-visible { outline: 2px solid green;}  outline, r.. 공감수 5 댓글수 1 2025. 3. 6.
  • [JS] 자바스크립트 랜덤 색상(Random Color) 생성하기 HEX 색상 코드는 RGB 색상을 RRGGBB 형식의 16진수로 표현한다. HEX 코드의 최소 값은 #000000(검은색, 10진수 0), 최댓값은 #FFFFFF(흰색, 10진수 16777215)이기 때문에 0~16777215 사이의 랜덤 숫자를 16진수로 변환하고 #를 붙이면 랜덤한 HEX 색상 코드가 된다.export const getRandomColor = ({ transparent = false, transProbability = 0.2,} = {}) => { // transProbability 확률로(기본값 20%) 투명값 반환 if (transparent && Math.random()  Math.random() 메서드는 0 이상 1 미만(0 ≤ x approximately uniform.. 공감수 11 댓글수 0 2025. 3. 4.
  • [CSS] 쌓임 맥락 Stacking Context TL;DR기본적으로 요소들은 DOM 순서에 따라 쌓인다.positioned(position ≠ static) 요소는 non-positioned(position = static) 요소보다 위에 쌓인다.positioned 요소들 중 z-index 값이 높을수록 위에 쌓인다.새로운 쌓임 맥락이 생성되면 자식 요소는 해당 맥락 안에서 순서가 결정된다.  설명쌓임 맥락(Stacking Context)은 HTML 요소들을 가상의 z축(깊이) 방향으로 배치하는 개념이다. 기본적으로 요소들은 DOM 순서에 따라 쌓인다. 즉, 뒤에 정의한 요소일수록 화면에선 위에 위치한다. position을 적용한 요소(positioned)는 position을 적용하지 않은 요소(non-positioned)보다 위에 쌓인다. posit.. 공감수 10 댓글수 0 2025. 2. 26.
  • [시놀로지 나스] Nas에서 Cloudflare DDNS 사용하기 (도커 방식) 도메인 네임서버로 Cloudflare를 사용한다면 Cloudflare API를 활용해서 DDNS 기능을 무료로 사용할 수 있다. 별도의 클라이언트 프로그램 없이 API 호출만으로 간편하게 설정할 수 있고, 자신의 도메인을 그대로 활용할 수 있는 장점이 있다. 반면, DuckDNS 같은 서비스는 *.duckdns.org 형태의 서브도메인만 제공하므로 원하는 도메인을 직접 사용할 수 없다. 시놀로지 Nas에서 Cloudflare를 연동하는 방법은 크게 작업 스케줄러에 스크립트를 등록하는 방식과 Docker 컨테이너를 실행하는 방식이 있다. 두 방법 모두 설정하는데 크게 어렵지 않지만 환경변수를 통해 설정을 관리하기 용이한 Docker 방식을 추천한다. 기본적으로 1개 도메인(example.com)에 대한 여.. 공감수 16 댓글수 0 2025. 2. 10.
  • [React] 리액트 19 업데이트 내용 톺아보기 2024년 12월 React 19의 stable 버전이 출시됐다. 리액트 공식 블로그를 참고해서 React 19의 주요 변경 사항을 정리해 봤다. 새롭게 선보인 훅은 각종 문서와 예제를 참고해서 이해하기 쉽도록 부연 설명을 덧붙였다. 공식문서에 기존 사용자를 위한 마이그레이션 가이드도 자세하게 나와있으니 참고하자.  useTransitionuseTransition은 주로 무거운 작업의 상태 업데이트를 낮은 우선순위로 지정하여 UI 블로킹을 방지할 때 사용한다. React 18 버전까지 startTransition 콜백은 항상 동기적이어야 하는 제약이 있었다. 때문에 콜백 안에서 비동기 호출 같은 작업을 수행할 수 없었다. React 19부턴 startTransition 콜백 안에서 비동기 처리도 가능해졌.. 공감수 15 댓글수 0 2025. 2. 8.
  • [크롬 확장] 페이지 목차를 팝업으로 표시해주는 - Smart TOC 긴 내용을 읽다 보면 이전 또는 다음 단락으로 이동해야 할 때가 많다. 하지만 매번 마우스로 스크롤해서 원하는 단락을 찾기 번거롭기 때문에 소제목을 기준으로 탐색하면 훨씬 쉽게 찾을 수 있다. 이런 소제목들은 목차에서 한눈에 확인할 수 있다. 위키피디아 같은 사이트는 사이드바에 목차를 제공하고 현재 보고 있는 단락의 소제목은 굵게 강조 표시된다. 아쉽게도 많은 사이트는 위키피디아 같은 목차를 따로 제공하지 않는다. Smart TOC 라는 크롬 부가기능을 사용하면 현재 페이지의 제목 태그(h1, h2, ...)를 기준으로 사이드바 혹은 플로팅 메뉴 형태로 목차를 볼 수 있다.  부가기능을 설치하고 툴바에 있는 Smart TOC 아이콘을 클릭하면 목차 플로팅 메뉴가 표시된다. 플로팅 메뉴 위치는 드래그해서 .. 공감수 11 댓글수 0 2025. 2. 3.
  • Cloudflare DNS 레코드 설정 방법 (티스토리, Vercel 등 오류 해결) 얼마 전 도메인 네임 서버(DNS)를 AWS Route 53에서 Cloudflare로 옮겼다. Route 53은 호스팅 영역당 매월 ＄0.5 비용이 발생하고(추가 호스팅 영역은 ＄0.1) 100만 쿼리당 ＄0.4 누진 과금이 적용된다. 반면, Cloudflare는 이러한 비용 없이 무료로 사용할 수 있다. 또한 Cloudflare 프록싱을 활성화하면 별도 설정 없이 CDN을 사용할 수 있고 웹 애플리케이션 방화벽(WAF), DDoS 보호 등 다양한 보안 기능도 무료로 제공한다. 규모가 크지 않은 웹사이트라면 비용/기능 면에서 Cloudflare가 더 적합하다고 판단했다. 오늘은 티스토리, Vercel 등의 DNS 레코드를 설정할 때 발생했던 문제와 해결 방법에 대해 정리해 봤다.  티스토리레코드 설정유형.. 공감수 16 댓글수 0 2025. 2. 2.
  • [Next.js] Dynamic Routes 다이나믹 라우트 TL;DR[slug] : 단일 경로 세그먼트 포착[...slug] : 다중 경로 세그먼트 포착(Catch-All)[[...slug]] : 루트 경로를 포함한 모든 경로를 선택적으로 포착(Optional Catch-All)  Dynamic Segments정확한 세그먼트 이름을 미리 알 수 없을 때 폴더 이름을 대괄호로 감싸면 다이나믹 세그먼트로 작동. 세그먼트 이름은 layout, page 또는 route 파일에서 params 프롭으로 값 조회 가능. RouteURL ExampleParamsapp/blog/[slug]/page.js/blog/a{ slug: 'a' }app/blog/[slug]/page.js/blog/b{ slug: 'b' }루트 경로(blog/)에 페이지 없으면 접근 불가.  Catch-.. 공감수 11 댓글수 0 2025. 1. 31.
  • [macOS] 맥에서 잘라내기 단축키 사용하기 - Command X 윈도우(Windows)는 파일/폴더를 선택하고 ctrl + x 잘라내기 단축키를 누른 후, 다른 위치에서 붙여 넣기 하면 원래 위치에 있던 파일/폴더가 해당 위치로 이동한다. 아쉽게도 맥(macOS)에선 윈도우의 잘라내기 같은 단축키가 없다. 대신 이와 유사한 (복사한)파일 이동 단축키를 제공한다.  (파일/폴더 선택 후) 복사: command + c(다른 폴더에서) 이동: command + option + v 하지만 command + option + v 단축키를 누르는 게 은근히 불편해서 잘 사용하지 않게 된다. 그러던 중 맥에서도 윈도우의 잘라내기 단축키를 사용할 수 있도록 해주는 Command X 무료 앱을 발견했다. 이 앱은 Gifski, Refined GitHub, Menu Bar Calenda.. 공감수 17 댓글수 0 2025. 1. 31.
  • [Next.js] App Router 공식 튜토리얼 톺아보기 Next.js에서 제공하는 Learn Next.js App Router 튜토리얼을 부연 설명과 함께 한국어로 정리해 봤다. 공식 가이드는 총 16개 챕터로 구성되어 있지만, 이번 포스팅에선 프로젝트 세팅을 다루는 챕터 1과 CSS 스타일링 방법을 설명하는 챕터 2는 생략했다.  Optimizing Fonts and ImagesCumulative Layout Shift(CLS, 누적 레이아웃 이동)는 구글이 웹사이트의 성능과 사용자 경험을 평가하는 데 사용하는 지표로, 페이지 로드 중 레이아웃 이동으로 인해 발생하는 사용자 경험의 불편함을 측정한다. 예를 들어, 브라우저가 폴백(fallback) 폰트나 시스템 폰트로 텍스트를 먼저 렌더링 한 뒤 사용자 지정 폰트로 교체할 때 텍스트 크기, 간격 또는 레이아.. 공감수 15 댓글수 1 2025. 1. 30.
  • [Dev] 시맨틱 버저닝 Semantic Versioning 소프트웨어의 버전은 일반적으로 20.12.2 같은 형식으로 표기한다. 이는 소프트웨어 버전 번호를 관리하는 시맨틱 버저닝(Semantic Versioning)이라는 규칙을 따른 것으로, 메이저.마이너.패치 형식으로 구성되어 각 숫자가 특정한 의미를 가진다.Semantic Versioning은 줄여서 SemVer라고도 불린다. 메이저 버전은 호환성에 영향을 미치는 큰 변화가 있을 때 증가하며, 마이너 버전은 호환성을 유지하면서 새로운 기능이 추가될 때 증가한다. 패치 버전은 주로 버그 수정이나 성능 개선과 같은 작은 변경 사항을 나타낸다.  이러한 버전 관리 방식은 소프트웨어의 변경 사항을 체계적으로 전달하는 데 중요한 역할을 한다. 시맨틱 버저닝: 소프트웨어의 버전 번호를 체계적으로 관리하는 방법으로, .. 공감수 16 댓글수 0 2025. 1. 27.
  • [React] 리액트의 올바른 useEffect 사용팁 리액트의 useEffect는 데이터 가져오기, 구독 관리, DOM 업데이트, 사이드 이펙트 처리 등 다양한 작업에 사용된다. 그러나 useEffect를 과도하게 사용하면 성능 저하, 불필요한 렌더링, 디버깅의 복잡성 같은 문제가 발생할 수 있다. "Leave useEffect Alone!" 라는 가이드 글을 참고하여 올바른 useEffect 사용법에 대한 추가 설명을 덧붙여서 정리해 봤다.  경쟁 상태(Race Condition) ⭐경쟁 상태는 여러 비동기 작업이 동시에 실행될 때, 실행 순서나 결과가 예측하지 않은 방식으로 작동하는 현상을 가리킨다. 아래 코드에서 버튼을 여러 번 클릭하면 counter 값이 증가하고, 각 요청은 랜덤한 시간만큼 대기한 후 response 상태를 업데이트한다. 하지만 이.. 공감수 16 댓글수 2 2025. 1. 21.
  • [JS] 자바스크립트 코드 최적화 기법 모음 "Optimizing Javascript for fun and for profit"라는 자바스크립트 최적화 관련 글의 영어 원문과 번역본을 바탕으로, 부가적인 설명을 추가하고 이해하기 쉬운 언어로 정리해 봤다. 예시 코드도 조금 더 다듬어서 개선했다.  문자열 비교 피하기 Avoid string comparisons문자열 비교는 각 문자를 순차적으로 비교해야 하므로 O(n) 시간복잡도를 갖는다. 특히 문자열 enum을 사용하는 것은 성능 최적화 관점에서 피해야 할 패턴 중 하나다. 자바스크립트 엔진에서 정수(Integer)는 일반적으로 값으로 전달되며, 비교 연산 시 바로 값을 확인할 수 있어 빠르게 처리할 수 있다. 반면 문자열은 메모리에 저장된 위치(포인터)를 참조해 값을 가져온 후 비교하기 때문에 .. 공감수 48 댓글수 23 2024. 12. 7.
  • [시놀로지 나스] Nas 메인 하드디스크 교체하기 얼마 전 6년간 사용했던 Western Digital 하드디스크가 사망했다. 처음엔 볼륨 충돌 관련 메시지가 뜨더니, 결국 인식조차 안 되는 상태에 이르렀다. 다행히 메인 하드디스크(1번 드라이브 베이)가 아니라서 DSM은 문제없이 사용할 수 있었다. 메인 하드디스크 용량은 4TB 밖에 안 돼서 항상 부족하다고 느꼈었는데, 이 참에 훨씬 큰 용량의 하드디스크로 바꿔줬다.  DSM 설정, 파일 등 기존 데이터는 그대로 유지하면서 하드디스크를 교체하려면 하드디스크 복사기(HDD 도킹스테이션)를 이용한 방법이 가장 깔끔하다. 하드디스크 복사기는 2~3만원이면 구매할 수 있고 복사 과정도 버튼 한 번만 누르면 되는 정도로 쉽다. 오늘은 DSM 메인 하드디스크 교체 과정을 소개해보려고 한다.   하드디스크 복사?.. 공감수 32 댓글수 9 2024. 11. 13.
  • [Algorithm] 슬라이딩 윈도우 Sliding Window 알고리즘 톺아보기 슬라이딩 윈도우 알고리즘 개념슬라이딩 윈도우 알고리즘(Sliding Window Algorithm)은 배열과 같은 선형 자료구조에서 연속된 구간 내의 데이터를 효율적으로 처리하기 위해 사용하는 기법이다. 특히 배열 내 연속된 요소의 합, 최댓값, 최솟값 등을 계산할 때 유용하다. 슬라이딩 윈도우는 이름 그대로 고정/가변 크기의 범위(윈도우)를 이동(슬라이드) 시키면서 필요한 계산을 반복하는 방식이다. 이때 전체 배열을 한 번만 순회하면 되기 때문에 중복 연산을 피하고 시간 복잡도를 개선할 수 있다. 일반적으로 슬라이딩 윈도우 기법을 사용하면 O(n)의 시간 복잡도로 문제를 해결할 수 있다.// 주어진 배열에서 연속된 k개 요소의 최대 합을 찾는 함수function maxSumSubarray(arr, k).. 공감수 17 댓글수 2 2024. 11. 11.
  • [React] 리액트 코드를 개선할 수 있는 4가지 팁 TLDR이벤트 핸들러에 커링 활용컴포넌트 책임 분리조건문 대신 객체 map 사용React 라이프사이클 외부에 독립적인 변수 배치  4 React Tips1. 커링 활용user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co.. 공감수 11 댓글수 0 2024. 10. 28.
  • [Flutter] 플러터 기초 내용 정리 - Part 2 💡 아래는 Part 1에서 이어지는 내용 Data Fetching객체지향 언어인 Dart는 거의 대부분이 클래스 기반으로 구성된다. API 호출, 응답 데이터 타입 정의, 데이터 처리 역시 모두 클래스 내부에서 이루어진다. 먼저 응답 데이터를 나타내는 모델 클래스를 정의한다. 일반적으로 fromJson 이라는 이름 있는 생성자를 사용하여 JSON 데이터를 인스턴스화 시킨다. 아래 예시에선 JSON 객체를 인자로 받기 때문에 초기화 리스트를 사용하여 클래스 필드에 할당하고 있다.// lib/models/webtoon_model.dartclass WebtoonModel { final String id, title, thumb; WebtoonModel.fromJson(Map json) : tit.. 공감수 12 댓글수 1 2024. 10. 13.
  • [Flutter] 플러터 기초 내용 정리 - Part 1 배경 지식Flutter 구조💡 Dart는 Just-In-Time(JIT) 컴파일과 Ahead-Of-Time(AOT) 컴파일을 모두 지원한다. JIT 컴파일은 개발 모드에 사용돼서 Hot Reload 같은 빠른 피드백 루프를 제공한다. AOT 컴파일은 배포 모드에 사용돼서 컴파일된 코드가 기기에 더 최적화된 상태로 실행할 수 있게 만든다. 네이티브 개발에선 운영체제(OS)와 직접 상호작용하여 버튼, 텍스트 같은 UI 요소를 생성한다.Flutter는 네이티브 플랫폼의 위젯을 사용하지 않고 자체적으로 UI를 렌더링 한다. 이는 비디오 게임 엔진의 작동 방식과 유사하다.Dart로 작성된 코드는 Flutter 프레임워크를 사용하여 UI를 정의하고, 실제 화면에 렌더링 하는 작업은 C++로 작성된 Flutter .. 공감수 15 댓글수 0 2024. 10. 5.
  • [TS] 타입스크립트 브랜디드 타입 Branded Type타입스크립트를 사용하다 보면 서로 다른 두 객체의 특정 속성이 동일한 타입을 가질 때가 많다. 이로 인해 타입 시스템에서 오류가 발생하지 않더라도 논리적 오류나 타입 안전성 문제를 야기할 수 있다.type User = { id: string; name: string;};type Post = { id: string; ownerId: string; comments: Comments[];};type Comments = { id: string; timestamp: string; body: string; authorId: string;}; 위 예시에서 User.id, Post.id, Comments.id는 모두 string 타입이다. 첫 번째 인자 postId, 두 번째 인자.. 공감수 14 댓글수 0 2024. 9. 26.
  • 도커(Docker)와 쿠버네티스(Kubernetes) 기본 개념 들어가며과거에는 애플리케이션을 배포할 때 다양한 환경에서 발생하는 호환성 문제를 해결하는 데 많은 노력이 필요했다. 그러나 이제는 컨테이너 기술의 도입으로 이를 표준화하고 자동화할 수 있게 되었다. 특히 소프트웨어 개발을 하다 보면 컨테이너 관리 도구와 관련한 용어를 자주 접하게 된다. 그래서 도커, 쿠버네티스 그리고 다중 클러스터에 대한 기본 개념을 정리해 봤다.  도커 (Docker) 쿠버네티스를 이해하기 위해선 먼저 도커(Docker)에 대해 알아야 한다. 2013년에 탄생한 도커는 소프트웨어 애플리케이션의 실행 환경과 소스 코드를 함께 패키징하여 하나의 컨테이너 이미지로 만드는 혁신적인 방식을 제안했다. 컨테이너 이미지는 그 자체가 바이너리 파일이기 때문에 바로 배포할 수 있는 장점이 있다. 즉,.. 공감수 17 댓글수 0 2024. 9. 17.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.