본문 바로가기

전체 글78

React 핵심 이론(React Core) React Core React.createElement React가 요소들 제어한다. JSX JSX는 무조건 하나의 요소만 반환해야 한다. 대책으로 빈 태그로 모두 감싼다. return ( ) Fragment도 가능하다. (이게 원조) return ( ) 컴포넌트 분리 컴포넌트를 잘게 쪼개서 리렌더링을 최적화시킴 Feature와 State로 컴포넌트 분리 import Header from "./components/Header"; import Examples from "./components/Examples"; import CoreConcepts from "./components/CoreConcepts"; const App = () => { return ( Time to get started! ); }; .. 2024. 3. 29.
React Components Components JSX JSX는 타겟 UI/HTML 코드를 자바스크립트 코드 바로 안(컴포넌트 바로 안)에 정의할 수 있도록 한다. JSX 코드는 트리 모양의 코드 구조를 띄며 리액트에게 각 컴포넌트들이 어떻게 연관되어 있고 UI는 어떻게 보여야 하는지 알려준다. 그 다음, 올바른 명령어를 실행하여 실제 DOM을 제어하며 타겟 구조/코드를 반영한다. React는 리액트는 JSX 코드에서 사용한 컴포넌트로 웹사이트 DOM을 업데이트할 명령어를 수행하는 컴포넌트 트리를 불러온다. Props 단일 Prop 객체 전달 자바스크립트 객체로 이미 구성된 데이터가 있다면, 그 객체를 여러 props들로 나누는 대신 하나의 props 값으로 전달할 수 있다. 또는 등등... 받은 Prop들을 단일 객체로 그룹화 여.. 2024. 3. 29.
Javascript import & export import import : 다른 모듈에서 내보낸 변수, 함수, 클래스 등을 현재 파일에서 사용할 수 있게 가져오는 데 사용된다. import { add, subtract } from './math'; //main.js파일 console.log(add(5, 3)); // 8 console.log(subtract(8, 3)); // 5 위의 코드에서 main.js 파일에서 math.js 모듈에서 내보낸 add와 subtract 함수를 가져와 사용하고 있다. export //math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b; 위의 코드에서 add와 subtract 함수를 math... 2024. 3. 28.
React - the complete guide 01: Building Building index.js에서 document.getElementById('root')가 선택되면 public폴더의 index.html에서 가 선택된다. 그 후, 리액트가 이 div와 그 내용을 제어한다. const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Eslint & Prettier with Window vscode extension으로 eslint와 prettier가 이미 설치되어있어야 한다. eslint의 airbnb 의존성 확인 yarn info eslint-config-airbnb peerDependencies 결과는 다음과 같다. yarn info v1.22.19 { eslint: '^7... 2024. 3. 28.
명령어 수준 병렬성과 슈퍼스칼라 프로세서 명령어 수준 병렬성과 슈퍼스칼라 프로세서 명령어-수준 병렬성 : 소프트웨어(컴파일러) 슈퍼스칼라 프로세서 : 하드웨어(component의 추가 사용) component : 기능블럭(ALU 등) Multicore software : process 기반 Superscalar : instruction 기반(vector 연산 최적화) Scalar : 단일 변수 슈퍼스칼라 스칼라 명령어(단일 명령어)의 실행 성능을 개선하기 위하여 설계된 기계 여러 개의 파이프라인들에서 독립적으로 명령어들을 실행할 수 있는 능력 명령어들을 프로그램 순서와 다르게 실행하는 것을 허용함으로써 더 많이 이용 일반적 스칼라 조직과 비교된 슈퍼스칼라 조직 유사 슈퍼스칼라 기계의 속도 향상 스테이지 비교 제약 사항들(Constraints) .. 2024. 3. 28.
축소 명령어 세트 컴퓨터 : RISC 축소 명령어 세트 컴퓨터 : RISC 들어가기에 앞서, 컴퓨터 조직과 아키텍처의 저자는 CISC보다 RISC가 좀 더 좋다는 편향적인 생각을 가지고 있음을 밝힌다. RISC vs CISC Computer CISC(Complex : *intel PC*) : 복잡한 data access(High Level Language에 최적화) RISC(Reduced : *ARM*) : Embedded, Mobile 등 간단한 기기에 맞춰, 단순한 명령어 세트, 단순한 data access 몇 가지 CISC, RISC 및 슈퍼스칼라 프로세서의 특징들 명령어 실행 특성들 HLL 연산들의 상대적 동적 빈도 오퍼랜드들 프로시저 변수들과 지역 스칼라 변수들 제안들(RISC) HLL 프로그램에서 가장 많은 시간을 소비하는 특성들.. 2024. 3. 28.

티스토리툴바