시스템 버스CPU와 시스템 내의 다른 요소들 사이에 정보를 교환하는 통로이다.주소 버스, 데이터 버스, 제어버스로 구성된다.주소 버스CPU가 외부(기억장치, 입출력장치 등)로 발생하는 주소 정보를 전송하는 신호선들의 집합이다.주소선의 수는 CPU와 접속될 수 있는 최대 기억장치 용량을 결정한다.예를 들면 주소 버스의 비트수가 16비트라면, 최대 2의16승=64K개의 기억장소들의 주소지정이 가능하다.단방향성: CPU로부터 기억장치 혹은 입출력장치들로 보내지는 주소 정보를 보내기만 한다.데이터 버스CPU가 기억장치 혹은 입출력장치와의 사이에 데이터를 전송하기 위한 신호 선들의 집합 이다.데이터선의 수는 CPU가 한 번에 전송할 수 있는 비트 수를 결정한다.예를 들면 데이터 버스 폭이..
컴퓨터의 기본 구성 요소 중앙처리 장치 프로세서 프로그램 실행과 데이터 처리를 담당 기억장치 주기억장치와 보조기억장치가 있다 주기억장치 CPU과 가까이 위치하고 반도체 기억장치 칩들로 구성 고속 액세스 가격이 높고 면적을 많이 차지하여 저장용량에 한계가 있음. 휘발성 메모리 보조기억장치 2차 기억장치 저장 밀도가 높고, 비트당 가격이 낮음 읽기, 쓰기 속도가 느림 비 휘발성 메모리 입출력장치 사용자와 컴퓨터간의 상호작용을 위한 장치 CPU는 해당 장치 컨트롤러를 이용하여 동작 제어 프로그래밍 언어 기계어 하드웨어 부품들이 이해할 수 있는 언어로, 2진 비트들로 구성됨 어셈블리 언어 고급 언어와 기계어 사이의 중간 언어 어셈블러로 번역되며, 기계어와 일대일 대응 고급 언어 영문자와 숫자로 구성되어 사람이 ..
서론 최근 위성영상을 로컬에 다운로드 받는 기능을 구현해야하는 일이 있었다. 평소 다운로드 기능을 구현하던대로 fetch api로 서버에 요청을 보내 a tag 태그를 생성하여 다운로드 받도록 구현하였다. 하지만 파일 다운로드 하는데 너무 오래걸렸다. 확인해보니 파일을 다 받아올때까지 로컬에 다운로드 하지 않고 파일을 다 받아왔을때 브라우저에서 로컬에 다운을 시작해 시간이 두배로 걸리는 일이 생겼다. 그냥 a tag에 바로 파일의 url을 넣어줘도 되지만 권한이 필요할땐 토큰을 넣어 줄 수 없었다. 그래서 다운로드 받으면서 바로바로 로컬에 다운로드를 할 수 있는 방법을 찾아보았다. 구현 한참 이것저것 찾다보니 streamsaver라는 라이브러리를 쓰면 된다고 하는 stackoverflow의 글을 보았다...
서론 최근 회사에서 조직 개편이 이루어졌다. 나는 기존에 개발하던 제품이 아닌 다른 제품을 개발하는 조직에 발령을 받았다. 이번에 개발에 참여하게 된 제품은 기존에는 데이터 개발자 분들이 개발하던 웹 서비스였다. 프론트엔드 개발을 해본적 없는 분들이 개발한 프로그램 + 데이터 엔지니어 업무중 짬짬히 개발한 프로그램이다 보니 빌드, 코드, 개발 정책등 손보고 싶은 부분들이 많이 보였다. 이 부분들을 통틀어 어떤 단어로 표현해야할지 모르겠어 리팩토링이라는 가제를 쓰기로 했다. 이 작업을 하는 과정중에 마주한 문제와 고민들을 이 글에 적어보려한다. 첫번째. 빌드 이 프로젝트에 참여하게 되어 가장 먼저 한것은 빌드와 배포의 수정이었다. 기존 개발된 제품을 보기 위해 배포되어 있는 웹사이트에 접속해보았다. 근데 ..
서론 어느날 일하던 도중 친구에게 연락이 왔다. 연락의 내용은 자기네 회사에서 1월 22일에 스프린트 서울이라는 오픈소스 행사에 참여하는데 와서 해보지 않겠냐고 했다. 나는 재밌어 보이기도 하고 친구가 영업아닌 영업을 해서 참여하게 되었다. 참가 기다리던 토요일이 되었고 10시 시작이라 10시에 디스코드에 들어갔다. 사람들이 인사를 나누고 있었는데 수줍음을 많이타는 나는 쭈뼛거리면서 내가 참여할 채팅방에서만 인사를 했다. (왜그랬지....) 시간이 좀 지나자 공지가 올라왔고 공지의 내용은 따로 프로젝트에 대한 소개없이 바로 참여를 원하는 프로젝트 채널에 들어가서 진행하면 된다고 했다. 나는 이미 하고싶은 프로젝트를 정해논 터라 이점은 좋았다. 나는 9c-launcher라는 오픈소스 게임 클라이언트 프로젝..
최근 사내 라이브러리중 하나에 linter가 적용되어 있지 않아 새로 적용하려고 eslinter와 prettier를 설정해 주었다. 그런데 eslint와 prettier가 먹히지 않았다.. 그래서 preference의 setting으로 들어가보니 prettier 설정파일의 이름이 prettierrc.json으로 설정되어 있었다. 하지만 내가 만든 설정파일은 .prettierrc.json 이었고 그래서 다음과 같이 변경해 주었다. 그래도 적용이 안되길래 혹시나 하는 마음에 VSCODE를 재시작하니 동작하기 시작했다!! { ... "eslint.workingDirectories": ["./"], "prettier.configPath": "./prettierrc.json", ... }
서론 지금 다니는 회사에서는 위성영상을 인공지능으로 분석해 사용자들에게 정보를 제공해주는 제품을 만드는 일을 한다. 그 중 최근 위성영상을 세그멘테이션하는 툴을 만들게 되었다. 위성영상을 확대/축소하고 이동을 하는 기능이 어려울거라 생각했지만 기존에 한번 비슷한 툴을 만들었기에 코드를 어느정도 가져오면 되겠지 싶었다. 하지만 마음대로 되지 않았고 공식(?)을 정리하고 기록해야 할 필요성을 느껴 작성하게 되었다. 요구사항 먼저 요구사항중에 줌과 이동 기능이 있었다. 다만 줌을 할때에는 마우스 포인터를 기준으로 잡고 줌인 / 아웃을 해야했다.(GIF 참조) 그리고 이동은 여느 프로그램처럼 드래그로 이동을 하면 되었다. ZOOM 먼저 어려울것 같은 줌부터 해결해보았다. 이걸 어떻게 구현해야하나 고민하고 있을 ..
실행 컨텍스트가 뭐야?? 자바스크립트에서 실행 컨텍스트란 실행 가능한 코드를 형상화 하고 구분하는 추상적인 개념이라고 한다. 처음 이 말을 들어보면 좀 복잡할 것이다. 나도 그랬고 나는 내 나름대로 코드블럭이 실행되는 환경이라고 해석했다. 일반적으로는 함수와 전역 코드라고 생각하면 될 것 같다. 실행 컨텍스트를 공부하기 위해선 호출스택을 알아야 한다. 호출스택은 자바스크립트와 비동기 처리에 정리해 놓았다. 전역 실행 컨텍스트, 함수 실행 컨텍스트 컨텍스트에는 두가지 종류가 있다. 전역코드가 실행될때 만들어지는 컨텍스트가 전역 실행 컨텍스트이고 함수가 실행될 때 만들어지는 함수 실행 컨텍스트가 있다. 전역실행 컨텍스트와 함수 실행 컨텍스트가 다른 점은 전역 실행 컨텍스트가 가장 먼저 실행되고 가장 늦게 종..