[들어가기 전에] 길고 길었던 황금 같은 추석 연휴가 이제 끝이 나네요...! 올해 초부터 나름 쉼 없이(?) 달려와 오랫동안 휴식을 취해서 좋았는데 벌써 연휴가 끝나서 너무너무 아쉽지가!! 않네요!!! 😂 어쨌든,,, 오늘은 클린 코드(Clean Code)에 대해 알아볼 겁니다! 개발자라면 클린 코드에 대해 들어봤을 거라고 의심치 않는데요! 저는 대학생 시절 클린 코드를 접했지만 크게 중요하지 않다고 생각했었습니다. 하지만 요즘 대규모 팀 단위로 프로젝트를 하다 보니 다른 팀원의 코드를 보게 되는 경우도 있고 코드 리뷰와 같이 제 코드를 다른 팀원이 보는 경우도 있는데.. 부끄럽지 않은 코드가 되기 위해서는 클린 코드가 중요하다고 생각하여 정리하려고 합니다! [나쁜 코드] 먼저 나쁜 코드가 무엇인지 알..
[들어가기 전에] 화면을 개발할 때 전체적인 디자인은 퍼블리셔가 만들어주기 때문에 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 받기 {{..
