본문 바로가기

전체 글

(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)는 사..

[2024 여름방학 React.js study] 이가인 #2주차 1. js 최신 문법 2. 모듈화 구문 3. 비동기 처리1. js 최신 문법템플릿 리터럴 - 백틱(`)let a ='hi' ;let message = a + '안녕'; //백틱 사용 : 변수를 문자열 안에 바로 연결 가능let message =`${a} 안녕`; // 'hi 안녕'구조 분해 문법 (Destructuring)// 배열에 있는걸 변수에 넣고 싶을 때let arr= ['apple',10]let [fruit, myNum] = arr;// let fruit =arr[0]; 보다 훨씬 쉬움// 객체에 있는걸 변수에 넣고 싶을 때let josh = {skill : 'js'.age:21 }let [skill, age] = josh;// var mySkill = josh.skill; 보다 쉬움//..

[2024 여름방학 React.js 스터디] 이종윤 #3주차 DOM(Document Object Model)이란: 문서 객체 모델이라는 뜻, 스크립트언어로 html문서를 제어할 수 있도록 웹 문서를 객체화 한 것이다.: 즉 html문서에 있는 tree구조라는 모양으로 태그와 태그안에 텍스트와 속성들을 모두 객체화 해서 js에서 편집 할 수 있도록 만들어주는 것이다.이렇게...리액트가 만들어진 이유원래 JavaScript를 사용하여 HTML 로 구성한 UI 를 제어하기 위해서는 브라우저의 DOM Selector API 를 사용해서 특정 DOM 을 선택한뒤 특정한 이벤트가 발생하면 변화를 주도록 설정해야한다.그런데 이렇게 dom을 하나하나 찝어가면서 업데이트를 하다가 처리해야 할 이벤트도 다양해지고, 관리해야 할 상태값도 다양해지고, DOM 도 다양해지게 된다면, ..

[2024 여름방학 React.js 스터디] 이정욱 #3주차 리액트 다시 re act 해보자 그전에 리액트를 엄청 간단하게 배워본적은 있지만 이번 방학에 리액트를 좀 공부해보고 싶은 마음이 생겨서공부를 하기로 결심했다.이번 스터디에서는 벨로퍼트와 함께 하는 모던 리액트라는 교재로 스터디를 한다.여기서 나오는 용어나 정의에 관련한 부분은 리액트 공식 문서를 참고하기로 했다.https://react.dev/ ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by in..

[2024 여름방학 React.js 스터디] 강보경 #3주차 리액트사용자 인터페이스를 만들기 위한 JavaScript 라이브러리컴포넌트 기반으로 되어 있어 재사용성이 높고, 상태 관리를 통해 동적인 UI를 쉽게 만들 수 있다.업데이트에 대한 고민 없이 처음부터 모든 걸 새로 만들어 보여주려 만들었고 이 때의 문제인 느린 속도를 해결하기 위해 Virtual DOM을 이용하여 작동 성능이 빨라졌다. 컴포넌트독립적인 UI 단위로 재사용이 가능하며 각각의 컴포넌트는 고유한 상태와 라이프사이클을 가진다. JSX리액트에서 생김새를 정의할 때 사용하는 문법return 안녕하세요; 태그를 꼭 닫아야 함 (ex: )태그와 태그 사이에 내용이 들어가지 않을 때는 Self Closing 태그 사용두 개 이상의 태그는 무조건 하나의 태그로 감싸기 -> 단순히 감싸기 위한 불필요한 ..

[2024 여름방학 React.js 스터디] 김태일 #3주차 "리액트 입문" 01. 리액트가 만들어진 배경- 처리해야 할 이벤트, 상태값, DOM이 다양해질때 코드가 복잡해지는 것을 해결하기 위함- 어떠한 상태가 바뀔 때, 업데이트를 작업하는것이 아닌 모든걸 새로 만든다는 발상에서 출발- Virtual DOM을 통해 실현 (업데이트에 대한 고민해결 + 빠른 성능) 01-1 Virtual DOM- 브라우저에 실제로 보여지지 않는 가상의 DOM- 업데이트가 필요한 곳의 UI를 Virtual DOM 을 통해서 렌더링- 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치 02. 작업환경 준비- Node.js : 자바스크립트 런타임 (Webpack, Babel 등의 도구들을 사용하기위해 설치)- Yarn : 개선된 버전의 npm ..

[2024 여름방학 React.js 스터디] 김민서 #3주차 리액트 Virtual DOM을 사용해 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다 npx create-react-app begin-reactcd begin-reactnpm start 리액트 컴포넌트 만들기 // Hello.jsimport React from 'react'; // 리액트 불러오기function Hello() { return 안녕하세요}export default Hello; // 컴포넌트 내보내기 (다른 컴포넌트에서 불러오기 가능)// App.jsimport React from 'react';import Hello from './Hello';function App() { return ( );}export default Ap..

[2024 여름방학 React.js 스터디] 백채린 #3주차 1장. 리액트 입문 1. 리액트는 어쩌다 만들어졌을까? HTML/JS로 만들어진 카운터 예시// index.html0 +1 -1// index.jsconst number = document.getElementById('number');const increase = document.getElementById('increase');const decrease = document.getElementById('decrease');increase.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current + 1;};decrease.onclick = () => { const current = parse..

[2024 ROS 스터디] 초라핀스카 베로니카 #4주차 - SLAM과 내비게이션 SLAM (Simultaneous Localization And Mapping) & Navigation SLAM (로봇의 길 찾기) 길 찾기에 필요한 것:위치: 로봇의 위치 계측/추정하는 기능센싱: 벽, 물체 등의 장애물의 계측하는 기능지도: 길과 장애물 정보가 담긴 지도경로: 목적지까지 최적 경로를 계산하고 주행하는 기능 1. 위치: 로봇의 위치 계측/추정하는 기능GPS (Global Positioning System) 단점: 오차 - 수 미터의 오차 생길 수 있음 날씨 실외 - 실외에서만 사용 가능Indoor Positioning Sensor- Landmark (Color, IR Camera)- Indoor GPS- WiFi SLAM- Beacon추측 항법(..

[2024 여름방학 Node.js 스터디] 이종윤 #2주차 REPL(Read Eval Print Loop) : 노드는 제공하는 콘솔은 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복한다(Loop)고 해서 REPL(Read Eval Print Loop)이라고 한다. 모듈 : 특정한 기능을 하는 함수나 변수들의 집합을 말한다.: 모듈은 자체로도 하나의 프로그램이면서 다른 프로그램의 부품으로도 사용할 수 있다.보통 위 그림처럼 파일 하나가 모듈 하나가 되며, 파일별로 코드를 모듈화할 수 있어 관리하기 편합니다. + 모듈을 만들 때는 모듈이 될 파일과 모듈을 불러와서 사용할 파일이 필요하다.CommonJS 모듈: exports나 module.exports와 require()를 사용하는 모듈이다.우선 expor..

[2024 ROS 스터디] 곽우인 #4주차 - SLAM과 Navigation 길 찾기에 필요한 것1. 위치: 로봇의 위치 계측/추정하는 기능 GPS(Global Positioning System)오차가 있다.날씨의 영향을 많이 받는다.실외에서만 가능하다.Indoor Positioning SensorLandmark(Color, IR Camera)Indoor GPSWiFi SLAMBeacon ▶우리는 오랜시간동안 오차를 보정하기 위해서 추측항법(dead reckoning, 데드레커닝)을 써왔다. 그렇다면 추측항법이란?양 바퀴 축의 회전 값을 이용이동 거리와 회전 값을 계산, 위치 측정바닥 슬립, 기계적, 누적 오차 발생IMU 등의 관성 센서, 필터로 위치 보상칼만필터 시리즈▶이러한 방법들을 통해서 우리는 절대좌표를 알 수 있는게 아니라 출발한 시점부터의 상대 좌표를 알 수 있는것이다..

[2024 ROS 스터디] 반제호 #4주차 - SLAM과 내비게이션 #1. SLAM이란?SLAM: Simultaneous Localization And Mapping & Navigationㅡ 동시적 위치 추정 및 지도 작성 & 차량 자동 항법 장치예전엔 해, 달 ,별의 위치와 나침반, 지도를 보며 길을 찾았지 로봇의 길찾기-길 찾기에 필요한 것 1. 위치 : 로봇의 위치 계측/추정하는 기능GPS (오차 발생, 날씨 영향, 실외에서 주로 사용)Indoor Positioning Sensor (Landmark, Indoor GPS, WiFi SLAM, Beacon)추측 항법 (양 바퀴 축의 회전 값을 이용), 데드레커닝 계산, Runge-Kutta 공식 이용2. 센싱 : 벽, 물체 등의 장애물의 계측하는 기능거리센서 (LRF, 초음파센서)비전센서 (스테레오 카메라, 모노 카메..

[2024 여름방학 Node.js 스터디] 백채린 #2주차 3장 3장 노드 기능 알아보기 3.1 REPL 사용하기 - REPL: 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Pring), 종료할 때까지 반복한다(Loop) - REPL은 한두 줄짜리 코드를 테스트해보는 용도로는 좋지만 여러 줄의 코드를 실행하기에는 불편함 3.2 JS 파일 실행하기 3.3 모듈로 만들기 - 모듈: 특정한 기능을 하는 함수나 변수들의 집합- 노드는 코드를 모듈로 만들 수 있음- 보통 파일 하나가 모듈 하나가 되며, 파일별로 코드를 모듈화- 노드에서는 CommonJS, ECMAScrips 2가지 모듈 사용 3.3.1 CommonJS 모듈 - CommonJS 모듈: 노드 생태계에서 가장 널리 쓰이는 모듈 - modult.exports와 expo..

[2024 여름방학 Node.js 스터디] 김지나 #2주차 3장. 노드 기능 알아보기3.1. REPL 사용하기- REPL: 입력한 코드를 읽고, 해석하고, 결과물을 반환하고, 종료할 때까지 반복해주는 환경- REPL 사용하기- 짧은 코드 테스트 용도로 용이함. 긴 코드는 JS 파일로 만든 후 파일을 통째로 실행합시다! 3.2. JS 파일 실행하기 3.3. 모듈로 만들기- 모듈: 특정 기능을 하는 함수나 변수들의 집합ex) 수학 코드 모듈 ...- 모듈은 모듈 자체로 프로그램인 동시에 다른 프로그램의 부품으로도 사용 가능- 모듈을 만들어두면 여러 프로그램에 해당 모듈을 재사용 가능- 파일 하나가 모듈 하나, 파일별로 코드 모듈화 가능 3.3.1. CommonJS 모듈- module 객체 말고 export 객체 사용 가능exports.odd = 'CJS 홀수입니다'..

[2024 ROS 스터디] 반제호 #3주차 - ROS 기본 프로그래밍 1. ROS 프로그래밍 전에 알아둬야 할 사항표준 단위 - SI 단위 사용좌표 표현 방식 - x: forward, y: left, z: up, 오른손 법칙프로그래밍 규칙2. 메시지 통신의 종류토픽(Topic): 퍼블리셔 -> 서브스크라이버 [단방향]서비스(Service): 서비스 서버 서비스 클라이언트 [양방향]액션(Action): 액션 서버 액션 클라이언트 [양방향, 피드백]매개변수(Parameter): 파라미터 서버에서 읽고 쓰기3. Topic/ Publisher/ Subscriber 1. 패키지 생성$ cd ~/catkin_ws/src $ catkin_create_pkg ros_tutorials_topic message_generation std_msgs roscpp입력하면 src 소스 코드 폴..

[2024 ROS 스터디] 김기태 #3주차 - ROS 기본 프로그래밍 #ROS 프로그래밍 전 알아둘 것표준단위 - SI단위 (각도/Radian, 주파수/Hz, 힘/N, 전력/W, 길이/m, 무게/kg, 등..)좌표 표현 방식 - x:forward, y:left, z:up , 회전 = 오른손 법칙프로그래밍 규칙 - http://wiki.ros.org/CppStyleGuide에서 확인가능 #Topic/Service 작성1. Topic Publisher/Subscriber1) 패키지 생성2) 패키지 설정 파일 (package.xml) 수정 - ROS 필수 설정 파일중 하나, 패키지 이름, 저작자, 라이선스, 의존성 패키지 등이 담김3) 빌드 설정 파일 (CMakeLists.txt) 수정4) 메시지 파일 작성 - time과 int32 외에도 boot, int8, int16, fl..

[2024 여름방학 React.js 스터디] 백채린 #2주차 섹션 8~9 섹션 8. 모듈화 구문 1. import와 export 소개 import, export: 자바스크립트의 코드를 모듈화 할 수 있는 기능* 모듈화: 다른 파일에 있는 자바스크립트의 기능을 특정 파일에서 사용할 수 있는 것 2. import와 export 기본 문법 실습 - exportexport 변수, 함수// 다른 파일에서 가져달 쓸 함 수 앞에 export 작성 - import export된 파일을 improt로 불러와 사용import { 불러올 변수 또는 함수 이름 } from '파일 경로';// export된 변수나 함수를 {}에 선언한 뒤 해당 파일이 있는 경로를 적어줌 3. import와 export 문법으로 여러개 거내기 // math.js 파일let pi = 3.14;function s..

[2024 여름방학 React.js 스터디] 이가인 #1주차 자바스크립트란객체 지향 프로그래밍 언어거의 모든 웹페이지의 인터페이스는 자바스크립트로 개발됨화면을 동작시키기위한 언어콘솔=자바스크립트 코드 변수 소개변수 : 어떤 값을 저장 (variable, var)예약어(=키워드) : js에서 미리 점유한 단어들, 사용하고있음 변수 선언 방식 : var, const, let 실무에서는 const연습할 때는 let 이 좋다!var message = 'hi';const message = 'hi';let message = 'hi'; 변수 출력 시console.log(변수이름);const와 let 차이점let은 나중에 값을 수정 가능함, const는 불가능 (const=상수=불변)변경 방법은 그냥 변수에 넣을 수 있는 데이터(값) 유형[] 배열, {} 객체, 숫자, 문..

이전 1 ··· 6 7 8 9 10 11 12 ··· 27 다음

티스토리툴바