본문 바로가기

전체 글502

누적 방문수 10,000을 기념하며 1. 감사합니다. 중복 방문을 제거하면 당연히 방문자 수는 1만명보다 작겠지만, 누군가 내가 작성한 글을 10,000번 읽어주었다는 것에 뿌듯함을 느끼고 감사합니다. 앞으로도 저와 같이 개발자의 길을 걷고 공부하시는 분들에게 도움이 될 수 있는 포스팅을 꾸준히 작성하겠습니다. 2. 매너리즘에 대하여 저는 작은 스타트업에서 월 200만원을 받던 신입 개발자였습니다. 사실 개발자라 불리기도 우스운 실력이지만, 기존에 하던 일을 그만두고 개발자로 커리어를 변경한지 약 1년만에 이루어낸 성과로 나름 만족하는 결과였습니다. 그러나 회사에서 부품처럼 일하는 개발자의 모습은 제가 꿈꾸던 것이 아니었고, 임직원이 함께 성장하는 회사의 구조가 아닌 회사만 배불리는 구조에서 일 하고 싶지 않았습니다. 더불어, 나의 한달이.. 2021. 6. 12.
35. Vue - 비동기 처리(callback, promise, async, await) - 본 포스팅의 내용은 자바스크립트의 비동기 처리에 대해 간략하게 정리해 놓은 것이다. - 비동기식 처리에 대해서 배우고 싶다면 다음 포스팅을 참고하기를 권장한다. https://devraphy.tistory.com/115 JS 근본 공부 - 콜백(Callback) - 콜백은 비동기 처리방식을 구현하기 위해 기본적으로 이해 해야하는 개념이다. - 콜백은 무엇인지, 비동기/동기처리는 무엇인지 알아보자. 1. Sync & Asnyc a) Sync(동기) - 기본적으로 JavaScript는 동 devraphy.tistory.com https://devraphy.tistory.com/116 JS 근본 공부 - Promise 1. Promise란 무엇인가? - Promise라는 단어의 뜻처럼, 코드가 동작하는 순.. 2021. 6. 11.
34. Vue - vuex 기본구조(store, module) 1. 설치 - 터미널 입력: npm i vuex@next (vue 3버전 사용시) 2. 설정 a) src - store 폴더 생성 - index.js 파일 생성 import {createStore} from 'vuex' export default createStore({ modules: { // Store 모듈이 구성되는 곳 } }) b) main.js에 index.js를 연결하기 import {createApp} from 'vue' import App from './App' import router from './routes/index.js' import store from './store' // 원래는 './store/index.js' 이렇게 경로를 작성해야 하는데, // 어떤 폴더안에 있는 inde.. 2021. 6. 8.
33. Vue - Vuex(뷰엑스) 1. 컴포넌트 간의 데이터 교류 - Vue 에서는 기본적으로 상/하위 또는 부모/자식 컴포넌트 관계에 한해서 데이터를 주고 받을 수 있다. - 이전 포스팅에서 다뤘던 부분인데, 이번 기회를 통해서 복습해보자. a) props - props는 상/하위 관계를 이용하여 데이터를 교류하는 방법이다. - 위 사진처럼, props는 반드시 중간에 존재하는 컴포넌트를 거쳐서 데이터를 전달해야 한다는 단점이 있다. - 즉, 하위 컴포넌트가 깊을수록 거쳐야 하는 컴포넌트가 많아지는 것이다. - props에 대한 자세한 내용이 궁금하다면 아래의 이전 포스팅을 참고하자. https://devraphy.tistory.com/212 20. Vue - 컴포넌트 기초(props, slot) 0. 예제코드 a) App.vue b.. 2021. 6. 4.
32. Vue - Router Link 1. Router Link란? - 홈페이지를 만들면 네비게이션이라는 것을 만들게 된다. - 네비게이션은 쉽게 말하면 메뉴다. - 흔히 a태그를 이용해서 만들지만, Vue에서는 Router Link라는 컴포넌트를 사용하기를 권장한다. 2. 동작원리 - Router Link는 Router View와 함께 사용된다. - index.js에 할당된 라우팅 페이지들이 Router View에서 출력된다. - 그리고 Router Link를 사용하여 특정 Vue 페이지를 URL에 할당하는 것이다. - 예제코드를 직접 보면서 이야기 하자. [파일경로] [Header.vue] {{ nav.name }} [App.vue] [index.js] import {createRouter, createWebHashHistory} fro.. 2021. 6. 1.
31. Vue - 부트스트랩(Bootstrap) 1. Bootstrap 버전 5 설치 터미널 입력: npm i bootstrap@next 2. Bootstrap 설정 [파일 경로] [main.scss] @import "../../node_modules/bootstrap/scss/bootstrap" // 부트스트랩 [App.vue] 3. Bootstrap Customization https://getbootstrap.com/docs/5.0/customize/sass/ Sass Utilize our source Sass files to take advantage of variables, maps, mixins, and functions to help you build faster and customize your project. getbootstrap.c.. 2021. 6. 1.
30. Vue - 라우터(Router, Routing) 1. 설치 https://next.router.vuejs.org/installation.html Installation | Vue Router Installation Direct Download / CDN https://unpkg.com/vue-router@4 Unpkg.com provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like https://unpkg.com/vue-router@4.0. next.router.vuejs.org a) Vue Router를 개발 의존성( -D) 으로 설치하지 않는이유.. 2021. 5. 31.
29. 컴포지션 API 활용(lifecycle, refs, props, context) 1. 반드시 읽어야 하는 공식 문서 - 지금까지 배운 내용을 컴포지션 API 형태로 작성하기 위해서 반드시 읽는 것을 권장합니다. - 전혀 어렵지 않으니 한번쯤 꼭 훑어보고 아래의 전환 예제를 따라 해보기를 권장합니다. 컴포지션 API의 Setup 공식문서 컴포지션 API의 라이프사이클 훅 공식문서 컴포지션 API의 provide와 inject 공식문서 컴포지션 API의 refs 공식문서 2. 컴포지션 API로 코드 전환 예제 [기존의 작성 방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversedMessage }} [컴포지션 API 작성방식] {{ count }} / {{ doubleCount }} {{ message }} / {{ reversed.. 2021. 5. 28.
28. Vue - 컴포지션 API 작성방법 1. 예제 코드 [App.vue] {{ count }} [출력화면] [코드 설명] - 위의 코드는 화면의 숫자를 클릭하면 increase 메소드가 작동하여 숫자가 증가하는 방식이다. - this를 사용하여 데이터 객체인 count를 참조하여 반응성을 활용한 코드이다. - 위의 코드를 기반으로 컴포지션 API를 작성해보자. 2. 컴포지션 API 전환 a) 1차 전환 - 반응성이 구현되지 않은 상태 [App.vue] {{ count }} - 위의 코드를 구현한 뒤, 실제로 숫자를 클릭해보면 increase가 작동하지 않는 것을 확인할 수 있다. - 더 정확히 이야기 해보면 increase 메소드가 작동하지 않는 것이 아니라 화면이 업데이트(= 새로고침)되지 않는 것이다. - 즉, 반응성의 구현이 되지 않은 .. 2021. 5. 28.
27. Vue - 컴포지션 API란? 1. 공식 문서 공식문서 바로가기 소개 | Vue.js 소개 컴포지션 API가 필요한 이유 Vue 컴포넌트를 만들면 재사용 가능한 코드 조각으로 결합되어진 인터페이스의 반복가능한 부분들을 추출할 수 있습니다. 이것만으로도 어플리케이션에서 유지 v3.ko.vuejs.org 2. 컴포지션 API란? - Vue 객체를 만들다 보면 다양한 속성(data, computed, methods, etc)들을 작성하게 된다. - 이전의 포스팅에서도 많이 사용해 보았지만, 단순한 예제코드를 이용했기 때문에 코드를 이해하고 읽는데에 큰 불편함이 없었다. - 하지만, 코드가 복잡해지면 속성의 내용이 복잡해지면서 어떤 코드가 어떤 기능을 하는지 구분하기가 힘들어진다. - 정리하자면, 코드의 가독성과 이해도가 떨어진다. - 이처.. 2021. 5. 28.
26. Vue - 컴포넌트 Refs 1. Refs란? - Vue에서만 제공하는 개념으로, 특정한 컴포넌트 또는 요소를 참조하는 방식을 말한다. - 기존에 JS를 사용하여 컴포넌트를 참조하는 방법을 개선시킨 형태다. 2. Refs를 사용하는 이유 a) 예제코드 [App.vue] Hello world! - h1태그가 갖고있는 내용을 콘솔에 출력하고 싶은 경우, 위와 같은 코드를 작성할 수 있다. - 그러나 Vue에서 제공하는 Refs를 사용하면 보다 적은 줄의 코드로 동일한 기능을 사용할 수 있다. b) Refs 예제코드 [App.vue] Hello world! [출력화면] c) 코드해설 - HTML 엘리먼트에 id 또는 class 명으로 선택자를 사용했다면, Vue Refs에서는 ref라는 속성값을 사용하여 선택자를 생성한다. - ref 선.. 2021. 5. 28.
25. Vue- provide, inject - 이번 포스팅에서 provide와 inject에 대해 알아볼 것이다. 1. 예제코드 [App.vue] [Parent.vue - components 폴더 안에 생성] [Child.vue - components 폴더 안에 생성] {{ msg }} [출력결과] * props - 부모와 자식 컴포넌트 간의 데이터 통신을 가능하게 한다. a) 코드의 흐름 - App.vue에서 Parent 컴포넌트를 출력한다. - Parent 컴포넌트는 msg라는 props(속성)를 사용하는데, 이 props는 Child.vue에서 넘어온다. - 그러므로 Parent 컴포넌트에서 Child.vue를 import한다. - 결론적으로 화면에 출력되는 문구는 Child.vue에서 'msg'라는 부분인데, 이는 props를 통해 App.. 2021. 5. 27.

티스토리툴바