본문 바로가기

Programming

(66)
[etc] 의미론적 네이밍 순서 변수/함수명 모두 [무엇을 / 어떻게 / 어디에] 라는 관점으로 이름을 구성하는 것이 핵심. 1. 함수명동사 + 대상명사 + (상황/조건)1) 동사 : 함수가 무엇을 하는가. ex) get, fetch, calculate, send, update2) 대상명사 : 어떤 대상(객체, 리소스, 데이터 등)을 다루는가. ex) User, Order, Payment, Report3) (옵션) 상황/조건 : 언제/어떤 방식으로/어떤 조건에서 실행되는가. ex) ByDate, IfValid, WithRetry, Async - 가능한 한 가지 역할만 수행하도록 함수명도 그 행위를 정확히 표현. 여러 일을 하는데 이름엔 하나만 담고 있으면 혼란 생김. - boolean 반환 함수는 is, has, can으로 시작하면 t..
[Chrome] 크롬 http > https 강제 전환/리다이렉트 해제 방법 1. 크롬 주소창에 chrome://net-internals/#hsts 입력 2. 위의 Delete domain security policies에 강제 전환/리다이렉트 방지를 하고자 하는 주소의http://를 떼고 작성한 뒤 delete버튼 클릭ex) http://example.com > example.com http://www.example.com > www.example.com & example.com3. 접속하고자 하는 주소 입력 후 재접속/새로고침 시도 혹시 하다가 다시 안 되는 경우 해당 위치에 주소 입력해 add 버튼 클릭으로 추가 후 다시 위의 delete 작업 반복
[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 사이에 하단의 내용을 추가하면 됩니다.