- 비교 알고리즘 (Diffing Algorithm) ko.reactjs.org/docs/reconciliation.html#the-diffing-algorithm 2개의 트리를 비교할 때, 리액트틑 두 Element의 Root 엘리먼트부터 비교한다. 이후의 동작은 root Element의 타입에 따라 달라진다. 1. Element의 타입이 다른 경우 2개의 Root Element 타입이 다르면, 리액트는 이전 트리를 버리고, 완전히 새로운 트리를 구축한다. 트리를 버릴 때에는 이전 DOM 노드들을 모두 파괴되고, 컴포넌트 인스턴스에 componentWillUnmount()가 실행된다. 새로운 트리가 만들어 질 때에는 새로운 DOM노드들이 삽입되고 해당 컴포넌트 인스턴스에 compoenetWillMoun..

www.acmicpc.net/problem/1446 1446번: 지름길 첫째 줄에 지름길의 개수 N과 고속도로의 길이 D가 주어진다. N은 12 이하이고, D는 10,000보다 작거나 같은 자연수이다. 둘째 줄부터 N개의 줄에 지름길의 시작 위치, 도착 위치, 지름길의 길이가 주 www.acmicpc.net 핵심 아이디어 단방향의 경로가 주어진 다익스트라 문제이다. 예제를 풀이하자면 0부터 150까지 움직이는데, 가장 최소의 비용을 구하라는 문제로, 0 -> 50 50 -> 100 위 2가지의 지름길로 이동하고 100부터 150까지는 정상적으로 이동해서 총 비용이 70이된다. 이 문제와 다른 문제의 차이점은 지름길에 주어진, 값들만 노드로 존재하는 것이 아니라 0~D까지의 모든 지점에 대해 다익스트라를 ..

Float는 CSS 위치지정 속성이다. Float 된 Element는 페이지의 흐름의 일부가되며, 페이지의 흐름에서 제거되는 position: absolute 와 달리 다른 요소 (floating element 주위에 있는 텍스트)의 위치에 영향을 준다. CSS clear 속성은 float Element에 left/right/both를 적용시킬 수 있다. 부모 Element에만 float가 있으면 그 높이는 무효가 되고, 컨테이너의 float Element 다음에 있지만 컨테이너가 닫히기 전에 float를 clear한다면 해결할 수 있다. 나중에 다시보기 github.com/zereight/front-end-interview-handbook/blob/master/contents/kr/css-questio..

- Resetting Resetting은 요소의 모든 기본 브라우저 스타일을 제거하기 위한 것이다. ex) margin, font-size, padding 재설정 - Normalizing Normalizing은 모든 스타일을 제거하는 것이 아니라, 유용한 기본 스타일을 보존하고 브라우저 종속성에 대한 버그를 수정하는 것이다. => 나만의 스타일링을 많이 해야할때 Resetting github.com/zereight/front-end-interview-handbook/blob/master/contents/kr/css-questions.md#resetting%EA%B3%BC-normalizing-css%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%..

React 를 사용하면 setState를 사용하게 될 텐데, setState 함수를 활용하여 현제 상태를 변경해주는 것을 확인하기 위해 다음과 같은 코드를 실행한다고 치자. const [todoText, setTodoText] = useState(''); const onChange = (e) => { setTodoText(e.target.value); console.log(todoText); }; return ( ); 그럼 input값에 텍스트 변화를 줄 때마다 console에 즉시 변경된 값이 변형되어 출력되는가? 아니다. 실제로는 아래와 같이 동작한다. 마치 이전 상태를 console창에 출력하는 듯한 효과를 느낄 수 있는데, 이것은 setState 가 비동기로 처리되기 때문이다. setState로 ..

npm i -D eslint npm i prettier -D -E npm i eslint-plugin-prettier eslint-config-prettier -D npm i -D eslint-config-airbnb .eslintrc.json { "env": { "browser": true, "es6": true, "node": true }, "extends": [ "airbnb", "prettier/react", "eslint:recommended", "plugin:prettier/recommended" ], "rules": { "react/jsx-filename-extension": [ "error", { "extensions": [".js", ".jsx"] } ], "react/jsx-curly-..

www.acmicpc.net/problem/1504 1504번: 특정한 최단 경로 첫째 줄에 정점의 개수 N과 간선의 개수 E가 주어진다. (2 ≤ N ≤ 800, 0 ≤ E ≤ 200,000) 둘째 줄부터 E개의 줄에 걸쳐서 세 개의 정수 a, b, c가 주어지는데, a번 정점에서 b번 정점까지 양방향 길이 존 www.acmicpc.net 핵심 아이디어 1=>N으로 이동하는데, 2개의 정점을 무조건 지나는 가장 최소의 경로의 가중치를 구하는 문제이다. 처음엔 어떻게 접근해야 할지 감을 잡지못하고, 모든 경로를 탐색하여 v1,v2을 포함하는 경로를 찾아내는 방법 밖에 구상하지 못했다. 풀이를 보니, 정답은 1->...->v1->...->v2->...->N 1->...->v2->...->v1->...->N..

브라우저는 CSS 선택자의 특정성에 따라 Element에 표시할 스타일을 결정한다. CSS 선택자는 4개의 쉼표로 구분된 값 a,b,c,d 을 기반으로 계산된다. 1. a는 인라인 스타일이 사용되고 있는지 여부이다. 속성의 선언이 인라인 스타일이라면, a는 1, 아니면 0이다. 2. b는 ID 셀렉터의 수 3. c는 클래스, 속성, 가상 클래스 선택자의 수 4. d는 태그, 가상 요소 선택자의 수이다. 결과적으로 css 셀렉터는 점수가 아니라, 4개의 값을 비교하여 가장 높은 특정성을 갖는 항목을 적용한다. a,b,c,d에서 0,1,0,0와 0,0,10,10 이 있다면 0,1,0,0이 우선적으로 반영된다는 것이다. 동등한 특정성의 경우에는, 가장 마지막 규칙이 중요한 규칙이라 판단한다. (중복으로 스타일..