vue.js
Vue3의 새로운 상태 관리 라이브러리 Pinia
안녕하세요 한 달 만에 블로그글에 글을 쓰네요 최근 개발을 React로 주로 하다 보니 vue에 대한 관심이 많이 떨어져서 새로운 상태 관리 라이브러리가 나온 지도 모르고 있었네요 그래서 이번에는 vue3의 새로운 상태 관리 라이브러리인 Pinia에 대해 알아보도록 하겠습니다 Pinia는 무엇인가? pinia는 vue의 상태 관리 라이브러리 중 하나이며 vue3 버전을 고려하여 설계된 최신 상태 관리 라이브러리입니다 기존에 많이 사용하던 vuex와 유사하지만 Compostion API를 통한 유연한 사용과 향상된 TypeScript 지원으로 더 간편하고 직관적인 상태 관리를 할 수 있습니다 Vuex와 Pinia의 차의 점 vuex와 pinia 모두 vue의 상태 관리 라이브러리입니다 vuex는 vue의 ..
Vuetify + Socket Io 를 사용하여 채팅 웹 사이트 만들기-2
Vuetify + Socket Io를 사용하여 채팅 웹 사이트 만들기 3번째 파트입니다 저번 포스팅까지는 사용자가 생성한 채팅방에 입장하는 부분까지 구현을 진행하였고 현재까지 구현이 완료된 기능 리스트는 아래와 같습니다 1. 로그인이 가능해야 된다 - 완료 2. 회원가입이 가능해야 하며 각 사용자들을 구분할 수 있는 닉네임이 필요하다 - 완료 3. 로그인한 사용자는 현재 생성되어있는 채팅방 리스트를 볼 수 있으며 언제든지 본인의 채팅방을 생성할 수 있다 4. 어떠한 사용자든 현재 생성되어있는 방에 입장이 가능하다 5. 방에 입장한 사용자든 입장한 방에 있는 다른 사용자들과 실시간 채팅이 가능하다 6. 방에 입장한 사용자들은 언제든지 입장한 방을 나갈 수 있다 그러면 이번 포스팅에서는 사용자가 방에 입장한..
Vuetify + Socket Io 를 사용하여 채팅 웹 사이트 만들기-2
Vuetify + Socket Io를 사용하여 채팅 웹 사이트 만들기 2번째 파트입니다 우선 필요한 기능 리스트 및 완료된 기능은 아래와 같습니다 1. 로그인이 가능해야 된다 - 완료 2. 회원가입이 가능해야 하며 각 사용자들을 구분할 수 있는 닉네임이 필요하다 - 완료 3. 로그인한 사용자는 현재 생성되어있는 채팅방 리스트를 볼 수 있으며 언제든지 본인의 채팅방을 생성할 수 있다 4. 어떠한 사용자든 현재 생성되어있는 방에 입장이 가능하다 5. 방에 입장한 사용자든 입장한 방에 있는 다른 사용자들과 실시간 채팅이 가능하다 6. 방에 입장한 사용자들은 언제든지 입장한 방을 나갈 수 있다 이번에 저희는 3,4번을 진행하게 될 것이며 3,4번을 진행하기 위해 클라이언트 단에서 퍼블리싱 및 프런트 엔드 개발 ..
Vuetify + Socket Io 를 사용하여 채팅 웹 사이트 만들기-1
이전에 포스팅한 대로 Vuetify + Socket Io를 사용하여 채팅 웹 사이트 만들기입니다 우선 프로젝트는 프론트엔드, 백엔드 모두 개발이 완료되었으며 현재는 소스 코드를 스스로 리뷰 하면서 고칠 수 있는 부분이 있는지 없는지 확인 및 추가적으로 넣을만한 기능들이 있는지 검토 중입니다 프로젝트는 아래 깃에서 확인 가능하십니다 Front - 채팅 프로그램 프론트 엔드 GitHub - jungHyeonS/vue-chat-front Contribute to jungHyeonS/vue-chat-front development by creating an account on GitHub. github.com Back - 채팅 프로그램 백엔드 GitHub - jungHyeonS/vue-chat-back: 채팅 ..
Vue Cli 설치 및 프로젝트 세팅
Vue CLI 설치 vue cli 설치 명렁어 1 npm install -g @vue/cli cs * permission denied 에러 발생시 sudo npm install -g @vue/cli 로 설치해주시면됩니다 설치 확인 및 버전 확인 1 vue -V cs 저는 vue cli 4.5.15 버전으로 설치되었습니다 프로젝트 생성 방법(GUI 형식) vue ui 실행 1 vue ui cs vue ui 를 실행하면 아래와같이 vue 프로젝트를 설정할수있는 웹페이지가 실행이됩니다 이후 '만들기' -> 경로 지정후 프로젝트 생성 버튼클릭후 프로젝트명,패키지명,GIT소스 경로등을 설정해줍니다 기본 세팅을 다한후 '다음' 버튼을 클릭하면 아래와 같이 vue 프리셋 설정화면이 나오는데 저는 우선 기본 프리셋으로..