전체 글

[.env 파일이란?] environment의 약자인 .env 파일은 환경 변수를 정의할 때 사용합니다. 프로젝트의 root에 .env 파일을 생성하여 애플리케이션의 구성을 제어하거나, 각 서버 환경(ex. 개발 서버, 운영 서버)에 맞게 동작하는 부분을 처리하는 데 사용할 수 있는데요. 실제로 현재 프로젝트에서 .env 파일로 각 서버에 따라 다르게 동작하고 있습니다 😎 [어떻게 사용할까?] Key = Value 형식으로 환경 변수를 정의할 수 있습니다. VUE_APP_TITLE=My App VUE_APP_API_URL=https://my-api-url.com 정의한 환경 변수를 접근하기 위해서는 process.env.${이름}의 형태를 사용하면 됩니다! created() { console.log(pr..

[들어가기 전에] 길고 길었던 황금 같은 추석 연휴가 이제 끝이 나네요...! 올해 초부터 나름 쉼 없이(?) 달려와 오랫동안 휴식을 취해서 좋았는데 벌써 연휴가 끝나서 너무너무 아쉽지가!! 않네요!!! 😂 어쨌든,,, 오늘은 클린 코드(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..