분류 전체보기 (669) 썸네일형 리스트형 [2024 여름방학 React.js 스터디] 강보경 #4주차 useRef- ref: 리액트에서 특정 DOM을 선택할 때 사용- 함수형 컴포넌트에서 ref을 사용할 때에 useRef라는 Hook을 사용함import React, { useState, useRef } from 'react';const InputSample = () => { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출 const onChange = (e) => { const { value, name } = e.target; // 우선 e.target 에서 na.. [2024 여름방학 Node.js 스터디] 이종윤 #3주차 요청과 응답클라이언트가 서버로 요청(request)을 보냄서버는 요청을 처리처리 후 클라이언트로 응답(response)를 보냄노드를 이용하여 http서버 만들기const http = require('http');http.createServer((req, res) => { // 여기에 어떻게 응답할지 적어줍니다}); creatServer로 이벤트 요청을 대기한다.req 객체는 요청에 관한 정보가, res 객체는 응답에 관한 정보가 담겨있다.로컬호스트와 포트로컬호스트(localhost): 컴퓨터 네트워크에서 사용하는 루프백 주소로, 자신의 컴퓨터를 의미한다. 즉, 컴퓨터의 네트워크 기능을 시험하기 위해 '가상으로 인터넷망에 연결되어 있는 것처럼 할당하는 인터넷 주소'이다. IPv4에서의 IP 주소는 127.. [2024 여름방학 React.js 스터디] 김태일 #4주차 "리액트 입문(2)" 10. useRef로 특정 DOM 선택하기- ref : DOM을 선택해야 하는 상황에서 사용- useRef : 저장공간 또는 DOM요소에 접근하기 위해 사용되는 리액트 훅- 리액트 훅 : 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리▷리액트 훅 설명자료 : https://taei1.tistory.com/30 리액트 훅(React Hook)01. 리액트 훅이란?- 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리- 클래스형 컴포넌트taei1.tistory.com ▼초기화 버튼을 클릭했을 때 이름 input에 포커스가 잡히도록 useRef를 사.. [2024 여름방학 React.js 스터디] 김민서 #4주차 useRef 리액트에서 직접 DOM을 선택해야 할 때 ref를 사용한다함수형 컴포넌트에서 ref 사용 - useRef라는 Hook 함수(함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있게 해줌)를 사용클래스형 컴포넌트에서 - 콜백 함수 또는 React.createRef 함수 사용import React, { useState, useRef } from 'react';const InputSample = () => { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); // Ref 객체 만들기 const { name, nickname } = inputs; // 구조 분해.. [2024 여름방학 Node.js 스터디] 백채린 #3주차 4장 4장 http 모듈로 서버 만들기 4.1 요청과 응답 이해하기 → 서버에는 요청을 받는 부분과 응답을 보내는 부분이 있어야 한다. 여기서 요청과 응답은 이벤트 방식이라고 생각클라이언트로부터 요청이 왔을 때 어떤 작업을 수행할지 이벤트 리스너를 미리 등록해둬야 한다. 이벤트 리스너를 가진 노드 서버를 만들어보자! // createServer.jsconst http = require('http');http.createServer((req, res) => { // 여기에 어떻게 응답할지 적어줍니다}); 1. http 서버가 있어야 웹 브라우저의 요청을 처리할 수 있기 때문에 http 모듈을 사용했다.2. 인수로 요청에 대한 콜백 함수를 넣을 수 있으며 요청이 들어올 때마다 매번 콜백 함수가 실행되므로.. [2024 여름방학 Node.js 스터디] 김지나 #3주차 4장. http 모듈로 서버 만들기4.1. 요청과 응답 이해하기- 서버에는 요청을 받는 부분/응답을 보내는 부분 - 요청을 받았을 때 수행할 이벤트 리스너를 미리 등록해야 함 1) 노드 서버 만들어보기- createServer 메서드: 인수로 있는 콜백 함수를 요청이 들어올 때마다 실행, 어떻게 응답할지 적으면 됨- req: request, 요청에 관한 정보- res: response, 응답에 관한 정보 2) 응답을 보내는 부분과 서버 연결- res.writeHead: 응답에 대한 정보를 기록하는 메서드- res.write: 클라이언트로 보낼 데이터를 작성하는 메서드 (여러 개 호출, 전송 가능)- res.end: 응답을 종료하는 메서드(인수 데이터를 클라이언트에게 보내고 종료) - localhost: .. [2024 여름방학 React.js study] 이가인 #3주차 DOM이란?, React 라이브러리의 등장DOM(Document Object Model)은 HTML, XML 문서의 구조화된 표현을 의미하며, 프로그래밍 언어가 이 구조에 접근하고 조작할 수 있는 방법을 제공하는 모델이다. 문서의 구조 표현: 웹 페이지의 HTML 구조를 트리(tree) 형태로 표현합니다. 트리의 각 노드(node)는 HTML 태그 하나하나를 나타프로그래밍 인터페이스: 이 구조에 접근하고 수정할 수 있는 방법을 제공하여, 자바스크립트 같은 언어를 통해 웹 페이지의 내용을 변경하거나, 요소를 추가/삭제할 수 있다. // html 문서 안녕하세요 이것은 예시 문서입니다. // dom 트리Document├── html ├── body ├── h1 .. [2024 여름방학 React.js 스터디] 정채은 #3주차 3주차 [1강 - 1]DOM (문서 객체 모델)이란? 문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스 프레임워크자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결을 해주어서, 업데이트 하는 작업을 간소화해주는 방식으로 웹개발의 어려움을 해결 Virtual DOM메모리에 가상으로 존재하는 DOM 으로 그냥 JavaScript 객체 Virtual DOM의 작동방식1. 리액트는 상태가 업데이트된 후, 업데이트가 필요한 곳의 UI( 사용자 인터페이스 또는 유저 인터페이스(영어: user interface, UI)는 사.. 이전 1 ··· 23 24 25 26 27 28 29 ··· 84 다음
