ruriruriya

react에서는 네비게이션 바를 어떻게 만들까?react-router 라이브러리로 모듈화 시키고 간편하게 라우팅 설정을 할 수 있다. react-router 주요 기능동적 라우팅( Dynamic Routing) : 사용자가 특정  URL에 접근할 때 해당 URL에 필요한 컴포넌트를 렌더링라우트 가드(Route Guards) : 사용자 인증 상태 등에 따라 특정 라우트를 제한할 수 있음.레이아웃 관리 : 'Outlet'과 같은 기능을 통해 페이지 레이아웃을 쉽게 관리데이터 로딩 전략 : 로딩과 페칭을 효율적으로 처리하기 위한 'Loader' 기능이 제공코드 스플리팅(Code Splitting) :  'React.lazy'와 'Suspense'를 이용하여 필요한 라우트만 로드하고, 다른 페이지로 이동할 때 ..

자바스크립트의 모듈 시스템은 코드를 여러 파일로 분할하고, 각 파일에서 개별적으로 기능을 정의한 후 다른 파일에서 재사용할 수 있게 해준다. 이를 통해 코드의 재사용성과 유지보수성을 높이고, 네임스페이스 오염을 방지할 수 있다. ES6에서 공식적으로 모듈 시스템을 지원하기 시작했으며, import와 export 문을 사용한다. 모듈 사용 방법 export - 모듈을 사용하기 위해서는 우선 기능을 정의하고 내보내야 한다. import - 그 다음, 다른 파일에서 그 기능을 불러와서 사용할 수 있다. 1. 기능 내보내기 [ mathUtils.js ] // 여러 함수를 export 할 수 있습니다. export function add(x, y) { return x + y; } export function su..

자바스크립트의 Destructuring에 대해서 배열에서와 객체에서는 어떻게 쓰이는 지 알아보자. 배열에서의 디스트럭처링 배열의 각 요소를 변수로 쉽게 할당할 수 있다. const numbers = [1, 2, 3]; const [one, two, three] = numbers; console.log(one); // 1 console.log(two); // 2 console.log(three); // 3 기본값 설정 배열의 요소가 누락되었을 때 기본값을 지정할 수 있다. const [a, b, c = 3] = [1, 2]; console.log(a, b, c); // 1, 2, 3 나머지 요소 가져오기 '...' 연산자를 사용하여 배열의 나머지 부분을 새 배열로 가져올 수 있다. const [first,..

자바스크립트의 Set과 Map, 이것들이 배열과 객체와의 차이점은 무엇인지 알아보자. Set Set 객체는 값의 집합으로, 중복을 허용하지 않는다. 각 요소는 유일무이하며, 삽입 순서가 유지된다. Set과 배열의 차이점 특성 Set 배열 중복 허용 허용하지 않음 허용함 요소 접근 인덱스 없음 인덱스 있음 순서 유지 유지함 유지함 성능 검색과 유니크 관리에 유리 검색 및 정렬에서 성능 저하 가능 [ Set의 주요 함수와 예시 ] add(value): 집합에 값을 추가 delete(value): 집합에서 값을 제거 has(value): 집합에 특정 값이 있는지 확인 clear(): 집합의 모든 요소를 제거 size: 집합의 크기를 반환 let mySet = new Set(); // 값 추가 mySet.add..

자바스크립트의 배열과 객체에 대해 알아보자. Array (배열) 배열은 여러 데이터를 순서대로 저장할 수 있는 구조로, 각 요소에는 인덱스를 통해 접근할 수 있다. 인덱스는 0부터 시작g한다. [배열 생성 및 접근] // 배열 생성 let fruits = ['사과', '바나나', '체리']; // 배열 요소 접근 console.log(fruits[0]); // '사과' console.log(fruits[1]); // '바나나' console.log(fruits[2]); // '체리' // 배열 길이 확인 console.log(fruits.length); // 3 [배열 요소 추가 및 제거] // 맨 끝에 요소 추가 fruits.push('오렌지'); console.log(fruits); // ['사과',..

자바스크립트에서 변수를 선언할 때 쓰이는 키워드로는 const와 let이 있다. 기존에 var라는 키워드가 있었지만 var는 언제 어디서나 업데이트할 수 있었기 때문에 그것보다 업그레이드 되어서 ES6에서 도입되었다. 차이점은 const는 상수이고, 값이 바뀔 수 없다. let은 새로운 것을 생성할 때 사용하는 것이고 그 후에는 let 키워드를 쓰지 않고 처음 생성했던 변수명을 사용하여 값을 바꿀 수 있다. 보통 const를 기본적으로 사용하고 변수를 업데이트 하고 싶을 때는 let 키워드를 사용한다. 결론적으로 강력권장하는 규칙은, 기본적으로 const를 쓰고 필요할 때만 let을 쓰되, var는 쓰지 말 것을 강조한다. [예시] //상수 바뀌지 않은 값 계속 유지 const a = 5; const b..

HTML 태그를 선택해서 스타일 적용으로 버튼 클릭 시 블랙모드/화이트모드를 만들어보자. 기본 구조를 만들어서 button 속성의 input 태그를 작성하고 버튼을 클릭 시 검은색 배경 흰 글씨인 블랙모드와 흰 배경과 검은 글씨 화이트 모드를 자바스크립트로 작성한다. WEB1 > HTML CSS JavaScript JavaScript Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambl..

onclick 속성 값으로는 반드시 자바스크립트가 들어가야 한다. 웹브라우저가 기억하고 있다가 onclick 속성의 태그를 사용자가 클릭했을 때 자바스크립트 문법에 따라 웹브라우저가 동작한다. 이러한 것을 이벤트라고 한다. HTML 속성 JavaScript 이벤트 웹브라우저에서 일어날 수 있는 이벤트 종류에는 대표적으로 클릭 시, 글씨 입력 시 등이 있다. 10개에서 20개 정도 되는 이벤트들을 정의하고 있다. 그 이벤트를 이용하여 사용자와 상호작용하는 웹페이지, 웹사이트를 만들 수 있다. onclick: 요소를 클릭할 때 발생 onmouseover: 요소 위로 마우스를 움직일 때 발생 onmouseout: 요소에서 마우스를 움직일 때 발생 onkeydown: 키보드의 키를 누를 때 발생 onkeyup:..