본문 바로가기

[개발] Practice152

[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.
[Vue.js] 서버로 ajax 요청하는 더보기 버튼 만들기 💡 실습 포인트! 💜 Ajax 알아보기 ajax 에 대한 설명 및 axios 설치 및 사용 방법은 이전에 React 프로젝트를 만들 때 정리해둔 게 있는데, 거의 동일해서 설명은 생략한다. (혹시 ajax 에 대해 궁금하거나 axios 설치 및 사용 방법이 궁금하다면 클릭!) 💜 axios 를 이용하여 GET 요청하기 import axios from 'axios'; axios.get('URL').then( result => { // GET 요청 성공할 경우 실행할 코드 작성하기 console.log(result); }).catch(()=>{ // GET 요청 실패할 경우 실행할 코드 작성하기 }) 위와 같이 코드를 작성하면 원하는 서버의 URL 로 GET 요청을 할 수 있다. .then() 안에는 fun.. 2022. 4. 6.
[Vue.js] Instagram 프로젝트 생성하기 및 데이터바인딩하기 💡 실습 포인트! 오늘은 Instagram 프로젝트를 생성하여 Instagram 과 유사하게 레이아웃을 만들고 데이터바인딩까지 해보았다. 레이아웃은 사실상 강사님이 다 만들어 오신 거라... 내가 한 거라고는 데이터파일 만들고 데이터바인딩한 것 외에는 없다. 나중에 레이아웃 만드는 것도 혼자서 진행해보면 시간은 좀 오래 걸리겠지만 재미있지 않을까 생각해본다. 💜 Vue 로 Instagram 프로젝트 생성하기 Vue 설치, 프로젝트 생성 및 개발환경 셋팅하는 방법은 이전에 포스팅해둔 게 있어서 자세한 설명은 생략했다. (혹시 vue 설치하는 방법 및 개발환경 셋팅하는 방법이 궁금하다면 여기를 클릭!) 💜 Instagram 처럼 레이아웃 만들기 및 데이터바인딩하기 🤍 데이터를 담은 posts.js 파일 만들.. 2022. 4. 6.
[Vue.js] Nested routes 와 push 함수 사용해보기 💡 실습 포인트! 💜 nested routes 사용해보기 /detail/0/author 경로로 접속하면, detail 페이지 내에 작성자를 보여주고, /detail/0/comment 경로로 접속하면 detail 페이지 내에 댓글을 보여주는 등 route 로 나눈 페이지 안에 또다시 route 로 나눈 페이지를 보여줄 수 있다. 그리고 이렇게 특정 페이지 내에 또 route 를 나누는 것을 nested routes 라고 한다. 물론 모달창처럼 UI 만드는 방법을 활용해도 유사하게 구현할 수 있긴 하지만, 이렇게 URL 을 나눠두면 앞으로가기 혹은 뒤로가기 버튼이 동작한다는 장점이 있다. 따라서, 필요에 따라 nested routes 를 사용해보면 좋을 것 같다. 🤍 nested routes 코드 작성하기 .. 2022. 4. 5.

티스토리툴바