ch3. 명령어
·
✏️ Study/💾 컴퓨터 구조
1. 소스 코드와 명령어📍고급 언어와 저급 언어고급 언어(일반적인 프로그래밍 언어)로 작성된 소스 코드가 실행되려면 반드시 저급 언어(컴퓨터만 이해할 수 있는 명령어)로 변환되어야 한다 저급언어 종류- 기계어- 어셈블리어 기계어- 0, 1(이진수)로 이루어진 명령어 모음- 가독성을 위해 십육진수로 표현하기도 함 어셈블리어- 기계어를 사람이 어느정도 이해할 수 있게 번역- 하드웨어와 밀접한 분야에서는 실제로 사용 (임베디드, 보안 등)- 예시 📍컴파일 언어와 인터프리터 언어고급 언어가 저급 언어로 변환되는 방식에 따라 언어를 2가지로 나눌 수 있음- 컴파일 언어- 인터프리터 언어 컴파일 언어- 컴파일러에 의해 소스코드 전체가 저급 언어(결과물 - 목적 코드)로 변환되어 실행됨- 소스 코드에 오류가 있다..
ch2. 데이터
·
✏️ Study/💾 컴퓨터 구조
1. 0과 1로 숫자를 표현하는 방법📍정보 단위컴퓨터는 0과 1밖에 이해하지 못함- 비트(bit): 0과 1을 나타내는 가장 작은 정보단위- n비트는 2^n 개의 정보 표현 가능 바이트(byte)- 1바이트 = 8비트- 1KB = 1000바이트 (1KiB = 1024바이트)- 1MB = 1000KB (1MiB = 1024KB) 워드(word)- CPU가 한 번에 처리할 수 있는 데이터 크기- 예) 인텔 x86 CPU: 32비트 워드- 예) x64 CPU: 64비트 워드 📍이진법이진수 표기- 10이 이진수인지 십진수인지 아무 표기가 없으면 혼동을 줄 수 있다- 수학적으로 표현: 10(2)- 코드 상에서 표현: 0b10 => binary를 의미 이진수의 음수 표현- 컴퓨터는 0과 1만 이해하기 때문에 음..
ch1. 컴퓨터 구조 시작하기
·
✏️ Study/💾 컴퓨터 구조
1. 컴퓨터 구조를 알아야 하는 이유📍1) 문제 해결 향상내가 짠 코드의 문제가 아니라 컴퓨터의 문제라면? 📍2) 성능, 용량, 비용 최적화개발한 프로그램을 위한 최적의 컴퓨터 환경은? 2. 컴퓨터 구조의 큰 그림📍컴퓨터 구조의 2가지 핵심 개념1) 컴퓨터가 이해하는 정보- 데이터- 명령어2) 컴퓨터의 4가지 핵심 부품- 중앙처리장치(CPU)- 주기억장치(메모리)- 보조기억장치- 입출력장치 📍1) 컴퓨터가 이해하는 정보컴퓨터는 명령을 처리하는 기계- 컴퓨터는 데이터로 이루어진 명령어를 처리- 컴퓨터는 0, 1로 표현된 정보만 이해 📍2) 컴퓨터의 4가지 핵심 부품메모리- 현재 실행되는 프로그램의 명령어와 데이터를 저장- 메모리 주소: 저장된 명령어와 데이터의 위치를 식별하고, 쉽게 접근하기 위해..
Webstorm 단축키 for Mac
·
✏️ Study/🪜 Dev Infra
같은 파일을 우측에서 열기 (설정에서 split right 검색 후 새로 설정해줘야 함)cmd + opt + \
[MacOS] 크롬 브라우저에서 그래픽 가속 사용 감지하기
·
✏️ Study/🧽 JS & TS
MacOS 에서만 가능 (WinOS 에서는 그래픽 가속 꺼도 WebGL 기능 사용 가능) WebGL 1.0 렌더링 컨텍스트 만족시키는지 확인하는 코드function isWebGLSupported() { try { const canvas = document.createElement("canvas"); // window.WebGL2RenderingContext 를 아래에서 똑같이 사용하면 WebGL 2.0 확인 가능 return !!( window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")) ); } catch (err) { retu..
vscode 단축키 모음
·
✏️ Study/🪜 Dev Infra
파일 내의 특정 단어(변수) 모두 선택: cmd(crtl) + shift + L 파일 내 특정 단어 하나씩 선택: cmd(crtl) + D - 단축키 1번씩 누를 때마다 선택됨 탭 이동: crtl + tab 라인 삭제: cmd + shift + K 라인 복사: shift + option(alt) + 위/아래 방향키 - 위로 복사하거나 아래로 복사할 수 있음 파일명 찾기: cmd + P 현재 탭을 우측에 똑같이 열기: cmd + \ 콘솔 빠르게 찍기: crtl + option(alt) + L
[TypeScript] Barrel의 장점과 단점
·
✏️ Study/🧽 JS & TS
📍Barrel 여러 모듈의 export 를 하나의 모듈(주로 index.ts)에서 import로 받아 다시 export 해주는 파일 예를 들어 아래와 같은 3개의 모듈이 각각 존재할 때 // src/lib/foo.ts export class Foo {} // src/lib/bar.ts export class Bar {} // src/lib/baz.ts export class Baz {} barrel이 없으면 3개 라인의 import가 필요함 // src/pages/page.ts import { Foo } from '../lib/foo'; import { Bar } from '../lib/bar'; import { Baz } from '../lib/baz'; barrel 파일(lib/index.ts) 을 ..
[React] drag로 element 옮기기 직접 구현
·
✏️ Study/⚛️ React
목표드래그로 엘리먼트 이동시키기 결과물https://codesandbox.io/s/drag-and-drop-ykyxgd?file=/src/Moving.tsx   조건1. pointer event 사용- mouse event 와 기능은 거의 동일하나, 모바일 디바이스에서 touch를 지원- 따라서 mouse event의 상위 호환 2. 마우스 커서의 속도에 맞춰서 따라와야 함- PointerEvent의 movementX, movementY 프로퍼티로 타겟 엘리먼트를 translate시키는 방식은 속도가 느려서 마우스 커서가 쉽게 엘리먼트 바깥으로 나가버리고, 드래그가 끊겨버림.. 그런데onMouseMove, onPoinerMove 는 onDragStart에 비해 속도가 느리다...참고)https://sta..