beMajor

프로젝트가 커짐에 따라 타입체킹을 통해 버그를 잡는 것은 중요해질 것이다. 내가 받은 props가 number이어야 하는데 string일 수도, 반대의 경우도 있을 수 있고 또 아예 전달을 받지 못하는 경우도 있을 수 있다. 이런 것을 방지하기 위해 부모 컴포넌트에서 props를 받는 경우 내가 원하는 props를 받았는지를 검사할 필요가 있다. 검사를 위해 prop-types를 사용한다(예전에는 리액트에 포함된 패키지였는데 이제는 별도의 라이브러리로 존재하기에 사용하려면 설치해주어야 한다) 먼저 설치는 다음과 같이 한다. npm i prop-types 사용방법은 다음과 같다. import PropTypes from "prop-types" // 반드시 propTypes를 추가하여야 한다. // 다른 이름..

javascript에서 data를 fetch하는 방법은 보통 fetch를 사용하는 것이다. 이번에는 axios 라는 것을 사용해볼 것이다. axios는 마치 fetch 위에 있는 작은 layer이다. axios를 사용하기 위해서는 먼저 설치해야하니, 다음과 같이 입력해서 설치한다. npm i axios axios에서 url을 통해 데이터를 가져오는 방법은 다음과 같다. import axios from "axios" const datas = axios.get("URL"); axios는 전달받은 url에서 promise 객체(데이터)를 가져올 것이다.

우리가 아는 객체처럼 리액트에서 component class 역시 life cycle이 있다. 처음 태어나는 것을 mount라고 하고, 죽는 것을 unmount라고 표현한다. constructor부터 시작해서 여러 가지 있지만 주로 사용되는 것 위주로 보자면 (순서대로 호출 된다) 컴포넌트 생성시 호출되는 것들 constructor() componentDidMount() render() 컴포넌트 업데이트시 호출되는 것들(setState 메소드를 호출할 때만 업데이트 된다) render() componentDidUpdate() 컴포넌트가 죽을 때(우리가 다른 웹사이트로 이동할 때임) componentWillUnmount 이 메소드들은 React.Component에 있는 메소드들이다. 우리는 React.Co..

React에는 class component가 있다. 우리는 React.Component를 상속받아서 class component를 만들 수 있다. class App extends React.Component { render() { return ( 안녕! 난 HTML이야! ); } } React는 자동으로 이 class의 render() 메소드를 호출하고 render() 메소드만을 사용한다. render() 는 기존 function component처럼 HTML을 반환하는 메소드이다. state는 class component 안에 있는 오브젝트이다. render() 메소드 내에서 state에 접근하고 싶을 때는 this를 사용하여 접근한다. render() 메소드 내에서 class component의 다른..

리액트는 node.js, npm, npx 깔려 있으면 프로젝트 만들고 서버 생성해보고 쉽게할 수 있음 node.js는 버전 12 이상. npm, npx는 버전 6 이상. cmd창에서 원하는 폴더로 이동하고 다음과 같이 입력하면 해당 폴더에 react 프로젝트를 생성할 수 있음 npx create-react-app 이름 그리고 npx로 서버 실행해보려면 다음과 같이 입력함(끌 때는 해당 콘솔창에서 ctrl + c로 끌 수 있음) npm start component: HTML을 반환하는 함수 jsx: HTML + javascript 리액트는 index.html 소스에 컴포넌트를 사용해서 동적으로 html을 삽입함. index.js 에서 DOM 쿼리를 이용해 삽입할 div를 찾아서 삽입하는 것. index.j..

File System 파일 시스템은 2차 저장장치의 느린 속도를 극복하기 위해 온갖 기법이 들어가서 매우 복잡하다. 여기서 하는 정리는 수박 겉핥기 정도이다. 구체적으로 더 공부하고 싶다면 대학원에 진학하면 된다 File 기본 개념 File 이란 파일이란 데이터와 프로그램을 위한 '그릇'이다. 프로세스처럼 데이터와 프로그램이 logical address space에 연속적으로 존재한다. File Structure 종류 OS와 프로그램이 구조를 결정한다. None: words, bytes의 연속 Simple record structure: 레코드 단위, 한 줄이 한 의미를 가짐 - Lines: Fiexd(라인 길이 고정), Variable(라인 길이 가변) Complex Structures - Format..

virtualbox로 ubuntu 등을 돌릴 때 가끔 부팅 시 무한정 로딩하는 경우가 생겼다. 응답없음이 떠서 강제종료하고 다시 켜봐도 똑같은 증상이 반복되었다 검색해서 여러 해결 방법을 써도(0x80004005, 0x80040154 오류도 막 떠서 재설치, 설치된 OS 삭제 후 다시 import, sfc /scannow 등) 해결되지 않았는데 우연히 발견한 원인은 단순했다. 바로 에어팟 때문이었다. 에어팟을 블루투스로 노트북에 연결하고 있으면 virtualbox에서 ubuntu를 부팅시 무한로딩을 하게 된다. 아마 우분투에서도 오디오 잡으려하고, 윈도우에서도 잡으려 하고 이게 무한정 반복되는 게 원인으로 추정된다(작업표시줄 오른쪽 밑에서 뭔가 자꾸 바쁘게 움직임) 해결방법은 당연히 에어팟을 잠깐 연결 ..

Skip List 일반 Linked List는 정렬이 되어있더라도 그 이점을 살리지 못하고, 원하는 노드를 찾기 위해 헤드부터 끝까지 쭉 돌아야 한다. == O(n). Skip List는 일반 Linked List에 level의 개념을 추가해서 마치 binary search tree처럼 탐색 속도를 줄이는 자료구조라고 할 수 있다 우선 생긴 것은 아래와 같다. 출처: https://en.wikipedia.org/wiki/Skip_list#/media/File:Skip_list.svg 각 노드마다 위쪽으로 길게 포인터가 붙어있는데, 이것을 레벨이라고 한다. (위에서부터 0이라 하는지, 밑에서부터 0이라 하는지 등의 구체적인 것은 구현에 따라 달라질 수 있음) 먼저 find를 생각해보자. 위의 Skip Li..

x86 운영체제에서는 다음과 같은 과정을 거쳐 interrupt를 호출한다 1. interrupt n instruction 수행. 2. IDT에 등록되어있는 ISR(interrupt Service Routine) 수행. xv6는 위의 두 과정을 아래와 같이 진행한다. 1. interrupt n instruction - “int n” instruction workflow. 1) IDT(interrupt descriptor table)에서 n’th descriptor를 읽어온다. - 시스템 부팅시 tvinit() 함수로 vertors.S의 번호, DPL을 다 초기화 해줌. - system call은 DPL이 유저 레벨로 세팅됨 2) CPL이 DPL보다 작거나 같은지를 확인함(커널 모드: 0, 유저 모드: 3..

수업 중 selection sort를 C로 구현하는 게 있어 업로드 합니다? 한다? 매번 C++ 을 쓰다가 C를 쓰니 문법이 기억날랑말랑 했다. 하지만 멀록은 내가 가장 좋아하는 명령어라서 기억이 났다. Selection sort 과정 Selection sort은 정렬 기법 중에 하나로 구현은 쉽지만 시간복잡도가 크다. 오래 걸린다는 뜻이다. Selection sort의 구현방법은 다음과 같다. (오름차순 기준) 1. N개의 숫자가 무작위로 있다고 가정할 때, 각각 1번, 2번 ... N-1번, N번 이라고 생각해보자. 2. index를 1로 초기화한다 3. index번 ~ N번까지 중 가장 작은 수를 찾는다. 4. 젤 작은 것을 찾아 index 위치의 수와 자리를 바꾼다. 5. index++을 해준 뒤..