2024/05 3

React - 리엑트의 랜더링 과정

렌더링 - 컴포넌트에게 현재 Props와 State에 기반하여 UI에서 어떻게 보여지고 싶은지 알려달라고 요청하는 과정이다. 크게 3개의 단계로 나뉜다.렌더링 트리거 (손님의 주문을 주방으로 전달)컴포넌트 렌더링 (주방에서 주문 준비하기)DOM에 커밋 (테이블에 주문한 요리 내놓기) 1단계: 렌더링 트리거컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다.1) 컴포넌트의 초기 렌더링인 경우 2) 컴포넌트의 state가 업데이트된 경우 초기 렌더링  앱을 시작할 때 초기 렌더링을 트리거해야 한다, 대상 DOM 노드와 함께 createRoot를 호출한 다음 해당 컴포넌트로 render 메서드를 호출하면 이 작업이 완료된다.import Image from './Image.js';import { create..

React 2024.05.11

JavaScript(JS) 자바스크립트 동작원리

자바스크립트는 싱글스레드 언어이다 즉 몸통이 하나이기 때문에 한번에 한개 밖에 하지 못하고 그게 끝나고 다음 동작을할수 있다는것이다.따라서 여러개의 작업을 하는데 문제가 있어서 우린 비동기를 쓰는것이다.비동기가 병렬적이라고 해서 자바스크립트가 병렬적으로 작업을 하는게 아니라 큐에 쌓아두고 끝나면 기다렸다가 실행을 하는 것이다. 자바스크립트는 언어이기 때문에 동작을 하려면 실행 시켜줄 엔진이 필요하다. 대표적인 엔진으로는 V8엔진(Chrome, Node.js에서 사용)이 있으며, 이외에도 각 브라우저 별로 여러가지 엔진들이 존재한다. 자바스크립트 엔진은 크게 Memory Heap과 Call Stack으로 이루어져 있습니다.함수를 실행하면 아래와 같은 Call Stack이 차례대로 생기게 된다. 비동기같은 ..

JavaScript 2024.05.11

[코테] 프로그래머스 해시 알고리즘 - 베스트앨범 (문제풀이)

문제설명)스트리밍 사이트에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다. 노래의 장르를 나타내는 문자열 배열 genres와 노래별 재생 횟수를 나타내는 정수 배열 plays가 주어질 때, 베스트 앨범에 들어갈 노래의 고유 번호를 순서대로 return 하도록 solution 함수를 완성하세요.  문제풀이)항상 그렇듯이 맵을 생성해서 장르를 저장한다. 하지만 이번엔 총 카운트가 필요해서 두개를 생성해서 담았다.그다음에 총 카운트를 해서 제일 많은 카운트의 장르순으로 정렬을 한다 .정렬을 한 다음 다시 순서대로 담으면 완성function solution(genres, plays) { var answer = []; const genreMap = new Map();..

코딩테스트 2024.05.03
반응형