WINK-(Web & App)/React.js 스터디 (93) 썸네일형 리스트형 [2025 겨울방학 React.js 스터디] 백채린 #1주차 1. 리액트 컴포넌트 - 리액트 컴포넌트를 만들 땐 import React from 'react; 를 통해 리액트를 불러와줘야 함 - 함수, 클래스 형태로 작성할 수 있음 (아래는 함수 형태) funcion Hello() { return 안녕하세요} - 컴포넌트를 내보내줘야 다른 컴포넌트에서 불러와서 사용할 수 있음 export default Hello; - 컴포넌트는 일종의 UI 조각이기 때문에 재사용 가능 // App.jsimport React from 'react';import Hello from './Hello';function App() { return ( );}export default App; 2. JSX - JSX는.. [2024-2 React.js 스터디] 이서영 #5주차 API 연동하기 웹 애플리케이션을 만들 때 데이터를 브라우저에서만 X데이터를 보존, 다른 사람들도 조회 가능 하게 하려면서버를 만들고 서버의 API를 사용 → 데이터를 읽고 써야함 1. API 연동의 기본 API 호출 → axois 라이브러리 설치$ npx create-react-app api-integrate$ cd api-integrate$ yarn add axios axios 사용해서GET : 데이터 조회POST : 데이터 등록PUT : 데이터 수정DELETE : 데이터 제거REST API를 사용할 때, 하고 싶은 작업에 따라 다른 위의 메서드들로 요청 axios 사용법import axios from 'axios';axios.get('/users/1');get이 위치한 자리에는 메서드 이름을 소.. [2024-2 React.js 스터디] 윤아영 #5주차 1. API 연동의 기본API 를 호출하기 위해서 axios 라는 라이브러리를 설치해야 한다.axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다.npm install axios# 또는 yarn add axiosGET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거import axios from 'axios';axios.get('/users/1'); 위와 같이 사용할 수 있다.axios.post('/users', { username: 'blabla', name: 'blabla'}); axios.post() 로 데이터를 등록할 수 있다. (1) useState 와 useEffect 로 데이터 로딩하기 요청에 대한 상태를 .. [2024-2 React.js 스터디] 김지수 #6주차 리덕스리덕스에서 사용되는 키워드 숙지하기리덕스를 사용하게 될 때 앞으로 접하게 될 키워드들을 미리 알아봅시다. 이 키워드들 중에서 대부분은 이전에 useReducer를 사용해볼때 접해본 개념이기도 합니다.액션 (Action)상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다.{ type: "TOGGLE_VALUE"}{ type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" }}{ type: "CHANGE_INPUT", text: "안녕하세요"}액션 생성함수 (Action Creator)액션 생성함수는, 액션을 만드는 함수입니다. export function addTodo(data) { return { type: "ADD_T.. [2024-2 React.js 스터디 ] 김지수 #5주차 API 연동의 기본axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청할 수 있습니다. 간단하게 설명을 드리자면, REST API 를 사용 할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청을 할 수 있는데 메서드들은 다음 의미를 가지고 있습니다.GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거axios 의 사용법은 다음과 같습니다.import axios from 'axios';axios.get('/users/1');get 이 위치한 자리에는 메서드 이름을 소문자로 넣습니다. 예를 들어서 새로운 데이터를 등록하고 싶다면 axios.post() 를 사용하면 됩니다.그리고, 파라미터에는 API 의 주소를 넣습니다.axios.post(.. [2024-2 React.js 스터디] 이서영 #4주차 실습투두리스트 만들기 1. 컴포넌트 만들기컴포넌트의 UI를 미리 만들어봅시다아 프로젝트 생성$ npx create-react-app mashup-todolist react-icons , styled-components 설치$ cd mashup-todolist$ yarn add react-icons styled-components 만들어야 할 컴포넌트TodoTemplate → 투두리스트의 레이아웃 설정, 페이지 중앙의 흰색박스 (그림자를 곁들인..)TodoHead → 날짜 요일 해야 할 일 개수TodoList → 할 일 정보TodoItem → 정보 렌더링, 완료 여부, 항목 삭제TodoCreate → 할 일 등록회색 배경색상 적용 (#e9ecef)페이지의 배경 색상 설정→ body태그에 CSS 적용inde.. [2024-2 React.js 스터디 ] 김지수 #4주차 컴포넌트 만들기우선 create-react-app 을 사용하여 새로운 프로젝트를 만들어주세요.$ npx create-react-app mashup-todolist 해당 디렉터리에 들어가서 이번 프로젝트에서 필요한 라이브러리 react-icons 와 styled-components 를 설치하세요.$ cd mashup-todolist$ yarn add react-icons styled-components 만들어야 할 컴포넌트 확인하기TodoTemplate이 컴포넌트는 우리가 만들 투두리스트의 레이아웃을 설정하는 컴포넌트입니다. 페이지의 중앙에 그림자가 적용된 흰색 박스를 보여줍니다.TodoHead이 컴포넌트는 오늘의 날짜와 요일을 보여주고, 앞으로 해야 할 일이 몇개 남았는지 보여줍니다.TodoList이 컴.. [2024-2 React.js 스터디] 이서영 #3주차 리액트 컴포넌트 스타일링 css파일 생성 → 컴포넌트에서 import (가장 기본적인 방법) 스타일링시 자주 사용되는 기술들SassCSS Modulestyled-components 1. Sass→ CSS pre-processor→ 복잡한 작업을 쉽게→ 코드의 재활용성, 가독성 높여줌 (유지보수 easy) 리액트 프로젝트 생성 후 node-sass 설치$ yarn add node-sass // Sass를 CSS로 변환해주는 역할 1-1. Button 컴포넌트 만들기src 디렉터리에 components 디렉터리 생성→ components 디렉터리 안에 Button.js, Button.scss 생성 기존 css에서 사용 못하는 문법들을 사용ex. 스타일파일에서 사용할 수 있는 변수 선언 / lighten(),.. 이전 1 2 3 4 ··· 12 다음
