Programming (64) 썸네일형 리스트형 [git] 협업을 위한 커밋/브랜치 관리 문서 커밋 메세지 규칙1. 간결하고 간단하게 작성(제목 50자 이내, 본문 각 행 72자 이내)2. 제목 첫 글자 대문자,끝 마침표X3. 현재 시제 사용(추가된 기능X → 추가 기능O)4. 명확하고 난해하지 않게(기능 개발X → feat: 로그인 기능 개발O)5. 어떻게X, 무엇&왜O 참고1: https://gist.github.com/robertpainsi/b632364184e70900af4ab688decf6f53참고2: https://medium.com/@harshitgambhir88/7-rules-to-write-better-git-commit-messages-aec373fdfa94 Commit typefeat새로운 기능 추가, 기존 기능을 요구사항에 맞춰 수정fix버그 수정chore사소한 수정style.. [WebAPI] IntersectionObserver란? IntersectionObserver - Web API | MDNIntersection Observer API의 IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는developer.mozilla.org IntersectionObserver는 특정 요소가 뷰포트(또는 부모 요소) 내에서 보이는지 여부를 비동기적으로 감지하기 위해 사용되는 API. 스크롤 이벤트를 직접 핸들링하지 않고도 요소의 가시성을 감지할 수 있다. 특히, 무한 스크롤 기능을 구현할 때 매우 유용함.IntersectionObserver를 사용하는 이유성능 향상:스크롤 이벤트를 직접 감지하는 대신, Int.. Next.js(typescript) 무한 스크롤 구현 + RestAPI 1. Next.js 프로젝트 생성npx create-next-app@latest infinite-scroll --typescriptcd infinite-scrollnpm install 2. 무한 스크롤 컴포넌트 작성components/InfiniteScroll.tsx 파일 생성, 외부 API를 호출하도록 수정// components/InfiniteScroll.tsximport { useState, useEffect, useRef, useCallback } from 'react';// 외부 API에서 데이터를 가져오는 비동기 함수const fetchMoreData = async (page: number, limit: number) => {// https://jsonplaceholder.typicode.co.. Next.js(typescript) + Socket.IO 실시간 채팅 구현(simple ver.) 실시간 채팅 애플리케이션 만들기1. 프로젝트 설정Next.js 프로젝트를 생성하고 필요한 패키지 설치npx create-next-app@latest realtime-chat --typescriptcd realtime-chatnpm install socket.io socket.io-client 2. 프로젝트 구조realtime-chat/├── node_modules/├── src/│ ├── pages/│ │ ├── api/│ │ │ └── socket.ts│ │ ├── chat.tsx│ │ └── _app.tsx│ ├── styles/│ │ └── globals.css│ └── types/│ └── socket.ts├── package.json├.. [Mac/eclipse] 맥에서 이클립스 여러개 동시 실행하기 Eclipse가 이미 오픈 된 상태에서 terminal을 열고 open -n 입력 Finder에 있는 Eclipse 아이콘을 terminal에 작성한 open -n 뒤에 끌어오면 이렇게 자동으로 Eclipse 앱이 설치된 경로가 뒤에 작성된다. 이 상태에서 Enter를 누르면 2번째 Eclipse가 열린다. [HTML] 모바일 환경에서 웹 <input> 태그 포커싱 화면 확대 막는 법 html 의 tag 사이에 하단의 내용을 추가하면 됩니다. [Javascript/React] 이벤트 버블링 제거하기 / 해당 영역 클릭시 이벤트 방지 / Event Bubbling 1. 이벤트 버블링(Event Bubbling)이란? 계층형 구조의 이벤트를 가진 부모 선택자 선택 시 → 자식 선택자에게 영향 2. 이벤트 버블링을 방지해야하는 경우 modal(popup)창 만들 때 dim 처리 된 바깥 부분을 눌렀을 때도 modal이 꺼지도록 기능을 만들 경우 등 겹치는 영역의 요소에는 이벤트가 발생하지 않도록 할 때 3. 이벤트 버블링 막는 방법 { setOpen(!open); } > { // e.stopPropagation();으로 이벤트 막기 e.stopPropagation(); }} > { setOpen(!open); } /> [HTML/CSS] Textarea 사이즈 조절 막기 1. inline-style로 resize : none 값 주기 React에선 2. css로 해당 클래스 명에 resize : none .textarea--resize--none { resize : none; } 이전 1 2 3 4 ··· 8 다음
