전체 글 (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,.. [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.. [2025 1학기 스프링 부트 스터디] 여민호 #7주차 [전 강의] 이전 강의에서는 스프링 컨테이너의 생성과 스프링 빈 추가 및 조회,그리고 그 빈끼리의 상속관계에 대해 배웠다.이어서 배울 내용#섹션 5 - 6. BeanFactory와 ApplicationContextBeanFactory와 ApplicationContext에 대해 알아보자먼저 BeanFactory에 대해 알아보자 1. BeanFactory는 스프링 컨테이너의 최상위 인터페이스이다.- 스프링 컨테이너 구조에서 가장 기본이 되는 인터페이스라는 뜻 ( 다른 컨테이너의 기반 ) 2. 다양한 역할을 담당한다.- BeanFactory는 스프링 빈을 관리하는 역할, 조회하는 역할을 한다.(+) getBean( )을 제공한다-> getBean( )은 스프링 컨테이너에 등록된 빈을 꺼내오는 메서드이다. 다음.. [2025 1학기 알고리즘 스터디] 신지은 #6주차 안녕하세요? 6주차 스터디 시작합니다!이번주는 NP 알고리즘에 대해 공부 하겠습니다. NP(Non-deterministic polynomial time)알고리즘은 무엇인가다항 시간에 비결정론적으로 해결 가능한 문제들의 집합을 말합니다.실질적으로, 다항 시간내에 해결할 수 있는 방법이 있지는 않지만,만약 해결책을 찾게되면 다항 시간내에 해결이 가능하다고 이해하면 됩니다.즉, 어떤 문제의 답이 yes 또는 no라는 것을 입증하는 힌트가 주어질 때!힌트를 사용해서 그 문제의 답이 yes 또는 no라는 것을 다항시간 내에 확인할 수 있는 문제는 NP문제이다. 아래의 조건을 모두 만족하면 NP문제주어진 입력에 대해 하나의 해를 추측한다.그 해를 다항식 시간 내에 확인한다.그 해가 yes 또는 no로 결정난다. 1.. [2025 1학기 알고리즘 스터디] 남윤찬 #6주차 NP(Nondeterministic Polynomial time)정의: 어떤 문제의 해답이 맞는지를 다항 시간 안에 검증할 수 있는 문제의 집합더 쉽게 설명하면 직접 정답을 찾는 것을 오래 걸리고 어려우나, 주어진 것이 정답인지 판별하는 것은 빠르게 할 수 있는 문제이다.(ex: 특정한 수가 어떤 소수들의 합으로 이루어져있는지 찾는 것 -> 오래걸리고 어려움 -> NP 아님주어진 소수들의 합이 특정한 수인지 검증하는 것 -> 개빨리함 -> NP 맞음 (아마도?))그 예시가 배송 최적화(어떻게 돌아야 가장 빠를까 → TSP), 일정짜기(모두가 만족하는 스케쥴이 가능한가) 등이 있다.충분히 좋은 해답을 얼마나 빠르게 찾을 수 있나가 중요하다.외판원 순회 2더보기import java.io.BufferedRea.. [2025 1학기 스프링 부트 스터디] 이상래 #7주차 🔍 AOP👀 AOP가 필요한 상황모든 메소드의 호출 시간을 측정하고 싶다면?공통 관심 사항(cross-cutting concern) vs 핵심 관심 사항(core concern)회원 가입 시간, 회원 조회 시간을 측정하고 싶다면?package hello.hellospring.service;@Transactionalpublic class MemberService {/*** 회원가입*/public Long join(Member member) {long start = System.currentTimeMillis();try {validateDuplicateMember(member); //중복 회원 검증memberRepository.save(member);return member.getId();} final.. [2025 1학기 스프링부트 스터디] 고윤정 #7주차 안녕하세요 7주차 스터디 시작합니당 섹션 8 - AOP AOP가 필요한 상황 MemberService 파일에 아래의 코드를 작성해줍니다 /*** 회원가입*/public Long join(Member member) {long start = System.currentTimeMillis();try {validateDuplicateMember(member); //중복 회원 검증memberRepository.save(member);return member.getId();} finally {long finish = System.currentTimeMillis();long timeMs = finish - start;System.out.println("join " + timeMs + "ms");}}/*** .. [2025 1학기 스프링부트 스터디] 김민서 #7주차 AOP AOP가 필요한 상황은 언제일까?- 모든 메소드의 호출 시간을 측정하고 싶을 때- 공통 관심 사항 vs 핵심 관심 사항- 회원 가입 시간, 회원 조회 시간을 측정하고 싶을 때 MemberService에서 회원 조회 시간 측정을 추가 해주면package hello.hello_spring.service;import hello.hello_spring.domain.Member;import hello.hello_spring.repository.MemberRepository;import hello.hello_spring.repository.MemoryMemberRepository;import org.springframework.stereotype.Service;import java.util.List;imp.. [2025 1학기 스프링 부트 스터디] 정다은 #7주차 AOP AOP가 필요한 이유1. 모든 메소드의 호출 시간을 측정하고 싶을 때2. 공통 관심 사항 핵심 관심 사항 분3. 회원 가입 시간, 회원 조회 시간을 측정 하고 싶을 때 MemberService 회원 조회 시간 측정 추가package hello.hellospring.service;import org.springframework.transaction.annotation.Transactional;import java.util.List;@Transactionalpublic class MemberService { /** * 회원가입 */ public Long join(Member member) { long start = System.currentTimeMillis();.. [2025 1학기 스프링부트 스터디] 오세웅 #6주차 H2 데이터베이스 설치이 전까지는 메모리를 사용했지만 이제부터 데이터베이스를 사용하기 위해 H2를 설치합니다.강의에서는 맥을 사용했는데 저는 윈도우라 조금 다른 부분이 있더라구요. H2 설치 홈페이지에서 "Window Installer"를 받아주면 Program Files (x86) 폴더에 H2폴더가 생깁니다.여기 경로에 들어가서 강의에선 h2.sh를 실행하라고 하는데 윈도우는 h2.bat을 실행해야합니다. 실행되면 아래와 같은 화면이 뜹니다.그리고 충돌로 인한 오류를 방지하기 위해 JDBC URL을 jdbc:h2:tcp://localhost/~/test로 바꿔줍니다. 그리고 아래와 같이 우리가 기존에 만들었던 멤버 테이블을 생성합니다.select * from member;를 입력하여 저장된 ID와 NA.. [2025 1학기 React.js 스터디] 최은희 #5주차 리액트 컴포넌트 스타일링하기!!01. sass -sass가 뭐에요?css보다 강력한 문법을 가진다고 한다. (짱 멋진 스타일시트...)css보다 좋은 점은 1. 변수를 쓸 수 있다는 것 2. 코드를 중첩구조로 써서 가독성이 좋다는 것 3. 재사용이 가능하다는 것 등등이 있다. 프로젝트가 카질수록 복잡해지는데 관리를 쉽게 할 수 있도록 돕는다. 이제 직접 실습을 해보면,,,요렇게 자료를 보고 그대로 쓴거 같은데이렇게 실행이 됐다..ㅜ 지피티랑 대판 싸웠지만 해결해주지 못해서..ㅜ 일단 자료 이해만하고 넘어가는 걸로.....누군가 이 글을 읽고 있다면 저 좀 도와주세요 (당근을 흔들며) 02.CSS Module-이걸 쓰면 css 클래스의 중첩을 막을 수 있다. 이게 무슨 말이냐면다른 컴포넌트 파일에서 같은 .. [2025 1학기 React.js 스터디] 강민지 #5주차 1. Sass->> CSS 코드를 깔끔하게 정리해주는거 (1) Sass VS Scss: 보통 Scss 문법을 더 많이 씀 (CSS와 매우유사) (2) Scss (!=CSS) (3) 다양한 옵션의 버튼을 만들어봅시다 ~~.. (3)-1 버튼 사이즈 조정className={`Button ${size}`} 조건부 스타일링 할 때는,classNames 사용 * .Button { &.large { } } .Button.large { }* & + & : 같은 요소(.Button)가 연속할 때, 두 번째부터 적용됨(ex.여백) (3)-2 버튼 색상 설정 *&는 현재 선택자(부모 선택자)를 대신함즉, &.blue는 .Button.blue와 동일=>>>mixin 코드 사용 버튼 색상 코드 props로 전.. [2025 1학기 React.js 스터디] 이승준 #5주차 안녕하세요 긴말말고 시작할게요! Sasssass에서는 두가지 확장자 (.scss/.sass)를 지원합니다. 보통 scss 문법이 더 많이 사용됩니다.우선 기본적인 설정을 해주고이렇게 Button.js를 만져줬습니다.근데 사실 이렇게 하면 안되고 defaultProps를 지우고 매개변수에 기본으로 넣어줘야합니다.여기서 className에 CSS 클래스 이름을 동적으로 넣어주려면className={['Button', size].join(' ')}이렇게 처리할 수도 있습니다.또는className={`Button ${size}`}하지만, 조건부로 CSS 클래스를 넣어주고 싶을때 이렇게 문자열을 직접 조합해주는 것 보다 classnames 라는 라이브러리를 사용하는 것이 훨씬 편합니다.classNames 를 사용.. [2025 1학기 React.js 스터디] 한혜민 #5주차 📝 Sass란복잡한 작업을 쉽게 처리할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성도 높여주어 유지보수를 쉽게 해줌. Sass에서는 두가지 확장자 (.scss/ .sass)를 지원함. 💡 시작본격적으로 Sass를 사용하여 새로운 리액트 프로젝트를 만들어보면 💡 Button 컴포넌트 만들기 src 디렉터리에 components 디렉터리를 생성 후 그 안에 Button.js 생성 components 디렉터리에 Button.scss 파일 생성 여기서 lighten() 또는 darken()를 사용하여 색상을 더 밝게하거나 어둡게 해줄 수 있음 !!! App.js, App.scss 파일 생성 ✅ 결과 확인onClick 옵션 추가 ✅ 결과 확인 📝 Css .. [2025 1학기 React.js 스터디] 백채린 #5주차 1. Sass: CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 분 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줌 ▶ 2가지 확장자 지원 (.scss / .sass) 보통 scss 문법이 더 많이 사용돼서 .scss 확장자 스타일로 작성하겟씁니다. 1. 새로운 리액트 프로젝트 만들기 npx create-react-app styling-with-sass 2. 프로젝트 디렉터리에 node-sass 라는 라이브러리 설치 cd styling-with-sass npm install node-sass 3. Button 컴포넌트 버튼 사이즈 조정 버튼 크기에 large, medium, small 설정할 수 있도록 구현해보자! ❓.. [2025 1학기 React.js 스터디] 이서준 #5주차 01. SassSass는 CSS의 단점을 보완하기 위해 만든 CSS 전처리기라고 한다.보통 CSS를 사용하다보면 단순 반복되는 부분이 많은 등, 불편함이 느껴지기 마련인데, Sass는 이 부분을 거의 완전히 해소시켜주는 확장된 스타일시트 언어이다.쉽게 말해서, 복잡한 작업을 간단하게 하고 재활용성을 높여주고 가독성 부분에서 이점이 있다고 생각하면 될 것 같다.Sass에는 Sass와 Scss가 있다.Sass보다 Scss가 CSS와의 호환성이 더 좋다.제일 큰 특징은Sass - 들여 쓰기 + 줄 바꿈 형식Scss - 중괄호 + 세미콜론 형식보통 scss 문법이 더 많이 사용되므로, 여기선 .scss 확장자로 스타일을 작성하겠다네요초기 설정react 프로젝트를 만들고, 해당 프로젝트 디렉토리에 node-sas.. [2025 1학기 스프링부트 스터디] 최비성 #7주차 섹션 8. AOPAOP가 필요한 상황요약 : 1. 모든 메소드의 호출 시간을 측정하고 싶다면?- 근데 회원가입, 회원 조회에 시간을 측정하는 기능은 핵심 관심 사항이 아니다. 시간을 측정하는 로직은 공통 관심 사항이다. 1000개의 메서드에 1000개의 로직 코드를 짜서 관리하기란 너무 불편하고 어지럽다. 2. 공통 관심 사항(cross-cutting concern) 과 핵심 관심 사항(core concern)으로 분리해서 유지보수, 관리하기 편하게 개발하자. 3. 그렇게 도와주는 게 AOP(Aspect Oriented Programming)다. 관점 지향 프로그래밍. package hello.hellospring.service;@Transactionalpublic class MemberService {.. [2025 1학기 스프링부트 스터디] 최비성 #6주차 섹션 7. 스프링 DB 접근 기술H2 데이터베이스 설치 java에서 DB에 연결할 때 필요한 라이브러리가 JDBC인데, 20년 전으로 돌아가서 순수한 JDBC로 어떻게 개발하는 지를 경험시켜줄 것이다. 순수한 JDBC 다음으로는 스프링이 중복을 다 제거해준 JDBC 템플릿, 그리고 더욱 더 혁신적인 기술로 JPA라는 기술이 있다. 암튼 일단 먼저 DB를 설치해주어야 하는데, H2라는 가볍고 편리한 DB를 사용할 것이다. 공식 사이트에서 다운 받고 설치하면 아래 사진처럼 H2 Console이 뜬다(윈도우 갓갓). 중요: 이후부터는 JDBC URL을 다르게 접근해야 한다. 이렇게 파일로 접근하게 되면 웹 콘솔과 애플리케이션이 동시에 할 때 같이 접근이 안될 수가 있다고 한다. 오류 나고 파일 충돌나고 .. 이전 1 2 3 4 ··· 35 다음
