WINK-(Web & App)/React.js 스터디 (147) 썸네일형 리스트형 [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학기 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 를 사용.. 이전 1 2 3 4 ··· 19 다음
