분류 전체보기

[들어가기 전에] 화면을 개발할 때 전체적인 디자인은 퍼블리셔가 만들어주기 때문에 template를 그대로 가져와 사용했습니다. 그러다 보니 v-slot이 정확히 무슨 역할을 하는지 자세히 모르고 사용하였는데요...! 그래서 오늘은 v-slot이 무엇인지, 언제 사용하면 좋을지... 에 대해서 알아보겠습니다 👀 [v-slot] 먼저 slot은 '어떤 자리에 무언가를 넣는다'라는 의미입니다. 그리고 v-slot은 '부모 컴포넌트가 자식 컴포넌트에 콘텐츠를 주입하고 데이터를 전달한다'라는 의미입니다. 어떤 자리 = 자식 컴포넌트 무언가 = 콘텐츠 or 데이터 라고 생각하면 왜 v-slot이라고 명명했는지 이해가 쉽겠죠?! 원래는 slot과 slot-scope가 존재했는데 2.6.0 버전에서 이를 통합한 v-..

[axios] 프로젝트를 하다 보면... 특히 협업을 하다 보면 서버와 통신할 일이 자주 생깁니다. 통신하는 방법이 여러 가지가 있는데요. 그중 axios 라이브러리를 통해 통신하는 방법을 알아보겠습니다! axios는 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리입니다. Vue에서만 사용할 수 있다.. 이런 건 아니라는 의미죠! https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: P..

[들어가기 전에] 화면 작업을 하다 보면 레고 조립(?)하는 거 같다고 자주 느끼는데요...!ㅋㅋㅋㅋㅋ 레고와 같은 컴포넌트는 Vue에서 중요한 부분 중 하나입니다! 애플리케이션의 구조, 유지보수성, 재사용성, 협업 등 다양한 측면에서 핵심적인 역할을 해요. 저는 팀 단위로 프로젝트를 진행하고 있기 때문에 이러한 역할을 한다는 게 더 와닿는 거 같아요. 그런데 컴포넌트 간 데이터 전달은 어떻게 할까요? 바로 props와 emit입니다. 부모 컴포넌트 ➡️ 자식 컴포넌트 - props 자식 컴포넌트 ➡️ 부모 컴포넌트 - emit 언제 사용하는지는 알았으니 어떻게 사용하는지를 알아볼게요! [props] 1. 부모 컴포넌트 ➡️ 자식 컴포넌트로 props 전달하기 2. 자식 컴포넌트에서 props 받기 {{..

[들어가기 전에] Vue를 접하면서 점차 주어진 기능만 구현하려고 하는... 그러니까 돌아가기만 하면 된다는 마인드를 가진 이른바 'Coder'가 되어가는 걸 느꼈는데요..! 이를 지양하고자.. Vue에 대한 원리를 이해하고 기능적인 측면뿐만 아니라 성능적인 측면도 고려하는 게 좋을 거 같아 본 글을 작성하게 되었습니다 🙄 [브라우저에서의 렌더링 동작 과정] 가상 DOM을 알기 전에, 브라우저에서 렌더링이 어떻게 동작하는지 알아보겠습니다. 렌더링은 통신을 통해 요청한 HTML, CSS, JavScript를 받아서 화면에 뿌려주는 역할을 합니다. 화면에 Display하기 위해서는 DOM Tree와 Render Tree 이렇게 2가지 Tree를 필요로 하는데요,, Tree를 중점으로 렌더링 동작 과정을 기억..