전체 글32 [React] Element란? 12개의 목차중에 3개까지 왔네요. 이번 글에서는 React Element에 대해 알아보겠습니다.Element란 ? React Element는 React가 화면에 렌더링할 수 있는 단순한 객체입니다. 이는 JavaScript 객체로 HTML 태그 또는 React 컴포넌트를 나타내며 React의 가상 DOM을 구성하는 기본 단위입니다. 이 React Element는 Plain Object 이며 Plain Object 이기 때문에 생성하는데 비용이 적게 듭니다.또한 변할수 없는 객체입니다. 이렇게 생성된 React Element는 DOM Element와 React Element가 일치 하도록 DOM을 업데이트하는데 이 업데이트는 React Element를 다시 렌더링하는것입니다라고 설명되어있네요. 같은 El.. 2024. 9. 5. [React] JSX란 ? 리액트 자습서에 주요 개념중 2번쨰 개념에 대해 정리한 내용입니다.JSX란?React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. JSX는 Javascript를 확장한 문법(JavaScript XML)이며, React에서 UI를 구성할 때 사용하는 문법 확장입니다. HTML과 유사한 구문을 JavaScript 코드 안에 작성할 수 있게 해 주며, UI를 선언적이고 직관적으로 정의할 수 있도록 돕습니다.특징위에 태그 문법은 문자열도, HTML도아닌 JSX(JavaScript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다.JSX는 React .. 2024. 9. 5. React가 뭔가요.. ? 주말에 가만히 누워서 유튜브를 보던중 ... 평소에 공부해볼까 말까 하던 리액트에 갑자기 꽃혀서 마구 뒤져보기시작했습니다. 하지만 아는거라곤 예전에 배운 학교에서 배운 HTML, CSS, JavaScript 등 배운 지식들을 접미 시켜볼려는데 가물가물하군요... 그래서 이번에 제대로 공부해보자! 싶어서 기초부터 잡아나갈려고 합니다.(공식 문서 순서대로 공부 할 예정) React란?React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. 공식문서에는 위와 같이 설명되어있습니다. 리액트는 SPA(Single Page Application)으로서 하나의 HTM.. 2024. 9. 2. [Dart] Factory 생성자 이번 글에서는 Dart에서 자주 보이는 Factory Constructor에 대해 알아보겠습니다. 아마 Freezed를 사용하시는 분들은 자주 보셨을 거라고 생각합니다. 또는 다른 모델 및 위젯에도 사용 가능합니다.일반적인 생성자와 Factory Constructor의 차이점새로운 인스턴스 반환 여부:일반적인 생성자는 항상 새로운 인스턴스를 반환하지만, Factory Constructor는 반드시 새로운 인스턴스를 반환할 필요가 없습니다. 이미 생성된 인스턴스를 반환하거나 특정 조건에 따라 다른 인스턴스를 반환할 수 있습니다.하위 클래스의 인스턴스 반환 가능:Factory Constructor는 클래스의 하위 클래스 인스턴스를 반환할 수 있습니다. 이를 통해 객체 생성 시 동적으로 하위 클래스를 결정할 .. 2024. 8. 29. [Dart] 추상 클래스와 인터페이스의 차이점 이번 글에서는 추상 클래스와 인터페이스의 차이점에 대해 작성해보겠습니다. 평소에 두 가지를 사용할 때 남용되는 부분이 있어 이번 글에서 정리하고 넘어가면 좋을거 같아서 작성해봅니다. Abstract Classabstract 키워드를 사용하여 추상 클래스를 정의할 수 있습니다. 추상 클래스는 인스턴스를 생성할 수 없으며, 서브클래스에서 구현해야 하는 추상 메서드를 포함할 수 있습니다. 동물은 잘 수 있으며, 소리를 낼 수 있죠? 해당 구조를 가진 Animal 클래스를 생성해줍니다. 잘 때 내는 소리는 모두 같다고 명시하며, 소리는 다를 수도 있다는 가정하에 추상적인 메서드를 작성해줍니다. Animal 클래스를 상속받은 강아지, 개 Class를 생성해주고, 어떤 소리를 내는지는 정해두지 않았죠? 해당 내용을.. 2024. 8. 23. [Flutter] flutter_gen을 이용한 Asset 관리 저는 개발할 때 폰트, 색상, 이미지등을 관리할 때 어려움을 느낀적이 있었습니다.아래 처럼 선언할 경우 관리 및 추적이 어려움.Widget build(BuildContext context) { return Image.asset('assets/images/profile.jpeg');} flutter_gen을 사용하니 아래 처럼 사용가능함.Widget build(BuildContext context) { return Assets.images.profile.image();} flutter_genflutter_gen은 플러터 프로젝트에서 Asset 관리 및 코드 자동 생성을 도와주는 도구입니다.이 도구를 사용하면 Flutter에서 이미지, 폰트, 색상 등의 리소스를 더 간편하게 관리할 수 있습니다. flut.. 2024. 8. 13. 이전 1 2 3 4 5 6 다음
