코딩항해기

React.memo()로 불필요한 리렌더링 방지함수형 컴포넌트에서 얕은 비교를 통해 불필요한 렌더링을 막을 수 있다.const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {  // 커스텀 비교 로직 구현 가능  return prevProps.value === nextProps.value;}); useMemo()로 복잡한 계산 최적화비용이 높은 계산을 메모이제이션하여 불필요한 재계산을 방지한다.const memoizedValue = useMemo(() => {  return computeExpensiveValue(a, b);}, [a, b]); useCallback()으로 함수 재생성 방지매 렌더링마다 생성되는 함수를 캐싱하..

React 주요 특징컴포넌트 기반 아키텍처UI를 재사용 가능한 독립적인 컴포넌트로 분해한다. 선언적 문법상태에 따라 UI가 어떻게 보여야 하는지 선언한다. 효율적인 렌더링Virtual DOM을 통한 빠르고 최적화된 업데이트를 제공한다.  컴포넌트의 기본 구조함수형 컴포넌트 (Modern Approach)function Welcome(props) { return 안녕하세요, {props.name}님!;} 클래스형 컴포넌트 (Legacy Approach)class Welcome extends React.Component { render() { return 안녕하세요, {this.props.name}님!; }}  React HooksReact 16.8 버전부터 도입된 Hooks는 함수형 컴포넌트에서..

DOM 소개 - Web API | MDN이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한developer.mozilla.org 문서 객체 모델 DOM (The Document Object Model)DOM은 HTML, xml 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경 할 수 있게 돕는다. 퓁 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 문서 중 ..

CSS 변수CSS 변수는 기존의 정적인 CSS 스타일링에서 벗어나 동적이고 유연한 스타일 관리를 가능하게 한다. 장점은 코드의 재사용성과 유지보수성을 크게 향상시킨다는 점이다. 단순히 값을 반복해서 작성하는 대신, 한 곳에서 정의하고 전체 스타일에 적용할 수 있다. 변수를 선언하는 기본 문법은 대시 두 개(--) 로 시작한다. 예를 들어 --main-color: #3498db; 처럼 정의할 수 있다. 이 변수는 var() 함수를 통해 호출할 수 있고 전역 변수는 주로 :root 선택자에서 정의한다. 이는 문서 전체에서 접근 가능한 변수를 만드는 방법이다. 예시:root { --primary-color: #007bff; --secondary-color: #6c757d; --font-size-base:..

레이아웃 및 포지셔닝 속성display요소의 표시 방식block, inline, inline-block, flex, grid, table, inline-table, noneposition요소 위치 지정static, relative, absolute, fixed, stickytop, right, bottom, left요소 위치 조정10px, 50%, autovisibility요소 표시 여부visible, hidden, collapseopacity요소 투명도0 ~ 1z-index요소 쌓임 순서0, 1, -1, auto박스 모델 속성width, height요소 크기200px, 50%, auto, fit-contentmax-width, min-width, max-height, min-height요소 크기 제한5..

리엑트 ReactReact는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리이다. 컴포넌트 기반 구조로 UI를 효율적으로 업데이트하고, 상태(state) 관리와 가상 DOM을 사용하여 성능을 최적화한다. Facebook에서 개발되었다.  mdn에서 설명하는 리엑트를 진행해볼 예정이다. React 시작하기 - Web 개발 학습하기 | MDN이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경지식과 사용 예시, 로컬 컴퓨터에 React 툴체인을 설정하는 방법을 배우고 프로세스에서의 React 동작 원리를 배우기 위해서 간단developer.mozilla.org  환경 구성node.js와 visual studio code를 사용할 예정이므로 설치가 필요하다. No..

캐노니컬 태그 Canonical tagSEO 개선을 위한 중요한 기능 중 하나로 한 페이지가 가리키는 여러 개의 주소가 존재할 때, 검색 엔진에게 어떤 주소가 원본인지 알 수 있도록 사용하는 태그이다. 캐노니컬 태그 필요성파라미터(쿼리스트링)를 사용하거나, 모바일 주소와 같이 여러 주소가 나오게되면 검색엔진 로봇은 어떤 주소가 페이지를 가리키는 좋은 주소인지 알지 못한다. (https://test.com/page=1, http://m.test.com/index.jsp 와 같은 경우 외에도 쿼리스트링만 달라지는 경우에도 검색 엔진은 다른 주소로 인식한다.)  이러한 문제를 해결하는 방법으로 크게 두 가지가 있는데, 검색 엔진이 스스로 어떤 URL이 표준(캐노니컬)인지 판단하도록 하는 방법과 페이지에 표기하..

검색 엔진 최적화 SEO SEO - MDN Web Docs 용어 사전: 웹 용어 정의 | MDNSEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 순위 개선이라고도 합니다.developer.mozilla.org SEO는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정으로 검색 순위 개선이라고도 한다. 검색 엔진은 웹을 크롤링하면서 찾은 컨텐츠의 색인을 생성한다. 검색 결과로 보이는 것이 색인된 컨텐츠이다. 크롤러는 일정한 규칙을 띠르기 때문에 해당 규칙을 따라가면 웹사이트 검색 결과 최상위에 노출될 가능성이 높아지는 것이다. 검색 엔진에 대한 SEO 가이드라인을 제공하긴하지만 대형 검색 엔진의 경우 순위가 공개되지 않으므로 공식 지침에 경험, 논문과 특..

SweetAlert2스위트 알랏은 기본 alert()창 대신 사용할 수 있는 예쁜 알림창 라이브러리다. 다양한 스타일과 애니메이션을 제공하며 커스터마이징이 가능한 것이 특징이다. 또한 Promise 기반으로 동작해 사용자 응답에 따른 후속 처리가 용이하다.   SweetAlert2SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxessweetalert2.github.io  환경 구성CDN(* Jsdelivr CDN 서비스) CSS JS 분리버전   jsDelivr - A free, fast, and reliable CDN for JS and Open..

부트스트랩 Bootstrap프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크이다. HTML, CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소를 포함하며, 자바스크립트를 선택적으로 확장할 수 있다. Git-hub의 오픈 소스로 사용 가능하며 상업적 이용이 가능하다. 부트스트랩은 서로 다른 인터페이스를 사용한 여러 개발자들이 공동 작업을 하다보니 디자인이 불일치하고 관리가 어려워져 일관성을 유지하기 어려운 문제를 개선하기 위해 탄생했다. 부트스트랩은 글자, 인용문, 목록, 표, 아이콘 등 자잘한 것 뿐만 아니라 드롭다운, 버튼, 탭 등 웹 페이지에서 많이 쓰이는 요소를 대부분 내장하고 있어 재사용과 일관성을 유지하기 용이하다. 브라우저에 Bootstrap template 키..