본문 바로가기
728x90
반응형

전체 글164

7. Hooks useState 기본 sate 사용 예제 - App.js import Counter from './Counter'; const App = () => { return ; }; export default App; - Counter.js import {useState} from 'react'; const Counter = () =>{ const [value, setValue] = useState(0); return( 현재 카운터 값은 {value} 입니다. setValue(value + 1)}> +1 setValue(value - 1)}> -1 ) } export default Counter; 여러개의 state 사용하기 -App.js import Info from './Info'; const App = ().. 2022. 3. 6.
6. component의 lifecycle method 모든 컴포넌트의 수명은 렌더링 되기 전인 준비 과정 ~ 페이지에서 사라질 때 까지이다. lifecycle method는 class형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 hook을 사용한다. lifecycle method 종류 - will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행 - did 접두사가 붙은 메서드 : 어떤 작업을 작동한 후에 실행 lifecycle - mount : 페이지에 컴포넌트가 나타남, DOM이 생성되고 웹에 나타난다 constructor : 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링 c.. 2022. 3. 6.
5. 반복적으로 Component 사용하기 예제 1 - App.js import { Component } from 'react'; import './App.css'; import IterationSample from './IterationSample'; class App extends Component { render(){ return( ); } } export default App; 아래와 같이 반복되는 배열이 있다고 할 때, map을 사용해서 코드를 배열로 작성할 수 있다. - IterationSample.js const IterationSample = () =>{ return( // 반복적으로 li생성 눈사람 얼음 눈 바람 ) } export default IterationSample; const IterationSample = () =>{.. 2022. 3. 5.
4. ref:DOM에 이름 달기 일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용하는데 리액트 프로젝트 내부에서도 ref를 통해 DOM에 이름을 달 수 있다. 리액트 컴포넌트에서 id를 사용하지 않는 이유는 컴포넌트를 반복적으로 사용하기 때문에 중복 id를 가진 dom이 여러 개 생기는 것을 방지하기 위해서이다. ref는 특히 'DOM을 꼭 직접적으로 건드려야 할 때' 사용해야 한다. 우선 state로 다음 기능을 구현해보자. - App.js import './App.css'; import ValidationSample from './ValidationSample'; function App() { return }; export default App; - ValidationSample.js import React, { Compo.. 2022. 3. 5.
3. 이벤트 핸들링 Event 사용 시 주의사항 - 이름은 카멜 표기법으로 작성한다 ex ) onClick - 이벤트에 실행할 함수 형태의 값을 전달한다 - DOM 요소에만 이벤트를 설정할 수 있다 ( div, button, input, form, span 의 DOM요소에는 이벤트 설정 가능 / 직접 만든 컴포넌트에는 자체 설정 불가능 ) -- MyComponent에 onClick을 설정하면 함수를 실행하는게 아니라, props를 MyComponent에 실행해준다 -- 그래서 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정한다 -- 이벤트 종류 : Clipboard, Touch, Composition, UI, Keyboard, Wheel, Focus, Media, Form, Image, Mouse, Animatio.. 2022. 3. 5.
2. 컴포넌트 여러 곳에서 한 객체가 반복적으로 사용될 때, component화 한다. Component without Props - App.js import './App.css'; import FirstComponent from './FirstComponent'; function App() { return }; export default App; - FirstComponent.js const FirstComponent = () =>{ return component } export default FirstComponent; 만약 App.js(parent)에서 FirstComponent.js(child)로 변수(props)를 전달한다면 이를 child가 반영하여 parent로 다시 전달해줄 수 있다. Component .. 2022. 3. 4.
1. React 시작하기 일하면서 react.js 를 사용할 기회가 생겼는데 기본적 개념 학습이 필요하다고 생각되어 [리액트를 다루는 기술]과 기타 자료를 통해 학습하고자 한다. - node.js , npm 설치 완료 - vsCode 환경 2022. 3. 4.
11. 가상메모리 가상메모리(virtual memory system) 실제 각 프로세스마다 충분한 메모리를 할당하기에는 메모리 크기가 한계가 있기 때문에 가상 메모리는 여러 프로세스 동시 실행 시스템에서 반드시 필요하다. ex ) 메모리가 4gb라고 할 때 한 프로세스가 한번에 4GB를 전부 사용하지 않기 때문에 일부만 메모리에 올려둔다. 이 때 실제 메모리 주소를 물리 주소라고 하고, 프로세스가 참조하는 주소를 가상 주소라고 한다. 가상주소와 물리주소를 계속 변환하다보니 시간이 오래걸려서 주소를 변환해주는 하드웨어 장치인 MMU(Memory Management Unit)를 사용한다. : cpu -> virtual address -> mmu - physical address -> memory 페이징 시스템 페이징 : 크기.. 2022. 3. 4.
[MongoDB - Python] Python으로 mongoDB에 데이터 쓰고 읽기 1. python에서 mongoDB용 library를 설치한다. python -m pip install pymongo 확인해보기 from pymongo import MongoClient from pymongo.cursor import CursorType host = "localhost" port = "27017" mongo = MongoClient(host, int(port)) print(mongo) 2. python에서 mongoDB CRUD를 위한 Class를 작성한다. class DBHandler: def __init__(self): host = "localhost" port = "27017" self.client = MongoClient(host, int(port)) def insert_item_.. 2022. 2. 15.
[MongoDB] MongoDB 설치하기 1. MongoDB 다운로드 https://www.mongodb.com/try/download/community MongoDB Community Download Download the Community version of MongoDB's non-relational database server from MongoDB's download center. www.mongodb.com 2. 설치 한 뒤 - 설치 시 mongoDB Compass(UI)도 같이 설치하면 편하다(자동 설치됨) 3. cmd 창에서 해당 폴더로 이동 후 data folder 생성 cd C:/Program Files/MongoDB/Server/5.0/bin mkdir C:/data/db mongod 차례로 입력하면 여러가지 설정 및 저장된.. 2022. 2. 15.
10.Thread 프로세스 간에는 각 프로세스의 데이터 접근이 불가한데 스레드는 하나의 프로세스에 여러개를 생성하여 프로세스의 데이터에 모두 접근할 수 있다. Multi Tasking VS Multi Processing VS Multi Thread 멀티 태스킹 : 하나의 cpu, 여러개 process 멀티 프로세싱 : 여러 cpu, 여러개 process : 하나의 process를 여러 cpu에서 실행하는 방법 ? Thread를 여러개 만들어서 해결 가능- 최근 cpu가 멀티 코어를 가지고 있음 멀티스레드 Thread 장점 사용자에 대한 응답성 향상 자원 공유 효율 코드 간결성 Thread 단점 스레드 중 한 스레드만 문제가 생겨도 전체 프로세스가 영향을 받음 스레드를 많이 생성하면 context switching이 많이 .. 2021. 12. 14.
[PytorchToC++] 03. Visual Studio에 LibTorch 설치하기 1. libtorch download - OS와 CUDA를 컴퓨터 환경에 맞게 설정하고 debug, release 버전 둘 다 다운로드한다. 절대 경로로 참조할 예정이므로 폴더 위치를 신중하게 선택! 2. Visual Studio에서 C++, Windows 선택 후 빈 프로젝트를 생성한다. 다운로드 받은 라이브러리 사용을 위해 속성 페이지에서 추가 포함 디렉터리를 설정해주어야한다. 프로젝트 -> 속성 구성 tab에서 Debug, Release 를 변경하며 동일하게 진행하되, debug와 release버전의 폴더는 다르게 설정한다. C/C++ - 일반 - 추가 포함 디렉터리에서 libtorch(debug/release) 라이브러리가 포함된 경로를 추가한다. C/C++ - 언어 - 준수모드 를 아니요로 변경.. 2021. 9. 29.
[PytorchToC++] 02. TorchScript 분석 torch_tracing과 torchscript 비교 에 이어진다. 1. TorchScript 분석 Module을 아래와 같이 구성하면 재사용성과 가독성이 높아진다. MyDecisionGate는 제어 흐름을 활용한다. 아래에 출력되는 grad_fn은 잠재적으로 복잡한 프로그램을 통해 미분을 계산할 수 있게된다. 코드 중 미분값을 명시적으로 정의할 필요가 없는 경우도 있는데 pytorch는 변화도 테이프를 사용하여 연산이 발생할 때만 이를 기록하고 미분값을 계산할 때 거꾸로 재생한다. (많은 프레임워크들이 프로그램 코드로부터 기호식 미분을 계산하는 접근법을 취하고 있음) 1 ) 모듈 1 : torch.nn.Module 을 상속받음 import torch class MyDecisionGate(torch.nn.. 2021. 9. 29.
[PytorchToC++] 01. TorchScript 비교 및 simple code review > Python에서 Pytorch로 작성한 모델을 C++ 환경에서 사용하기 위해 Develop을 진행한다. Python에서 jit로 모델을 작성한 후 C++에서 LibTorch를 사용하여 로드하고자 한다. 1. python 환경 python 환경에서 jit로 모델을 모듈화하는 과정은 두 가지 방법이 있다. [ torch_tracing ] : 입력값을 사용하여 모델 구조를 파악한 뒤 입력값의 모델 안에서의 흐름을 통해 모델을 기록한다. flow가 기록되기 때문에 statically fix된 그래프이다. [ annotation(script) ] : torchscript 컴파일러가 직접 모델 코드를 분석하여 컴파일을 진행한다. 따라서 dynamic한 control flow(조건 분기, break 등)를 사용할.. 2021. 9. 28.
cuda Graphic Card : RTX 3090 1. Graphic card version 확인 1 ) windows + R 실행 => devmgmt.msc 실행 2 ) 기존에 설치되어있었던 버전 전부 삭제 3 ) NVDIA DRIVER 설치 https://www.nvidia.co.kr/Download/index.aspx?lang=kr NVIDIA 드라이버 다운로드 www.nvidia.co.kr 사용자 설정 이런거 나오는데 그냥 다 ok 하고 넘어갑니다. 다 설치 후에는 컴퓨터를 재시작해야합니다! 4 ) CUDA 11.1 설치 https://developer.nvidia.com/cuda-11.1.1-download-archive?target_os=Windows&target_arch=x86_64&target_v.. 2021. 8. 2.
jupyter notebook 꿀팁! 1. 테마 변경 pip install jupyterthemes # 설치 jt -l # 가능한 테마 리스트 jt -t # 설치 chesterish, grade3, gruvboxd, gruvboxl, gruvboxd, monokai, oceans16, onedork, solarizedd, solarized1 2. jupyter 확장 tabs pip install jupyter_contrib_nbextensions && jupyter contrib nbextension install --user nbextensions config를 클릭하면 아래와 같은 확장 가능 tab들을 볼 수 있다. 여기에서 몇 가지 유용하게 사용하는 것만 체크해준다. hinterland : intelligence와 같은 것 Table .. 2021. 8. 1.
09. 프로세스와 IPC 여러 프로세스를 만들어서 동시 실행을 위하여 프로세스간 통신이 필요하다. 하지만 프로세스들이 서로의 공간을 쉽게 접근하면 데이터/코드가 변경될 수 있으므로 굉장히 위험하다. 그래서 프로세스간 통신을 위한 기법이 나오게된다. ex ) 웹서버 ex ) 리눅스 : 리눅스의 프로세스간 공간은 완전히 분리되어 있다. 사용자 공간은 절대 접근할 수 없지만 커널 공간은 공유한다. 프로세스간 통신을 위한 특별한 기법이 필요한데 이때 IPC기법 등의 기법이 필요하다. 1. IPC ? = InterProcess Communication 1 ) Pipe : 단방향 통신, fork()로 자식 프로세스를 만들었을 때 부모와 자식간의 통신을 한다 fork() 라는 시스템콜은 호출하면 현재 프로세스(부모)를 똑같이 복사한 새로운(.. 2021. 8. 1.
08. 프로세스와 Context Switching 1. PCB(Process Control/Context Blocck) 에 저장 - PCB : 프로세스가 실행중인 상태를 캡쳐/구조화해서 저장한다. - 아래의 정보를 갖고 있다. Process ID Register 값(PC, SP) Scheduling Info(Process State) : 프로세스가 현재 ready, block, running 상태인지에 대한 정보 Memory Info(메모리 사이즈 limit) 2. Context Switching - Context Switching : CPU에 실행할 프로세스를 교체하는 기술 1 ) 실행 중지할 프로세스 정보를 해당 프로세스의 PCB에 업데이트해서 메인 메모리에 저장 2 ) 다음 실행할 프로세스 정보를 메인 메모리에 있는 해당 PCB정보를 CPU에 넣고.. 2021. 8. 1.
07. 프로세스 구조 1. 프로세스의 구조를 python, C 의 예로 살펴보자. : 프로세스는 STACK, HEAP, DATA, CODE 네 가지 영역으로 구성된다. 우리가 프로그램에서 작성하는 코드는 PROCESS의 CODE영역에 binary 형식으로 mapping된다. DATA 영역에는 선언한 변수가 정적으로 mapping 되고, Stack에는 실행 순서대로 변수,값을 저장했다가 사용이 끝나면 삭제된다. 2. 프로세스의 구성 1 ) text (code) : 코드 2 ) data : 변수 / 초기화된 데이터 - BSS : 초기값이 없는 전역변수 ( int data; ) - DATA : 초기값이 있는 전역변수 ( int data=1; ) 3 ) stack : 임시 데이터(함수 호출, 로컬 변수) 4 ) heap : 코드에서.. 2021. 7. 31.
06. 인터럽트 1. 인터럽트란 ? CPU가 프로그램을 실행하고 있을 때, 입출력 하드웨어 등의 장치나 예외상황이 발생하여 처리가 필요할 경우에 CPU에 알려서 처리하는 기술 1 ) Timer Interrupt : 선점형 스케쥴러를 따를 때, 프로세스 running 중에 스케쥴러가 이를 중단시키고, 다른 프로세스로 교체하기 위해 현재 프로세스 실행을 중단시킨다. 그러기 위해서는 스케쥴러 코드가 실행이 되어서 현 프로세스 실행을 중지시켜야 한다. 2 ) IO Device와의 커뮤니케이션 중 저장 매체에서 데이터 처리 완료시, 프로세스를 깨워야한다. ( block state -> ready state ) 3 ) 1 / 0 을 계산할 때 예외상황을 프로세스 등에 알려주어야함 #include int main() { print(.. 2021. 7. 31.
728x90
반응형

티스토리툴바