프로그래밍 (19) 썸네일형 리스트형 자바스크립트로 DOM 조작하는 법 document로 DOM에 접근하는 법 document.getElementsByClassName: 클래스명으로 DOM에 접근 document.getElementById: id로 DOM에 접근 document.getElementsByTagName: 태그명으로 DOM에 접근 document에 DOM 요소 추가하는 법 요소는 만들기만 하면 DOM에 알아서 뿅 생기지 않습니다. 요소를 만들고, DOM에 넣어주어야 합니다. document.createElement("만들 요소") : 요소 만들기 document.만든 요소를 넣을 DOM 요소.appendChild(만든 요소를 담은 변수) : 만든 요소 DOM에 넣기 // 새 요소를 만들어요. const new_div = document.createElement(".. 자바스크립트의 Array 내장 함수 내장 함수는 쓰기 편하라고 미리 만들어둔 코드 묶음을 말합니다. Array의 내장 함수에는 여러 가지가 있지만 이 포스트에서는 4가지만 알아보겠습니다. 1. map map은 배열 안에 들어있는 요소를 원하는 대로 바꾸고, 바꾼 값을 갖는 요소들을 새로운 배열로 만듭니다. 이때 원본 배열은 값이 변하지 않습니다. const array_num = [0, 1, 2, 3, 4, 5]; const new_array = array_num.map((array_item) => { return array_item + 1; }); console.log(new_array); // 새 배열의 값은 원본 배열 원소에 +1 한 값입니다. console.log(array_num); // 원본 배열은 그대로 있죠! 2. filter.. HTML에서 a 요소의 target, rel 속성 HTML 코드에서 다음과 같은 a 요소를 마주쳤습니다. Learn React a 요소 안에 href, target, rel이라는 속성이 눈에 띄는데요. 각 속성은 무슨 의도로 사용된 걸까요? 우선 a 요소는 하이퍼링크를 걸기 위한 태그입니다. href에는 하이퍼링크 주소를 나타냅니다. target에는 링크를 클릭했을 때 문서가 새 탭에서 열릴 것인지, 기존 탭에서 열릴 것인지 등 문서가 열릴 위치를 나타냅니다. target 속성에 _blank를 입력하면 웹 페이지(URL)가 새 탭에서 열립니다. 하지만! target="_blank"만 사용하면 보안상 취약점이 생기고 퍼포먼스가 떨어질 우려가 있습니다. 따라서 rel 속성에 noopener와 noreferrer를 지정하여 target="_blank"를 보완.. 힙 정렬(Heap Sort)에서 공간 복잡도가 O(1)인 이유 힙 정렬의 기본 알고리즘은 다음과 같습니다. 1. 배열에 담긴 요소 중 가장 작은 값을 맨 뒤로 보내고, 그 값을 배열의 첫 번째 요소와 맞바꿉니다. 이렇게 되면 배열의 마지막에 위치했던 가장 작은 값이 맨 앞으로 오고, 배열의 첫번째에 위치했던 요소는 맨 뒤로 가게 되겠죠. 2. 배열의 첫번째 요소를 배열에서 빼내고, 배열에 남아있는 요소들은 뒤섞습니다. 위 과정을 반복합니다. 예시를 통해 확인해 보겠습니다. data: 1 4 7 2 5 8 9 3 6 0 make_heap: [8 7 9 3 4 5 6 2 1 0] props, state, 리렌더링 발생 조건 props와 state의 공통점 props와 state는 둘 다 일반 JavaScript 객체이며, 렌더링 결과물에 영향을 주는 정보를 갖고 있습니다. props와 state 둘 다 부모 컴포넌트로부터 초기값을 받을 수 있고, 컴포넌트 안에 디폴트 값이 설정되어 있으며, 자식 컴포넌트의 초기값을 설정할 수 있습니다. props와 state의 차이점 props는 함수의 매개변수처럼 컴포넌트에 전달되지만, state는 함수 안에 선언된 변수처럼 컴포넌트 안에서 관리됩니다. props는 부모 컴포넌트에 의해 바뀔 수 있고 자식 컴포넌트 안에서 바뀔 수 있지만, state는 부모 컴포넌트에 의해 바뀌지 못 하고 자식 컴포넌트 안에서 바뀔 수 없습니다. state는 컴포넌트 내부를 바꿀 수 있지만, props는 .. React에서 반드시 알아야 하는 것들! Q1) 자바스크립트에서 유사배열과 배열의 차이점은? 유사배열의 각 요소를 수정하고 싶을 땐? A1) 유사배열은 배열의 내장함수를 사용할 수 없습니다. 따라서 해당 유사배열이 사용할 수 있는 반복문 등을 이용해 유사배열을 먼저 배열로 바꿉니다. 그 후, 배열의 내장함수를 통해 변경합니다. 또는 유사배열 요소 하나하나에 직접 접근해서 바꿉니다. Q2) 부모 컴포넌트의 state가 바뀌면 자식 컴포넌트의 state도 바뀝니다. 이 과정을 라이프 사이클로 그려보세요. A2) Q3) 양방향 바인딩이란? 양방향 바인딩을 사용할 경우, 리렌더링이 어떻게 이루어질까요? A3) 부모 컴포넌트에서 자식 컴포넌트로 데이터가 흐르면 단방향, 부모가 자식에게 데이터를 전달해주고, 자식이 그 데이터를 수정할 수 있으면 양방향 바.. 이전 1 2 3 4 다음
