Web_Study (28) 썸네일형 리스트형 Import, Export ▶ MoularizationReact는 프로그램을 구성하는 내부의 코드를 기능별로 나누어 Module형식으로 관리하는데 용이함한 파일에 쓰여진 코드를 여러 파일로 관리할 수 있음재사용성이 증가함▶ import 할 때, {}의 차이모듈을 보내주는 export 방식의 차이모듈을 다른 파일에서 불러올 때, import 사용하듯, 모듈을 다른 파일로 보내려면 export라고 작성해야 함. Example.jsconst a = 1;const b = 2;export a;export default b;Sub.jsimport hi, {a} from './Example'; Example.js에서 export한 모듈을 불러오기 위해선, Sub.js에서 import로 불러와서 사용하면 됨.맨처음있는 hi는 default로 .. React Router ▶ React Router React에서 페이지 이동 처리(url 기준) npm install react-router-dom 사용법 import { BrowserRouter, Routes, Switch, Route } from 'react-router-dom'; import Home from "./routes/Home"; import Movie from "./routes/Movie"; function App(){ return 새로고침 뛸 Component } Browser Browser Router (보통의 웹사이트처럼 입력한 url로 표기) Hash Router (보통의 url에 추가적인 random값이 추가되어짐) Switch Route를 찾는 것 / 단 하나의 Route만 렌더링 하기 위함 Rout.. UseEffect ▶ useEffect (코드가 언제 실행될지를 정할 수 있음) import {useEffect} from 'react' function Hello(){ useEffect(()=>{ console.log('hi'); },[]) } function Hello2(){ function effectFn(){ console.log('hi2'); } useEffect(effectFn,[]); //같은 의미 return Hello } 2가지 argument 존재 우리가 실행시키고 싶은 함수 dependency 해당 dependency가 변화할때마다 우리가 실행시키고 싶은 함수를 실행한다는 의미 []비어있으면 코드가 한번만 실행된다는 것을 의미) ▶ Cleanup (uesEffect에서 실행하고 싶은 함수가 사라질 경우.. Props ▶ Props (재사용 가능 코드에 유용함) function Retext({Text}){ return( {Text} ) } //이렇게 사용 시, 하단 코드와 동일 /* hihi */ //응용 function Sitebox({ text, imgurl, url }) { // props 재사용가능용으로 만듬 return ( {text} ); } 재사용해야하는 코드가 많을 경우 매우 유용하게 사용가능 2. Expo_MediaLibrary ▶ Expo Media Library Expo Media Library는 기본적으로 디바이스에서 사용 가능한 미디어 파일을 검색하고 관리하는 방법을 제공함. Expo Media Library를 사용하면 사용자의 사진첩에서 사진을 선택하고 업로드하거나, 앱에서 촬영한 사진 및 동영상을 저장할 수 있음. 또한 이미지 및 비디오를 조작하고 필터링하거나 사진을 자르거나 회전하는 등의 작업을 수행 할 수 있습니다. ▶ getPermission 함수 import * as MediaLibrary from 'expo-media-library'; async function requestMediaLibraryPermission() { const { status } = await MediaLibrary.getPermissi.. 1. ReactNavigation ▶ Installation npm install @react-navigation/native ▶ Installing dependencies npx expo install react-native-screens react-native-safe-area-context - This will install versions of these libraries that are compatible. ▶ ReactNavigation Bottom Tab npm install @react-navigation/bottom-tabs import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import HomeScreen from '../screens/Ho.. TypeScript_Project6:BlockChain_Final ▶ BlockChain_Class ▶ BlockChain 생성 ▶ 실행결과 TypeScript_Project5:Blocks ▶ BlockChain? 여러개의 블록이 사슬처럼 묶인 것 블록 안에 데이터 존재하며 이 블록은 다른 블록으로 묶여있는 개념 블록간의 연결고리는 Hash ▶ Proactive start를 실행하면 build/index.js 실행함을 의미 이와 같이 script 실행 시, 매우 비효율적! ts-node : 빌드없이 타입스크립트를 실행시키는 엔진 빌드없이 빠르게 새로고침하고싶을때 사용 개발환경에서만 사용 nodemon : 자동으로 커맨드를 재실행해주는 엔진 서버 코드 변경 시, 자동으로 서버 재시작 ▶ Block 생성 Block의 모양을 interface로 생성 hash를 이용하여 데이터를 보호 -> 블록정보가 수정되지 않음을 의미 height : 블록의 위치를 의미 data : 블록이 보호할 데이터 blo.. 이전 1 2 3 4 다음
