Under the Sign of Saturn

firebase.firestore() .collection("firstCollection").doc("firstDoc") .collection("secondCollection").add(dataToAdd); // firebase.js // .. export const dbService = firebase.firestore(); export const bookRecordRef = dbService.collection("bookRecord"); 이전 포스트에서 Vue.js 프로젝트에서 firebase를 연결해 간단한 데이터를 저장하는 방법을 다뤘는데, 오늘은 거기에 이어 계층적 구조화를 조금 더 다뤄보려고 한다. 간단한 book tracker web app을 만드는 중인데, 아래 이미지처럼 bookRecor..

vue 프로젝트에서 font-awesome을 쓰기. $ yarn add -D @fortawesome/fontawesome-svg-core $ yarn add -D @fortawesome/free-solid-svg-icons (optional) $ yarn add -D @fortawesome/free-brands-svg-icons (optional) $ yarn add -D @fortawesome/vue-fontawesome optional이 아닌 첫 번째, 네 번째는 필수로 다운받아준다. 나는 소셜 로그인을 위한 버튼을 만들 때 들어갈 github, google icon을 쓰기 위해 세 번째 free-brands-svg-icons를 먼저 받아주었다. 받고자 하는 아이콘이 어떤 카테고리에 있는지는, sol..

이전 프로젝트에서 Vue.js에서 컴포넌트 간의 데이터 변경을 다룰 때 event bus 등으로만 관리했을 때 컴포넌트끼리의 관계성을 파악하기 어려웠다. 사이즈가 큰 앱을 다룰 때는 그래서 Vuex를 많이 쓰는데, 처음 Vuex를 접했을 때 많이 헷갈렸어서, 한 번 정리를 쭉 해봤다. Vuex는 핵심인 state, mutations, actions를 이해하는 게 중요한데, state는 vuex라는 공통 중앙 저장소가 가지는, 모든 컴포넌트가 공유하는 data다. 이 state라는 data는 모든 컴포넌트 간에 공유되는 속성이기 때문에 this.$store.state.sampleState 식으로 접근이 가능하다. 하지만, 컴포넌트끼리 모두 공유가 된다는 속성 때문에, 직접적으로 이렇게 접근해 상태를 바꾸는..

간단한 책 정보와 리뷰를 등록하는 웹앱을 Vue와 Element UI 프레임워크, 그리고 Firebase를 이용해 만들고 있다. 이곳을 참고할 수 있다. 생성하고자 하는 폴더 경로에서 node prompt를 열고 아래 명령어를 입력한다. vue create [vue-project-name] Vue CLI v4.x 부터는 almost-full 옵션이 생긴 모양이다. 이번에 하면서 처음 봤다. 손쉽게 필요한 기능들이 다 있어서, 해당 옵션으로 진행했다. 그리고 element UI 프레임워크를 쓰기 위해 아래 명령어를 써줬다. 문서는 이곳 npm i element-ui -S 그러다가 일 하면서 기본 템플릿으로 썼던 vue-admin-template을 이용하려고 해당 프로젝트는 지우고, 이곳에서 git clon..

기존 git 이력을 삭제하려고 git을 초기화(initialize)한 뒤에 발생한 에러. git remote -v 로 현재 원격 저장소 상태를 확인하고, 반영이 잘 된 것을 확인하고, 아래 명령어를 실행했다. git push -u origin main 그후에 이것저것 시도하면서 아래 두 에러 메세지가 번갈아가면서 출력됐다. fatal: The current branch master has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin master error: src refspec main does not match any error: failed t..

짧은 인턴 기간을 마치고 마무리 하는 차원에서 12월 말까지는 배운 걸 바탕으로 복습하려고 Vue + Element UI를 기본 뼈대로 하는 작은 프로젝트를 생성했다. vue create [project-name] 을 실행해 빠르게 기본 뷰 프로젝트를 생성한 후, 이곳에서 Element UI를 설치한다. npm i element-ui -S 문제는 이렇게 설치하고 나면 core-js 오류가 발생해 컴파일이 완료되지 않는데, 이것저것 설치해보다가 결국에는 이곳을 참고해서 가장 빠르게 문제를 해결할 수 있었다. yarn add core-js // or npm install core-js

삽질 몇 번 끝에 드디어 비주얼 스튜디오 코드 내에서 external 방식이 아닌 integrated 방식의 다중 터미널 사용 세팅을 완료했다. 끝내고 나니 별 어려운 게 아니었는데, argument 설정에서 길을 잃었던 것 같다. 우선 비주얼 스튜디오 코드 자체에서 제공하는 방법으로는 다중 터미널 사용이 어렵다고들 해서 Shell Launcher라는 플러그인을 받아서 했다. 1. VSCode에서 Shell Launcher 다운로드 VSCode를 열고 마켓플레이스 -> Shell Launcher를 검색해 가장 먼저 나오는 플러그인을 받아준다. 2. Shell Launcher를 열기 위한 keyboard shortcut 지정하기 플러그인이 받아지면, Details에 위와 같이 키보드 숏컷 설정을 위한 안내..

처음으로 맡게 된 프로젝트에서는 형상 관리 툴로 SVN을 사용하고 있어 적응이 필요할 것 같아 이런 저런 문서를 참고해봤다. 잊지 않기 위해, 오랜만에 포스팅하려고 들어왔다. 1. 이클립스 플러그인 Subclipse 설치 이후에 Security Warning이 뜨는데, Install anyway 클릭해주고 넘어간다. 이렇게 설치 후에 인스톨 되면 이클립스를 재시작한다. 이제 플러그인이 설치되었으니 SVN repository를 추가해준다. 2. SVN Repository 추가 사내에서는 로컬 개발 환경 설치 가이드에 따라 이미 존재하는 repository URL을 넣어주고, 부여 받은 계정 정보를 입력하고 접속한다. 따라서 아래의 3번은 생략해도 된다. 개인용 테스트로 사용해 볼 경우 추가할 Reposit..

Vue CLI로 vuetify plugin을 설치하는 과정에서 아래의 오류를 만났다. 그랬더니 프롬프트 창에서는, 아래 코드를 실행할 것을 권했고, 그대로 따라 했다. npm install --save vuetify vuetify/dist/vuetify.min.css 그리고 code ENOLOCAL을 반환했다. 좀 더 검색을 해보니, 이 링크를 참조해 오류를 해결할 수 있었다. 윈도우 경로 상에 공백이 문자였던 것인데 폴더명 Vue.js - Learn이라는 폴더 명에 하이픈 양 옆으로 되어 있는 공백을 지워주자 vuetify\dist\vuetify.min.css를 별도로 다운 받지 않아도, 바로 아래처럼 Vuetify 플러그인이 적용된 메인 화면을 볼 수 있었다. 윈도우 환경에서 node를 쓸 떄, co..

무선 랜 무선랜이란 랜 케이블을 사용하지 않고, 전파나 자외선을 이용해 컴퓨터 통신을 가능하게 하는 네트워크 방식이다. 개요 무선 랜 통신에는 랜 케이블이 필요 없다. 무선 랜 연결 방식 인프라 스트럭처 방식 애드혹 방식 무선 랜 구성 장비 무선 랜 어댑터 USB 메모리 방식 어댑터 컴퓨터 카드 방식 어댑터 무선 액세스 포인트 : 무선 공유기, 무선 AP와 동의어. 무선 인터넷 사용자가 인터넷 서비스를 이용할 수 있도록 무선 인터넷 접속을 도와주는 중계 장치이다. 무선 공유기가 무선 액세스 포인트 기능을 포함한다. IEEE802.11n 이라는 무선 랜이나 WiFi라고 부르는 랜을 위한 컴퓨터 무선 네트워크에 사용되는 표준 기술(규격)을 준수하는 기기로 구성됨. 무선 랜 규격 🔍 IEEE : Institu..