분류 전체보기

🌳 렌더링(rendering)리액트에 존재하는 컴포넌트들이 현재 자신이 가지고 있는 props와 state의 값을 기반으로 UI를 어떻게 구성하고,구성한 UI를 바탕으로 브라우저에게 어떤 결과를 제공할 것인지 계산하는 일련의 과정입니다. 리액트의 렌더링 과정은 크게 렌더 단계와 커밋 단계로 나눌 수 있습니다.랜더 단계(render phase)컴포넌트를 실행한 결과와 이전의 가상 돔을 비교한 뒤, 변경이 발생하여 렌더링이 필요한 컴포넌트를 체크커밋 단계(commit phase)렌더 단계에서 체크한 변경 사항들을 실제 돔에 적용하여 사용자에게 보여줌 리액트에서 렌더링이 일어나는 경우는 다음과 같습니다.최초 렌더링재렌더링(re-rendering)클래스형 컴포넌트의 setState가 실행되는 = state가 ..

배열은 일반 객체에 여러 기능을 추가해 만든 특수한 객체로, 자바스크립트는 배열을 쉽게 다룰 수 있는 메서드를 제공합니다.정리할 배열 메서드는 다음과 같습니다.요소 추가/삭제배열 잘라내기/붙이기배열 순회배열 탐색배열 정렬 🌿 요소 추가 및 삭제아래는 배열의 맨 끝 요소를 대상으로 하는 메서드입니다. push( 추가할_요소 )배열의 맨 끝에 새로운 요소를 추가하고, 새 배열의 길이를 반환합니다.const alphabet = ["a", "b", "c"];const newLength = alphabet.push("d", "e");console.log(alphabet); // ["a", "b", "c", "d", "e"]console.log(newLength); // 5 pop()배열의 맨 끝에 있는 요소를 ..

🐝 상위 스코프의 결정프로그래밍 언어가 함수의 상위 스코프를 결정하는 방법에는동적(Dynamic) 스코프: 함수를 호출한 위치에 따라 결정정적(Static) 스코프 -> 렉시컬(Lexical) 스코프: 함수를 선언한 위치에 따라 결정두 가지 방법이 있습니다. 예를 들어, 아래와 같은 코드가 있을 때var x = 1;function foo() { var x = 10; bar(); // 함수 bar()가 호출된 위치}function bar() { // 함수 bar()가 선언된 위치 console.log(x);}foo();동적 스코프를 따른다면 함수를 호출한 위치에 따라 상위 스코프를 결정하여,함수 bar()의 상위 스코프는 -> 함수 foo()와 전역 변수인 x입니다. 정적 스코프(렉시컬 스코프)..

html의 br 태그는 텍스트 안에 줄바꿈을 생성합니다. 그런데 PC 화면에서는 줄바꿈이 필요했지만, 작은 화면에서 줄바꿈을 하면 스크롤이 길어지는 문제로 해당 기능을 없애고 싶은 경우가 있을 수 있습니다. 예를 들어, PC 화면인 경우에는 아래와 같이 br 요소가 포함된 텍스트를 그대로 배치하지만태블릿 화면인 경우, br 요소가 줄바꿈 기능을 하지 않게 만들고 싶은 상황입니다.이때 제가 잊고 있던 기본적인 내용만을 활용하여 이를 해결할 수 있습니다.  태그에도 class를 적용할 수 있습니다.너무 당연한 이야기지만 이상하게 br 태그에는 적용할 생각을 하지 못했습니다. 간단한 방법으로 br 태그의 display 속성을 none으로 설정하면 br 태그는 줄바꿈을 하지 않습니다. 하지만 더 나아가 줄바꿈 ..