분류 전체보기 (55) 썸네일형 리스트형 19장 모던 자바스크립트 DeepDive 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍 언어이며객체는 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조라고 할 수 있다.이때 객체의 상태 데이터를 프로퍼티, 동작을 메서드라 부른다.19.2 상속과 프로토타입자바스크립트는 프로토타입을 기반으로 상속을 구현하여 불필요한 중복을 제거한다. function Circle(radius) { this.radius = radius; this.getArea = function () { return Math.PI * this.radius ** 2; };}const circle1 = new Circle(1);const circle2 = new Circle(2);console.log(circle1.getArea === circle2.g.. React 외부 구현 상태관리와 전역 상태관리의 장점 • React 내부에서 상태를 관리하는 방법React에서 상태 관리는 컴포넌트 내에서 데이터(상태)를 관리하고 업데이트하는 방법입니다. 상태는 컴포넌트가 렌더링하고 유지하는 데이터를 의미하며, 이를 통해 UI가 사용자 상호작용에 따라 동적으로 변경됩니다. 상태 관리를 위해 가장 많이 사용하는 훅(Hook)은 useState와 useReducer, Redux 입니다. • Context API란?Context API는 React에서 전역적으로 데이터를 전달하기 위한 방법입니다. 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 대신, Context API를 사용하면 중간 단계의 컴포넌트들을 거치지 않고 필요한 컴포넌트에 데이터를 직접 제공할 수 있습니다.• React 외부에서 상태를 관리하는.. Tailwind CSS 설치 & 사용방법 및 장단점 • Tailwind CSS란 ?Tailwind CSS는 Utility-First 접근 방식을 사용하는 CSS 프레임워크입니다. 다른 CSS 프레임워크처럼 미리 정의된 컴포넌트를 제공하는 대신, Tailwind는 수백 개의 작은 CSS 유틸리티 클래스(예: flex, pt-4, text-center)를 제공합니다. 이를 통해 개발자는 HTML에서 직접 스타일을 빠르게 작성하고 커스터마이징할 수 있습니다. Tailwind CSS는 스타일링을 더 빠르고 일관되게 만들어주며, 반복적인 CSS 코드를 줄여주는 데 큰 도움을 줍니다. • Utility-First란 ? Utility-First는 각 스타일 속성을 작은 유틸리티 클래스로 나누고, 이를 HTML 요소에 적용하는 방식입니다. 이 접근 방식은 일반적인 BE.. Styled-Components 개념 정리하기 • Styled-Components의 개념과 장단점컴포넌트가 많은 경우 스타일링을 하다보면class 만들어놓은걸 까먹고 중복해서 또 만들거나갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나CSS 파일이 너무 길어져서 수정이 어려운 경우이와 같은 불편함이 발생할 수 있습니다.이때 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수 있는 또 클래스명을 중복되지 않게 자동으로 만들어지기 때문에 따로 지정하지 않아도 되기에 편리합니다.styled-components 라이브러리를 사용할 수 있습니다.npm install styled-componentsyarn add styled-components//사용하고자 하는 컴포넌트에 추가import styled from 'styled-components'• CSS-.. SCSS 개념정리 SCSS 중첩 사용 시 발생하는 장단점장점:HTML 구조와 유사하게 작성할 수 있어 가독성이 높아짐.코드가 간결해지고 유지보수가 용이해짐.단점:중첩이 깊어지면 코드가 복잡해지고 유지보수가 어려워질 수 있음.높은 중첩은 CSS 성능에 부정적인 영향을 줄 수 있음.$font-big: 18px;$font-mid: 13px;$font-sml: 12px;@mixin practice($font) { display: flex; font-size: $font;}.header-container { @include flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: black; ul { .. 강아지 정보 제공 사이트 프로젝트 prettier는 코드 포맷터로 우리가 작성한 코드를 가독성 좋게 만들어주는 환경도구이 도구를 사용하면 여러 개발자들의 코드 스타일을 통일하여 균일한 코드품질을 가질 수 있게 된다. 설치방법 :yarn add --dev prettier npm install -D prettier 이용하고자 하는 프로젝트 폴더에 .prettierrc 파일을 생성 후 아래 코드 저장!{ "arrowParens": "always", "bracketSameLine": false, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxSingleQuo.. 함수형 컴포넌트 생명주기 • useEffect의 배열 형태에 따른 실행시점 차이 +• 마운트, 언마운트, 리렌더링, 특정 상태값 변화 마운트마운트는 컴포넌트가 처음으로 DOM에 삽입되는 시점을 의미합니다. 이 단계에서 컴포넌트의 초기 설정이 완료되고, 초기 데이터 페칭, 이벤트 리스너 등록 등의 작업을 수행할 수 있습니다.// 1. 컴포넌트가 최초 렌더링 되는 경우에 실행되는 useEffect 함수를 구현. (마운트)useEffect(() => { console.log('컴포넌트가 마운트됨!'); }, []); 빈 배열 []로 인해, 컴포넌트가 처음 렌더링될 때 한 번 실행됩니다. 업데이트리렌더링은 컴포넌트의 상태가 변경되거나 부모 컴포넌트로부터 새로운 props를 받을 때 발생합니다. 이 과정에서 컴포넌트는 새로운 상.. 클래스 컴포넌트 생명주기 React 클래스형 컴포넌트에서는 컴포넌트가 특정 시점에 어떤 작업을 해야 할지 제어할 수 있는 생명주기 메서드가 제공됩니다. 이번 글에서는 componentDidMount, componentDidUpdate, componentWillUnmount 메서드가 각각 언제 실행되며, 어떤 용도로 사용되는지 알아보겠습니다.componentDidMount이 실행되는 시점componentDidMount() { // 초기 데이터 로드 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => this.setState({ data })); // 이벤트 리스너 등록 window.addEventListener.. 이전 1 2 3 4 5 ··· 7 다음
