WINK-(Web & App)/React.js 스터디 (40) 썸네일형 리스트형 [2024 React.js 스터디] 김지나 #7주차 4장. API 연동하기- 웹 애플리케이션을 만들 때, 데이터를 보존시키고 다른 사람들도 조회할 수 있게 하려면 서버를 만들고 서버의 API를 사용해서 데이터를 읽고 써야 함 1. API 연동의 기본- 새 프로젝트 만들고 axios 라이브러리 설치$ npx create-react-app api-integrate$ cd api-integrate$ yarn add axios- axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청 가능- REST API를 사용할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청할 수 있음(GET: 데이터 조회, POST: 데이터 등록, PUT: 데이터 수정, DELETE: 데이터 제거) - axios 사용법import axios from 'a.. [2024 React.js 스터디] 이서영 #6주차 리액트 컴포넌트 스타일링 하기 1. Sass ( Syntactically Awesome Style Sheets ) - CSS pre-processor : CSS 문서의 작성에 도움을 주는 도구- 복잡한 작업 쉽게쉽게- 코드의 재활용성, 가독성 높여줌 -> 유지보수 쉽게 시작하기(1) 리액트 프로젝트 만들기 이 프로젝트 디렉토리(Styling)에 node-sass 라이브러리 설치$ cd styling-with-sass$ yarn add node-sass (2) Button 컴포넌트 만들기src 디렉토리에 components 디렉터리 생성 -> 안에 Button 만들기버튼 만들고 스타일링 기존 css에서 사용x 문법들을 사용- $blue: #228be6; 스타일 파일에서 사용할 수 있는 변수 선언- ligh.. [2024 React.js 스터디] 류상우 #6주차 2-1. SassSass (Syntactically Awesome Style Sheets) 는 CSS pre-processor 로서, 작업의 간결화, 코드의 재활용성 증가, 코드의 가독성 증가 등을 통해 유지보수를 쉽게 해준다.여기서 CSS pre-processor(CSS 전처리기)는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 단어이며 Sass, Less, stylus 등이 있다. Sass는 두 가지 확장자(.sass/.scss)를 지원한다. 두 확장자는 문법이 다른데 현재는 scss 문법을 주로 사용하므로 .scss 확장자로 스타일을 작성할 것이다. 우선 styling-with-sass라는 이름의 새로운 리액트 프로젝트를 만들고 해당 디렉터리에 node-sass 라이브러리를 설치한.. [2024 React.js 스터디] 박건민 #6주차 01. SassSass (Syntactically Awesome Style Sheets: 문법적으로 짱짱.. 멋진..... 스타일시트)는 CSS pre-processor 로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해준다. 새로운 리액트 프로젝트 및 라이브러리 설치$ npx create-react-app styling-with-sass$ cd styling-with-sass$ yarn add node-sass Button 컴포넌트 만들기Button.jsimport React from 'react';import './Button.scss';function Button({ children }) { return {chil.. [2024 React.js 스터디] 한승훈 #6주차 안녕하세요!오늘은 리액트를 이용한 컴포넌트 스타일링에 대해 배워보도록 할게요~~기본적으로 리액트는 css 파일을 만들고, 이것을 컴포넌트로 import 하는 것입니다.이것도 인라인보다는 편리하지만, 더 나은 방법들을 살펴볼게요. 1. SASSSASS는?- css의 pre-processor입니다.- 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게해줍니다.- 문법에는 sass, scss 두 종류가 존재하나, 더 대중적으로 사용되는 scss를 배워보도록 합니다. 먼저 새로운 리액트 프로젝트를 만드세요.$ npx create-react-app styling-with-sass그 다음에는, 해당 프로젝트 디렉터리에 node-sass 라는 라.. [2024 React.js 스터디] 김지나 #6주차 2장. 리액트 컴포넌트 스타일링하기- 리액트에서 컴포넌트를 스타일링 하는 가장 기본적인 방법은 css 파일을 만들어서 import해서 사용하는 것- 컴포넌트를 스타일링 할 때 자주 사용되는 기술들: Sass, CSS Module, styled-components 01. Sass: CSS pre-processor, 복잡한 작업 쉽게 가능, 코드 재활용성.가독성 높여줌, 유지보수 쉬움- .scss, .sass 두 가지 확장자가 있음, 보통 scss 문법이 더 많이 사용되므로 .scss 확장자로 작성하겠음 - 새로운 리액트 프로젝트 만들고 node-sass 라이브러리 설치하기 - Button 컴포넌트 만들기- src 디렉토리에 components 디렉토리를 생성 후 그 안에 Button.js 만들기- But.. [2024 React.js 스터디] 정호용 #6주차 "React.JS 꾸미기" 오메 일주일이 후딱 갑니다... 정신없는 요즘..01. SassSass(Syntactically Awesome Style Sheets)란... CSS 전처리기로서, 1. 복잡한 작업을 쉽게2. 코드의 재활용성 향상3. 코드의 가독성 향상을 지원하여 유지보수를 용이하게 해 주는!문법적으로 짱 멋진 스타일시트라고 한다. Sass는 두 가지 확장자(.scss/ .sass)를 지원한다. 이 두 가지의 문법은 아주 다르다던데.. $font-stack: Helvetica, sans-serif$primary-color: #333body font: 100% $font-stack color: $primary-colorsass$font-stack: Helvetica, sans-serif;$primary-co.. [2024 React.js 스터디] 박지민 #6주차 "리액트 컴포넌트 스타일링하기" 1. Sass- Sass (Syntactically Awesome Style Sheets) 는 CSS pre-processor로서, 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐 만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줌- Sass 에서는 두가지의 확장자 (.scss/.sass) 를 지원// sass$font-stack: Helvetica, sans-serif$primary-color: #333body font: 100% $font-stack color: $primary-color // scss$font-stack: Helvetica, sans-serif;$primary-color: #333;body { font: 100% $font-stack; .. 이전 1 2 3 4 5 다음
