나다김강니

[ 문제 ]입양동물 목록 페이지를 무한 스크롤(12개씩 데이터 요청)로 구현하고 완성,,!!했는데 문제가 생겼다. 첫번째 스크롤에서는 12개 데이터 불러옴 (정상),두번째 스크롤에서는 24개 불러옴 (비정상),세번째 스크롤에서는 12개 (정상),네번째는 36개 (완전 비정상) 데이터를 일정하게 12개씩 불러오도록 구현했는데 실제로 자기 맘대로 불러오는 문제가 생김..... 다시 해보니까 그냥 무작위로 불러옴....사용자가 페이지 하단에 도달할 때 중복으로 서버에 데이터를 요청하는 문제 발생  [ 원인 ]페이지 하단에 도달할 때마다 데이터 요청 상태(isFetching)가 제대로 업데이트되지 않아서 발생한 문제였다.이미 데이터를 로드 중임에도 불구하고 서버에 추가 데이터 요청이 반복되면서 불규칙한 갯수의 ..

사실 Security를 이해하고 코드를 짠게 아니라서 다시 정리하면서 리팩토링해보려구 한다.....우선 각 파일에 대해서 먼저 정리함! LoginController사용자가 이메일과 비밀번호를 입력하여 인증을 시도하면, 이를 검증한 후 JWT 토큰을 발급하는 API@PostMapping("/login")public ResponseEntity getToken(@RequestBody AccountCredentialsDTO accountCredentials) { try { // UsernamePasswordAuthenticationToken을 사용해 이메일과 비밀번호로 인증 객체 생성 UsernamePasswordAuthenticationToken creds = new Userna..

SNS에서 개발자 신입들이 N+1문제 일으키기 쉽다고 해서 혹시 내 코드도..?슬쩍 챗지피티한테 물어봤는데 문제가 꽤나 있다네...ㅋㅋ 그래서 코드 고쳐보려고 합니다......우선 n+1이 뭐냐면 N+1문제?데이터베이스와 ORM(Object-Relational Mapping) 사용 시 자주 발생하는 성능 문제 중 하나입니다. 특히 JPA나 Hibernate와 같은 ORM을 사용할 때 자주 발생한다. N+1 문제는 기본적으로 1개의 쿼리가 추가로 N개의 쿼리를 발생시키는 비효율적인 상황을 의미한다. 예를 들어, A 테이블과 B 테이블이 관계를 맺고 있을 때, A 테이블에서 데이터를 조회한 후, 관련된 B 테이블의 데이터를 가져오려고 하면 추가 쿼리가 여러 번 발생할 수 있음...이렇게 쿼리 실행이 반복되면..

프로젝트하면서 블로그 써야지,,,써야지.... 하고 주제만 적어놓고 이제야 씀ㅋㅋ 몰아작성하기... React에서 상태를 관리할 때 토글 기능을 많이 쓴다.드롭다운 메뉴를 열거나 닫는 기능을 만들 때, 상태를 true 또는 false로 토글하는 기능!! 난 게시판에서 정렬방법 선택할 때 토글기능을 썼음. 근데 난 처음에 단순하게setFilterDropdown(!filterDropdown)이렇게 작성했단말임... 근데 찾아보니까 보통setFilterDropdown(prevState => !prevState)이렇게 쓰더라고..?? 그래서 이 두개가 뭐가 다르냐면 1. setFilterDropdown(!filterDropdown)  • 장점: 코드가 간단하고 이해하기도 쉬워. 딱히 복잡하게 생각 안 하고도 바..

UseState hook💡 useState hook     평범한 자바스크립트 변수의 값이 변경되는 경우, 화면은 다시 렌더링 되지 않는다.     값 변경에 따라 화면이 렌더링되는 화면을 만들어야 한다면, 값이 리액트 상태 변수에 저장되어야 한다.     리액트에는 use로 시작하는 함수들이 제공된다. 이 함수들을 hook이라고 부른다. button 활용import React, { useState } from 'react';import './App.css';function App() { // 0 : 상태 변수의 최초 값 // count : 현재 값이 리턴되에 대입되는 상수 // serCount : 상태 변수 값을 변경하기 위해서 호출해야하는 함수 const [ count, setCount ] ..

Props💡 props props는 propertied의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.propsMessage 함수형 컴포넌트를 호출하면서 { value: "안녕하세요", color: "blue" } 형태의 props 값 객체를 Message 함수에 전달한다.//Message 함수 컴포넌트는 props 값 객체를 파라미터로 받는다.export type MessageProps = {    value: string,    color: string}function Message(props: MessageProps) {  return ...}"key" prop 태그나 어떤 태그가 반복된 목록의 경우, 그 목록 태그에 "key" prop가 있어야 한다.그리고 ..

증감 연산자변수의 값을 1 증가시키거나 1 감소시키는 연산자연산식설명++피연산자피연산자의 값을 1 증가시킴—피연산자피연산자의 값을 1 감소시킴피연산자++다른 연산을 수행한 후에 피연산자의 값을 1 증가시킴피연산자—다른 연산을 수행한 후에 피연산자의 값을 1 감소시킴 예시int num = 0;num++;System.out.println(num); //1++num;System.out.println(num); //2int result = num++;System.out.println("result=" + result); //result=2System.out.println("num=" + num); //num=3result = ++num;System.out.println("result=" + result); //..

Variable(변수)하나의 값을 저장할 수 있는 메모리 번지에 붙여진 이름, 프로그램은 변수를 통해 메모리 번지에 값을 저장하고 읽는다.변수 선언// 자료형 변수공간이름 = 값int num = 100; // 정수double dnum = 3.14; // 실수char ch = 'a'; // 문자 1글자char ch = 64; // 유니코드를 직접 저장String name = "홍길동"; // 문자열boolean isRun = true; // true/falseString str = "a"; // 문자열String name1 = "Albert"; // 문자열 더..

특징main()함수로 시작어디에서나 변수선언, 사용 가능모든 변수가 객체, 모든 객체는 object클래스 상속받음dynamic타입 이용(dynamic : 여러 자료형 허용)외부로 노출하고 싶지 않을 경우 변수나 함수 앞에 언더스코어(_) 사용제네릭타입을 사용해 개발 가능null safety wldnjs : 컴파일 전 널 예외(null exeption)을 알 수 있음 -> null에 대한 오류가 발생하지 않도록 작업 가능  VARIABLESfinal : javascript의 const역할const : compile-time constant(compile-time에 알고 는 값이어야 함) API에서 받아야하는 변수 값은 Xlate : final이나 var앞에 붙이는 수식어 : 초기 데이터 없이 변수 선언 가..