컴포넌트 [ Vue.js ] Vue 가이드 - 컴포넌트 사용 node : v14.17.1 Vue : v2 를 참고하여 작성 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캠슐화하는 데 사용 독립적으로 재사용할 수 있는 추상적 개념 컴포넌트로 인해 개발속도와 코드의 가독성, 유지보수성 효율적으로 늘어남 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화 component 예시 1 [ index.html ] [ index.js ] [ R... JavaScriptjscomponent컴포넌트vue.jsJavaScript [CS] React Day-18 페이지를 보여주기 위해서 HTML, CSS, JS로 나누기보다 하나의 파일에 명시하여 작성할 수 있게 도와주는 선언형 프로그래밍입니다. 따라서 "Babel"이라는 친구가 있어야 컴파일하고 브라우저가 읽어 화면에 렌더링 할 수 있습니다. React JSX React는 DOM과 다르게 CSS, JSX문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. React JSX를 사용하면 DOM(HTM... 범용성component선언형JSX리액트ReactJavaScript XMLReact JSX컴포넌트MapJSX [리액트 기초반] 2주차 - 컴포넌트 이 페이지는 <header>, <container>, <footer> 3개의 컴포넌트로 이루어져 있다. <container>는 다시 <image>와 <contents> 2개의 컴포넌트로 나뉜다. 컴포넌트 ∋ 컴포넌트 구조를 갖는 <container>는 <image>와 <contents>에게 각각의 데이터를 전달한다. 컴포넌트의 생애주기를 일목요연하게 보여주기 때문에 이후에 등장한 함수형 컴포... React스파르타코딩클럽리액트 기초반컴포넌트React [react] 노마드코더 영화웹서비스 제작 2.2 동적 컴포넌트 만들기 지난시간에 우리는 이렇게 생긴 컴포넌트를 만들었다. 그런데 이 컴포넌트는 효율적이지 않다. 우리가 새로운 음식을 추가할 때마다 복붙해야하기 때문이다. 여기서 자바스크립트적인 활용이 드러나는데, 바로 배열 api의 활용이다! 우리는 다양한 속성값을 오브젝트의 배열로 만들고, map()를 이용해 비슷하게 반복하는 내용을 간단히 만들 수 있었다. 선생님은 < Food / >로 하셨는데, 나는 < ... 동적컴포넌트컴포넌트리액트리액트 스타일동적컴포넌트 [Spring] Chapter 6. 컴포넌트 스캔 지금까지는 자바 코드의 @Bean이나 XML의 <bean>등을 통해 설정 정보에 스프링 빈을 직접 나열하여 등록함 컴포넌트 스캔 : 설정 정보가 없어도 자동으로 스프링 빈 등록 [src/main/java/hello/core/AutoAppConfig.java] 💡 참고 컴포넌트 스캔 사용 시 @Configuration이 붙은 설정 정보도 자동으로 등록됨 일반적으로 설정 정보는 컴포넌트 스캔 대... SCAN컴포넌트component스프링Autowired스캔SpringAutowired [TIL] Day-28 App에서 모든 상태를 중앙 관리 하기 때문에 자식 컴포넌트 끼리 의존성이 없다. 필요한 기능이 있다면 컴포넌트만 추가하고 부모의 상태를 이용하면 된다. 자식의 상태에 어떤 값이 들어가는 지에 따라 화면이 그려진다. → 어떤 상태가 바뀌면 그 상태를 사용하는 컴포넌트가 동시에 렌더링이 되도록 해야 함 자식들은 부모의 상태를 물려받아서, 부모의 상태가 변하는 것에 따라 자식들이 변화되도록 해야... 컴포넌트고양이 사진첩프로그래머스고양이 사진첩 Effects 코드를 딱 한번만 실행하고, 다시는 실행하지 않는 방법에 대해 배울 예정 컴포넌트의 state 가 변화하면 다시 render 특정 코드들를 첫 번째 component render 에서만 실행하고 싶은 경우, 사용할 수 있는 방법 ex) API 를 통해 데이터를 가져올 때 컴포넌트 렌더에서 API를 부르고 이후 상태가 변화할 때 그 API 에서 데이터를 다시 가져오지 않게 만들 수 있다. 두 ... React컴포넌트depsuseEffecthookCleanupeffectsReact.useEffect()Cleanup 1주차 화요일 리액트를 배워야하는 이유 npm trends에서 그래프로 봤을 때 react 사용자가 가장 많음 react.js -> 웹 react-native -> 앱 (크로스 플랫폼으로 안드로이드, ios 두 곳에 모두 배포 가능) react + electron -> pc앱 올인원으로 사용 가능 React 핵심 component : UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것 component... 클래스형 컴포넌트함수형 컴포넌트React컴포넌트React
[ Vue.js ] Vue 가이드 - 컴포넌트 사용 node : v14.17.1 Vue : v2 를 참고하여 작성 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캠슐화하는 데 사용 독립적으로 재사용할 수 있는 추상적 개념 컴포넌트로 인해 개발속도와 코드의 가독성, 유지보수성 효율적으로 늘어남 모든 유형의 애플리케이션 인터페이스를 컴포넌트 트리로 추상화 component 예시 1 [ index.html ] [ index.js ] [ R... JavaScriptjscomponent컴포넌트vue.jsJavaScript [CS] React Day-18 페이지를 보여주기 위해서 HTML, CSS, JS로 나누기보다 하나의 파일에 명시하여 작성할 수 있게 도와주는 선언형 프로그래밍입니다. 따라서 "Babel"이라는 친구가 있어야 컴파일하고 브라우저가 읽어 화면에 렌더링 할 수 있습니다. React JSX React는 DOM과 다르게 CSS, JSX문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다. React JSX를 사용하면 DOM(HTM... 범용성component선언형JSX리액트ReactJavaScript XMLReact JSX컴포넌트MapJSX [리액트 기초반] 2주차 - 컴포넌트 이 페이지는 <header>, <container>, <footer> 3개의 컴포넌트로 이루어져 있다. <container>는 다시 <image>와 <contents> 2개의 컴포넌트로 나뉜다. 컴포넌트 ∋ 컴포넌트 구조를 갖는 <container>는 <image>와 <contents>에게 각각의 데이터를 전달한다. 컴포넌트의 생애주기를 일목요연하게 보여주기 때문에 이후에 등장한 함수형 컴포... React스파르타코딩클럽리액트 기초반컴포넌트React [react] 노마드코더 영화웹서비스 제작 2.2 동적 컴포넌트 만들기 지난시간에 우리는 이렇게 생긴 컴포넌트를 만들었다. 그런데 이 컴포넌트는 효율적이지 않다. 우리가 새로운 음식을 추가할 때마다 복붙해야하기 때문이다. 여기서 자바스크립트적인 활용이 드러나는데, 바로 배열 api의 활용이다! 우리는 다양한 속성값을 오브젝트의 배열로 만들고, map()를 이용해 비슷하게 반복하는 내용을 간단히 만들 수 있었다. 선생님은 < Food / >로 하셨는데, 나는 < ... 동적컴포넌트컴포넌트리액트리액트 스타일동적컴포넌트 [Spring] Chapter 6. 컴포넌트 스캔 지금까지는 자바 코드의 @Bean이나 XML의 <bean>등을 통해 설정 정보에 스프링 빈을 직접 나열하여 등록함 컴포넌트 스캔 : 설정 정보가 없어도 자동으로 스프링 빈 등록 [src/main/java/hello/core/AutoAppConfig.java] 💡 참고 컴포넌트 스캔 사용 시 @Configuration이 붙은 설정 정보도 자동으로 등록됨 일반적으로 설정 정보는 컴포넌트 스캔 대... SCAN컴포넌트component스프링Autowired스캔SpringAutowired [TIL] Day-28 App에서 모든 상태를 중앙 관리 하기 때문에 자식 컴포넌트 끼리 의존성이 없다. 필요한 기능이 있다면 컴포넌트만 추가하고 부모의 상태를 이용하면 된다. 자식의 상태에 어떤 값이 들어가는 지에 따라 화면이 그려진다. → 어떤 상태가 바뀌면 그 상태를 사용하는 컴포넌트가 동시에 렌더링이 되도록 해야 함 자식들은 부모의 상태를 물려받아서, 부모의 상태가 변하는 것에 따라 자식들이 변화되도록 해야... 컴포넌트고양이 사진첩프로그래머스고양이 사진첩 Effects 코드를 딱 한번만 실행하고, 다시는 실행하지 않는 방법에 대해 배울 예정 컴포넌트의 state 가 변화하면 다시 render 특정 코드들를 첫 번째 component render 에서만 실행하고 싶은 경우, 사용할 수 있는 방법 ex) API 를 통해 데이터를 가져올 때 컴포넌트 렌더에서 API를 부르고 이후 상태가 변화할 때 그 API 에서 데이터를 다시 가져오지 않게 만들 수 있다. 두 ... React컴포넌트depsuseEffecthookCleanupeffectsReact.useEffect()Cleanup 1주차 화요일 리액트를 배워야하는 이유 npm trends에서 그래프로 봤을 때 react 사용자가 가장 많음 react.js -> 웹 react-native -> 앱 (크로스 플랫폼으로 안드로이드, ios 두 곳에 모두 배포 가능) react + electron -> pc앱 올인원으로 사용 가능 React 핵심 component : UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것 component... 클래스형 컴포넌트함수형 컴포넌트React컴포넌트React