WINK-(Web & App) (438) 썸네일형 리스트형 [2024-2 Node.js 스터디] 류상우 #1주차 1. 핵심 개념 이해하기 1-1. 서버서버: 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램클라이언트: 요청을 보내는 주체(브라우저, 데스크탑 프로그램, 서버 등)1-2. 자바스크립트 런타임Node.js: Chrome V8 Javascript 엔진으로 빌드된 자바스크립트 런타임런타임: 특정 언어로 만든 프로그램들을 실행할 수 있는 환경V8: 구글에서 개발한 크롬의 엔진, 기존 JS의 문제였던 속도를 보완libuv: 노드에서 사용하는 라이브러리로 노드의 특성인 이벤트 기반, 논블로킹 I/O 모델을 구현1-3. 이벤트 기반이벤트 기반: 이벤트(클릭, 네트워크 요청 등) 가 발생할 때 미리 지정해둔 작업을 수행하는 방식특정 이벤트가 발생할 때 수행할 것을 미리 설정해야함. 이를 이벤.. [2024-2 Node.js 스터디] 김민재 #1주차 1. 핵심 개념 이해하기1.1 서버서버: 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 or 프로그램클라이언트(브라우저) ←—응답———요청—→ 서버 1.2 자바스크립트 런타임런타임: 특정 언어로 만든 프로그램들을 실행할 수 있는 환경node는 자바스크립트 런타임 1.3 이벤트 기반이벤트 기반: 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식ex) 클릭, 네트워크 요청 이벤트 기반 시스템은 미리 무엇을 할지 등록해야하는데 이를 이벤트 리스너에 콜백 함수를 등록한다 표현호출된 함수는 호출 스택에 쌓이게 됨이벤트 루프: 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서 결정백그라운드: setTimeout 같은 타이머나 이벤트 리스터들이 대기하는 곳태스크 .. [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.. 이전 1 ··· 16 17 18 19 20 21 22 ··· 55 다음
