[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
