본문 바로가기

전체 글

 (121)
React | 리액트 프로젝트의 기본 실행구조 분석 드디어 리액트 라이브러리를 익힐 때가 왔다! 처음 리액트를 구동시켜보고, 파일을 이리저리 훑어보는데 동작 원리가 궁금해졌다. 그래서 잠깐 리액트의 기본적인 실행구조를 파보는 시간을 가져보았다. 우선 리액트를 설치하면 다음과 같은 디렉토리와 파일들이 생성된다. package.json 파일을 보니, 루트 디렉토리 가서 npm start 해보면 react가 실행될 것 같다. 그렇게 했더니 App.js 파일이 다음과 같이 성공적으로 실행이 됨을 확인할 수 있다. 자바스크립트 파일이 어떻게 와 같이 JS 파일을 로드하는 문장이 보이지 않는다. 그럼 대체 어떻게 App.js의 변화가 index.html에 반영되고 렌더링될 수 있는거란 말인가?? 일단 리액트를 띄운 화면의 개발자 도구>Network 탭을 보면, 보이..
JavaScript | 비동기 처리 | async & await 키워드 비동기 처리 발전과정 요약 현대의 프론트엔드 개발에서 비동기 프로그래밍은 필수적이다. 서비스는 사용자의 요청에 신속하게 응답하고, 동시에 백그라운드에서 데이터를 로드하고 처리하는 등의 복잡한 작업을 수행해야 하기 때문이다. 초기의 자바스크립트에서는 이러한 비동기 작업을 주로 콜백 함수를 통해 처리했다. 그러나 서비스의 규모가 커지고 로직이 복잡할수록 콜백 지옥이라는 부작용이 발생했으며, 이는 가독성 저하와 유지 보수 난이도 상승으로 이어졌다. 이러한 문제를 해결하기 위해 ES6(ECMAscript 2015)에서 Promise가 도입되었다. Promise를 통해 비동기 작업 완료 실행될 작업을 연기하는 것이 수월해졌고(Promise 객체 리턴값을 변수에 담은 후에 나중에 활용하는 식으로), 또한 체이닝을 ..
JavaScript | 비동기 처리 | Promise 객체 동기 처리, 비동기 처리 자바스크립트는 기본적으로 싱글 스레드 언어이다. 따라서 하나의 작업 흐름을 따라 처리한다. 그러므로 이전 작업이 진행 중이라면, 다음 작업을 수행하지 않고 기다린다. 이를 동기적 방식, 혹은 blocking 방식 이라고 부른다. 이렇게 했을 때의 문제점이 있는데, 바로 실행 시간이 긴 하나의 함수를 뒤의 함수가 계속해서 기다리는 경우가 생긴다는 것이다. CPU 스케줄링에서 FIFO 방식의 부작용을 그대로 상상하면 된다. 사용자 경험을 위한 언어인 자바스크립트 특성상 이는 치명적인 단점이다. 따라서 비동기적 방식, Non-blocking 방식이 도입되었다. 싱글 스레드이지만 마치 병렬처리를 하는듯한 착시를 일으키자는 것! 비동기식 프로그래밍에서는 특정 작업이 백그라운드에서 실행되며..
JavaScript | V8 엔진과 런타임 환경의 기본 개념 자바스크립트 런타임 환경 자바스크립트 런타임 환경은 자바스크립트 코드가 실행되는 환경을 말하며, 크게 1) 브라우저와 2) 브라우저 밖(Node.js) 으로 구분할 수 있다. 본래 브라우저가 자바스크립트의 고향이고, Node.js 덕에 브라우저 밖에서도 자바스크립트를 구동할 수 있게 되었다. 1. 웹 브라우저 웹 브라우저는 자바스크립트의 가장 전통적인 런타임 환경이다. 여기서 자바스크립트의 목적은 HTML과 CSS로 된 정적인 웹 페이지를 동적 웹 페이지로 조작할 수 있도록 하는 것이다. (대표적으로 이벤트 처리, 실시간 화면 전환, 시각 효과 등) 이를 위해 브라우저 내에는 자바스크립트 코드를 파싱하는 자바스크립트 엔진이 내장되었는데, 이 엔진은 파싱 외에도 DOM API, 이벤트 핸들링, AJAX 통..
Web API 이해하기 (BOM, DOM) Web API 브라우저는 WEB API (= DOM + BOM)을 제공한다. 이는 자바스크립트 자체의 기능이나 문법이 아니라, 프로그래밍 언어로 웹페이지를 조작할 수 있도록 브라우저에서 제공하는 기능이다. BOM (Browser Object Model) BOM(Browser Object Model): 브라우저 자체를 다루기 위한 API 잘 보면 WEB API의 모든 것들이 window라는 객체의 하위 집합임을 확인할 수 있다. window 객체는 다양한 객체를 포함하고 있다. window.location window.navigator window.screen window.history .. 등 이 window 객체들의 집합을 BOM(Browser Object Model) 이라고 한다. 이들은 다양한 기능..
Week 10~11. PintOS 프로젝트 회고 오늘로써 크래프톤 정글에서의 핀토스 과정이 마무리됐다. 👏👏 프로젝트 중에 VM이 가장 어렵다고 정평이 나있었는데, 역시나 가장 어려웠다.. ㅋㅋㅋ 개인적으로 코로나에 걸려 공백이 좀 있었고, 그 체력과 멘탈에서의 후유증이 3번째 프로젝트까지 넘어와 좀 힘들었던 것 같다. 마치 배터리가 금방 방전되는 것 같은 기분..? 그래도 막판에는 다시 몰입할 정도로 회복되어서 다행이었다. 핀토스 과정에서 많은 것을 얻었다. 아쉬움이 일절 없다면 거짓말이지만, 그래도 이전의 나에 비하면 프로그램을 대하는 태도가 많이 달라졌다고 느낀다. 가장 큰 건 두려움이 한 층 걷힌 것 같다. 또한 주변에서 잘 해내는 친구들을 보면서 앞으로 나는 어떻게 프로그래밍을 해야 하는가에 대해서도 많이 생각해볼 수 있었다. 이 기억과 감흥..
PintOS | Project3. Virtual Memory | 트러블 모음 2 Stack growth 트러블 모음 pt-write-code2 테스트 케이스 pt-write-code2 테스트는 잘못된 영역(코드 세그먼트)에 read() 시도를 하는 테스트이다. 메모리 관점에서 보면 read() 시스템콜은 파일의 데이터를 읽어서 메모리의 버퍼에 쓰는 작업을 포함한다. 그러나 현재는 코드 세그먼트는 not writable 해야 하는데, read()가 되고 있는 상황, 즉 not writable한 페이지에 write가 되는 상황이다. 문제상황을 실제 파일에서 확인해보았다. pt-write-code2 테스트 코드는 다음과 같으며, void test_main (void) { int handle; CHECK ((handle = open ("sample.txt")) > 1, "open \\"sa..
PintOS | Project3. Virtual Memory | 트러블 모음 1 Anonymous Page 1. Lazy Loading - thread_current()에서 터지는 문제 spt_insert_page 에서 문제를 발견할 수 있었다. hash_insert()는 첫번째 인자로 hash 구조체를 받아야 하는데, spt를 줬다. &spt 를 &spt->spt_pages 로 바꿔주니 문제 해결 2. Page fault 핸들링 때, spt에서 페이지를 찾지 못하는 문제 exit(-33)을 어디에 넣어놨냐면 .. 뭐가 문제였을까?? 애초에 page를 spt에 제대로 넣어주지 못했거나, 제대로 넣어줬으나 탐색 과정상의 문제로 찾지 못하는 상황인 듯 하다. 여기서 출발하여 원인을 탐색하다보니 다음과 같은 문제점을 발견할 수 있었다. vm_stack_growth(), setup_stac..

티스토리툴바