본문 바로가기

전체 글

 (476)
[React] useState 정리 useState란?React에서 상태(state)를 관리하기 위한 함수화면(UI)에 영향을 주는 데이터를 저장하고 그 값이 바뀌면 컴포넌트를 자동으로 렌더링시켜주는 역할입니다. 내부 동작 순서1. 컴포넌트 최초 렌더링React는 useState을 보고 이 컴포넌트에 하나의 상태로 기억합니다.이 상태는 React 내부 메모리(컴포넌트 인스턴스)에 저장됩니다.초기값은 딱 한번만 사용됩니다.2. 렌더링 결과가 화면에 출력3. 상태 변경 함수 호출React가 이 컴포넌트의 상태가 바뀌었다는 것을 감지합니다.(상태 변경 감지)새로운 값을 React 내부 메모리에 기록합니다.이 컴포넌트만 다시 렌더링합니다.4. 렌더링 재실행컴포넌트 함수가 다시 호출되지만 React는 기존 상태값을 유지한 채 새로운 UI를 계산합..
[React] package.json, package-lock.json, node_modules React 공부를 시작을 하기에 앞서 리엑트를 처음 install 하였을 때 내부 파일에 대해 공부하고 정리를 하겠습니다. package.json프로젝트의 의존성(Dependency) 정의하는 파일입니다.기본적인 프로젝트의 정보와 의존성 목록을 정의하는 중심 파일입니다.의존성이란 이 프로그램이 다른 프로그램의 기능을 빌려 쓰는 관계를 말합니다. 즉, 내 프로그램이 제대로 실행되기 위해 꼭 필요한 외부 도구라고 생각하시면 될 것 같습니다. package-lock.json의존성 버전이 달라져서 문제가 생기지 않게 현재 설치된 정확한 버전을 잠궈두는 파일입니다.package.json 파일은 이 프로젝트는 React 18버전대 아무거나라고 저장되어 있습니다."dependencies": { "react": "^..
[웹 보안] MyBatis에서 ${} vs #{}: 차이와 SQL Injection 방지 방법 회사 보안 점검 보고서를 보니 MyBatis XML 내에서 ${}를 #{}로 변경하라는 권고가 있었습니다. 읽어보니 그 이유가 SQL Injection 취약성 때문이라는 걸 알게 되어 정리합니다. 결론부터 말하면#{} : 안전 — PreparedStatement의 파라미터 바인딩으로 처리되어 SQL 구문을 변조할 수 없음${} : 위험 — 단순 텍스트 치환으로 입력값이 SQL의 일부(구문)로 삽입될 수 있음 MyBatis XML 파싱 및 동적 SQL 처리, , , 같은 태그로 동적 SQL을 만들고, ${}는 이 단계에서 그대로 텍스트 치환이 됩니다.BoundSql 객체가 생성되며 이 안에는 완성된 SQL 텍스트와 parametermappings가 들어가있습니다.parameterMappings는 바인딩 ..
[프로젝트] 단어의 숲 다시 시작하는 개인 프로젝트, 단어의 숲 🌳회사에 취직하면서 블로그 글쓰기, 개인 프로젝트, 공부 등을 피곤하다는 이유로 소홀히 했지만, 이제 다시 시작해 보려고 한다. 사실 대학 2학년 때 ‘단어 저장 페이지’ 프로젝트를 만든 적이 있었는데, 영어 공부와 여자친구와 함께 사용하기 위해 제작한 것이었다.하지만 기능을 수정하려다 보니 구조가 너무 난잡하고 유지보수도 어려워져서 이번에는 처음부터 새롭게 만들어 보기로 했다. 기존 핵심 기능단어 CRUD단어 퀴즈단어 검색게시판마이페이지 및 단어 퀴즈 통계, 퀴즈 잔디 추가 및 변경 기능게시판 → 게시판 기능 + 단어 공유 기능(엑셀 활용 예정)단어 추가 잔디단어 번역 기능 (번역 API)카테고리 기능 (티스토리처럼 카테고리 제공)다양한 퀴즈 알고리즘 제공전..
[데이터베이스] UNION 기본 개념 및 활용 예제 UNION이란?2개 이상의 테이블에 존재하는 같은 성격의 속성 값을 하나의 쿼리로 추출할 수 있게 사용하는 예약어입니다.쉽게 설명을 하자면 같은 성격의 속성을 세로로 쌓는다라고 생각하시면 되겠습니다. 특징1. 컬럼의 갯수와 타입이 동일해야합니다.- 결과 컬럼의 수, 순서, 데이터 타입까지 동일- 단, 컬럼 이름은 같지 않아도 상관없습니다. 최종 결과는 첫 번째 SELECT를 따라서 이름이 결정됩니다.2. 중복 제거- UNION의 같은 경우 똑같은 행이 존재할 경우 자동으로 중복을 제거합니다.- 중복 제거 없이 보기 위해서는 UNION ALL를 사용해야 합니다. 예제https://school.programmers.co.kr/learn/courses/30/lessons/133027 프로그래머스SW개..
SSE(Server-Sent-Event) 캡스톤 디자인 프로젝트를 진행하면서 사용자에게 실시간 알림을 전달하는 기능을 구현하고자 다양한 방법을 조사하게 되었습니다. 그러던 중 SSE(Server-Sent Events)라는 기술을 알게 되었고, 이를 정리하며 공유하고자 합니다. 알림 기능 요구사항이번 프로젝트에서 구현하고자 하는 알림 기능은 다음과 같은 상황에서 사용자에게 알림을 보내야 합니다:사용자가 업체의 상품을 구매했을 때사용자가 구독한 업체에서 새로운 상품을 등록했을 때사용자의 등급이 올라갔을 때사용자가 업체에게 리뷰를 남겼을 때업체가 사용자의 리뷰에 답글을 남겼을 때 처음 생각해본 알림 구현 방식검색 전에 먼저 스스로 생각해본 방법은 두 가지였습니다:일정 시간마다 서버에 알림 여부를 요청하는 방식웹소켓(WebSocket)을 이용한 실시간..
[Spring Boot] 영속성 컨텍스트(Persistence Context) 영속성 컨텍스트란?JPA 에서 엔티티(Entity)를 저장하고 관리하는 메모리 상의 저장소이며일반적으로 EntityManager가 생성될 때 함께 생성되고 EntityManager가 종료되면 함께 사라집니다. EntityManager란?JPA의 핵심 객체로 DB와의 모든 상호작용을 담당하는 객체로써 영속성 컨텍스트도 EntityManager 내부에 존재하며 CRUD 등의 작업은 모두 EntityManager를 통해 이루어집니다. 영속성 컨텍스트 상태에 따른 엔티티 생명 주기비영속성(Transient) : 아직 영속성 컨텍스트에 저장되지 않은 상태(new로 만든 객체 등)영속(Persistent) : 영속성 컨텍스트에 저장된 상태(em.persist() 호출 등)준영속(Detached) : 영속성 컨텍스..
[트러블 슈팅] SSE(Server-Send-Events) 문제 현상프론트엔드에서 SSE(Server-Sent Events) 연결을 시도하면 연결은 성공하지만, 즉시 연결이 끊어지는 현상이 발생 원인 분석SSE는 HTTP의 Transfer-Encoding: chunked 방식을 사용해 지속적인 연결을 유지하는 것이 핵심그러나 서버 로그 필터에서 사용하는 ContentCachingResponseWrapper가 copyBodyToResponse() 호출 시 자동으로 Content-Length 헤더를 추가이로 인해 Transfer-Encoding과 Content-Length가 동시에 존재하게 되어 브라우저는 응답이 끝났다고 판단하고 연결을 끊음 ※ 알아야 할 개념 : HTTP 응답의 데이터 전송 방식서버가 클라이언트에게 응답을 줄 때 2가지 방식 중 하나를 선택 1..

티스토리툴바