min

오늘은 virtual dom에 대해서 알아볼려고 한다. 정확히 말하자면 "버츄얼 돔과 리얼 돔의 차이를 설명해주세요"라는 질문에 답을 하려고 한다. 1. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요 버츄얼 돔의 경우에는 리엑트에서 제공하는 매커니즘으로 기존의 돔처럼 변화가 일어나는 즉시 dom을 업데이트 하는 매커니즘이 아니라 기존의 dom과 버츄얼 돔과의 차이점을 분석하고 이 차이점에 기반해서 바뀌는 부분들에 대해서만 업데이트를 하는 매커니즘이다. 이 매커니즘의 장점으로는 불필요한 dom의 업데이트가 일어나지 않기 때문에 성능적인 면에서 굉장히 빠르고 부드럽다는 장점이 있다. https://minprogramming.tistory.com/entry/리엑트를-다루는-기술-1강 리엑트 렌더링 과정에 대하여...

오늘은 전역상태관리에 대해서 알아볼려고 한다. 정확하게 말하자마녀 Redux를 제외한 다른 상태관리 툴에 대해서 설명하려고 한다. 1. redux말고 다른 상태관리 툴은 무엇이 있으며 어떤 차이점이 있는가? 1-1) redux를 제외한 나머지 툴로 대표적인 예시는 context api가 있습니다. 1-2) context api와 redux의 차이점으로는 성능 이슈와 관련이 깊습니다. redux의 경우에는 전역적으로 상태를 관리하고 이에 대해서 필요한 부분들에서만 렌더링이 이루어집니다. 반면 context api의 경우에는 한번 컴포넌트가 바뀔 경우에 모든 컴포넌트가 바뀐다는 단점이 존재합니다. 따라서 context api를 사용할 때는 불 필요한 리렌더링을 줄이기 위해서 useMemo나 React.mem..

https://school.programmers.co.kr/learn/courses/30/lessons/12906 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(arr) { let stack = [] for (a of arr) { if(stack[stack.length - 1] !== a) stack.push(a) } return stack; } function solution(arr) { return arr.filter((val,index) => val != arr[index+1]); } filter https://dev..

https://school.programmers.co.kr/learn/courses/30/lessons/132267 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //주어진 콜라가 다 떨어질 때까지 반복 //주어진 콜라를 b만큼 나눈 다음에 그 나눈 몫을 저장 //주어진 콜라를 b만큼 나눈 다음에 그 나눈 나머지를 저장 //몫을 다시 주어진 콜라로 전환 function solution(a, b, n) { var answer = 0; while(n >= a) { let 몫 = Math.floor(n / a) let 나머지 = n % a n = 몫 * b +..

https://school.programmers.co.kr/learn/courses/30/lessons/176963 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr //photo에 있는 배열들을 하나씩 꺼내면서 다음 과정을 수행합니다. //꺼낸 배열의 원소들을 하나씩 꺼내면서 다음 과정을 수행합니다. //만약 원소가 name에 있다면 그 인덱스에 해당하는 yearning에 값을 더합니다. //만약 원소가 name에 없다면 해당 과정을 수행하지 않습니다. //원소들을 다 돌고 나서 그 합을 answer에 push 합니다. function solution(na..

오늘은 redux에 대해서 같이 이야기를 나눌려고 한다. 정확히 말하자면 redux는 무엇이고 왜 사용하는지에 대해서 알아볼려고 한다. 1. redux 란? : redux는 전역 상태 관리를 도와주는 라이브러리입니다. 2. redux의 사용이유 : redux 의 사용 이유에는 여러가지가 있지만 그중에서 2가지만 보도록 하겠습니다. 첫번째는 단방향 통신입니다. redux의 경우 단방향 통신 즉 FLUX 패턴에 근거하여 상태 관리가 이루어집니다. 이는 복잡한 상황을 간단하게 만들고 예상치 못한 오류를 사전에 해결할 수 있습니다. 다음은 미들웨어를 지원한다는 점입니다. 리덕스에는 리덕스 미들웨어를 제공합니다. 이는 로그 관리 , 에러 핸들링 , 비동기 처리를 하는 데 있어서 굉장히 용이합니다. 이는 결과적으로..

오늘은 Content-type에 대해서 같이 이야기를 나눠보려고 한다. 정확히 말하자면 Content-type이 무엇이고 종류는 어떤 것이 있으며 왜 중요한지에 대해서 알아볼려고한다. 1. Content-type 이란? : content-type이란 http 헤더의 일종으로 웹 클라이언트와 웹 서버가 주고 받는 데이터의 형식을 말한다. 2. Content-type의 종류 - text/html: HTML 문서를 나타냅니다. 웹 페이지의 기본 형식입니다. - text/plain: 일반 텍스트 문서를 나타냅니다. 어떤 특별한 서식 없이 순수한 텍스트만 포함됩니다. - application/json: JSON(JavaScript Object Notation) 형식의 데이터를 나타냅니다. 웹 API와 클라이언트 ..

오늘은 브라우저의 작동 방식에 대해서 살펴보려고 한다. 즉 브라우저가 어떻게 작동하느냐?라는 질문에 대해서 답을 해보려고 한다. 1. 브라우저 어떻게 작동하느냐? 브라우저의 작동방식을 크게 보자면 다음과 같다. 첫번째 클라이언트의 요청이 온다. 두번째 서버의 응답을 받는다. 이렇게 2가지의 과정으로 나뉜다. 이를 자세히 들어가자면 다음과 같다. 클라이언트의 요청을 서버에게 보내고 이에 대한 응답 즉 리소스 (html , css , js)를 받는다. 브라우저는 이 리소스를 다음과 같이 처리한다. html : html 문서는 파싱되어 구조화된 트리 형태의 DOM을 만든다. css : css 또한 파싱되어 구조화된 CSSOM을 만든다. js : js는 파싱되어 이는 랜더 트리에 영향을 미친다. 렌더 트리 : ..