본문 바로가기
반응형

Front-End/JAVASCRIPT8

[CSS] CSS, SCSS 차이 CSS와 SCSS는 스타일시트 언어로, 웹사이트의 디자인을 결정하는데 사용되는 언어입니다. CSS는 Cascading Style Sheets의 약자로, HTML 요소의 스타일을 지정하는데 사용됩니다. 반면 SCSS는 Sassy CSS의 약자로, CSS의 확장판이며 CSS와 완전히 호환됩니다. SCSS의 장점 - 변수 사용: SCSS는 변수를 사용하여 동일한 값을 여러 군데에서 재사용할 수 있습니다. - 중첩 규칙: CSS에서는 중첩 규칙을 사용할 수 없지만, SCSS에서는 중첩 규칙을 사용하여 코드를 더 간결하고 읽기 쉽게 만들 수 있습니다. - 믹스인(Mixin): SCSS에서는 코드를 재사용하기 위해 믹스인을 사용할 수 있습니다. - 연산: SCSS는 기본적인 연산을 지원합니다. CSS 예시 : .h.. 2024. 2. 21.
[React.js] 리액트 훅에 대해서, 여러가지 함수 리액트 훅(Hooks)은 리액트 v16.8부터 도입된 기능으로, 함수형 컴포넌트에서도 state와 생명주기 기능을 사용할 수 있게 해줍니다. 기존에는 클래스 컴포넌트에서만 사용할 수 있었던 이러한 기능들을 함수형 컴포넌트에서도 사용할 수 있게 되어, 코드의 재사용성과 구조화가 더욱 쉬워졌습니다. 주요 훅 함수는 다음과 같습니다. 1. useState 이 함수는 상태 값을 추가할 수 있게 해주며, 초기 상태값을 인자로 받습니다. 이 함수는 상태값과 해당 상태를 갱신할 수 있는 함수를 반환합니다. 2. useEffect 이 함수는 생명주기 함수인 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 합친 것입니다. useEffect 내부.. 2024. 2. 21.
[React.js] 리액트 생명주기에 대해서 리액트의 컴포넌트 생명주기(Lifecycle)는 크게 3가지 단계로 나눌 수 있습니다. 마운팅(Mounting): 컴포넌트 인스턴스가 생성되어 DOM에 삽입될 때 발생하는 단계입니다. 업데이트(Updating): props 또는 state의 변화에 따라 컴포넌트 인스턴스가 재렌더링되는 단계입니다. 언마운팅(Unmounting): 컴포넌트 인스턴스가 DOM에서 제거되는 단계입니다. 1. 마운팅 - constructor(): 컴포넌트가 생성될 때 호출되며, state 초기화 등을 할 수 있습니다. - static getDerivedStateFromProps(): props로 받아온 값을 state에 동기화시키는 용도로 사용합니다. - render(): 컴포넌트를 렌더링합니다. - componentDidMou.. 2024. 2. 19.
[JAVASCRIPT] map으로 for문 대체하기 자바스크립트 ES6에서는 for 문 대신 map 메서드를 사용하여 배열을 처리할 수 있습니다. map 메서드는 배열의 모든 요소에 대해 주어진 함수를 호출하고, 그 결과를 새로운 배열로 반환합니다. 코드 예시 : const array = [1, 2, 3, 4, 5]; const newArray = array.map(function(item) { return item * 2; }); console.log(newArray); // [2, 4, 6, 8, 10] 위의 코드에서는, map 메서드가 array의 각 요소에 대해 익명 함수를 호출하며, 이 함수는 각 요소를 2배로 만듭니다. 그 결과는 newArray에 저장되고, 이 배열은 원래 배열의 요소들이 2배가 된 새로운 배열입니다. 화살표 함수를 사용 예시.. 2024. 2. 14.
반응형