분류 전체보기 (853) 썸네일형 리스트형 [2025 1학기 React.js 스터디] 강민지 #6주차 1. API 연동API 연동하면 좋은 점 ?=> 내가 데이터를 만들지 않아도 다른 서버에 이미 있는 API를 가져다 쓸 수 있음 ! 먼저, API를 호출하기 위해서는 axios 라이브러리를 설치해야한다 데이터를 관리하는 메서드로는,● GET: 데이터 정보 조회● POST: 데이터 등록● PUT: 데이터 수정● DELETE: 데이터 제거++PATCH(데이터 부분 수정) , HEAD(데이터 상태 조회) 가 있다. axios 사용법: axios.메서드()EX)axios.post('/users', { username: 'minji', name: 'minji'}); useState 와 useEffect 로 데이터 로딩하기 (실습) - useState : API에서 받은 데이터 저장 or 로딩 중 표시-u.. [2025 1학기 React.js 스터디] 한혜민 #6주차 🐙 API 연동의 기본 ✅ API를 연동하기 위해서 새프로젝트 생성✅ API를 호출하기 위해서 axios 라이브러리 설치 REST API 메서드메서드의미GET데이터 조회POST데이터 등록PUT데이터 수정DELETE데이터 제거 useState와 useEffect로 데이터 로딩하기useState를 사용하여 요청 상태를 관리하고, useEffect를 사용하여 컴포넌트가 렌더링되는 시점에 요청해보겠음. 단, 요청에 대한 상태를 관리할 때요청의 결과로딩 상태에러관리해줘야함. Users.jsApp.js 실행 결과 ===================== 버튼을 눌러서 API 재요청하기 =====================버튼을 눌러서 API를 재요청하는 기능을 구현해보겠음. 이를 위해서 fetchUsers 함수를.. [2025 1학기 React.js 스터디] 이종민 #5주차 sasssass 란 ? : CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다.우선 디렉터리를 하나 만든 후 그 안에 Button.js와 Button.scss를 만들어 주었습니다. 기존 css 에서는 사용하지 못하던 문법들이 있습니다. $blue: #228be6; 이런 식으로 스타일 파일에서 사용 할 수 있는 변수를 선언 할 수도 있고 lighten() 또는 darken() 과 같이 색상을 더 밝게하거나 어둡게 해주는 함수도 사용 할 수 있는걸 알 수 있습니다 ! App.js를 수정해주고 App.css의 파일명을 App.scss로 바꾼 뒤 수정해줬습니다와우 ~! 버튼이 생기고 색이 설정됐.. [2025 1학기 React.js 스터디] 이가인 #6주차 React 프로젝트 - API 연동 & 라우팅 기초 실습 목차API 연동useState와 useEffect로 요청에 대한 상태 관리라우팅이란?리액트 라우터 적용 및 기본 사용법 (1~13)프로젝트 생성 및 라우터 설치React 18 이상에서 라우터 적용 (index.js)페이지 컴포넌트 만들기 (pages 폴더)App.js에서 라우트 설정 (Route & Routes)Link 컴포넌트로 페이지 이동URL 파라미터 (useParams)쿼리스트링 처리 (useSearchParams)중첩 라우트 (Outlet)공통 레이아웃 구성 (Header + Outlet)useNavigate로 코드에서 페이지 이동NavLink로 현재 경로 스타일 적용NotFound 페이지 구성 (와일드카드 )Navigate로 로그인 안된.. [2025 1학기 React.js 스터디] 최은희 #6주차 희희 안녕하세용 바로 공부 시작하겟습니댜. ^_^ ~~ API 연동하기-일단, api가 무엇이느냐 하면...다른 서버에게 데이터를 달라고 요청하는 통로입니다. 데이터는 외부의 서버에서 보통 받아 오는데 api가 연결 통로가 되어줍니다. npx create-react-app api-integratecd api-integrateyarn add axios요로케 터미널에 작성해주세요. (axios는 api요청을 도와주는 js 라이브러리 입니다. 자주 쓰이는 메서드가 있는데get->조회, post->등록, put->전체 수정, delete->삭제 이니 알아두도록 하겠습니다) useState랑 useEffect로 데이터를 로딩해주겠습니다.리액트는 useEffect안에 동기함수(순서대로 실행되는 함수)만 넣을 수 있.. [2025 1학기 React.js 스터디] 이상래 #6주차 🔍 비동기 처리 in JS동기적한 작업이 끝나야 다음 작업 진행동기적여러 작업이 동시에 진행/ 기다리는 과정에서 다른 함수도 호출 가능👀 Promise: 비동기 작업의 완료 또는 실패를 나타내는 객체 promise가 가지는 상태pending : 대기 상태 (아직 결과 x)fulfilled : 이행됨 (작업 성공)rejected : 거부됨 (작업 실패)기본문법 예제const promise = new Promise((resolve, reject) => { // 비동기 작업 수행 if (성공) { resolve('결과'); } else { reject('에러 메시지'); }});resolve() : fulfilled 상태로 전환시키는 함수 👀 async/await기본 문법functio.. [2025 1학기 스프링부트 스터디] 장민주 #7주차 섹션 10. 빈 스코프- 빈 스코프란?- 프로토타입 스코프- 프로토타입 스코프 - 싱글톤 빈과 함께 사용시 문제점- 프로토타입 스코프 - 싱글톤 빈과 함께 사용시 Provider로 문제 해결- 웹 스코프- request 스코프 예제 만들기- 스코프와 Provider- 스코프와 프록시섹션 10. 빈 스코프 빈 스코프: 빈이 존재할 수 있는 범위 - 싱글톤 스코프: 기본, 스프링 컨테이너의 시작과 종료까지 유지되는 가장 넓은 범위의 스코프- 프로토타입: 스프링 컨테이너는 프로토타입 빈의 생성과 의존관계 주입까지만 관여하고 더는 관리하지 않음, 매우 짧은 범위의 스코프 - 웹 스코프: request, session, application *@Scope("prototype") 과 같이 빈 스코프를 지정할 수.. [2025 1학기 스프링 부트 스터디] 석준환 #7주차 의존 관계 주입 방법 4가지1. 생성자 주입2. 수정자 주입3. 필드 주입4. 메소드 주입 1. 생성자 주입불변, 필수 의존관계에서 사용된다. 즉 바꿀 필요가 없는 의존 관계이고 필수적으로 필요할 때 사용한다.-생성자 호출시점에 딱 1번만 호출된다-불변, 필수 의존 관계에 사용된다@Componentpublic class OrderServiceImpl implements OrderService { private final MemberRepository memberRepository; private final DiscountPolicy discountPolicy; @Autowired public OrderServiceImpl(MemberRepository memberRepository,.. 이전 1 2 3 4 ··· 107 다음
