기억의 파편들

728x90

반응형

SMALL

[

메모 검색 결과

해당 글 356건

728x90

반응형

LIST

[REACT] React Hooks

React Hooks 클래스 컴포넌트 기능을 함수 컴포넌트에서 이용할 수 있도록 하는것useRef 나 useState 같은것들도 모두 훅이다.(tip. 접두사에 use 붙으면 훅임)커스텀 훅 만들기HookExam.jsximport {useState} from "react";import useInput from "../hooks/useInput";//3가지 Hook 관련 팁//1.Hook은 함수 컴포넌트 내부에서만 호출 가능//2.조건문, 반복문 에서는 호출할 수 없다.//3.커스텀 Hook을 직접 만들 수 있다.const HookExam = () => { const [input1, onChange1] = useInput(); const [input2, onChange2] = useInput()..

나의 주니어 개발 일기/REACT 2025. 6. 30. 11:07

[REACT] useRef로 컴포넌트 변수 생성하기

useRef로 컴포넌트 변수 생성하기useStateState를 생성컴포넌트 내부의 변수로 활용 가능값이 변경되면 컴포넌트 리렌더링useRefReference 객체를 생성컴포넌트 내부의 변수로 활용 가능어떤 경우에도 리렌더링을 유발하지 않음컴포넌트 내부에서 랜더링에 영향을 미치치 않아야 되는 변수를 생성할 때 활용할 수 있다.아래와 같이 사용하면 전체 Register 컴포넌트에 영향을 안주면서 오직 refObj만 렌더링 된다.결과는 Register 랜더링은 최초 한번만 되고, 오로지 refObj값만 변경된다.const Register = () => { const [input, setInput] = useState({ name : "", birth : "", country :..

나의 주니어 개발 일기/REACT 2025. 6. 27. 15:02

[REACT] State로 사용자 입력 관리하기

State로 사용자 입력 관리하기 1App.jsximport { useState } from "react";//간단한 회원가입 폼//1. 이름//2. 생년월일//3. 국적//4. 자기소개const Register = () => { const [name, setName] = useState("이름"); const [birth, setBirth] = useState(""); const [country, setCountry] = useState(""); const [bio, setBio] = useState(""); const onChangeName = (e) => { setName(e.target.value); } const onChangeBirth = (e..

나의 주니어 개발 일기/REACT 2025. 6. 26. 16:06

[REACT] State를 Props로 전달하기

State를 Props로 전달하기import './App.css'import { useState } from "react";const Bulb = ({ light })=>{ console.log(light); return ( {light === "ON" ? ( ON ) : ( OFF )} );};function App() { const [count, setState] = useState(0); const [light, setLight] = useState("OFF"); return ( { setLight(light === "OFF"?"ON":"OFF") }} >{light =..

나의 주니어 개발 일기/REACT 2025. 6. 26. 14:38

[REACT] State로 상태관리 하기

State로 상태관리 하기import './App.css'import { useState } from "react"; //상태관리를 위해서 선언해줘야 한다.function App() { const [state, setState] = useState(0); //구조 분해 할당방법, 일반적인 방법 console.log(state); return;}export default App;const [state, setState] 에서 state 는 값, setState는 state 값을 변경시키는 함수가 자리할 위치이다.State 변경해보기1.버튼 만들어서 State 값 증가시켜보기import './App.css'import { useState } from "react";function App() { con..

나의 주니어 개발 일기/REACT 2025. 6. 26. 14:36

@Valid vs @Validated 차이는?

@Valid vs @Validated 차이는?항목@Valid@Validated제공 주체Java 표준(JSR-303 / 380)Spring Framework검증 그룹❌ 지원하지 않음✅ 그룹 검증 지원 (groups = ...)주 사용처단순 검증상황별 조건이 필요한 복잡한 검증위치컨트롤러, 메서드 파라미터 등컨트롤러, 메서드, 클래스, 서비스 등@Valid는 단순 검증, @Validated는 그룹 검증이 필요할 때 주로 사용됩니다@Valid 사용 예제import jakarta.validation.constraints.NotBlank;@Builder@Getter@NoArgsConstructor@AllArgsConstructorpublic class UserProfileUpdateRequest { @Not..

SPRING/스프링부트 2025. 6. 4. 16:36

SPRING BOOT 당신의 쓰레드 풀 설정 안전하신가요?

문득 궁금해졌다.보통 애플리케이션에서 쓰레드 풀 설정을 할것이다.그런데 설정 값 이상의 트래픽이 몰리고, 쓰레드에서 지연이 발생한다면 어떤 현상이 발생할까?요청이 유실될까? 아니면 지연저장될까? 내부적으로 어떻게 처리되지? 너무나도 궁금해졌다. 테스트해보자우리의 최대 쓰레드 개수는 30개 이며, 작업 큐 크기는 10개이다.쓰레드 작업에 20초 지연시간이 걸리도록 했다.최초 1000개의 트래픽 요청에서 시작해서 1초마다 500씩 증가하는 트래픽 부하를 걸어봤다@EnableAsync@Configuration//@ConditionalOnProperty(name = "async.enabled", havingValue = "true", matchIfMissing = true)public class AsyncCon..

나의 주니어 개발 일기/트러블슈팅 2025. 5. 30. 16:39

[재귀, 백트래킹] 연산자 끼워넣기(BOJ 14888)

https://www.acmicpc.net/problem/14888어떻게 재귀로 해서 최대 최소값을 구하지?생각나는것-는 최대-최소 일때 최대값, 최소-최대 일대 최소값이 나올것이다.나누기는 최대/최소 일때 최대값, 최소/최대 일때 최소값곱하기는 최대*최대 일때 최대, 최소*최소 일때 최소더하기는 최대+최대 일때 최대, 최소+최소 일때 최소위와 같은 조건들만 생각난다. 그러나 저 조건을 활용할 방법은 생각이 안난다. 단순히 모든 경우의 수를 구하고 정렬해서 최대,최소 값을 구할 방법만 생각난다. 그러나 위 조건 말고 단순히 모든 경우의 수를 구하고 최소 최대 값만 찾으면 되는 문제임. 🎯 이 문제에선 DFS/백트래킹이 맞는 이유연산자들의 순열(중복 가능)을 **끝까지 조합해 봐야 함**연산이 끝나는 조..

Personal Studying~/자바문제 풀어보기 2025. 5. 15. 10:02

4. 트랜잭션 관리: 사가

4. 트랜잭션 관리: 사가많은 애플리케이션이 교과서대로 ACID 트랜잭션을 사용하지 않는 경우가 많으며, 성능을 높이기 위해 하위 트랜잭션 격리 수준을 사용한다.WHY?💡 1. 성능과 확장성의 트레이드오프높은 격리 수준일수록 데이터베이스는 더 많은 잠금을 걸고, 충돌을 방지하기 위해 동시 접근을 제한합니다.예를 들어, Serializable 격리 수준에서는 트랜잭션 간 순차적인 실행과 거의 비슷한 효과를 내기 때문에 동시성(concurrency)이 크게 떨어집니다.낮은 격리 수준(예: Read Committed, Repeatable Read)을 사용하면 동시성을 높여 TPS(Transactions per Second)를 끌어올릴 수 있어, 고부하 환경에서 선호됩니다.💡 2. 실제 요구사항은 "절대적 ..

기술서적/마이크로 서비스 패턴 2025. 5. 13. 14:53

3. 프로세스 간 통신

3. 프로세스 간 통신동기 RPI 패턴: RESTRPI(Remote Procedure Invocation)는 클라이언트가 서비스에 요청을 보내면 서비스가 처리 후 응답을 회신하는 IPC다.요청 한 번으로 많은 리소스를 가져오기 어렵다.REST 리소스는 객체 중심이다. REST API 설계 시 클라이언트 요청 한번으로 연관된 객체를 모두 가져올 수 있는지 고민해야 한다.순수 REST API 라면, 클라이언트는 적어도 2회요청을 해야한다. 시나리오가 더 복잡해지면 더 왕복 횟수가 증가하고 지연 시간도 증가한다.해결법은 클라이언트가 리소스를 요청할때, 연관 리소스도 함께 조회하도록 API가 허락하는것이다. 그러나 시나리오가 복잡해질수록 API 구현시간이 많이 소요되며, 효율도 떨어지게 된다.때문에 데이터를 효..

기술서적/마이크로 서비스 패턴 2025. 5. 9. 16:13

2. 분해전략

2. 분해전략아키텍처의 중요성'~성' 으로 끝나는 서비스 품질 요건을 아키텍처는 충족시킬 수 있게 설계해야한다.서비스 품질 요건은 확장성, 신뢰성과 같은 런타임 품질 외에도 관리성, 테스트성, 배포성처럼 개발 시점의 품질도 해당된다.애플리케이션 아키텍처를 어떻게 선택하냐에 다라 이런 품질 요건을 얼마나 충족할 수 있을지 결정된다.아키텍처 스타일 개요계층형 아키텍처 스타일전형적인 아키텍처 스타일계층마다 명확히 정의된 역할을 분담하며 계층간 디펜던시는 아키텍터로 제한한다. 따라서 어떤 계층은 바로 하위에 있는 계층에 의존하거나, 하위에 위치한 어느 한 계층에 의존한다.표현/비즈니스/영속화 계층으로 구성된 아키텍처이다.육각형 아키텍처 스타일기존 계층형 스타일의 비즈니스 로직에 있던 표현/데이터 접근 로직이 어..

기술서적/마이크로 서비스 패턴 2025. 5. 8. 15:04

[REACT] Props 사용법

컴포넌트에 값 전달하기 Propsconst Button = (props) => { console.log(props); return {props.text} };export default Button;function App() { return ( );}export default App; 만약에 color가 없을때 디폴트 값을 설정하고 싶다면? 구조분해할당 방법 적용const Button = ({text, color = "black"}) => { return ( {text} - {color} );};export default Button; Spread 연산자를 이..

나의 주니어 개발 일기/REACT 2025. 4. 25. 14:05

[REACT] CSS 적용법

CSS 적용법import "./Main.css";//JSX 주의사항//1. 중괄호 내부에는 자바스크립트 표현식만 가능//2. 숫자, 문자열, 배열 값만 렌더링 된다.const Main = () => { const user = { name: "윤주영", isLogin: true, }; if(user.isLogin){ return 로그아웃 } else { return 로그인 }}export default Main;//Main.css.logout{ background-color: red; border-bottom: green;}

나의 주니어 개발 일기/REACT 2025. 4. 25. 14:02

[REACT] Main 사용법

Main 사용법//V1const Main = () => { const user = { name: "윤주영", isLogin: true, }; return ( {user.isLogin ? (로그아웃) : (로그인)} );}//V2const Main = () => { const user = { name: "윤주영", isLogin: true, }; if(user.isLogin){ return 로그아웃 } else { return 로그인 }}

나의 주니어 개발 일기/REACT 2025. 4. 25. 14:01

[REACT] JSX 사용법

JSX 사용법//JSX 주의사항//1. 중괄호 내부에는 자바스크립트 표현식만 가능//2. 숫자, 문자열, 배열 값만 렌더링 된다.const Main = () => { const number = 10; return ( main {number % 2 === 0 ? "짝수":"홀수"} );}const Main = () => { const user = { name: "윤주영", isLogin: true, }; return ( {user.isLogin ? (로그아웃) : (로그인)} );}

나의 주니어 개발 일기/REACT 2025. 4. 25. 14:00

await 사용법

//async 비동기async function getData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ name: "윤주영", id: "yjy" }); },2000); });}//await//async 함수 내부에서만 사용 가능 한 키워드//비동기 함수가 다 처리되기를 기다리는 역할function printDataV1(){ getData().then((result) => { console.log(result); })}//await을 사용하면 V1의 then 메서드..

Language/자바스크립트 2025. 4. 24. 14:30

트랜잭션 사용법과 예제 in Spring

트랜잭션 사용법 in Spring트랜잭션이란? DB의 상태를 변화시키기 위해 수행하는 작업의 단위public void executeQuery() throws SQLException { TransactionStatus status = transactionManager.getTransaction(new DefaultTransactionDefinition()); // 트랜잭션 시작 try { // 쿼리 실행 ... transactionManager.commit(status); } catch (Exception e) { transactionManager.rollback(status); }}트랜잭션 시작트랜잭션은 하나의 DB Connec..

SPRING/스프링부트 2025. 4. 21. 00:56

10. 상속과 코드 재사용

10. 상속과 코드 재사용장속은 결합도를 높인다. 상속이 초래하는 부모 클래스와 자식 클래스 사이의 강한 결합이 코드를 수정하기 어렵게 만든다. 자식 클래스가 부모 클래스의 변경에 취약해지는 현상을 취약한 기반 클래스 문제라고 한다.취약한 기반 클래스 문제상속 관계를 추가할수록 전체 시스템의 결합도가 높아진다. 취약한 기반 클래스 문제는 캡슐화를 약화시키고 결합도를 높인다. 때문에 이것은 상속을 피해야 하는 첫 번째 이유이다.객체를 사용하는 이유는 구현과 관련된 세부사항을 퍼블릭 인터페이스 뒤로 캡슐화할 수 있기 때문이다.객체지향의 기반은 캡슐화를 통한 변경의 통제이다. 상속은 코드의 재사용을 위해 캡슐화의 장점을 희석시키고 구현에 대한 결합도를 높여 객체지향이 가진 강력함을 반감시킨다.불필요한 인터페..

기술서적/오브젝트 2025. 4. 18. 15:20

06_메시지와 인터페이스

06_메시지와 인터페이스퍼블릭 인터페이스의 품질에 영향을 주는것퍼블릭 인터페이스란 객체가 외부랑 소통하기 위해 만든 메서드가 퍼블릭 인터페이스디미터 법칙묻지 말고 시켜라의도를 드러내는 인터페이스명령-쿼리 분리디미터 법칙다른 객체 내부 구조에 강하게 결합되자 않도록 해라오로지 하나의 . 만 사용해라클래스 내부의 메서드는 아래의 조건을 만족하는 인스턴스에만 메시지를 전송하도록 프로그래밍해야 한다.this 객체메서드의 매개변수this의 속성this의 속성은 컬렉션의 요소메서드 내에서 생성된 객체worstpublic class ReservationAgency { public Reservation reserve(Screening screening, Customer customer, int audienceC..

기술서적/오브젝트 2025. 4. 17. 15:47

ApplicationEventPublisher, @EventListener 사용하여 동기,강결합된 기능 리펙토링 하기

유저 전적 통계 정보를 조회하는 로직이다.주요 로직은 이렇다.유저 전적 통계 정보 조회시, 유저 전적 기록 유무를 판단한다.없다면, api 요청 이후 결과값을(1) 전적 히스토리를 db에 저장한다.전적 히스토리 정보를 기반으로 통계치를 만든 뒤(2) 계산된 유저 레이팅 정보를 db에 업데이트 한다. 개선 전 로직 private final BattlesHistoryService battlesHistoryService; private final UserAccountService userAccountService; @Cacheable(value = "rating", key = "#nickname") public RatingStaticsResponse getRating(String n..

SPRING/스프링부트 2025. 4. 2. 10:35