👨💻📱✍️🎢314 [Vue.js] 예시와 함께 보는 동적 컴포넌트 📌 Vue 동적 컴포넌트 이번에 사내에서 개발하는 앱의 화면 편집 기능을 추가하면서 동적 컴포넌트 에 대해서 찾아보게 되었습니다. 편집 기능을 통해 상품 카드의 순서를 변경해야 하는데, 화면 리프레시가 발생하지 않고 DOM 의 순서를 조작해야하기 때문에 이를 위한 방법이 바로 동적 컴포넌트 였습니다. 📌 동적 컴포넌트란? 동적 컴포넌트 는 말 그대로 렌더링되는 컴포넌트를 동적으로 변경 가능한 것을 의미합니다. 따라서 특정 조건에 따라 서로 다른 컴포넌트를 마운트 하는 것이 가능합니다. 클릭 동작 예시를 위한 간단한 예제입니다. component 의 is 속성에 렌더링하고자 하는 컴포넌트를 지정해서 동적으로 컴포넌트를 할당할 수 있습니다. 2022. 3. 1. SVN 을 이용한 형상관리 PART.2 - SVN 브랜치 전략 세우기 SVN 브랜치 전략 세우기 📌 SVN으로 어떻게 버전 관리를 하는 것이 좋을까? SVN을 이용한 버전 관리 시스템의 두 번째 포스팅입니다. 이번 포스트에서는 SVN 을 활용한 브랜치 전략에 초점을 맞춰보도록 하겠습니다. 📌 Git Flow? 버전 관리 시스템에 대해서 공부하다 보면 (특히 git) git-flow 에 대해서 한 번쯤은 보게 됩니다. 이걸 처음 봤을 때는 이보다 완벽한 버전 관리 방법은 없을 것 같다고 생각했습니다. 대략적으로 이러한 흐름을 가지고 있어요 SVN 을 버전 관리 시스템으로서 보다 안전하게 사용하기 위해서 엄격한 git-flow 방식을 차용하는 것은 어떨까 고민하고 있었습니다. 곧바로 같이 일하는 개발자분에게 피드백을 요청하니 저에게 이렇게 반문하셨습니다. 만약 특정 기능을 특.. 2022. 3. 1. SVN 을 이용한 형상관리 PART.1 - SVN 이란? SVN 을 이용한 형상 관리 📌 svn? git? 비교적 최근에 개발을 접한 개발자들에게는 생소한 SVN 에 대해서 알아보는 포스트입니다. 현재 일하고 있는 회사에서는 보안성 이슈로 한동안 Git 을 사용하지 못하기 때문에 이를 대신해서 SVN 으로 프로젝트 버전관리를 진행하고 있습니다. 처음 접해보는 버전관리 시스템에 대해서 알아보고 이를 잘 활용할 수 있는 방법을 정하기 위해서 찾아보고 정리한 내용들을 공유하도록 하겠습니다. 😄 📌 그렇다면 SVN은 무엇인가요? 아파치 서브버전(Subversion) 은 프로젝트 버전 관리를 위해 사용하는 형상관리 툴입니다. 또 다른 형상관리 툴이었던 CVS 의 다음과 같은 한계점을 극복하기 위해 개발되었습니다. 💡 CVS 의 한계점은? 1. CVS 저장소의 파일들은 .. 2022. 3. 1. [Vue.js] computed 속성 사용 시 주의할 점들 Vue computed 속성 사용 시 주의할 점들 💡 본 포스트는 Vue.js 코어 팀 일원인 Thorsten Lünborg 이 기고한 글에 근거합니다. 📌 computed 속성이란? export default { name: "HelloWorld", data() { return { todos: [ { title: "wash dishes", done: true }, { title: "remove trash", done: false }, ], }; }, computed: { needTodos() { return this.todos.filter((todo) => !todo.done); }, }, }; Vue 에서 computed 속성은 data 의 변화를 감지하여 동적으로 계산된 값을 이용할 때 사용합니다. .. 2022. 2. 23. LeetCode 229 - Majority Element II (Medium) 💡 문제 LeetCode - 229번 🎯 풀이 과정 배열에 담긴 숫자들 중에서 일정 기준값 이상의 숫자들을 찾아서 반환하는 문제입니다. 배열에 담길 수 있는 숫자의 범위가 크기 때문에 해싱을 이용해서 숫자들의 개수를 세어줍니다. 여기서는 객체 대신에 읽고 쓰는 성능이 더 뛰어난 Map 을 사용했습니다. 👨💻 코드 var majorityElement = function (nums) { const numCount = new Map(); const pivot = nums.length / 3; for (const num of nums) { if (numCount.has(num)) { const oldVal = numCount.get(num); numCount.set(num, oldVal + 1); } else.. 2022. 2. 22. [Vue.js] Error Boundary 로 에러 핸들링하기 Vue 에서 Error Boundary로 에러 처리하기 📌 Error Boundary 란? 이전에 잠깐 React 공부할 때 공식 문서에 Error Boundary 라는 기법이 소개되어 있었습니다. Error Boundary 는 컴포넌트에서 발생한 에러를 다루는 하나의 방법으로 에러를 처리하는 컴포넌트(Error Boundary)를 만들어 앱의 실행에 문제가 생기지 않도록 하는 것입니다. Vue 에도 해당 기법이 있을까 궁금해서 찾아봤었는데 이를 소개하는 글이 있어서 정리해봤습니다. 📌 Vue 에서 Error Boundary 사용하기 Vue 2.5 버전에서는 errorCaputred 라는 훅을 지원하기 시작했습니다. 해당 훅에서는 자식 컴포넌트에서 발생한 에러를 감지해 처리할 수 있습니다. Error B.. 2022. 2. 20. 이전 1 ··· 13 14 15 16 17 18 19 ··· 53 다음
