구버전/CS Study
-
[CS Study] 동기, 비동기처리구버전/CS Study 2023. 12. 15. 21:46
개요 Javascript의 동작 방식 동기, 비동기 방식 Javascript의 비동기처리 Javascript 동작 방식 Javascript는 함수를 호출했을 때 어떤 동작을 실행하는지 알아보자! Javascript엔진은 단 하나의 실행 컨텍스트 스택을 갖는다.(한 번에 하나의 함수만 실행 가능, 싱글 스레드 방식) 자바스크립트 엔진이 함수 코드를 평가하고 함수 실행 컨텍스트를 생성한다. 생성된 실행 컨텍스트는 실행 컨텍스트 스택(Callstack)에 push되고 함수 코드가 실행된다. 실행이 종료되면 함수 실행 컨텍스트가 컨텍스트 스택(Callstack)에서 pop으로 제거된다. 이러한 자바스크립트 엔진이 시간이 걸리는 작업을 마주하게 되면 블로킹(작업 중단)이 발생한다. 테스크 큐와 이벤트 루프 싱글 ..
-
[CS Study] Compile, Transpile, Interpreter, Bundler구버전/CS Study 2023. 12. 4. 12:04
개요 Compile Transpile Interperter Bundler 컴파일 (Compile) 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것 Java => bytecode, C => assembly 고수준의 언어를 바이트 단위의 기계어로 변환하는 것 뿐만 아니라 한 언어로 작성된 코드를 다른 언어로 옮기는 일 자체를 통칭한다 트랜스파일 (Transpile) 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것 ES6 => ES5, C++ => C, coffescript => javascript Javascript transpiler : Babel, Typescripte Compiler, ESBuild VS Compile) 컴파일이 좀 더 큰 범주이고 그 안에 트..
-
[CS study] TDD의 중요성구버전/CS Study 2023. 11. 30. 10:07
개요 TDD란? 왜 TDD를 할까? 테스트 종류 Jest사용해보기 TDD(Test Driven Development) 작성하고자 하는 코드가 어떤 일을 할 것인지를 묘사하고 동작을 검증할 때 테스트 코드를 먼저 작성하고 빠르게 테스트를 진행하며 개발하는 방법 순서) 요구사항 분석 및 이해 => 설계 => 테스트 코드 작성 요구사항 분석에 집중하여 목적을 명확하게 파악하게 됨 사용하기 좋은 상황) 요구사항이 명확할 때 비즈니스 로직 협업 시 문서(명세서) 역할 코드리뷰 Why? 코드의 퀄리티 상승 및 비용절감 코드의 결함을 개발 주기의 초기에 발견하는데 도움이 되어 후에 수정하는데 있어 드는 비용을 줄일 수 있다. 요구사항에 충족하는 코드인지 재확인이 가능하다. 빠른 피드백으로 코드의 퀄리티를 상승시킬 수..
-
[모각CS] DOM과 가상DOM구버전/CS Study 2023. 11. 21. 16:52
개요 브라우저의 동작 Virtual DOM React에서의 동작 브라우저의 동작 브라우저의 동작은 VirtualDOM의 등장과 등장 이전의 RealDOM만의 한계점을 설명해주는 부분으로써 동작형태와 이점을 좀 더 이해하기 쉽게 해주기에 기억하면 좋음 브라우저의 랜더링 과정) DOM tree 생성 브라우저의 렌더 엔진이 HTML을 파싱하여 DOM노드로 이루어진 트리를 생성한다. render tree 생성 CSS 파일과 inline 스타일을 파싱하여 CSSOM을 생성 CSSOM과 렌더 엔진에 의해 만들어진 DOM을 합쳐 render tree를 생성 문서의 시각적인 구조를 나타낸다 Layout viewport에서 생성된 render tree의 각 노드가 스크린상에 어느 공간에 위치할지 결정 position, ..