전체 글
-
React - useRef프론트엔드/React 2024. 10. 30. 23:58
useRef는 **React의 훅(hook)**으로, DOM 요소를 직접 참조하거나 컴포넌트의 상태를 저장할 때 사용됩니다.일반적인 상태(useState)와 달리 컴포넌트가 리렌더링돼도 값이 초기화되지 않으며, 리렌더링을 트리거하지 않는 점이 특징입니다.useRef 기본 사용법import { useRef } from 'react';function MyComponent() { const inputRef = useRef(null); // 초기 값: null const handleFocus = () => { inputRef.current.focus(); // input 요소에 포커스 }; return ( Focus Input );}코드 동작useRef(null)..
-
HTML - autocomplete프론트엔드/HTML 2024. 10. 29. 21:54
HTML의 autocomplete 속성은 입력 필드에 자동 완성 기능을 활성화하거나 비활성화하는 데 사용됩니다. 다양한 값들이 있으며, 이 값들에 따라 브라우저가 사용자 경험을 개선하기 위해 저장된 데이터를 자동으로 채워줍니다.1. 기본 속성on: 자동 완성 기능을 활성화합니다 (기본값).off: 자동 완성 기능을 비활성화합니다.2. 자동 완성에 사용되는 입력 유형별 속성아래 값들은 브라우저가 어떤 정보를 자동 완성해야 하는지 명확하게 지정해줍니다.개인 정보name: 이름honorific-prefix: 경칭 (Mr., Mrs. 등)given-name: 이름(예: 홍길동의 '길동')family-name: 성(예: 홍길동의 '홍')nickname: 별명email: 이메일 주소username: 사용자 이름ne..
-
Mongoose - $and, $ne, $nin, $in, $or프론트엔드/MongoDB 2024. 10. 28. 21:12
1. $and여러 조건이 모두 만족되는 문서를 찾을 때 사용합니다.AND 연산자로, 배열에 주어진 모든 조건이 참이어야 문서가 반환됩니다.사용 예User.find({ $and: [ { age: { $gt: 18 } }, // 나이가 18보다 큰 { status: 'active' } // 상태가 'active'인 ]});나이가 18세 초과이고, 상태가 **'active'**인 사용자들을 찾음.2. $ne"not equal": 주어진 값과 같지 않은 문서를 찾습니다.사용 예User.find({ name: { $ne: 'Alice' } });이름이 **'Alice'**가 아닌 사용자들을 찾음.3. $nin"not in": 배열에 포함되지 않는 값들을 찾을 때 사용합니다.사용 예User.fin..
-
Mongoose - populate프론트엔드/MongoDB 2024. 10. 28. 21:03
const user = await User.findById(req.user.id).populate('matches', 'name image');populate란?populate는 Mongoose에서 제공하는 메서드로, 참조된 다른 컬렉션의 데이터를 함께 가져올 때 사용합니다.MongoDB에서는 컬렉션 간 참조(reference) 관계를 설정할 수 있는데, 기본적으로 참조된 객체의 ID만 저장됩니다.populate를 사용하면, 해당 ID에 해당하는 실제 데이터를 조회해서 포함시킵니다.사용 예시 및 설명코드const user = await User.findById(req.user.id).populate('matches', 'name image');1. findById:User 모델에서 **req.user.i..
-
Javascript - instanceof프론트엔드/Javascript 2024. 10. 25. 21:20
instanceof란?instanceof는 JavaScript의 연산자로, 어떤 객체가 특정 클래스나 생성자 함수의 인스턴스인지 검사할 때 사용됩니다. 사용법object instanceof Constructor object: 검사할 대상(객체).Constructor: 해당 객체가 속하는지 확인할 클래스(또는 생성자 함수).주요 특징객체가 **해당 클래스(또는 생성자 함수)**로부터 생성되었거나, 프로토타입 체인에 존재하면 true를 반환합니다.주로 에러 핸들링 시, 특정 오류 객체(TypeError, JsonWebTokenError 등)를 구분하는 데 사용합니다.코드 해석if (error instanceof jwt.JsonWebTokenError) { return res.status(401).json(..
-
Javascript - async/await와 try/catch프론트엔드/Javascript 2024. 10. 25. 20:48
1. async/await의 역할async: 비동기 함수임을 명시합니다. 이 함수 내부에서 await를 사용할 수 있습니다.await: Promise가 해결될 때까지 기다립니다. 코드가 동기적으로 작성된 것처럼 보이게 해줍니다.예시 (async/await 사용)const getData = async () => { const response = await fetch("https://api.example.com/data"); const data = await response.json(); console.log(data);}; 위 코드에서는 **await**를 사용해 Promise가 해결될 때까지 기다립니다. 이로 인해 코드가 순차적으로 진행되며, 비동기 처리를 더 쉽게 이해할 수 있습니다. 2. try..
-
React 18의 Concurrent Mode프론트엔드/React 2024. 7. 8. 11:15
React 18에서 도입된 Concurrent Mode는 사용자 인터페이스를 더 빠르고 반응성 있게 만드는 새로운 기능입니다. Concurrent Mode는 React 애플리케이션이 더 나은 성능과 사용자 경험을 제공할 수 있도록 돕는 여러 가지 개선 사항과 새로운 기능을 포함합니다.Concurrent Mode의 주요 개념Interruptible Rendering (중단 가능한 렌더링):렌더링 작업을 여러 프레임에 걸쳐 분할하여, 더 중요한 작업이 있을 때 렌더링을 중단하고 다시 시작할 수 있게 합니다. 이는 사용자가 느린 작업으로 인해 UI가 멈추는 경험을 방지합니다.import { useState, useEffect } from 'react';function App() { const [items, ..
-
웹소켓과 devServer 설정 (Vue 3 기준)프론트엔드/Vue 2024. 5. 23. 18:52
웹소켓과 devServer 설정 (Vue 3 기준)웹소켓 (WebSocket)웹소켓은 클라이언트와 서버 간의 전이중 통신 채널을 제공하는 프로토콜입니다. HTTP와 달리, 웹소켓 연결은 초기 요청 후에 연결을 유지하며, 양방향 데이터 전송을 가능하게 합니다. 이는 실시간 애플리케이션(예: 채팅, 실시간 피드 업데이트 등)에 유용합니다.웹소켓 설정 예시 (Vue 3 + Socket.IO)클라이언트 측 (Vue 3 + Socket.IO)// main.jsimport { createApp } from 'vue';import App from './App.vue';import router from './routes';import { io } from 'socket.io-client';import SocketIO ..