[개발] Practice/Vue.js32 [Vue.js] Composition API 사용해보기_2 💡 실습 포인트! 오늘은 Composition API 를 사용하여 팔로워 검색기능을 만들어보았다. 아직 Composition API 사용이 미숙하여 이전에 공부한 내용들을 하나씩 찾아가며 코드를 작성해야하긴 했지만 계속해서 막히는 부분을 시도하여 최종적으로 기능을 잘 만들어냈다. 나는 match() 와 정규식을 이용했는데, 강사님은 indexOf() 를 이용하셨기에 코드 분석도 같이 진행해보았다. 💜 ref() 말고 reactive() 사용해보기 import { ref, reactive } from 'vue' export default { setup(){ let followers = ref([]); let test = reactive({name : 'Seoyun'}) return { followers }.. 2022. 4. 9. [Vue.js] Composition API 사용해보기 💡 실습 포인트! 오늘 공부한 Composition API 를 사용해서 MyPage 에 팔로워 데이터를 데이터바인딩해주었다. 💜 들어가기 전에 vue 파일의 코드가 길어지면 특정 데이터와 관련된 기능을 찾기 위해 여기저기 확인을 해야한다는 단점이 있다. 이게 싫다면, Vue 3 버전부터 제공하는 Composition API 를 사용하면 된다. Composition API 를 사용하면 computed, methods, watch, data() 이런 걸로 파일을 쪼개지 않고 관련 기능들을 한 곳에 모아 쭉 코드를 짤 수 있다. 다만, Composition API 방식은 기존의 Options API 방식보다는 문법이 귀찮을 수 있다. 💜 팔로워 페이지 만들기 🤍 MyPage.vue 만들기 팔로워 사용자명 일단.. 2022. 4. 9. [Vue.js] Vuex4: mapState 사용하기 💡 실습 포인트! 💜 computed 알아보기 methods : { now(){ return new Date() } }, computed : { now2(){ return new Date() } }, 함수를 만들 때 보통은 methods: { } 안에 만들지만 computed: { } 안에 만드는 것도 가능하다. 똑같이 날짜를 알려주는 기능의 함수를 위와 같이 methods 항목과 computed 항목에 각각 만들어서 사용했을 때 차이점은 다음과 같다. methods 안에 만든 함수는 함수를 부를 때마다 해당 함수 안의 코드가 실행된다. computed 안에 만든 함수는 함수를 불러도 해당 함수 안의 코드가 실행되지 않는다. computed: { } 안에 작성한 함수는 그냥 Component 를 로드할 .. 2022. 4. 8. [Vue.js] Vuex3: actions 항목 사용하기 💡 실습 포인트! 💜 들어가기 전에 Vue 에서는 state 를 수정할 때 mutations 에 함수를 만든 후, 이를 이용해서 수정하는 것이라고 공부했다. 하지만, 서버에서 데이터를 가져와 수정하고 싶을 때에는 actions 라는 항목을 만든 후, 여기에서 서버로 ajax 요청을 해주어야 한다. 왜냐하면 mutations 항목에 함수를 만들 때, 내부에 ajax 와 같이 상대적으로 시간이 오래 걸리는 코드를 적어놓으면, JavaScript 가 이렇게 시간이 오래 걸리는 코드는 제쳐두고 다음 줄부터 실행하려는 경향이 있어서 의도하지 않은 버그가 발생할 수 있기 때문이다. 따라서, state 를 수정하는 용도로만 mutations 항목을 사용하고, ajax 와 같이 시간이 오래 걸리는 코드는 actions.. 2022. 4. 8. [Vue.js] Vuex2: 좋아요 & 좋아요 취소 & 좋아요 여부 표시 기능 만들기 💡 실습 포인트! 이번에는 좋아요 & 좋아요 취소 기능과 좋아요 여부를 표시하는 기능을 만들어보았다. 하나의 포스트에만 데이터바인딩을 하는 것은 쉬웠는데 기존 데이터로 만든 포스트들에서 독립적으로 동작하도록 만드는 과정에서 한번, "더보기" 버튼을 통해 추가로 가져온 포스트에서도 동작하도록 만드는 과정에서 또 한번, 사용자가 새로 작성한 포스트에서도 정상적으로 동작하도록 만들기 위해 고민하고 이것저것 적용해보느라 꽤 오랜 시간이 걸렸다. (사실 코딩보다 항상 블로그 작성이 더 오래 걸린다...ㅎㅎ) 최종적으로 기존에 구현한 기능들도 문제 없는지 확인까지 완료하고서야 기능 만들기를 종료했다. 💜 독립적인 기능 작동 확인하기 일부러 위 포스트의 LIkes 가 아래 포스트와 독립적으로 작동하는지 보여주기 위해.. 2022. 4. 8. [Vue.js] Vuex1: Vuex 셋팅하기 💡 실습 포인트! 💜 Vuex 사용하는 이유 알아보기 Vuex 라이브러리는 필수로 설치해야 하는 라이브러리는 아니다. 🤍 props 와 custom event 로 데이터를 주고받는 게 힘들 때 사용한다. Vuex 를 설치하면 js 파일 하나에다가 모든 데이터를 저장하는 것이 가능하다. 그리고 이로 인해, 모든 Component 들은 데이터를 직접 꺼내어 사용하고 수정할 수 있다. props 를 사용할 필요 없이 모든 Component 가 데이터에 직접적으로 접근이 가능해지는 것이다. 🤍 Vue 파일과 데이터가 너무 많을 경우 사용한다. Vuex 라는 라이브러리를 상태관리(데이터관리) 라이브러리라고 한다. 만약 하나의 데이터를 여러 Component 에서 사용하다가 갑자기 에러가 발생한다면, 어디서 에러가.. 2022. 4. 7. [Vue.js] mitt 을 사용하여 멀리 떨어진 Component 간 데이터 전송하기 💡 실습 포인트! 이전에 필터 선택하면 적용이 되게 하는 기능을 깜빡하고 만들지 않았다고 했는데 마침... 오늘 공부해서 적용까지 해보았다. 처음 기능 만들고 여러번 실행해보니, 필터 선택 페이지에서 아직 필터를 선택하지도 았았는데 이전에 선택했던 필터가 기본으로 선택된 것을 보고 코드를 추가로 수정해주었다. 이번에는 캡처하려고 여러번 실행해보니, 필터가 선택된 상태에서 필터 선택 페이지나 글 작성 페이지에서 "Cancel" 버튼을 눌러도 다음번 이미지 업로드할 때 필터가 선택되어 있어 코드를 추가 수정해주었다. 💜 mitt 라이브러리 사용하기 가끔 멀리 떨어져있는 Component 로 데이터 전송을 해야 할 경우가 생긴다. 예를 들어, 나의 경우 App.vue > Container.vue > Filte.. 2022. 4. 7. [Vue.js] props 대신 slot 사용해보기 💡 실습 포인트! slot 을 사용해서 필터가 씌워진 이미지들에 각각에 해당하는 필터 이름을 붙여보았다. 기존에 만들어놓은 레이아웃에 slot 만 추가했더니 필터가 씌워진 이미지 위에 필터 이름이 겹쳐나와서 FilterBox.vue 파일의 레이아웃을 전반적으로 수정해주었다. 그러고 나서, 작은 이미지들에 필터가 적용이 안되는 상황이 발생했는데, 이는 Container.vue 에서 반복문을 돌릴 때 filter 요소들을 data 보관함에 저장했다가 props 문법으로 FilterBox.vue 로 받아와서 등록한 뒤 사용하니 정상적으로 필터가 각 이미지에 적용이 되었다. (이후, App.vue 에서도 filter 항목을 사용할 일이 생겨 기존의 Container.vue 에 있던 data 보관함의 filter.. 2022. 4. 7. [Vue.js] 인스타그램 필터 기능 만들기 💡 실습 포인트! 작은 이미지들에 필터 기능을 적용해서 보여주는 건 만들었는데, 생각해보니 작은 이미지를 클릭했을 때 큰 이미지에 필터가 입혀지는 기능은 안 만들어서(캡처하다가 생각났다...) 조만간 코드를 수정해야겠다. 💜 필터 기능 만들기 사진 업로드 페이지(필터 선택 페이지)를 보면 하단에 작은 박스들이 있는데 이 각 박스들을 FilterBox Component 로 바꾸어줄 것이다. 🤍 FilterBox.vue 만들기 // 전체 코드 미리보기 // 전체 코드의 내용이 길어 css 부분은 제외했다. FilterBox Component 로 작은 박스들을 채우기 위해서는 우선 FilterBox Component 부터 만들어야 한다. 따라서, FilterBox.vue 파일을 만들어서 위와 같이 코드를 작성.. 2022. 4. 7. [Vue.js] 글발행 기능 만들기 💡 실습 포인트! 💜 "발행" 버튼 누르면 글발행되는 기능 만들기 // 전체 코드 미리보기 // 전체 코드의 내용이 길어 css 부분은 제외했다. Cancel Next 발행 더보기 + "발행" 버튼을 누르면 사용자가 업로드한 이미지와 작성한 글이 메인페이지 맨 위의 포스트로 떠야 한다. 즉, "발행" 버튼을 눌렀을 때 posts 데이터의 맨 앞에 사용자가 업로드한 이미지와 작성한 글이 object 형식으로 들어가야 하는 것이다. 그러면 업데이트된 posts 데이터가 반복문을 돌면서 각각의 데이터를 Post component 에 데이터바인딩되어 메인 페이지에 보여진다. 발행 먼저, "발행" 버튼을 클릭하면 publish() 라는 함수가 동작하도록 해주었다. publish() { let myPost = { .. 2022. 4. 6. [Vue.js] 서버 없이 업로드한 이미지 다루기 💡 실습 포인트! 💜 파일 업로드 시 코드 실행하기 Vue 는 웹브라우저 다루는 것을 도와주는 도구일뿐이므로, 실질적으로 웹 개발을 잘 하기 위해서는 Vue 문법뿐만 아니라 웹브라우저의 기능들을 많이 알아야 한다. 예전에는 사용자가 업로드한 이미지를 서버로 보내서 저장하고, 저장한 이미지 URL 을 다시 사용자에게 보낸 다음 에 넣어서 보여주는 등 과정이 복잡하여 바로 브라우저에 반영하여 보여주는 게 어려웠다. 하지만 IE11 이상에서는 브라우저 내에서 직접 이미지를 조작하는 것이 가능해졌는데 대표적으로 두가지 방법이 있다. FileReader() 를 사용하기 : 이미지를 글자로 변환할 수 있고, 변환된 글자는 어딘가에 저장하거나 사용하는 것이 가능하다. URL.createObjectURL() 을 사용하.. 2022. 4. 6. [Vue.js] 탭 만들기 및 탭을 이용한 사진 업로드 페이지 만들기 💡 실습 포인트! 다른 페이지가 필요하다면 vue-router 를 사용해도 되지만 간단한 UI 들은 탭으로 만드는 것이 더욱 편하다는 것을 알게 되었다. 다만, 페이지 이동(앞으로가기, 뒤로가기) 와 같은 기능을 사용할 것이라면 vue-router 를 사용하는 것이 좋다. 필터 선택 페이지와 글 작성 페이지는 아직 데이터바인딩을 해주지 않아 레이아웃만 뜨는 것을 볼 수 있다. 💜 step 이 0 인 경우 (메인 포스트 페이지) 💜 step 이 1 인 경우 (필터 선택 페이지/사진 업로드 페이지) 💜 step 이 2 인 경우 (글 작성 페이지) 💜 사진 업로드 화면 만들기 Instagram 을 보면 기본적으로 posts 를 보여주는 페이지가 있고, 이미지를 업로드할 때 이미지를 꾸미는 페이지 및 글을 적는.. 2022. 4. 6. 이전 1 2 3 다음
