분류 전체보기

리액트의 렌더링부라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다. 사용자가 보게되는 결과물을 만드는 작업이기 때문에 중요한 과정이며 렌더링 방식이 성능에 큰 영향을 주게된다. 리액트의 렌더링이란리액트에서의 렌더링은 브라우저 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이는 모든 컴포넌트들이 갖는 props와 state의 값을 기반으로 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정이다.해당 컴포넌트가 props와 state 같은 상태값을 갖고 있지 않다면 반환하는 JSX 값에 기반해 렌더링이 일어나게 된다.  리액트 렌더링 트리거리액트에서 렌더링이 발생하는 시나리오는 다음과 같다.최초 렌더링: 사용자가 처음 애플리케이션에 진입한 경우클래..

문제https://school.programmers.co.kr/learn/courses/30/lessons/43105?language=javascript 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr  풀이처음 이 문제를 DFS 방식으로 풀이를 진행해 봤지만 시간 초과에러가 발생했다. 삼각형의 높이 즉, 주어지는 2차원 배열의 길이는 1~500 이였고 이는 1개씩 증가하는 수의 개수로 인해 경우의 수가 많아진다. 시간 복잡도로 인해 발생한 시간 초과 에러를 해결하기 위해서는 DP과 메모이제이션 알고리즘을 사용하기로 했다.triangle 2중 배열을 메모이제이..

Ajax란Ajax는 JS를 사용해 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 웹 페이지에 동적으로 갱신하는 프로그래밍 방식을 말한다. 브라우저에서 제공하는 XMLHttpRequest 객체를 기반으로 동작하며 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. 이전의 웹페이지는 HTML 태그로 시작해 HTML 태그로 끝나는 완전한 HTML 파일을 서버로부터 전송받아 웹페이지 전체를 렌더링했다. 즉, 화면이 전환될때 마다 새로운 HTML을 전송 받아 전체를 리렌더링했다. 이러한 방식은 다음과 같은 단점이 있다.변경이 필요하지 않은 부분까지 포함된 완전한 HTML을 서버로부터 매번 다시 받아야함변경이 필요하지 않는 부분까지 리렌더링하며, 화면이 깜빡이는 현상이 발생한..

문제https://www.acmicpc.net/problem/2606 풀이해당 문제는 DFS와 BFS 풀이 모두 가능한 문제이다. 간단한 문제이기 때문에 DFS와 BFS를 다시 연습하기 위해 풀이했다.  BFS 코드const input = require('fs') .readFileSync(process.platform === 'linux' ? '/dev/stdin' : __dirname + '/example.txt') .toString().trim().split('\n');const n = +input.shift();const linked = +input.shift();const arr = input.map(e => e.split(' ').map(Number));const map = {};const ..

문제https://school.programmers.co.kr/learn/courses/30/lessons/340211 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr  풀이이 문제의 경우 각 로봇이 움직이는 시간별로 위치를 객체에 담아 중복되는 경우를 탐지해야한다. 코드function solution(points, routes) { let answer = 0; const map = new Map(); const pos = []; points.forEach(([y, x], i) => { map.set(i + 1, [y, x]); }); routes.forEach((e) => { le..

함수 컴포넌트는 리액트 0.14 버전부터 만들어진 꽤 역사가 싶은 컴포넌트 선언 방식이다.var Aquarium = (props) -> { var fish = getFish(props.species) return {fish}}var Aquarium = ({species}) => {getFish(species)} 이때 당시의 함수 컴포넌트는 클래스 컴포넌트에서 생명주기 메서드나 상태가 필요없이 render만 하는 경우에만 제한적으로 사용됐다. 하지만 함수형 컴포넌트에 Hook이 등장하며 복잡한 클래스 컴포넌트보다 함수 컴포넌트를 더 많이 쓰기 시작했다.  클래스 컴포넌트기존 리액트 16.8 미만으로 작성된 코드에는 클래스 컴포넌트가 대다수일 것이다.var Aquarium = (props) -> { v..