전체 글
-
-
-
HTML 파싱과 렌더링Front-end 2022. 7. 3. 20:13
Parse 파싱이란 프로그램이 런타임 환경에서 실제로 실행될 수 있는 포맷으로 분석하고 변환하는 것입니다. 브라우저 내부의 자바스크립트 엔진이 이에 해당합니다. 브라우저는 HTML을 DOM tree로 파싱합니다. HTML 파싱은 tokenization과 트리 구조를 포함합니다. HTML 토큰은 names, values와 같은 태그들을 포함합니다. HTML parser가 이미지 같은 non-blocking 요소들을 발견하게 되면 브라우저는 이 자원들을 요청하고 파싱을 멈추지 않고 진행합니다. CSS파일을 만나도 멈추지않고 파싱이 계속되지만, 태그를 만나게 되면 렌더링이 멈추고 HTML 파싱이 중단됩니다. 스크립트가 다운로드 되고 실행되기 전까지 HTML 파싱이 중단되는 이유는 DOM 을 조작하는 API 를..
-
[LeetCode] rotate-image (medium / javascript)개발/알고리즘 2022. 6. 30. 12:50
/** * @param {number[][]} matrix * @return {void} Do not return anything, modify matrix in-place instead. */ const rotate = function(matrix) { let answer = []; const n = matrix.length - 1; let l = 0; while (l -1; i--) { inner.push(matrix[i][l]); } matrix.push(inner); l++ } for(i=0; i
-
깃허브 액션개발 2022. 6. 30. 00:11
Github Actions github 내의 이벤트가 발생하면 어떤 동작을 실행하게 되는 도구입니다. Events, Workflows, Jobs, Acitons, Runners Using Events to trigger workflows 워크플로우에 트리거를 발생시킬 이벤트를 명시하기 위해 on 키워드를 사용합니다. 사용 가능한 이벤트들은 fork, push, pull_request 등이 있으며 더 많은 이벤트들을 공식문서에서 확인할 수 있습니다. 기본적인 사용 방법은 on : push 처럼 한가지의 이벤트를 감지해서 workflow를 동작하게 하는 것 입니다. 아무 브랜치에 Push 가 발생할때마다 실행됩니다. 두가지 이상의 이벤트를 감지할 수도 있습니다. on : [push, fork] 더 자세한 사..
-
자바스크립트의 메모리 관리Front-end/Javascript 2022. 6. 29. 19:38
메모리란? 하드웨어에서 메모리는 다수의 flip flop으로 구성되어 있습니다. 각각의 flip flop은 unique identifeier를 통해 위치를 알 수있기 때문에 읽거나 쓰는것이 가능해집니다. - text영역이 코드가 들어가는 영역입니다. 컴파일이 끝난 기계어가 들어갑니다. 프로세스가 종료될때까지 계속 유지됩니다. - data영역은 전역 변수, 정적변수, 배열 등이 저장되어 프로그램이 끝날때까지 존재합니다. * initialized data (data) - 런타임 이전에 초기화 * unitialize data (bss) - 런타임 이후 초기화 - heap 영역은 프로그래머가 동적으로 사용하는 영역입니다. 런타임시 크기가결정됩니다. - stack 영역은 지역변수, 매개변수들이 저장되고 함수 호출..
-
[React] useMemo와 useCallbackFront-end/React 2022. 6. 28. 23:55
Memoization 이란? Memoization이란 동일한 입력이 들어와서 기존에 수행된 연산이 반복될때, 중복된 결과를 저장하고 캐시된 결과를 반환하는 프로그래밍 최적화 기법입니다. 중복 연산을 피하여 성능을 최적화 할수있습니다. Hooks는 리액트 16.8 버전에서 새로 추가된 기능입니다. Hooks는 함수 컴포넌트에서도 리액트의 상태와 라이프사이클 특징들을 사용할수 있게 해줍니다. useMemo - useMemo를 사용하지 않았을때 각 렌더링마다 새 배열이 선언되기 때문에 자바스크립트는 filterItems에 어떤 변화가 있다고 추측합니다. 따라서, 각 렌더링 과정마다 console.log('render')가 invoke ( 간접호출 : 어딘가에 레퍼런스를 유지한 다음 호출) 됩니다. 이러한 불필..
-
SSR과 CSRFront-end 2022. 6. 27. 14:06
SSR : 서버에서 필요한 HTML 파일을 만들어 브라우저에 보내는 방식 서버로부터 완성된 페이지를 받아 화면에 렌더링하는 방식이다. 렌더링 된 페이지를 받아야 하기 때문에 페이지 이동시 깜빡거리는 현상이 발생한다. 하지만 SEO 에 용이하고서 서버에서 필요한 만큼만의 자원을 받기 때문에 네트워크가 느리거나 서버 상태가 좋지 않을 경우 장점을 발휘합니다. CSR : 서버에서 내용이 비어있고 JS 가 링크된 HTML 파일을 클라이언트에 보내는 방식 웹사이트에 필요한 모든 데이터를 초기 접속시 한번에 다운로드 받은 뒤 , 그 이후에 필요한 데이터는 서버로 요청하여 클라이언트에서 모든 렌더링을 제어하는 방식이다. 초기 렌더링 속도는 느리지만 이후에는 빠른 렌더링이 가능하다. 초기 페이지 HTML 바디는 비어져..