뽀미의 개발노트

Chromium이란? 오픈소스 웹브라우저 프로젝트이다. 크로미엄을 기반으로 한 브라우저는 아주 다양하다. 우리가 써본 것 기준으로 구글 크롬, 마이크로소프트 엣지, 네이버 웨일, ToGate 등이 있다. V8이란? 웹 브라우저를 만드는데 기반을 제공하는 오픈소스 자바스크립트 엔진. 자바스크립트를 bytecode로 컴파일하고 실행한다. 즉 자바스크립트 코드를 마이크로프로세서(컴퓨터 안에 있는 CPU의 핵심 기능을 통합한 집적 회로(IC))가 이해할 수 있게 기계어(머신코드)로 변환해서 실행하는 프로그램이다. 다른 자바스크립트 엔진들은 인터프리터 방식을 사용하지만 v8엔진은 JIT(Just In Time) 컴파일러를 구현한다. 크롬, 마이크로소프트 엣지, ToGate 등의 크로뮴 기반 브라우저와 Electr..

Javascript + Type 문법. 자바스크립트 업그레이드 버전!! 크기가 큰 프로젝트를 하는 곳에서는 거의다 typescript를 씀. 자바스크립트는 dynamic typing이 가능해서 편리하지만 자유도가 높고 유연성이 높은것은 오히려 별로이다. 그러나 타입스크립트는 타입을 엄격하게 짚어주고 에러메시지의 퀄리티가 높다. 타입스크립트는 새로운 언어라기보다는 자바스크립트와 문법이 아주 유사한 코드 에디터 부가기능 역할로 봐도 무방함. 근데 브라우저는 무조건 자바스크립트 파일만 읽을 수 있음. .ts로 만들어진 파일은 브라우저가 읽을 수 없기 때문에 ts 파일을 js로 변환해야 사용 가능하다. 이건 터미널 켜서 tsc -w입력해두면 js로 자동변환되서 브라우저가 읽을 수 있다. typescript를 j..

상태 관리 라이브러리. 상태 관리 라이브러리로는 Redux도 있지만 우리는 MobX를 사용한다. MobX는 Redux와 달리 코드를 깔끔하게 쓸수 있고 oop기반으로 되어있다. 한 컴포넌트에서 state(변수)를 만들고, 다른 컴포넌트에서 저 변수를 갖다가 쓰려면 props 문법을 써야함. 두 컴포넌트가 중간 단계가 여러개면은 그 갯수만큼 props를 써줘야함! 그럼 컴포넌트가 100개쯤 중첩되어 있으면 state를 전해주기 위해서 props를 엄청 많이 써야하는것!! 그럴때 MobX같은 상태 관리 라이브러리를 설치해서 편하게 쓸수 있음. MobX를 깔면 state를 저장하는 store를 따로 만들 수 있음. 그래서 state(변수)를 거기 저장하면 모든 컴포넌트들이 store에서 그 state를 직접 ..

브라우저는 HTML, CSS, javascript로 작성된 텍스트 문서를 어떻게 파싱(해성)하여 브라우저에 렌더링 할까?? 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더 트리를 형성한다. 트리라고 부르는 이유는 body안에 div, 그 안에 img 이런 식으로 뿌리에서 가지를 내리는 형식으로 이루어져 있으니까!! 즉 브라우저의 요청에 의해 서버가 응답은 HTML문서는 문자열로 이루어진 순수한 텍스트라서, 이걸 브라우저에 시각적인 픽셀로 렌더링하려면 그 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 생성하는 것이다. HTML 문서는 렌더링 엔진에 의해 파싱되어 DOM을 구성..

node.js 깔고 git 깔고 user.name, user.email 설정하고 깃랩에서 깃클론 받아서 npm run serve 만 하면 그렇게나 javascript heap out of memory 오류가 나는것.... 페이지가 켜지지 않고 뭐가 안된다고.. 뭐 방화벽인가 그런거 확인하라고만 계속 떴다. https://velog.io/@server30sopt/heap-out-of-memory-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EA%B3%BC-%EB%A9%94%EB%AA%A8%EB%A6%AC-%EB%88%84%EC%88%98-%EA%B2%80%EC%82%AC heap out of memory 에러 해결과 메모리 누수 검사 작성자: 추서연 작성자의 한마디: "가장 좋은 방..

바로 node.js를 설치해도 되지만 왜인지 계속 오류가 났다. 그래서 node.js 버전 관리 도구인 NVM을 먼저 설치하고 node.js를 설치했다. nvm을 사용하면 node.js를 여러 버전을 설치하고 관리할 수 있다고 한다. 상황에 따라 버전을 바꿔가며 사용 가능하다. 설치가 완료된 후 .bashrc를 로딩해야 nvm 사용 가능하다. source ~/.bashrc ~/.bashrc는 유저가 로그인할때 읽어들이는 파일이라 로그아웃 후 로그인하거나 리눅스를 재시작해야 적용되는거라 수정후 저장해도 그 내용이 바로 적용되지 않는다. 그래서 source 명령어를 사용하여 스크립트 파일을 수정하고 그 값을 바로 적용하는 것이다. https://firework-ham.tistory.com/35 [CentOS..

[문제] A, B 두 개의 집합이 주어지면 두 집합의 공통 원소를 추출하여 오름차순으로 출력하는 프로그램을 작성하세요. [입력] 첫 번째 줄에 집합 A의 크기 N(1

[문제] 오름차순으로 정렬이 된 두 배열이 주어지면 두 배열을 오름차순으로 합쳐 출력하는 프로그램을 작성하세요. [입력] 첫 번째 줄에 첫 번째 배열의 크기 N(1

[문제] 선생님이 N명의 학생을 일렬로 세웠습니다. 일렬로 서 있는 학생의 키가 앞에서부터 순서대로 주어질 때, 맨 앞에 서 있는 선생님이 볼 수 있는 학생의 수를 구하는 프로그램을 작성하세요. (앞에 서 있는 사람들보다 크면 보이고, 작거나 같으면 보이지 않습니다.) [입력] 첫 줄에 정수 N(5

[문제] N개의 정수를 입력받아, 자신의 바로 앞 수보다 큰 수만 출력하는 프로그램을 작성하세요. (첫 번째 수는 무조건 출력한다) [입력] 첫 줄에 자연수 N(1