목록전체 글 (137)
ksw_devlog
block요소는 사용가능한 최대 너비를가지며 높이는 내부 컨텐츠에 맞게 지정됩니다. width, height를 지정할 수 있으며 padding, margin 적용에 제한이 없습니다. 또한 여러개의 block요소가 있을 때 수직으로 쌓이며, 프레임을 잡을 때 사용합니다. 반면 inline요소는 너비와 높이가 내부 컨텐츠 크기만큼 설정되며 임의로 지정할 수 없습니다. padding과 margin은 좌우에만 적용가능하며 여러개의 인라인 요소가 있을 때 수평으로 쌓입니다. 보통은 text나 img관련한 요소에 사용합니다. inline-block? 인라인 블록은 인라인 요소처럼 내부컨텐츠의 크기만큼 너비와 높이가 지정되고, 사용자 정의에 따라 원하는 크기로 지정할 수 있습니다. padding, margin은 블록..
li 요소는 목록 아이템(list item)을 보여주기 위한 요소입니다. 그래서 목록을 담는 ul 요소의 자식 요소여야 합니다. 화면 상으로는 아무런 문제가 없더라도 이렇게 li요소와 ul요소의 의미에 맞게 HTML을 작성하는 것이 어떤 개발자가 와서 보더라도 쉽게 이해할 수 있기 때문에 중요하다고 생각합니다.
Redux는 전역 상태 관리 라이브러리 중에 하나입니다. 주요 개념에는 컴포넌트, Action, Reducer, Store 입니다. 어떤 방식으로 돌아가는지 설명하자면, 컴포넌트에서 전역 Store에 관리되고 있는 상태에서 변경을 하려 할 때 Reducer를 이용합니다. Reducer는 어떤 Action을 원하는지 확인하고 그에 따라 상태를 업데이트 해주는 함수입니다. 컴포넌트는 dispatch라는 함수를 통해 Reducer에 Action을 발송합니다. Reducer는 이 요청을 받고 내부에 있는 상태를 업데이트 해줍니다. 상태가 업데이트 된 후 이를 참조하고 있는 컴포넌트들에게 리렌더링을 해야 한다는 알림을 줍니다. 다른 상태관리 라이브러리로는 React-query가 있습니다. 이와 비교되는 점은 Re..
Semantic HTML은 웹 접근성, 검색엔진 최적화와 더불어 적절한 의미의 태그들을 사용하기 위해 필요합니다. 예를 들어 div나 span 태그만으로도 모든 마크업이 가능한데 의미가 없는 태그인 div와 span을 남용한다면, 시각적 정보 외의 메타데이터가 부족하여 기계에게 의미전달이 충분하게 되지 않습니다. 그래서 적절한 의미의 태그들을 사용하여 문서를 정보 구조에 맞게 마크업해야하고 이것이 Semantic HTML이 필요한 이유입니다. https://velog.io/@jujusnake/HTML-Semantic%ED%95%98%EA%B2%8C-%EC%9E%91%EC%84%B1%ED%95%B4%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 HTML : Semanti..
순수 함수란 동일한 입력에 대해 언제나 동일한 결과를 리턴하는 함수를 의미하고, 불변성을 지키고 사이드 이펙트를 일으키지 않는 함수를 의미합니다. 불변성을 지킨다는 것은 값을 직접 변경하지 않고 늘 새로운 값을 리턴한다는 의미입니다. 불변성을 지킴으로써 얻을 수 있는 이점은 예기치 못한 사이드이펙트를 방지할 수 있다는 점입니다. 사이드 이펙트란 함수 외부의 상태를 변경하는 것으로, 변화를 예측할 수 없기 때문에 예기치 못한 오류를 발생시킬 가능성이 있습니다. 리액트에서는 단방향 데이터 흐름을 유지하기 위해 리액트 컴포넌트의 props를 직접 변경하지 않는 방법으로 순수 함수를 지향하고 있습니다. props : 부모에서 자식 컴포넌트로 데이터를 넘겨줄 때 사용하며, 직접적으로 수정할 수 없는 값이다. pr..
쿠키는 웹 브라우저 상에 작은 '텍스트 파일'로 저장이 되는 만료 기간이 존재하는 저장소이고 옵션에는 Expires, Max-Age가 있습니다. Expires 는 쿠키가 삭제되는 만료 날짜를 설정합니다 Max-Age 는 쿠키가 삭제될 시간을 초 단위로 설정합니다. expires(유효 일자)나 max-age(만료 기간) 옵션이 지정되어있지 않으면 브라우저가 닫힐 때 쿠키도 함께 삭제됩니다. 이런 쿠키를 '세션 쿠키(session cookie)'라고 부릅니다. https://velog.io/@ojudge/Cookie%EC%9D%98-MaxAge-Expires Cookie의 MaxAge, Expires Session cookies웹브라우저가 켜져있는 동안 유효하고 끄고 다시 켜면 없어짐-> expires 혹은..
useRef 는 특정 DOM을 선택하거나 컴포넌트 안의 변수 만들 때 혹은 리렌더링 방지를 할 때 사용하는 React의 Hook 함수입니다. 리액트에서는 DOM을 선택할 때 ref 를 사용합니다. 함수형 컴포넌트에서 ref 를 사용할 때는 useRef 를 사용하고 useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그다음 렌더링 이후로 업데이트된 상태를 조회할 수 있지만, useRef 로 관리하는 변수는 설정 후 바로 조회할 수 있습니다. 이 변수를 사용하여 setTimeout, setinterval 을 통해서 만들어진 id 외부 라이브러리를 사용하여 생성된 인스턴스 scroll 위치 같은 값들을 관리할 수..