공부20 inline과 block의 차이 HTML에서 요소는 웹 페이지 레이아웃에서 작동하는 방식에 따라 블록 또는 인라인 요소로 분류된다. block , , ~ 등의 블록 수준 요소들은 사용 가능한 전체 너비를 차지하고 앞/뒤에 새 줄을 만든다. 일반적으로 페이지 구조를 만들고 콘텐츠를 섹션으로 나누는 데 사용된다. 블록 수준 요소는 다른 블록 및 인라인 수준 요소를 포함할 수 있다. 예) Block-level element This is a paragraph inside a block-level element. inline , 및 과 같은 인라인 요소는 필요한 만큼의 너비만 차지하며 앞/뒤에 새 줄을 만들지 않는다. 일반적으로 블록 수준 요소 내 텍스트 스타일을 지정하는 데 사용된다. 인라인 수준 요소는 블록 수준 요소를 포함할 수 없지만 .. 2023. 4. 7. <li>요소는 왜 <ul>요소의 자식 요소여야 할까? : unordered list, 비정렬 목록 태그 → 요소는 순서가 중요하지 않은 목록을 나타낼 때 사용한다. 요소 내 들어갈 항목의 순서가 필요하다면 요소를 사용한다. 과 의 직계 자식 요소로는 오직 요소만 올 수있으며 하나 이상의 자식을 가져야 한다. : ordered list, 정렬 목록 태그 → 요소는 순서가 중요한 목록을 나타낼 때 사용한다. 과 요소의 차이가 순서의 중요성에 있는 만큼 태그로 마크업 된 목록의 항목은 불릿(•)으로 표시되는 반면 태그로 마크업 된 목록의 항목은 숫자료 표시된다. : list item, 목록의 항목 태그 → 요소는 목록 내 아이템을 나타낸다. 따라서 반드시 목록을 나타내는 혹은 요소 내 항목으로 요소가 위치한다. → 및 요소는 목록을 만드는 데 사용하며 요소는 목.. 2023. 4. 7. Redux 상태관리의 주요 개념들과 연결 관계를 설명해주세요. 다른 상태관리 도구와 비교 설명 해주세요. 노션에 정리중 2023. 4. 6. 시멘틱 HTML의 필요성 시멘틱 태그 → Semeantic을 직역하면 의미론적인이라는 뜻을 가지고 있다. 즉 시멘틱 태그란 의미를 부여한 태그라는 뜻이다. 시멘틱 태그는 HTML5에서 처음 등장했고 , 등의 만 보고서 문서를 더 쉽게 이해할 수 있게 되었다. 시멘틱 태그의 종류 사이트의 머리부분에 사용 메인 콘텐츠를 나타내는데 사용 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소 개별 콘텐츠를 나타내는 요소 좌우측의 사이드 영역 사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분 제목과 부제목을 묶어서 나타내는 요소 웹 페이지 메뉴를 만들 때 사용 태그 대신 시멘틱 태그를 사용해야 하는 이유 HTML 문서의 가독성과 유지보수가 쉬워짐. 웹 브라우저가 HTML만 보고도 상단(header), 본문(main),.. 2023. 4. 6. state와 props State → 구성 요소가 데이터를 관리하고 사용자 상호 작용 또는 기타 이벤트에 응답할 수 있도록하는 리액트 내장 기능. 구성 요소에 특정한 데이터를 저장하는 개체이며 일반적으로 사용자 상호작용 또는 네트워크 응답에 대한 응답으로 시간이 지남에 따라 변경될 수 있음. 구성 요소에 의해 내부적으로 관리되며 state가 변경되면 구성 요소가 다시 렌더링 됨. 전체 페이지를 로드하거나 서버를 왕복할 필요 없이 데이터 변경에 대한 응답으로 구성 요소의 UI를 업데이트하는 방법을 제공함. Props(properties) → 구성 요소가 부모 구성 요소로부터 데이터를 받을 수 있도록하는 리액트 내장 기능. 구성 요소 간 데이터를 전달하는 방법. 기본적으로 구성 요소에 대한 입력이며 상위 구성 요소에서 하위 구성 .. 2023. 4. 5. 순수함수란? 불변성과 사이드 이펙트와 연결하여 설명해주세요. 순수함수란? 같은 입력에 대해 같은 결과를 return하는 함수. 함수의 바깥 영역에 side effect를 초래하지 않는 함수. (함수 외부 데이터나 전달된 데이터를 변경하지않는 함수.) → 기존 목적과 다른 효과를 만들지 말아야 함. 순수 함수의 예 function add(a, b) { return a + b; } 순수하지 않은 함수의 예 let count = 0; function increment() { count++; return count; } // count라는 변수를 증가시키고 새 값을 반환함. function getRandomNumber() { return Math.random(); } // 호출될 때마다 0과 1사이 난수를 반환함. 순수함수의 장점 코드 디버그, 테스트 및 유지 용이 외부.. 2023. 4. 5. Cookie의 MaxAge, Expires 옵션을 설정하지 않는다면? - Session cookie : 브라우저가 닫힐 때 쿠키도 함께 삭제됨. - Parmanent cookie : 브라우저를 닫아도 쿠키가 삭제되지 않음. - Expires나 Max-Age 옵션이 지정되어있지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제된다. 이런 쿠키를 Session cookie라 부른다. Permanent cookie 설정 - Expires : 쿠키가 삭제되는 만료 날짜를 설정. - Max-Age : 쿠키를 유지시킬 시간을 초 단위로 설정, 0 혹은 음수로 지정하면 쿠키가 삭제됨. - 브라우저는 Max-Age가 우선 순위를 갖고, Expires 같은 경우 http 1.0만 지원하는 일부 오래된 브라우저에서 Max-Age를 읽지 못하기 때문에 사용함. 참고 : https://divheer.. 2023. 4. 4. useRef가 필요한 상황은? React의 함수형 컴포넌트에서 특정 DOM에 접근하고 싶을 때 사용하는 hook. useRef로 변수를 관리하면 그 변수가 업데이트되어도 컴포넌트가 리렌더링되지 않을 때. -> 불필요한 리렌더링 방지. - 포커스, 텍스트 선택 영역, 혹은 미디어의 재생을 관리할 때. - 애니메이션을 직접적으로 실행시킬 때. - 서드 파티 DOM 라이브러리를 React와 같이 사용할 때. - 컴포넌트 내에서 변수를 관리할 때. - 속성값을 초기화(clear)할 때. 참고 : https://divheer.tistory.com/193 2023. 4. 4. 배열, 객체를 const로 선언했는데 요소나 속성을 추가할 수 있는 이유 답변 배열이나 객체가 const로 선언되면 변수가 배열이나 객체가 저장된 고정된 메모리 위치를 가리킨다. 배열 또는 개체에 대한 참조는 변경할 수 없지만 배열또는 개체 내의 요소 또는 속성은 여전히 수정할 수 있다. const 예시 - push() 메서드는 배열 끝에 새 요소를 추가하는 데 사용됨. - const가 arr 변수의 재할당만 제한하고 그 내용은 제한하지 않기 때문에 허용됨. const arr = [1, 2, 3]; arr.push(4); console.log(arr); // Output: [1, 2, 3, 4] const obj = {a: 1, b: 2}; obj.c = 3; console.log(obj); // Output: {a: 1, b: 2, c: 3} 참고 : https://velo.. 2023. 4. 3. require와 import의 차이점 답변 require와 import는 외부 파일이나 라이브러리를 불러올 때 사용한다는 같은 목적을 가지고 있지만, 다른 문법구조를 가지고 있다. require는 export와 함께 사용되며 어느 지점에서나 호출 할 수 있고 동기적이다. NodeJS에서 사용되는 CommonJS의 키워드이며 import export와 함께 사용되고 파일의 시작 부분에서만 실행 할 수 있고 비동기적이다. 또한 ES6에서 새롭게 도입된 키워드로서 차이점이 있다. require은 Babel과 같은 ES6코드를 변환해주는 도구를 사용할 수 없는 상황에서 사용한다. import는 JavaScript를 사용 중이거나 ES6 모듈에 대한 액세스 권한이 있는 경우에 사용한다. 바벨이란? 바벨이란 ES6+버전의 자바스크립트, 타입스크립트, .. 2023. 4. 3. 이전 1 2 다음
