[IT 면접대비] 개발자 기술면접 대비 🖥️/ 5️⃣ - 프론트엔드 (1)
브라우저 렌더링 과정을 설명해주세요 브라우저에서 렌더링을 담당하는 렌더링 엔진이 돌아가면서, HTML 파서가 HTML을 파싱하고, DOM 트리를 만듭니다. 동시에 Style Sheets도 CSS 파서에 의해서 CSSOM 트리를 구성합니다. 그 구성된 트리들로 렌더 트리가 만들어지고, 이 트리를 배치하고, 그리게 됩니다. 자바스크립트는, HTML 파서에서 스크립트 태그를 만났을 때, 자바스크립트 런타임으로 제어 권한을 넘기면서 그 실행 결과값을 받게됩니다. * 렌더링 엔진은 대표적으로 웹킷 과 개코 가 있다. 읽어보면 좋은 글 : d2.naver.com/helloworld/59361 * 브라우저 구조 - 사용자 인터페이스 - 브라우저 엔진 - 렌더링 엔진 - JS 런타임 - 기타 (통신담당, 벡엔드, 저장..
2021. 4. 22.
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
2021. 3. 8.
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
2021. 3. 8.
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
2021. 3. 8.
[DB] Hadoop 과 Spark 요약정리 / 3️⃣ - RDD란?
목차 RDD (Resilient Distributed Dataset) Why RDD? 주요 특징 작동방식 RDD 의 생성 RDD 연산 연산 예시 계보 (Lineage) 예시 Lazy Execution 작업 스케쥴링 참고 RDD (Resilient Distributed Dataset) 💡 여러 분산 노드에 걸쳐서 탄력적으로 저장되는 변경이 불가능한 데이터 구조 Spark 의 핵심 데이터 모델 병렬처리 가능 에러 시에도 스스로 복구가 가능 Why RDD? 인메모리 데이터 처리를 위한 데이터 셋 데이터 분산 저장을 위해 데이터에 Fault Tolerance 적용 가능 주요 특징 여러 분산 노드에 나누어짐 매우 효율적인 분산처리 다수의 파티션으로 관리됨 하나의 RDD 는 여러 파티션으로 나뉜다. 파티션의 개수,..
2021. 3. 7.
[DB] Hadoop 과 Spark 요약정리 / 1️⃣ - 하둡(Hadoop), MapReduce
목차 하둡(Hadoop) 하둡이란? MapReduce 왜 Map-Reduce인가?? MapReduce 의 용어 정리 MapReduce 진행과정 MapReduce Architecture HDFS 주요 특징들 아키텍쳐 참고 하둡(Hadoop) 하둡이란? 데이터 병렬분산처리를 위한 오픈소스 프레임워크 장점 오픈소스로 라이선스에 대한 비용 부담이 적음 시스템을 중단하지 않고, 장비의 추가가 용이(Scale Out) 일부 장비에 장애가 발생하더라도 전체 시스템 사용성에 영향이 적음(Fault tolerance) 저렴한 구축 비용과 비용대비 빠른 데이터 처리 오프라인 배치 프로세싱에 최적화 단점 HDFS에 저장된 데이터를 변경 불가 실시간 데이터 분석 같이 신속하게 처리해야 하는 작업에는 부적합 너무 많은 버전과 ..
2021. 3. 7.
[IT 면접대비] 개발자 기술면접 대비 🖥️/ 5️⃣ - 프론트엔드 (1)
브라우저 렌더링 과정을 설명해주세요 브라우저에서 렌더링을 담당하는 렌더링 엔진이 돌아가면서, HTML 파서가 HTML을 파싱하고, DOM 트리를 만듭니다. 동시에 Style Sheets도 CSS 파서에 의해서 CSSOM 트리를 구성합니다. 그 구성된 트리들로 렌더 트리가 만들어지고, 이 트리를 배치하고, 그리게 됩니다. 자바스크립트는, HTML 파서에서 스크립트 태그를 만났을 때, 자바스크립트 런타임으로 제어 권한을 넘기면서 그 실행 결과값을 받게됩니다. * 렌더링 엔진은 대표적으로 웹킷 과 개코 가 있다. 읽어보면 좋은 글 : d2.naver.com/helloworld/59361 * 브라우저 구조 - 사용자 인터페이스 - 브라우저 엔진 - 렌더링 엔진 - JS 런타임 - 기타 (통신담당, 벡엔드, 저장..
[React] Next JS 이미지 최적화, 이미지 컴퍼넌트 / Image Component / Image Optimization
목차 Image Component & Image Optimization Quick look differences Configuration 외부에서 가져오는 이미지인 경우 Loader 설정 Caching 설정 Device Sizes Image Sizes Image Component & Image Optimization 💡 version 10.0.0 부터 이미지 최적화 기능을 사용할 수 있습니다. 대신 next/image 의 모듈을 이용하자! 리사이징, 최적화, 브라우저 호환 등을 지원한다. 최적화는 빌드 타임에 진행되지 않고, on-demand 하게 이루어진다. 즉, 이미지 개수에 따라 빌드 타임이 길어지지 않는다는 뜻이다. Quick look differences Feature Next.js Image ..
[React] Next JS Pre-rendering / Static Generation(getStaticProps ) / SSR(getServerSideProps)
목차 기본 개념 Static Generation Static Generation 은 언제 사용될까? 예시 External Data 가 없는 경우 External Data 가 존재하는 경우 페이지가 External Data에 종속되는 경우 Fallback 기타 Server-side Rendering 예시 참고 ----- 기본 개념 Next JS 는 모든 페이지를 pre-rendering 한다. 즉, Client-side JS 로딩 방식으로 하지 않고 HTML 을 미리 만든다. 성능개선, SEO 최적화 Static Generation 과 Server-side Rendering 방식으로 나뉜다. 성능상의 차이로 인해 Static Generation 방식이 권장된다. 각각의 방식중 하나만 골라야되는 것이 아니라..
[React] Next JS 동적 라우팅 / Dynamic Routing
목차 동적 라우팅 (Dynamic Routing) 일반적인 사용 주의할 점 Multiple segment 기타 사용 예시 Catch all routes Optional 하게 사용하기 동적 라우팅 (Dynamic Routing) 일반적인 사용 pages/post/[id].js ⇒ post/1 로 접근가능 예시 1 import { useRouter } from 'next/router' const Post = () => { const router = useRouter() const { id } = router.query return Post: {id} } export default Post 예시 2 pages/post/[id].js 에 대해 post/abc?test=123 로 접근했을 때 갖는 query ob..
[DB] Hadoop 과 Spark 요약정리 / 3️⃣ - RDD란?
목차 RDD (Resilient Distributed Dataset) Why RDD? 주요 특징 작동방식 RDD 의 생성 RDD 연산 연산 예시 계보 (Lineage) 예시 Lazy Execution 작업 스케쥴링 참고 RDD (Resilient Distributed Dataset) 💡 여러 분산 노드에 걸쳐서 탄력적으로 저장되는 변경이 불가능한 데이터 구조 Spark 의 핵심 데이터 모델 병렬처리 가능 에러 시에도 스스로 복구가 가능 Why RDD? 인메모리 데이터 처리를 위한 데이터 셋 데이터 분산 저장을 위해 데이터에 Fault Tolerance 적용 가능 주요 특징 여러 분산 노드에 나누어짐 매우 효율적인 분산처리 다수의 파티션으로 관리됨 하나의 RDD 는 여러 파티션으로 나뉜다. 파티션의 개수,..
[DB] Hadoop 과 Spark 요약정리 / 1️⃣ - 하둡(Hadoop), MapReduce
목차 하둡(Hadoop) 하둡이란? MapReduce 왜 Map-Reduce인가?? MapReduce 의 용어 정리 MapReduce 진행과정 MapReduce Architecture HDFS 주요 특징들 아키텍쳐 참고 하둡(Hadoop) 하둡이란? 데이터 병렬분산처리를 위한 오픈소스 프레임워크 장점 오픈소스로 라이선스에 대한 비용 부담이 적음 시스템을 중단하지 않고, 장비의 추가가 용이(Scale Out) 일부 장비에 장애가 발생하더라도 전체 시스템 사용성에 영향이 적음(Fault tolerance) 저렴한 구축 비용과 비용대비 빠른 데이터 처리 오프라인 배치 프로세싱에 최적화 단점 HDFS에 저장된 데이터를 변경 불가 실시간 데이터 분석 같이 신속하게 처리해야 하는 작업에는 부적합 너무 많은 버전과 ..