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..

네트워크의 구성 위 네트워크를 OSI 모델로 나타내면 아래와 같다. 데이터 전달과 처리 (컴퓨터의 데이터 -> 스위치) 컴퓨터의 웹 브라우저에 URL을 입력할 때부터 웹 서버에 데이터가 도착할 때까지 각 과정에서는 캡슐화와 역캡슐화가 이루어진다. 1. (3-way handshake가 이루어져 연결이 확립된 상태라고 전제한다면) 사용자가 웹 브라우저에 URL을 입력하고, 엔터를 입력하면 응용 계층에서의 캡슐화가 이루어진다. 이때 응용 계층에 html 데이터를 보내달라는 요청을, HTTP 메세지에 담아 보낸다. 계속해서 이 데이터는 전송 계층에 전달된다. 전송 계층에서는 TCP 헤더가 필요한데, 출발지 포트 번호와 목적지 포트 번호가 이곳에 담긴다. (세그먼트가 된다) ❕ 출발지 포트 번호는 well-kno..

아래에서 이야기하는 응용 계층은 5계층의 세션 계층과 6개층의 표현 계층을 포함한다. 응용 계층은 애플리케이션과 데이터를 주고 받기 위해 필요한 계층으로 OSI 계층의 최상위 층이다. 응용 계층에서는 클라이언트의 요청을 전달하기 위해 통신 대상(서버 등)이 이해할 수 있는 메세지(데이터)로 변환하고, 전송 계층으로 전달하는 역할을 한다. 당연히, 응용 계층을 위한 응용 계층만의 프로토콜이 존재한다. 응용 계층 프로토콜을 이용하는 통신 흐름에서 클라이언트와 서버의 기본적인 정의를 우선 짚고 넘어가자. 클라이언트 : 서비스를 요청하는 측 (웹 브라우저, 메일 프로그램 등) 서버 : 서비스를 제공하는 측 (웹 서버, 메일 서버 프로그램 등). 또한 이러한 애플리케이션은 응용 계층에서 동작한다. OSI 모델의 ..

맨 처음 프론트엔드 공부를 시작할 때는 스프라이트 기법을 경험해보지 못했다가, 학원에서 웹 프로그래밍 미니 프로젝트를 진행할 때 처음 접하고 굉장히 신기했었다. background-image, background-position 프로퍼티를 매번 이용하며, 상당히 귀찮은 방법이라고 생각했는데, 나름 HTTP/1 프로토콜에서 리소스 요청을 덜 하기 위한 나름의 노력으로 탄생한 기법이었던 것이다. 우선 이 세 가지의 관계도를 보기 위해서는 HTTP/2와 HTTP/1의 차이점을 알아야 한다. HTTP는 웹 서비스에서 클라이언트와 웹 서버 간에 정보를 주고 받기 위해 사용되는 네트워크 프로토콜로, 여기에서도 새로운 기술이 기존의 기술을 보완하는 방향으로 발전하고 도입되는 것은 마찬가지다. HTTP/2 역시 HTT..

Google colab 생활 코딩 머신러닝 강의를 들을 때 이후로 두 번째로 사용한 colab. 정작 잘 사용할 일이 없어서, 지금 듣고 있는 실습에서 데이터를 다루게 될 일이 기대된다. google colab은 Colaboratory를 줄여서 부르는 말. 브라우저에서 python을 직접 작성하고, 실행할 수 있다. 구글에서는 Colab의 장점을 세 가지로 꼽는다. GPU Free Access Easy Sharing No Setup process 그래서 아나콘다를 굳이 설치할 필요성을 아직까지는 못 느끼고 있다! 코드 블럭 한 줄 한 줄에 코드를 쓰고, 바로 Alt+Enter 또는 Shift+Enter 또는 Ctrl+Enter로 실행해볼 수 있다. Ctrl+Enter : 해당 셀 실행 : [2] 행에서 ..

A Java Runtime Environment(JRE) or Java Development Kit(JDK) must be available in order to run Eclipse. No Java virtual machine was found after searching the following locations: C:\jdk\jdk 각자의 버전\bin\javaw.exe 최근에 자바 강의를 듣기 위해서 JDK 14 -> JDK 11로 바꿔서 설정을 해두었는데, 위처럼 오류 메세지가 나서 기존에 사용하던 이클립스가 열리지 않았다. 제일 먼저 환경 변수부터 바꾸어줬는데도 제대로 열리지 않길래, eclipse.ini 파일을 간단하게 바꿔주는 것으로 해결했다. eclipse.ini가 저장된 위치를 확인하고,..

신뢰성, 정확성, 효율성으로 대표되는 전송 계층의 역할을 알아보자 전송 계층의 두 가지 역할 라우터의 라우팅 기능을 통해 다른 네트워크로 데이터를 전송하고자 할 때, 데이터가 항상 목적지에 손실이나 손상 없이 안전하게 도착하면 좋겠지만, 목적지가 제대로 설정되었다하더라도 라우터나 패킷의 문제로 문제가 생길 수 있다. 이전까지의 포스팅을 통해 물리 계층, 데이터 링크 계층, 네트워크 계층까지 살펴보면서 '목적지'로 데이터를 보내는 과정을 알아보았지만, 과연 이것이 안전한지, 신뢰할 만한 수준인지에 대해선 많이 짚지 못했다. 즉, 다시 말해 언급한 세 개의 계층에서는 데이터가 손상되거나 유실되어도 '책임을 지지지 않는다' 그래서 목적지에 신뢰할 수 있는 데이터를 전달하기 위해 '전송 계층'이 존재한다. 전송..

Spring 프레임워크에서의 MyBatis, Maven Spring 프레임워크 환경에서 MyBatis를 연동하고자 할 때는 Maven 저장소를 통해 의존성 관리를 손쉽게 할 수 있다. Maven 저장소는 빌드 툴로, 라이브러리 의존성 관리 툴로 활용이 더 많이 되고 있다. 스프링 프레임워크 사용 이전에는 필요한 라이브러리를 일일이 받아 /WEB-INF/lib 폴더와 WAS에 설치해 사용했다. 하지만, 시간이 지남에 따라 버전이 달라져 사용할 수 없는 라이브러리들이 발생할 위험이 있어 메이븐을 통해 보다 쉽게 관리하고자 한다. 🔍 MyBatis는 Java Persistance Framework(흔히 SQL 매핑 프레임워크로 분류한다)의 하나로, XML 서술자나 어노테이션을 사용해 저장 프로시저나 SQL문으..

개요 스프링 프레임워크는 Java 플랫폼을 위한 경량급 오픈 소스 어플리케이션 프레임워크이다. 스프링 프레임워크는 단지 웹앱을 만들기 위해서만 존재하지는 않지만, 동적인 웹 애플리케이션을 개발하기 위해 여러 가지 서비스를 제공한다. 한국의 경우, 공공 기관의 웹 서비스 개발 시 사용을 권장하는 전자정부 표준프레임워크의 기반 기술로 쓰이고 있다. 자바 개발을 위한 프레임워크인만큼 종속 객체를 생성하고, 조립해주는 툴이다. POJO Bean Container. 컨테이너라는 표현은, 스프링이 어플리케이션 객체의 생명 주기와 설정을 포함하고 관리한다는 점에서 나온 개념. 또한, myBatis나 Hibernate 같은 완성도 높은 데이터베이스 처리 라이브러리와 연결할 수 있는 인터페이스를 제공한다는 맥락도 존재한..

DB 이용해서 회원 관리 시스템 연습을 위해서 다시 MySQL 설치를 진행하는데, 예전에 MySQL 설치를 해둔 버전이 있어서 Port 설정 단계에서 "The specified port is already in use"라는 메세지를 띄웠다. 리소스 모니터에서 간단하게 해결할 수 있다. Window+R -> resmon.exe 실행 또는 윈도우 검색에 '리소스 모니터'라고 검색해도 된다. 네트워크 탭 -> 수신대기 포트 쓰고자 했던 포트 넘버가 3306이었으므로, 해당 파일의 PID를 확인한다. 명령 프롬포트(CMD) -> 관리자 권한으로 실행 / 또는 Window + R로 CMD 검색 taskkill /F /PID 6060 명령어 입력. 오타에 주의 😪 이제 3306을 Port number로 쓸 수 있다.

네트워크 계층의 역할 수많은 네트워크는 네트워크 끼리의 연결로 거대한 하나의 인터넷이 되었다. 다른 네트워크에 있는 목적지로 데이터를 전송하고자 할 때는(네트워크 간 연결), OSI 계층 중 네트워크 계층에서 관여한다. 앞에서 살펴본 데이터 링크 계층에서는 이더넷 규칙을 기반으로 데이터 전송을 책임졌다. 그러나 데이터 링크 계층의 기술만으로는 수많은 네트워크가 연결된 환경에서 인터넷이나 다른 네트워크로는 데이터를 전송할 수 없다. 이때 다른 네트워크로 데이터를 전송하기 위해서 라우터(router)라는 네트워크 장비를 이용한다. 라우터는 데이터의 목적지가 정해지면, 해당 목적지까지 어떤 경로로 가는 것이 좋은지 알려주는 기능을 한다. 그러나 데이터를 전송하려는 목적지가 어디에 있는지 모른다면, 라우터도 당..