WINK-(Web & App)/React.js 스터디 (77) 썸네일형 리스트형 [2024 여름방학 React.js 스터디] 김민서 #1주차 변수var messsage = 'hi';// message 라는 변수에 hi 문자열 저장var을 이용해 변수 선언const a = 10; //const는 값을 변경할 수 없다let b = 20;b = 30; //let은 값을 변경할 수 있다const : 상수let : 변수 데이터 타입숫자문자열불리언배열객체변수 선언 유의사항숫자로 시작할 수 없음예약어를 사용할 수 없음Camel Case : 여러 단어로 이름을 지었을 때 두 번째 단어부터 첫 글자를 대문자로 작성 함수function logText(message) { console.log(message);}// 함수 선언문, message는 파라미터logText('hi');// 함수 호출let logText = function() { console.l.. [2024 여름방학 React.js 스터디] 김태일 #1주차 - 자바스크립트 입문 00. 자바스크립트란- 웹 페이지를 동작시키기 위해 필요한 프로그래밍 언어(html, css, JavaScript)- 클릭 등과 같이 사용자의 인터랙션에 의해 반응하게 만들어주는 것 (-화면을 동작시키기 위한 언어)- 모든 웹페이지에서 자바스크립트가 지배적으로 사용되고 있음- 웹개발 뿐만 아니라 서버, 게임, 머신러닝 등등 다양하게 사용됨 ※모든 브라우저에는 자바스크립트를 실행할 수 있는 환경이 마련되어 있으므로 별도의 툴을 설치하지 않고도 콘솔 메뉴에서 자바스크립트 코드 실행 가능 01. 변수- 숫자, 문자열 등 어떤 값을 저장하기 위해 사용 01-1 변수의 종류1. var- 초창기 자바스크립트 문법 var message = 'hi'; 2. const - 값을 정의한 이후에 변경 불가 (상수)cons.. [2024 React.js 스터디] 류상우 #7주차 4-1. API 연동의 기본.우선 api-integrate 라는 이름의 새로운 프로젝트를 만들고 라이브러리인 axios 를 설치한다.yarn add axios axios를 사용해서 REST API 형태를 구성할 수 있다.REST API 란 웹이 서로 상호작용할 수 있게 하는 것으로, 자원은 URL로 식별하고 메서드를 사용하여 원하는 작업을 실행할 수 있다.메서드 목록GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거e.t.c.: PATCH, HEAD 등의 메서드도 있다.axios 의 사용법은 다음과 같다.import axios from 'axios';axios.post('/users/1', { username: 'blabla', name: 'blabla'}).. [2024 React.js 스터디] 박지민 #마지막주차 "API 연동과 라우터" 1. API 연동의 기본- API 를 호출하기 위해서 axios 라는 라이브러리를 설치yarn add axios - axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있음GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거import axios from 'axios';axios.get('/users/1');- get 이 위치한 자리에는 메서드 이름을 소문자로 넣음 - ex) 새로운 데이터를 등록하고 싶다면 axios.post() 를 사용 - 파라미터에는 API 의 주소를 넣음- axios.post() 로 데이터를 등록 할 때에는 두번째 파라미터에 등록하고자 하는 정보를 넣을 수 있음axios.post('/users', {.. [2024 React.js 스터디] 정호용 #마지막주차 "API와 라우터" 드디어 마지막 주차이다. 이번에는 API 연동과 React Router에 대해 알아보고자 한다. 4-1. API 연동의 기본새로운 프로젝트를 만들어 준다. 그리고 axios 라는 라이브러리를 설치한다. (API 호출 위함)axios는 브라우저와 Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 모든 브라우저를 지원한다. axios를 이용해서 GET, PUT, POST, DELETE 등의 메서드로 API요청을 할 수 있다. GET : 데이터 조회POST : 데이터 등록PUT : 데이터 수정DELETE : 데이터 제거 axios는 아래처럼 불러오고, 사용한다.import axios from 'axios';axios.get('/users/1');2번째 줄에서 axio.. [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 라이브러리를 설치한.. 이전 1 2 3 4 5 6 7 8 ··· 10 다음
