728x90 FrontEnd81 tabIndex 키보드만을 사용해서 작성하기 위해 사용 tabindex=“0” ==> (상호작용이 가능한 요소처럼 해당 요소로 포커스가 이동) tabindex=“-1”==> (상호작용이 가능한 요소라도 해당 요소로 포커스 이동 x) tabindex=“양수”==>(해당 요소가 HTML 문서 내 위치 상관없이 우선적 포커스) 2022. 8. 15. JSX JS에 XML을 추가해 확장한 문법입니다. 브라우저에서 바벨 을 사용해 실행 전 자바스크립트 형태의 코드로 변환 합니다. // 실제 작성할 JSX 예시 function App() { return ( Hello, good! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. function App() { return React.createElement("h1", null, "Hello, good!"); } 형태 1. 부모 요소 가 감싸는 형태여야 합니다. 컴포넌트 내부는 DOM 트리 구조로 이루어져 있어야 가상 돔 ( Virtual DOM ) 에서 컴포넌트 변화를 감지 합니다. ex) 에러 // Fail to compile // parsing error : adjacent.. 2022. 8. 15. React Router 1. 중첩 라우트(Nested Routes)란?중첩 라우트는 특정 경로(path)가 다른 라우트의 부모 경로일 때 사용됩니다.부모 라우트의 공통 레이아웃을 렌더링하면서, 하위 라우트가 부모의 특정 영역에 렌더링됩니다.2. 코드 분석(1) 부모 라우트jsx코드 복사Route path="/" element={Layout />}>path="/": 루트 경로(/)에 해당합니다.element={}: 이 경로가 활성화되면, Layout 컴포넌트를 렌더링합니다.Layout 컴포넌트 내부에는 중첩된 라우트를 렌더링하기 위해 ****이 필요합니다.(2) 하위 라우트jsx코드 복사Route index element={Main />} />index: 부모 라우트(/)의 기본 라우트로 동작합니다.URL이 정확히 /일 때만 렌.. 2022. 8. 1. 생명주기 ( 라이플 사이클) 모든 리액트 컴포넌트에는 생명주기(라이플 사이클)이 존재합니다. 컴포넌트는생성 (Mounting)=> 업데이트 (Updating)=> 제거 (unMounting) 의 생명주기 를 갖습니다. 클래스 컴포넌트 는 생명주기( 라이프사이클 ) 을 활용하고, 함수형 컴포넌트 는 Hook 을 사용합니다. 생명주기 (라이플 사이클) 클래스 컴포넌트 에서 활용하는 메소드 입니다. 2022. 7. 28. React.js 클라이언트 템플릿라이브러리 What ?React.jsfacebook 이 만든 JavaScript UI 라이브러리 입니다.react 는 HTML 1개 (싱글페이지) 로 클라이언트 렌더링 사용 HTML : 요소 태그 (꺽쇠)DOM --> 객체 TREE구조console --> js 입력 하는 html 내 요소 확인이 필요--->document --> 현재의 돔을 나타냄ex)document. body --> 돔의 바디부분만 출력document.body.childNodes --> NodeList에는 요소 노드뿐만 아니라 주석 노드와 같은 비 요소 노드를 포함document.body.children --> HTMLCollection을 반환합니다. 비 요소 노드는 모두 제외document.getElements.. 2022. 7. 23. 숫자 타입 자바 스크립트는 하나의 숫자 타입만 존재합니다. 타 언어 ( C / JAVA)의 경우, 정수와 실수를 구별해 다양한 타입을 제공합니다.ex)int, long, float, double 자바 스크립트에서 숫자 타입 값은 배정밀도 64비트 부동소수점 형식 을 따르며, 하나의 타입만 존재해 실수로 처리합니다. ex) console.log (3 / 2 ) // 1.5 cf) 세 가지의 특별한 값이 존재 합니다. Infinity : 양의 무한대 -infinity: 음의 무한대 NaN : 산술 연산 불가 ( JS 는 대소문자를 구별해 소문자일 시 식별자로 인식)ex) console.log(10/0) // Infinity console.log(1+’가”) // NaNcf) JS 는 대소문자를 구별해.. 2022. 7. 22. 이전 1 ··· 9 10 11 12 13 14 다음 728x90
