WINK-(Web & App)/React.js 스터디 (95) 썸네일형 리스트형 [2024 여름방학 React.js 스터디] 이종윤 #1주차 0. jacascript란? 객체기반의 스크립트의 프로그래밍 언어이다.웹페이지를 동작시키기 위한 프로그래밍 언어 3가지가 있는데 그 중 하나이다.(html, css, javascript)이중 js의 역할은 사용자의 인터렉션(마우스나 키보드의 움직임)에 반응하게 만들어주는 역할이다.기본적으로 화면을 동적으로 만들어주는 역할을 한다.주로 웹개발이나 서버, 게임, 머신러닝등에 사용된다. ※ js는 모든 인터넷 창에서 열어서 사용할 수 있다. (f12, console창에서 사용) 1. 변수(variable): 어떠한 값을 저장하기 위해서 사용한다 *예약어: js에서 기본적으로 쓰기위해 선점해둔 단어들이다. 예시로 let, var, const, function 등등 이것저것 참 많다. 변수 선언 문법 2가지(l.. [2024 여름방학 React.js 스터디] 강보경 #1주차 1. 자바스크립트란?객체 기반의 스크립트 프로그래밍 언어이다. 웹 페이지를 동작시키기 위한 프로그래밍 언어 중 하나로 마우스 또는 키보드로 입력 시 사용자의 인터랙션에 의해 반응하게 만들어준다. 2. 크롬에서 자바스크립트 코드 실행 방법크롬 시작 화면 > 오른쪽 마우스 클릭 > 검사 > Console > console.log('hi'); 입력 > hi 3. 자바스크립트 기본 변수변수란? 어떤 값을 저장하기 위해 사용변수를 의미를 부여한 어떤 값으로 저장해두고 그 값을 출력할 수 있다.var message = 'hi';message > 'hi'console.log(message) > hi 4. 변수 선언 방식자바스크립트에서 이미 사용하고 있는 용어(var, const, let 등)은 변수의 이름으로 선언.. [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.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
