frontend31 리액트란 (React) 무엇인가? React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리입니다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용됩니다. 물론 React와 비슷한 역할을 하는 Angular나 Vue 가 존재하지만 이들은 라이브러리가 아닌 프레임워크입니다. - 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것입니다. (프레임 워크 안에 다양한 라이브러리가 포함되어 있습니다). 저희가 작성한 소스 코드를 호출합니다. - 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것입니다. 소스 코드는 어떤한 기능을 구현하기 위해서 라이브러리를 호출하게 됩니다. 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링 하는 데 관여하기 때문입니다. 리액트는 라이브러리이지만, 다.. 2024. 10. 4. 여백 상쇄 (Margin Collapse) 여러 블록의 위쪽 및 아래쪽 바깥 여백 (margin)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 병합됩니다. 이러한 현상은 좌우 여백에서는 발생하지 않으며, 오직 위쪽과 아래쪽 (top & bottom) 여백에서만 발생합니다. ** 플로팅 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않습니다. 인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. div.element2 요소의 마진이 더 크기 때문에 둘 사이의 간격은 40px가 되고 겹치게 됩니다. 부모 블록에 테두리 또는 패딩이 설정되지 않은 경우 자손을 분리할 여백이 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치하게 되고, 이 문제 해결하기 위해선 부모에 inline 콘텐츠, bo.. 2024. 9. 20. CSS : 박스 모델 (Box Model) CSS의 박스 모델은 여백, 테두리, 패딩, 및 콘텐츠등 자체를 포함한 다양한 속성을 담고 있는 컨테이너입니다. 이러한 속성들은 함께 요소의 크기와 간격을 결정하여 페이지에서 볼 수 있는 박스를 생성하게 됩니다. - 콘텐츠 (Content) : 콘텐츠가 표시되는 영역으로 그 크기를 width (넓이) & height (높이)와 같은 속성을 사용해서 정할 수 있습니다. - 패딩 (Padding) : 콘텐츠 주변을 마치 공백처럼 공간을 만들어줍니다. 패딩의 크기는 padding과 관련 속성을 사용해 제어할 수 있습니다. - 테두리 (Border) : 콘텐츠와 패딩까지 둘러싸고, 테두리의 크기, 색상, 테두리 넓이, 스타일등은 border와 관련 속성을 사용하여 제어할 수 있습니다. - 여백 (Margin.. 2024. 9. 20. JavaScript에서 호이스팅(Hoisting)이란 JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다. 여기서 주의할 점은 "선언문" 이라는 것이며 "대입문"은 끌어올려지지 않습니다. JavaScript의 선언에는 3가지 방법이 있습니다. var : 변수를 선언. 추가로 동시에 값을 초기화let : 블록 스코프 지역 변수를 선언. 추가로 동시에 값을 초기화const : 블록 스코프 읽기 전용 상수를 선언 - var x = " " 와 같은 var 키워드로 변수를 선언이 가능하며, 실행 맥락에 따라 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다. - let y - " " 와 같이 const 혹은 let 키워드로 변.. 2024. 9. 20. 스코프 (Scope) 이해 스코프는 프로그램에서 변수가 접근 가능한 영역을 나타냅니다. 이는 코드 내에서 변수, 함수, 객체의 가시성과 생명주기를 결정합니다. JavaScript에는 3가지 스코프 종류가 있습니다 :- 전역 범위 : 함수나 블록 외부에 선언된 변수나 함수가 해당되며, 프로그램 어디서든 접근할 수 있습니다.- 블록 범위 : 'let'이나 'const'를 사용하여 블록(중괄호 내)에서 선언된 변수는 블록 스코프를 가집니다. { } 에 있는 변수는 외부에서 접근이 불가합니다.- 함수 범위 : 각 함수는 새로운 스코프를 생성합니다. 이 변수는 그 함수 내에서만 접근할 수 있습니다. 전역 범위 : 함수 범위 : ** 함수 스코프 내에 선언된 'let', 'var', 'const'는 비슷한 역할을 합니다. 블록 범위 : .. 2024. 9. 18. JavaScript Event Delegation (이벤트 위임) 자바스크립트에서 이벤트 위임은 각 요소에 이벤트를 설정하는 대신, 상위 부모 요소에 설정하여 비슷한 방식으로 여러 요소를 다루면서 코드량을 줄일 수 있고 코드 효율을 높입니다. 또한 공통 조상에 인벤트 핸들러를 단 하나만 할당해 여러 요소를 한꺼번에 다룰 수 있어 메모리 사용과 성능을 최적화할 수 있습니다. 이벤트 전파에는 세 가지 단계가 있습니다 : 캡처링 단계, 타겟 단계 그리고 버블링 단계입니다. 이벤트 위임에서 버블링 단계를 활용합니다. 버블링 단계에서는 이벤트가 타겟 요소에서 시작하여 DOM 트리를 따라 상위로 전파됩니다. 자식 요소에서 발생한 이벤트가 부모 요소, 조부모 요소 등으로 전파되어 결국 최상위 문서 객체에 도달하게 됩니다. 캡처링 단계와 타겟 단계는 무엇인가요?캡처링 단계는 이벤.. 2024. 9. 13. 이전 1 2 3 4 5 6 다음
