LeeHyojin Blog LeeHyojin Blog

블로그 이전 중입니다! 🔥

❗️그래프의 방향 VS 무방향 / 트리의 종류들을 나누어서 설명하지는 않습니다. 각각의 자세한 설명은 여기에서 각각 확인하실 수 있습니다. 위의 그림을 통해 그래프와 트리가 어떻게 생겼는지 눈으로 먼저 익혀보고, 쉽게 받아들이고 공감할 수 있도록 우리의 실생활에서 어떤 경우와 관련이 있는지 그림과 함께 연관 지어 설명해 보도록 하겠습니다. 먼저, 그림 그대로를 설명해 보면 트리는 방향(화살표)이 있고, 그래프는 방향(화살표)이 없이 선으로만 이어져 있는 것을 볼 수 있습니다. 방향이 있는 것으로 보아 트리는 계층형 모델이라는 것을 알 수 있을 것이고, 그래프는 양방향이라는 것을 알 수 있을 것이고 트리는 동그라미와 동그라미 사이에 반드시 1개의 경로만 가지고 있지만 그래프는 화살표가 따로 없는 것으로 보..

Q: JS에서의 비동기처리의 작동 원리를 알고있나? A JS의 런타임에 메모리 할당을 담당하는 메모리 힙과 코드가 호출될 때 스택으로 쌓이는 콜스택이 있고, 콜스택은 후입선출 방식으로 실행됩니다. JS 작동 원리에서 비동기 함수일 경우를 설명해보자면 SetTimeOut이라는 함수가 콜백함수를 가지고 호출되어 콜스택에 쌓이면 이 함수는 Web API를 호출하는 함수라서 얘가 실행되는 순간 Web API의 타이머를 호출합니다. 그 후, 타이머가 SetTimeOut의 콜백함수를 가지고 Web API에 등록을 하고 콜스택에 있는 SetTimeOut 함수는 어찌됐든 실행완료가 되었기 때문에 콜스택에서 빠져나갑니다. 이어서 다음 줄의 코드들을 콜스택에 넣고 할일을 이어서 합니다. 그리고 타이머가 가지고 있는 콜백함..

Q: CSR, SSR 무엇인가? A 🖥 CSR 사용자가 Website 요청을 보내면 CDN이 HTML파일이랑 JS로 접근할 수 있는 링크를 클라이언트로 보내고 클라이언트는 이 파일들을 받아서 실행하고 데이터를 위한 API가 호출됩니다. 서버사이드렌더링 때와는 다르게 클라이언트가 파일들을 받아서 실행하는 그 사이에 사용자는 아무것도 볼 수가 없고, 데이터를 위한 API가 호출 됐을 때는 placeholder 의 정보들이 보입니다. 서버가 API로부터 요청에 응답하고 API로부터 받아온 data를 placeholder자리에 넣음으로써 상호작용이 시작됩니다. [ 서버에서 처리 없이 클라이언트로 보내주기 때문에 자바스립트가 모두 다운로드 되고 실행이 끝나기 전까지 사용자는 볼 수 있는게 없습니다 ] 💾 SSR ..

Q: OOP 특징에 대한 설명이 가능한가? A OOP란 Object Oriented Programming으로 객체지향 프로그래밍이라고 하며, 4가지의 특징이 있습니다. 상속은 클래스 개념에서 부모 클래스로부터 자식 클래스가 유산을 물려받는것과 같이 부모의 메소드나 변수를 사용할 수 있는 것을 말하고, 다형성은 같은 함수가 있다고 가정하면 그 함수가 매개변수에 따라 다른 역할을 할 수 도 있는 것이고, 캡슐화는 보통 데이터를 은닉 시킨다고 표현하는데, 외부에서 쉽게 데이터를 접근할 수 없게 만들기도 하고, 데이터 구조와 데이터를 다루는 방법들을 한곳에 묶는 것을 말합니다. 추상화는 공통적인 속성이나 기능을 묶어서 이름을 붙이는 것입니다. [ 예: a,b,c가 있다면 이것은 영어로 묶을 수 있습니다 ] Q:..

Q: 클로저가 무엇이며 장단점은 무엇인가? A A라는 함수가 있고 B라는 함수가 있다고 가정하고 A함수는 B함수 자체를 값으로 넘김으로써 B함수를 참조하는 함수 객체 자체를 반환합니다. B함수는 함수가 선언된 Lexical Environment 밖에서 실행 됐고 B함수가 선언된 위치 때문에 A함수의 Environment에 대한 Lexical Environment 클로저를 가지고, A함수는 B함수가 나중에도 참조할 수 있도록 Environment를 살려두어서 B함수가 계속 참조를 가지게 되는데 이 참조를 클로저라고 부릅니다. 예를들어 A를 실행하여 변수 C에 할당했는데 다른 코드를 실행하다가 어느 순간 C를 또 실행해야 하면 A는 B가 리턴되려면 C를 실행해야하기 때문에 GC에 의해 사라지면 안되는 것입니..

Q: 애니메이션의 최적화와 Reflow / Repaint 개선 방법은? A 먼저, 컨텍스트 관점에서의 최적화는 CSS 애니메이션 중에 Transform과 Opacity와 같은 속성 변경은 컴포지터 스레드에서 처리되어서 메인 스레드와 병렬 처리가 가능하지만, JS 애니메이션은 항상 메인 스레드에서 처리되기 때문에 블로킹이 발생할 수 있습니다. 따라서, JS에서 처리되고 있는 애니메이션 중 CSS로 처리가 가능한 애니메이션을 CSS에서 처리함으로써 성능 개선이 될 수 있습니다. 리플로우 개선으로는 애니메이션이 들어간 요소의 Position은 Fixed나 absolute로 지정한다거나, 인라인 스타일을 최소화시키고 ClassName의 변화에 따라 스타일이 변경될 경우 Reflow를 완전히 피할 수는 없지만 D..

Q: Execution Context은 왜 필요한가? A: 코드가 실행되는 환경이자 실행 가능한 코드가 되기 위해서 필요한 환경입니다. 실행 컨텍스트(Execution Context)는 함수를 호출했을 때 생성됩니다. JS엔진은 코드를 실행하기 위해서 실행에 필요한 여러가지 정보를 알고 있어야 하는데 실행 컨텍스트가 활성화 될 때, JS엔진은 해당 컨텍스트의 코드를 실행하는데 필요한 환경 정보들을 수집에서 실행 컨텍스트에 저장합니다. 제가 생각하기에 실행 컨텍스트로 인해 얻을 수 있는 장점(필요성)을 몇가지 정리해보았습니다. 전체 코드의 환경과 순서를 보장하기 위해 필요합니다. 코드가 여러번 실행되어도 정보들을 저장해둔 덕분에 동일한 환경을 구성할 수 있습니다. 선언에 의해 생선된 모든 식별자들의 변화들..