전체 카테고리326 리액트 포털 createPortal, HTML 이동 리액트 포털 ! 렌더링된 HTML 내용을 다른 곳으로 옮기는 것 일반적으로 컴포넌트를 사용하는 곳에서는 createPortal 을 사용하여 해당 컴포넌트의 HTML 내용을 포털을 통해 이동시킬 수 있다. 입력 오류시 나타나는 배경흐림과 모달 컴포넌트를 index.html 내에 옮길 것이다. index.html backdrop-root overlay-root 추가 ErrorModal.js import React from 'react'; import Button from './Button'; import Card from './Card'; import classes from './ErrorModal.module.css'; import ReactDOM from 'react-dom' const Backdrop .. 2023. 1. 11. 리액트 커스텀 컴포넌트 리액트 커스텀 컴포넌트 리액트에서 주로 컴포넌트를 재사용을 하는 것이 중요한 것 같습니다. 그래서 UI 컴포넌트를 재사용하는 것을 기록하려고 합니다. return ( Username 나이 유저 추가 ); 여기서 button 태그를 기본 html 태그를 사용하고 있는데 여기에 css 속성을 붙이고 해당 버튼 컴포넌트를 재사용하기 위해 커스텀 버튼 컴포넌트를 생성하여 사용하려고 합니다. Card 컴포넌트 경우 태그 안에 오는 컴포넌트를 css 적용시키게끔 작성 import React from 'react'; import classes from './Card.module.css'; const Card = props => { return ( {/* AddUser */} {props.children} ); }; .. 2023. 1. 10. GitHub 깃허브 프로젝트 마일스톤 이슈 등록 GitHub 깃허브 프로젝트 마일스톤 이슈 등록 개인프로젝트 뿐만아니라 팀프로젝트를 할 때 깃허브를 활용하는 것이 필수입니다. 깃허브를 통해 다른 분들이 관리해 놓은 레포지토리를 보다보면 Projects 기능을 통해 프로젝트 진행을 관리하고 이슈를 통해 프로젝트 중 발생한 문제들을 해결해 나가는 것을 보았습니다. 그래서 앞으로 있을 협업 프로젝트를 위해 이슈 등록과 이슈를 해결해 나가는 연습을 해볼 것입니다. 기본적으로 깃허브 레포지토리가 있는 상태에서 시작합니다! 1. 프로젝트 생성 보드 형태의 프로젝트를 생성합니다. 2. 마일스톤 생성 (Opt) 프로젝트에서 마일스톤은 완성되기 까지의 중간 단계, 특정 지점, 이정표라고 생각하면 됩니다. 각 단계의 마일스톤을 언제까지 완성키겠다고 하는 상세일정을 정하.. 2022. 12. 31. Spring Cloud (MSA) 분산추적 , Zipkin 분산 추적 Distributed Tracing - 각각의 요청에 Unique Id 할당 - 시간 데이터를 모아 시간 지연 문제 해결 집킨 사용 Open Zipkin 은 MSA 에서 성능 문제를 확인할 수 있는 매우 편리한 도구 - 트랜잭션의 소요 시간을 그래픽으로 확인 가능 - 호출에 관련된 각 마이크로서비스별로 소요된 시간 분석 가능 이미지 생성, 컨테이너 생성 openzipkin/zipkin Tags | Docker Hub docker run -p 9411:9411 openzipkin/zipkin:2.23 의존성 추가 currency-conversion-service, currency-exchange-service, api-gateway 서버 org.springframework.cloud spring.. 2022. 12. 30. 리액트 스프링부트 연동 API Gateway , CORS 처리 목표 리액트 클라이언트에서 스프링부트 인증서버 요청, API Gateway 서버 통과하여 인증서버 요청 리액트 import React, { useState } from 'react'; import {useNavigate} from 'react-router-dom' import Logo from '../Header/Logo'; import './Signup.css' import RightLayoutLinks from "../Header/HeaderLinks/RightLayoutLinks"; const authServer = "http://192.168.45.1:8100"; const SignupView = props => { const options = [ { value: "type", text: "직접 .. 2022. 12. 23. 리액트 Styled Components , CSS 모듈 Styled Components , CSS 모듈 React 에서는 컴포넌트 스타일링 방법이 두가지 있음 - Styled Components - CSS 모듈 1. Styled Components "Add Goal" 버튼 같은 경우 Styled Components를 통해 생성된 컴포넌트 Button.css .button { font: inherit; padding: 0.5rem 1.5rem; border: 1px solid #8b005d; color: white; background: #8b005d; box-shadow: 0 0 4px rgba(0, 0, 0, 0.26); cursor: pointer; } .button:focus { outline: none; } .button:hover, .button:a.. 2022. 12. 20. 리액트 자식 대 부모 컴포넌트 통신 컴포넌트간 데이터 전달 실행 Form 에서 받은 데이터를 App.js 과 통신 App.js import React from 'react'; import Expenses from './components/Expenses/Expenses'; import NewExpense from './components/NewExpense/NewExpense'; const App = () => { const addExpenseHandler = expense=>{ console.log("in app.js") console.log(expense) } return ( ); } export default App; NewExpense 컴포넌트를 import 하여 실행 addExpenseHandler 를 통해 자식 컴포넌트의 데이터.. 2022. 12. 8. 리액트 state 상태 저장, 업데이트 const App = () =>{ const [expenses, setExpenses] = useState(EXPENESES); const addExpenseHandler = expense =>{ setExpenses([expense, ...expense]); } } 스냅샷에 의존해서 상태 업데이트 하는 방식 // 가장 최신 상태의 스냅샷과 항상 계획된 상태업데이트 // 안전한 방법 const addExpenseHandler = expense =>{ setExpenses(prevExpenses =>{ return [expense, ...prevExpenses]; }); } HTML 삽입 미리보기할 수 없는 소스 2022. 12. 8. 리액트 배열 반복 map() 함수 활용, filter 리액트 프로젝트 생성 npx create-react-app frontend cd frontend npm start 반복된 컴포넌트 중괄호 { } 내에서 map을 통해 반복 { (props.items.map(expense => )) } index 에는 예상치 못한 에러를 발생할 수 있기때문에 db에서 받은 id를 key값으로 설정하는 것이 좋음 리스트를 변수로 관리, 동적(조건부) 렌더링 let expensesContent = No expenses found.; if(filteredExpenses.length > 0){ expensesContent = filteredExpenses.map((expense)=>( )); } --- map 사용 주의 Array.prototype.map() expects a r.. 2022. 12. 8. 2022 SW 인재페스티벌 동대문디자인플라자 SW중심대학 주요성과 및 산학협력프로젝트를 통한 성과물을 소개하고 전시하는 SW인재페스티벌이 열립니다. 명사특강과 토크콘서트 강연 공동채용 프로그램 등 여러 이벤트가 열립니다. 주제 디지털 대전환 시대의 주역, 2022 SW인재페스티벌 대상 SW 중심대학 및 SW에 관심있는 누구 일시 2022 12 08 ~ 12 09 장소 동대문디자인플라자 DDP, 아트홀1관 HTML 삽입 미리보기할 수 없는 소스 참고 : SW인재페스티벌 2022 (swfestival2022.kr) 2022. 12. 7. Spring Cloud (MSA) - Resilience4j @Retry @CircuitBreaker(서킷브레이커) Resilience4j 앞의 서비스가 다운되거나 느릴 때 전체 chain에 영향을 끼친다. -> 만약 그럴때 fallback 반환 -> 부하 감소를 위한 CIrcuit Breaker pattern을 구현 -> 다시 요청 -> 속도 제한 ∴ Resilience4j currency-exchange-service 프로젝트 의존성 추가 org.springframework.boot spring-boot-starter-aop io.github.resilience4j resilience4j-spring-boot2 package com.javapp.microservices.currencyexchangeservice.controller; import io.github.resilience4j.retry.annotation.. 2022. 12. 6. Spring Cloud (MSA) API Gateway - 경로탐색(Exploring Routes), Logging Filter 이전 포스팅 : 로드밸런서 Spring Cloud Gateway 사용 Simple, yet effective way to route to APIs Provide cross cutting concerns: Security Monitoring/metrics Built on top of Spring WebFlux (Reactive Approach) Features: Match routes on any request attribute Define Predicates and Filters Integrates with Spring Cloud Discovery Client (Load Balancing) Path Rewriting Eureka http://localhost:8761 Setting up Spring Cl.. 2022. 12. 3. 이전 1 2 3 4 5 6 7 8 ··· 28 다음
