Daehyunii's Dev-blog

PureComponent shouldComponentUpdate를 구현해 놓은 컴포넌트다. pureComponent의 첫 번째 기능은 state의 변경이 있는 경우에 자동으로 true, false를 계산하여 반환한다. 이를 통해 state의 변화가 있는 경우에만 리렌더링 되도록 최적화 할 수 있다. 다음 코드를 살펴보자. import React, { Component } from "react"; class Test extends Component { state = { counter: 0, }; onClick = () => { this.setState({}); }; render() { return ( 클릭 ); } } export default Test; PureComponent가 아닌 Component로..

컴포넌트 Slots slot이라는 태그를 사용하여 상위 컴포넌트에 작성한 하위 컴포넌트가 slot 부분에 들어가서 화면이 그려진다. slot 태그에 name을 지정할 수 있고, 이를 v-slot으로 받을 수 있다. v-slot 디렉티브는 #이라는 약어로 사용할 수 있다. 상위 컴포넌트 abc 하위 컴포넌트 Hello Hi 동적 컴포넌트 동적으로 컴포넌트를 바꿔줄 수 있는 기능이다. component 태그에 is라는 속성을 사용하여 동적으로 바뀔 컴포넌트 이름을 작성해준다. 여기서 컴포넌트 이름은 스크립트 안에 지정된 이름이나 전역 컴포넌트 이름만 사용 가능하다. 위와 같은 방식으로 currentComponent의 값을 변경 시켜주어 동적으로 컴포넌트를 바꾸면 컴포넌트가 unmounted 되고 다시 cre..

shouldComponentUpdate 라이프 사이클 메서드 렌더링시 state, props의 변경이 있는 경우에만 렌더링 될 수 있도록하는 최적화에 유용한 메서드이다. 아래의 코드를 보면 click버튼이 있는 하나의 테스트용 컴포넌트이다. click 이벤트를 넣어줬지만 click을 여러번 누르더라도 계속해서 동일하게 빈 객체로 setState하기 때문에 state는 변경되지 않는다. 즉 여러번의 click에도 state는 바뀌는 것이 없다. 리액트의 핵심은 '상태가 변화하면 새롭게 그린다!' 라고 볼 수 있다. 리액트에서 리렌더링이 발생하는 이유는 크게 3가지 이다. state가 변하거나, props가 변하거나, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 같이 리렌더링되는 경우 3가지 이다. 그렇다면..

Node.js와 NPM 1. node.js 자바스크립트 런타임이다. 브라우저에서 자바스크립트가 동작할 수 있는 환경을 만들어주는 것이다. 더 안정적인 LTS 버전을 사용하자. npm node.js 패키지 매니저이다. 여러 패키지를 설치하여 우리가 개발하기 용이하게 해준다. nvm node.js 버전을 바꾸면서 사용할 수 있도록 도와주는 패키지이다. 이 때, node.js가 설치되기 전에 설치를 해야 한다. nvm-setup 또는 명령어로 설치할 수 있다. n 이미 node.js가 설치되어 있는 상태이고 삭제하기 어렵다면 nvm 대신 n 패키지를 설치하면 좋다. npm으로 설치할 수 있고, 원하는 node.js 버전을 설치할 수 있게 도와주는 패키지이다. 프로젝트를 npm으로 관리하고 싶으면 아래 명령어로..

조건부 렌더링 1. v-if, v-else-if, v-else 해당 디렉티브를 사용하여 조건문을 사용할 수 있다. 각 요소 중간에 다른 요소가 들어가지 않으면 true, false에 따라 렌더링을 해준다. 참고로 빈 배열이나 객체는 truthy한 값이라 결과가 true로 나온다. Hello Vue! Application Good Morning~ 만약 v-else-if에서 div 태그를 렌더링하지 않고, 그 내부의 요소만 렌더링하고 싶다면 template 태그를 사용하면 된다. v-if는 falsy한 값이 나오면 lazy하다고 할 수 있다. 구조적으로 생성조차 하지 않기 때문에 초기 렌더링 비용이 낮지만, 전환 비용은 높다. 2. v-show 조건에 따라 요소를 보이거나 보이지 않게 해주는데, CSS st..

Computed와 Watch 1. computed 계산된 데이터를 추가해두는 옵션이다. 아래와 같이 함수가 여러번 실행된다고 했을 때, 이미 계산된 값을 또 계산하는 것은 비효율적일 수 있다. const App = { data() { return { count: 3, }; }, methods: { double() { return this.count * 2; }, }, }; const vm = Vue.createApp(App).mount('#app'); {{ count }} {{ double() }} {{ double() }} {{ double() }} computed는 계산된 결과를 캐싱하기 때문에 같은 로직을 또 실행하지 않고 저장된 값을 사용하게 된다. 연산을 낭비하지 않는 장점을 가지게 된다. co..

App.vue {{ header }} SearchBar.vue 🔍 {{ title.Title }} Year : {{ title.Year }} / Type : {{ title.Type }} ➕ 더 보기 MovieInfo.vue 제목 : {{ result.Title }} 🗓 개봉일 : {{ result.Released }} ⏳ 상영시간 : {{ result.Runtime }} 📽 장르 : {{ result.Genre }} 🎬 감독 : {{ result.Director }} 🎥 배우 : {{ result.Actors }} 🏆 수상 경력 : {{ result.Awards }} 📝 줄거리 : {{ result.Plot }} ☑️ 평점 −{{ score.Source }}, {{ score.Value }}

웹이란? 'World Wide Web'의 줄임말로, 인터넷 위에서 동작하는 서비스입니다. 📚유래 1989년 '팀 버너스 리'에 의해서 붙여진 이름이 현재까지 사용되고 있는 웹은 정보들이 서로 연결되어 있는 형태가 실이 엉켜 있는 거미줄 모양과 유사해 거미줄을 의미하는 'Web'이라는 단어를 그대로 사용했다고 합니다. 웹은 사용자들이 정보를 나누는 정보의 공간을 제공해 줍니다. 웹은 하이퍼텍스트 구조를 활용해서 인터넷상의 방대한 양의 정보를 서로 연결해 줍니다. 웹은 탄생 이래로 여러 단계를 거쳐 발전해 왔습니다. 가장 초기 단계인 웹 1.0, 그리고 우리가 가장 익숙하게 사용하고 있는 웹2.0 그리고 이제는 웹3.0으로 나아가고 있습니다. (웹 뒤에 있는 숫자는 웹의 발전 단계를 의미합니다.) 웹 1.0..