WINK-(Web & App) (292) 썸네일형 리스트형 [2024 여름방학 React.js 스터디] 이종윤 #6주차 API: API(application programing interface)는 소프트웨어 애플리케이션이 서로 통신하여 데이터, 특징 및 기능을 교환할 수 있도록 하는 일련의 규칙 또는 프로토콜이다.$ npx create-react-app api-integrate우선 이 코드로 React라는 JavaScript 라이브러리를 사용하여 새로운 웹 애플리케이션 프로젝트를 생성한다.$ cd api-integrate$ yarn add axios그리고 그 만든 곳으로 이동하고 axios라이브러리를 설치한다.axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거PATCH: 데이터 일.. [2024 여름방학 React.js 스터디] #6주차 이가인 API 연동의 기본 1. axios 라이브러리 설치$ cd api-integrate$ yarn add axios REST API 메서드 의미GET: 데이터 조회 -> axios.get( api주소 )POST: 데이터 등록axios.post('/users', { username: 'blabla', name: 'blabla'});PUT: 데이터 수정DELETE: 데이터 제거PATCH: 리소스 일부 수정HEAD: GET과 비슷하지만, 응답 본문(body)은 포함하지 않고, 헤더 정보만을 반환 useState 와 useEffect 로 데이터 로딩 useState : 요청상태 관리useEffect : 렌더링 시점에 요청 시작요청의 결과import React, { useState, useEffect } .. [2024 여름방학 React.js 스터디] 정채은 #6주차 React Router v6 튜토리얼1. 라우팅이란?사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것 리액트에서 라우트 시스템을 구축하기위해 사용할 수 있는 2가지 선택지 리액트 라우터: 이 라이브러리는 컴포넌트 기반으로 라우팅 시스템을 설정가능 Next.js: 리액트 프로젝트의 프레임워크 이 프레임워크는 우리가 사용했던 Create React App처럼 리액트 프로젝트 설정을 하는 기능, 라우팅 시스템, 최적화, 다국어 시스템 지원, 서버 사이드 렌더링 등 다양한 기능 제공, 프레임워크의 라우팅 시스템은 파일 경로 기반으로 작동 2. 싱글 페이지 애플리케이션이란?한 개의 페이지로 이루어진 애플리케이션 이때 드는 의문점 : 리액트 라우터를 사용하여 여러 페이지로 구성된 프로젝트를 만들 수 있다고.. [2024 여름방학 React.js 스터디] 김민서 #6주차 API 연동의 기본 API를 호출하기 위한 axios 라이브러리를 설치한다 - REST APIURI는 정보의 자원을 표현해야 한다 (리소스명은 동사보다 명사를 사용)자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE 등)로 표현한다Method역할POSTPOST를 통해 해당 URI를 요청하면 리소스를 생성한다GETGET를 통해 해당 리소스를 조회한다PUTPUT를 통해 해당 리소스를 수정한다DELETEDELETE를 통해 리소스를 삭제한다 URI 설계 시 주의사항슬래시 구분자(/)는 계층 관계를 나타내는 데 사용http://restapi.example.com/houses/apartmentsURI 마지막 문자로 슬래시를 포함하지 않는다http://restapi.example.com.. [2024 여름방학 React.js 스터디] 백채린 #6주차 1. API 연동의 기본 API 연동을 하기 위한 프로젝트를 새로 만들기 $ npx create-react-app api-integrate API 호출을 위한 axios 라이브러리 설치 $ cd api-integrate$ yarn add axios → axios를 사용해서 GET(데이터 조회), PUT(데이터 수정), POST(데이터 등록), DELETE(데이터 제거) 등의 메서드로 API 요청 가능 axios의 사용법 import axios from 'axios';// getaxios.get('/users/1');// 데이터 등록, 첫 번째 파라미터에는 API 주소, 두 번째 파라미터에는 등록하고자 하는 정보axios.post('/users', { username: 'blabla', name: 'b.. [2024 여름방학 Node.js 스터디] 백채린 #4주차 5~6장 5장 패키지 매니저 5.1 npm 알아보기 - npm(Node Package Manager) 이란?노드 패키지 매니저, 다른 사람들이 미리 작성해 놓은 코드들이 공개되어 있는 서버npm에 업로드된 노드 모듈을 패키지라고 부른다. * yarn: npm의 대체자, 페이스북이 내놓은 패캐지 매니저* pnpm: npm의 성능을 개선한 패키지 매니저 5.2 package.json으로 패키지 관리하기 같은 패키지라도 버전별로 기능이 다를 수 있기 때문에 프로젝트를 설치할 때 패키지도 동일한 버전을 설치해야 하는데이때 설치한 패키지의 버전을 관리하는 파일이 package.json→ 노드 프로젝트를 시작하기 전, 폴더 내부에 무조건 package.json부터 만들고 시작해야 한다 !! npm으로 package.js.. [2024 여름방학 Node.js 스터디] 김지나 #4주차 5장. 패키지 매니저 5.1. npm 알아보기- npm: 노드 패키지 매니저 - 패키지: npm에 업로드된 노드 모듈- 자바스크립트 프로그램은 패키지로 npm에 등록되어 있으므로 필요에 따라 설치해서 사용하면 됨 5.2. package.json으로 패키지 관리하기- package.json: 설치한 패키지의 버전을 관리하는 파일- 노드 프로젝트를 시작하기 전에는 폴더 내부에 package.json부터 만들고 시작해야 함!!package name패키지의 이름version패키지의 버전entry point자바스크립트 실행 파일 진입점test command코드를 테스트할 때 입력할 명령어를 의미git repository코드를 저장해둔 깃(Git) 저장소 주소를 의미keywords패키지를 쉽게 찾을 수 있게 함li.. [2024 여름방학 Node.js 스터디] 이종윤 #4주차 NPM(Node Package Manager): Node.js의 패키지를 관리할 수 있는 도구이다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다. 자신이 작성한 패키지를 공개할 수도 있고 필요한 패키지를 검색하여 재사용할 수도 있다.* 명령줄 인터페이스(CLI)는 키보드를 이용해 운영 체제와 상호 작용하는 소프트웨어 메커니즘이다.NPM사용법먼저 npm을 사용하기 위해서는 npm을 설치하기 전에 먼저 package.json이라는 파일을 만들어야한다.package.json라는 파일은 설치된 패키지들을 보여주고 패키지들의 버전을 관리하는 파일이다. 1. 우선 콘솔창에 ' $ npm init.. 이전 1 2 3 4 ··· 37 다음
