WINK-(Web & App) (438) 썸네일형 리스트형 [2023 React.js 스터디] 유승우 #4주차 - React Router v6 1. 라우팅이란? 웹 애플리케이션에서 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미한다. 리액트 라우터를 사용하여 라우팅 시스템을 구축하면 손쉽게 싱글 페이지 애플리케이션을 만들 수 있다. 2. 싱글 페이지 애플리케이션이란? 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 만약 싱글 페이지 애플리케이션에서 다른 페이지로 이동하게 된다면 서버에 다른 페이지의 HTML을 새로 요청하는 것이 아닌 브라우저의 History API를 사용하여 브라우저의 주소창의 값만 변경하고 기존의 웹 애플리케이션은 그대로 유지하면서 라우팅 설정에 따라 또 다른 페이지를 보여주게 된다. 3. 리액트 라우터 적용 및 기본 사용법 프로젝트를 생성 후 리액트 라우터 라이브러리를 설치하면 .. [2023 React.js 스터디] 동승환 #2주차 - 1장. 리액트 입문(10-16) 10. useRef 로 특정 DOM 선택하기 javaScript에서 특정 DOM 을 선택할 때 getElementById, querySelector 와 같은 DOM Selector 함수를 사용해서 DOM 을 선택하듯이 리액트에서는 ref 라는 것을 사용한다. 함수형 컴포넌트에서는 useRef 라는 Hook함수를, 클래스형 컴포넌트에서는 콜백 함수 또는 React.createRef 라는 함수를 사용한다. import React, { useState, useRef } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '' }); const nameInput = useRef(); con.. [2023 React.js 스터디] 임혜진 #2주차 - 즐거운 수강신청 사이트 만들기~ React.js 스터디 2주차 과제는 수강신청시즌에 걸맞는 '즐거운 수강신청 사이트 만들기' .. ! 즐거웠..나 문제는 크게 3개로 이루어져 있다. 1. 작성된 useEffect 함수를 참고하여 정상적으로 남은 시간이 돌아가도록 작성하시오. const timer = useRef(null); const [time, setTime] = useState(10); useEffect(() => { timer.current = setInterval(() => { console.log('1초마다 실행'); setTime((time)=>(time-1)) }, 1000); return () => clearInterval(timer.current); }, []); useEffect(() => { // time이 변할 때.. [2023 React.js 스터디] 조다운 # 1주차 - 1장. 리액트 입문(1-9) 1. 리액트는 어쩌다가 만들어졌을까? 처리해야 할 이벤트, 관리해야 할 상태값, DOM 까지 다양해지게 된다면 이에 따라 업데이트 하는 규칙도 복잡해지기 때문에 업데이트 작업의 간소화가 필요하다. 리액트는 어떠한 상태가 바뀌었을 때 그 상태에 따라 Dom 을 업데이트 할 지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 걸 새로 만들어서 보여준다면 어떨까? 하는 아이디어가 발상이었다. 하지만 정말 동적인 UI 를 보여주기 위해서 모든 걸 다 날려버리고 새로 만들게 된다면 속도가 굉장히 느릴 것이다. 그래서 리액트에서는 Virtual DOM 을 사용하여 이를 가능하게 했다. Virtual DOM 은 가상의 DOM 이다. 그냥 메모리에 가상으로 존재하는 DOM 으로서 JavaScript 객체이.. [2023 React.js 스터디] 사민주 #1주차 - 1장 1~9절 <과제> nvm을 사용하여 node의 latest 버전을 다운받아 설정하세요. 윈도우 기반으로 nvm-setup.exe 파일을 다운받은 후 cmd를 '관리자 모드'로 접속하여 node js의 최신 버전을 설치한다. 'nvm use [버전]' 명령어를 통해 사용 버전을 지정해 준 후 'node -v' 로 확인 윈도우의 경우, Node.js 공식 홈페이지의 LTS 버전을 직접 다운로드 받으면 환경 변수 때문에 nvm 설치 오류가 발생하는 경우가 있다. 그럴 때에는 설치되어 있는 node js를 다 지워주고 nvm을 먼저 설치한 후 cmd에서 node js를 설치해 주어야 한다. 2. yarn 을 설치하세요. Install Yarn 페이지를 참고해서 'npm install --global yarn' 명령어를 통해 설치.. <Hyperledger-Fabric 공부 일기 (with couchDB)> Couchdb ? NoSQL 기반으로 구성된 오픈소스 데이터베이스 소프트웨어이다. 특징은 json을 사용하여 데이터를 저장하고 JS를 쿼리 언어로 사용한다. 나는 이 couchdb를 hyperledger-fabric에 적용하여 블록체인 네트워크에서 사용하는 데이터베이스를 구축할 것이다. 블록체인 네트워크의 데이터베이스를 하나 더 만들게 되면 DB를 2개나 관리하는 번거로움이 생기지만, 이번 프로젝트의 핵심 요소인 '개인문서'를 Backend(nodejs, mariadb)에서 접근하는 것은 옳치 않은 아키텍쳐라고 판단하여 이렇게 진행하기로 결정하였다 공식문서는 couchdb 사용을 권장한다. before apply couchdb를 셋팅하기 전 몇 가지 알아야할 점이 있다. 1. You will need t.. 이전 1 ··· 52 53 54 55 다음
