WINK-(Web & App) (591) 썸네일형 리스트형 [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 스터디] 이종민 #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,.. [2025 1학기 스프링 부트 스터디] 남윤찬 #7주차 API 메시지 바디단순 텍스트messageBody에 단순 텍스트를 보내게 되면 content-type이 text/plain으로 설정되어 요청이 넘어온다.protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ServletInputStream inputStream = request.getInputStream(); String messageBody = StreamUtils.copyToString(inputStream, StandardCharsets.UTF_8); System.out.println("messageBo.. 이전 1 2 3 4 ··· 74 다음
