본문 바로가기

전체 글139

Ref - 컴포넌트 데이터 페칭 후 해당 컴포넌트 정보 로드 리액트에서 ref를 사용해서 리스트 로딩이 완료된 후 컴포넌트의 높이를 가져오는 방법> 데이터 로딩이 완료되어 컴포넌트가 다시 렌더링된 시점에 높이를 측정한다. 이를 위해서 useEffect 훅을 데이터 (state)와 연결하여 사용한다. # 원리 : 데이터 로딩 -> state 변경 -> 컴포넌트 리렌더링 -> useEffect 실행 -> ref.current로 DOM 요소에 접근해 높이 측정1. useRef 높이를 측정하고 싶은 DOM 요소에 연결할 ref 객체를 생성한다. 2. useState리스트 데이터와 로딩 상태를 관리한다. 3. useEffect데이터가 변경되어 리렌더링이 완료된 후에 특정 작업을 수행한다.이 useEffect의 의존성 배열에 데이터 state를 넣어주는 것이 핵심이다. i.. 2025. 7. 30.
Protocol ** 개요- 프로토콜에서 중요한 것은 무조건 성능.- 프로토콜은 특정 목적을 위해서 설계되었으며, 그에 따라서 다른 속성으로 나뉜다. ** 프로토콜 속성Data Formatㄴ Text based ( plain text, JSON, XML )ㄴ Binary ( protobuf, RESP, h2, h3 ) Transfer modeㄴ Message based ( UDP, HTTP )ㄴ Stream ( TCP, WebRTC ) Addressing systemㄴ DNS name, IP, MAC Directionalityㄴ Bidirectional ( TCP )ㄴ Unidirectional ( HTTP )ㄴ Full/Half duplex Stateㄴ stateful ( TCP, gRPC, apache thrift .. 2025. 7. 25.
Express DB 관련 최적화 1. 커넥션 풀을 매번 연결하지 말자. - 매 요청마다 데이터베이스에 새로 연결하고 끊는 작업 connect - query - close는 매우 비싼 비용을 소모한다. 사용자가 몰리게 되면 이는 서버와 데이터베이스에 엄청난 부하를 준다.- 때문에 연결을 미리 만들어두고 풀 pool에 보관한다. 요청이 들어오면 풀에서 노는 연결을 하나 빌려쓰고, 작업이 끝나면 다시 풀에 반납하여 재사용한다. - 대부분의 db라이브러리 mysql2, pg 등 ...에서 풀 기능을 기본으로 제공한다. // 👎 나쁜 예: 매번 새로 연결const mysql = require('mysql2');app.get('/users/:id', (req, res) => { const connection = mysql.createConn.. 2025. 7. 25.
Express 기본 1 1. 중앙집중식 에러처리 - 각 라우터에서 try...catch를 반복하는 대신에, 에러처리 미들웨어를 만들어서 모든 에러를 한 곳에서 관리할 수 있다. - 이렇게 하면 절대적인 코드 수가 줄기도 하고, 에러처리를 한 군데에서 하니 코드가 깔끔해진다.- 에러에 대한 응답처리를 일관적으로 할 수 있다. const express = require('express');const app = express();app.get('/error', (req, res, next)=>{ const err = new Error('뭔가 잘못되었음'); err.status = 500; next(err); // next()에 인자를 전달하면 에러처리 미들웨어로 바로 이동한다. });// 중앙 에러처리 미들웨어const .. 2025. 7. 25.
Express 팁 ( 쉬운 ) 1. 미들웨어 중심의 아키텍처를 잘 활용하여야 한다.- 요청과 응답 객체에 접근하고, 다음 미들웨어 호출 중심의 아키텍처를 잘 활용하여야 한다. - 요청과 응답 객체에 접근하고, 다음 미들웨어 함수를 호출하는 ( next() ) 함수들의 연속으로 어플리이션의 로직이 구성된다. - 기능분리 ㄴ 각 미들웨어는 하나의 명확한 기능을 담당하도록 작성해야한다. ( 로깅, 인증, 데이터파싱 ) 예를 들어서, 요청 본문을 파싱하는 express.json(), express.urlencoded()나 CORS를 처리하는 CORS 같은 미들웨어를 사용하는 것이 일반적이다. - 실행 순서의 중요성 ㄴ 미들웨어는 app.use()나 라우터에 등록된 순서대로 실행된다. 따라서 인증 미들웨어는 항상 실제 로직을 처리하는 .. 2025. 7. 22.
최적화 기법 useRef, useCallback 1. useRef- useRef를 단순히 DOM 요소를 잡는 용도로만 알고 있다면, 30%만 알고 있는 것이다.- useRef의 본질은 컴포넌트가 다시 렌더링 되어도 절대 사라지지 않는 나만의 '기억상자'라는 것이다. 이 상자의 내용물 ( .current)는 바뀐다고 해서 컴포넌트가 다시 렌더링 되지도 않는다. 이 때문에 3가지 활용법이 파생된다. 활용법 1 : DOM 참조용, 가장 기본적인 사용법const playerRef = useRef(null);- playerRef라는 기억 상자에 라는 DOM 요소 또는 컴포넌트를 담아달라고 리액트에게 부탁하는 것. - 왜 쓰는가? 리액트의 상태관리 시스템을 통하지 않고, 특정 DOM 요소에게 직접 명령을 내리고 싶을 때 사용한다. 예를 들어 playerRef... 2025. 6. 30.
Grid & clamp 먼저 CSS GRID를 보고가자 grid의 기본구조// 가장 기본적인 gridcss={css` display : grid; grid-template-columns : 1fr 1fr 1fr; // 3개열 같은 크기 grid-template-rows : 100px 200px; // 2개 행, 다른 크기 gap : 20px; // 간격`}그리드 용어- grid container : display grid가 적용된 부모요소- grid item : grid container 안의 직접 자식 요소들- grid line : 격자를 구성하는 선들- grid track : 행 또는 열- grid cell : 한칸- grid area : 여러 셀을 합친 영역 fr 단위css={css` grid-templa.. 2025. 6. 30.
Record와 상태관리에서의 Record 활용 패턴들 Record의 고급활용법먼저 Record란 무엇인가- 객체의 타입을 정의하는 타입스크립트 유틸리티 타입- 키와 값의 타입을 명시적으로 지정- 일반 객체보다 더 엄격하고 안전한 타입체크// Record의 기본형태Record// 실제 예시Record // 키는 string, 값은 number인 객체Record // 키는 'a','b' 중 하나 값은 boolean 일반객체 vs Record// 일반객체 - 타입 안전성 부족const normalObject : { [key:string] : any } = { name : '김철수', age : 30, city : '서울'};// 이런 실수가 가능하다.normalObject.agee = 31; // 오타를 했는데도 에러가 나지 않는다.normalObj.. 2025. 6. 30.
리액트, css 유즈케이스 이것저것 가로 크기에 따라서 반응형으로 나열하려면1. repeat(auto-fill, minmax(350px, 1fr)) - auto-fill : 가능한 많은 열을 자동으로 생성한다.- minmax(350px, 1fr) : 최소 350px, 최대 1fr (남은 공간을 자동분배한다 )- 결과 : 화면 폭에 따라서 자동으로 열 개수를 조정한다. 카드나 어떤 요소에 호버 줄 때css={css` transition : all 0.2s ease; &:hover{ transform : translateY(-2px); box-shadow : 0 4px 16px rgba (0,0,0,0.08); }`} 검색/필터링 디바운스 구현useEffect(()=>{ const debounceT.. 2025. 6. 27.
왜 api 베이스에 서버 IP주소를 그대로 넣으면 안되는가 왜 리액트에서 서버 연결 정보 넣을 때 ip 주소를 바로 넣으면 안될까? [ 보안의 측면에서 ]가장 큰 문제는 내부 시스템 정보노출이다.1. 누구나 볼 수 있다. - React 코드는 최종적으로 사용자의 웹 브라우저에서 실행된다. 악의적인 사용자를 포함한 그 누구라도 브라우저의 개발자 도구를 열어서 네트워크 요청이나, js 소스코드를 살펴보는 것만으로 서버 b의 내부 ip주소와 포트주소를 알아낼 수 있다. 2. 공격자에게 지도를 주는 셈이다.- 공격자는 이제 우리 시스템이 최소한 서버 a( 웹서버 ) 서버b ( api 서버 ) 라는 두개의 서버로 구성되어 있다는 내부 구조를 알게 된다.- 더 중요한 것은, 공격 대상이 될 수 있는 서버 b의 정확한 주소를 확보하게 된다.- 만약 다른 경로 ( 피싱, 내부.. 2025. 6. 27.

티스토리툴바