본문 바로가기

prev

Virtual DOM 알아보기 Virtual DOM 이 무엇일까? “DOM을 추상화한 가상의 객체” regular DOM의 추상화 개념을 활용할 새로운 또 다른 DOM 이다. 이것은 빈번한 repaint와 reflow문제를 보완하였으며, Dynamic UI를 만들기 위해 적합한 기능들이 내장되어 있다. 그러므로 Virtual DOM은 SPA 모델의 웹 어플리케이션 에서는 regular DOM 보다 최적의 성능을 발휘한다. 그래서 왜필요하다고? 복잡한 SPA(싱글 페이지 어플리케이션) 에서는 DOM 조작이 많이 발생합니다. 그 뜻은 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야한다는 소리고, 전체적인 프로세스를 비효율적으로 만듭니다. 만약 뷰에 변화가 생기면, 그 변화는 실제 DOM에 적용되기전에 가상의 DOM에 먼저 적용시키고.. 더보기
Portal Portals Portal은 부모 컴포넌트의 DOM계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 이 말은, 컴포넌트들의 상하 관계, 구조를 가지고 있는 문서인 DOM 상에서, 자식 컴포넌트를 부모 컴포넌트 바깥에 있는 다른 컴포넌트에 전달할 수 있다는 뜻이다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째 인자(container)는 DOM 엘리먼트입니다. createPortal 메서드의 첫번째 파라미터 child를 통해 우리가 원하는 컴포넌트를 Portal에 집어 넣을 수 있다. 두 번째 인자 contai.. 더보기
createSlice - Redux Toolkit createSlice 리듀서 함수의 대상인 초기상태와 “슬라이스 이름”을 받아 리듀서와 상태에 해당하는 액션 생성자와 액션 타입을 자동으로 생성해 주는 함수. const counterSlice = createSlice({ name: '', // 이 모듈의 이름 initialState : {}, // 이 모듈의 초기상태 값 reducers : {}, // 이 모듈의 Reducer 로직 }) initialState : 이 모듈의 초기 생태 값 name : 이 모듈의 이름 reducers : 이 모듈의 Reducer 로직 import { createSlice } from '@reduxjs/toolkit' const initialState = { number: 0 } const counterSlice = cre.. 더보기
프로그래밍 기초03 (구조 분해 할당) 배열 분해하기 // 이름과 성을 요소로 가진 배열 let arr = ["Bora", "Lee"] // 구조 분해 할당을 이용해 // firstName엔 arr[0]을 // surname엔 arr[1]을 할당하였습니다. let [firstName, surname] = arr; console.log(firstName); // Bora console.log(surname); // Lee 반환 값이 배열 메서드인 split() 함수 일땐 let [firstName, surname] = "Bora Lee".split(' '); 쉼표를 사용하여 요소 무시하기 쉼표를 사용하면 필요하지 않은 배열 요소를 버릴 수 있습니다. // 두 번째 요소는 필요하지 않음 let [firstName, , title] = ["Juli.. 더보기
가우스 계산법 문제 숫자 2개가 주어질 때, 두 숫자 사이의 값을 구하는 코딩 테스트 문제를 풀었다. 풀긴 풀었는데, 반복문을 많이 써서 그리 좋은 방법은 아닌것 같다. 나는 코딩테스트를 보고 난뒤 항상 다른사람이 푼 풀이를 보는데, 더 좋은 방법이 있어서 오늘이ㅡ TIL로 올릴려 한다. 시도한 것 function solution(a, b) { var answer =0; for(let i = Math.min(a,b); i < 더보기
프로그래밍 기초 02(배열과 메서드) 오늘은 함수와 객체에 대해 배우는 시간이었다. 오늘 배운 내용을 조금 정리하고자한다. 배열과 메서드 splice arr.splice(index[, deleteCount, elem1, ..., elemN]) 첫번째 매개변수는 조작을 가할 첫 번째 요스를 가르키는 인덱스(index)입니다. 두번 째 매개변수는 deleteCount로, 제거하고자 하는 요소의 개수를 나타냅니다. elem1, ..., elemN은 배열에 추가할 요소를 나타냅니다. 예시. let arr = ["I", "study", "JavaScript"]; arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거 console.log( arr ); // ["I", "JavaScript"] let arr = ["I", "study".. 더보기
Method Chaining (함수 연달아 쓰기) Mathed Caining : 메서드가 객체를 반환하게 되면 메서드의 반환 값인 객체를 통해 또 다른 함수를 호출할 수 있다. 이러한 프로그래밍 패턴을 메서드 체이닝(Method Chaining) 이라 부른다. 초록색 글씨에 해당하는 부분이 이전 메서드(노란색 블럭)가 리턴하는 값이다. 이전 메서드가 리턴하는 값에 다음에 연결된 메서드가 적용된다는 점이 메서드 체이닝의 핵심이다. function solution(strings, n) { let answer = []; for (i=0; i 더보기
프로그래밍 기초01(항해99) TIL를 생각해봤는데, 그래도 매일 적어주느게 좋을거같다. 사실 몇일 간은 블로그에 다른 글을 올리면 TIL은 따로 올리진 않았는데 좋지 않은거 같다. 다른건 다른거고 매일 한 내용을 정리할 필요가 있어보인다. 2/13일 기준으로 TIL을 다시 적으려 한다. 이번주 부터 javascript 언어를 공부하는 주가 됬다. 사실 책같은 문서를 받고 공부하는거라 그렇게 좋진 않았다. 별도의 인강 같은건 없고, 혼자 책보면서 공부하다가 모로는거 있으면 구글링 하고 ... 아 마지막에 section 공부? 라고 하면서 매니저님이 내용정리 해주는 건 있었다. 사실 큰 기대는 하지 않았지만, 그래도 조금 실망스럽긴했다. 일단 진도를 따라가야 되니, 공부를 하는 중에 몰랐던 내용이 있었고 어제 javascript 카테고.. 더보기

티스토리툴바