여씨의 개발이야기

토이 프로젝트에서 firestore를 사용하다 당황스러운 일이 발생했다. 바로 firestore의 document 하위 collection을 가져오는 함수인 listCollections()가 제공되지 않는다는 것이다. 이리저리 머리를 굴려보며 get을 해와도 잘 가져오지 못 하는데 생각보다 간단한 방법으로 가져올 수 있었다. 예를 들어 위와 같은 구조의 DB가 있다고 하자. 그럼 보통 제일 상위 컬렉션인 greetings를 가져올 때에는 아래와 같이 query(collection(database, "컬렉션이름"))...... doc.data()로 데이터를 가져올 수 있다. const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 const q =..

NoSQL은 이번에 친구와 토이프로젝트를 진행하면서 firestore를 통해 처음 접하게 되었다. NoSQL에 대해 검색해보니 MongoDB 등이 있으며 구조가 완전히 같지는 않지만 대체적으로 firestore처럼 json 형식을 띄고 있는 듯 하다. 이 글에서는 firestore의 DB 구조에 대해 알아보겠다. 1. RDBMS vs NoSQL RDBMS MongoDB or firestore Database Database Table Collection Tuple/Row Document Column Key/Field Table Join Embedded Documents PK PK(_id) Database Server & Client mysqld mongod mysql mongo 1-1. NoSQL의 구조..

드디어 jsp의 지옥에서 벗어난 나. 그동안 jsp로 짜여진 스파게티 코드를 질릴대로 본 나는 jsp와 권태기를 갖게 되었고... (다른 언어라고 다를 줄 알겠냐는 질문이 들어오겠지만 한 언어로 개떡같이 작성된 코드를 n년간 봐온다면 정말정말 그 언어가 싫어집니다! 아시궜어요!😭) 이번 프로젝트에서는 Vue 기반의 웹앱을 확장 개발한다는 얘기를 듣고 프론트 개발을 해보고 싶다고 스리슬쩍 부장님께 부탁을 드린게 바로 컨펌이 떨어졌다. 기쁨도 잠시, 사아실 나는 Vue 공식문서조차도 제대로 읽지 않았던 거시였다... 원래 다 이렇게 개발이랑 공부랑 동시에 하잖아요?^^... Vue js랑 많이 비교되고 비슷한 놈이 무엇이더냐 한다믄 React를 대표적으로 많이들 뽑을 것이고 (Angular도 있다.) 필자는..

1. docker가 뭡니까 1-1. docker를 알기 전에 구분해야 할 것들 - dockerfile : 도커이미지를 생성하기 위한 커맨드 명령어가 적혀있음 - image : 도커파일에 의해 공개 비공개 레포지터리에 생성되며 이미지를 이용하여 컨테이너를 생성함 - container : 프로그램을 빌드 또는 실행할 때 어떤 기기에서도 똑같은 환경을 조성할 수 있게 도와주는 패키징 서비스이다. 컨테이너에는 프로그램을 실행할 때 필요한 것들이 모두 정의되어있다. 1-2. docker란 리눅스의 응용 프로그램들을 프로세스 격리 기술들을 사용해 컨테이너로 실행하고 관리하는 오픈 소스 기술이다. 컨테이너화란 아래 그림과 같다. 2. K8s(kubenetes)가 뭡니까 2-1. K8s란 Kubernetes, 또는 쿠..

devOps라고 검색해보면 보통 아래와 같은 뫼비우스의 띠 형상을 한 그림이 많이 검색 결과에 나온다. 데브옵스(DevOps)는 소프트웨어의 개발(Development)과 운영(Operations)의 합성어로서, 소프트웨어 개발자와 정보기술 전문가 간의 소통, 협업 및 통합을 강조하는 개발 환경이나 문화를 말한다. 데브옵스는 소프트웨어 개발조직과 운영조직간의 상호 의존적 대응이며 조직이 소프트웨어 제품과 서비스를 빠른 시간에 개발 및 배포하는 것을 목적으로 한다. https://ko.wikipedia.org/wiki/%EB%8D%B0%EB%B8%8C%EC%98%B5%EC%8A%A4 이 데브옵스 적용이 가능한 툴을 묶어 하나의 체인 형식(위 그림)으로 모든 과정을 묶어 사용하는 개념이다. 데브옵스 문화를 ..

1. Monolithic Architecture 전통적인 서버 사이드 시스템에서 사용하는 아키텍쳐로, 하나의 서버에 다양한 시스템이 구성되어있다. 그렇기 때문에 서로 의존성을 갖고있다. 1-1. 장점 - 개발이 빠르다. 만들어진 하나의 어플리케이션에서 기능을 확장해나가는 식으로 개발해나갈 수 있다. - 전통적인 방식이기 때문에 다양한 레퍼런스가 있다. 그렇기 때문에 운용 또한 비교적 수월하다. - 테스트 및 배포 파이프라인 구성이 쉽다. 1-2. 단점 - 이러한 아키텍처에서 서비스들은 서로 의존성이 있기 때문에 시스템의 일부가 수정되어도 전체를 build, test, packaging하는데 번거로움이 있다. - 그렇기 때문에 유지보수 또한 힘들며, 오류가 한 번 발생하면 전체에 영향을 미치게 된다. 2...

📢 이 버그 좀 보세요! vscode 내에서 mvn 프로젝트를 돌릴 때 위와 같은 에러가 났다. 🐞 버그가 나타난 이유? 에러 문구는 친절히 우리에게 설명을 해주고 있다. 직전에 받았던 Extension Pack for Java라는 Vscode 플러그인이 설치된 후 이를 이용해 Java를 돌리려니 jdk가 11버전 이상이 필요하다고 에러를 뱉는 것이었다. 🕸 어떻게 이 버그를 잡을까? 매우 심플하다! jdk를 11버전 이상을 설치해준 뒤에 Vscode에서 File > Preference > Settings 에 들어간 뒤에 java.home 또는 java...을 입력해 아래와 같이 settings.json에 입력해주면 된다.(java.home에 11버전 이상의 jdk가 들어가있으면 된다.)

📢 이 버그 좀 보세요! firestore를 연결하는데 계속 permission denied 에러가 떴다. 로그를 자세히 뿌려주지 않아서 구글링하는대로 AtoZ 방법을 모두 적용해보았으나 전혀 해결이 되지 않았다. (물론 firestore 규칙도 다 수정해주었다.) 🐞 버그가 나타난 이유? 말 그대로 permission 문제인데, firestore의 규칙 설정을 안 해줬을 때 제일 많이 생겨나는 오류라고 한다. 하지만 필자의 경우는 달랐다. 몇 시간동안 머리를 싸매고 소스코드를 이 곳 저 곳 수정해 본 결과 결국 문제의 원인은 가장 가까운 곳에 있었다. 바로 설정값이 들어있는 .env 파일의 값을 인식을 못 하는 것이었다. 🕸 어떻게 이 버그를 잡을까? .env 파일안에 있던 config 값을 바로 입력..

📢 이 버그 좀 보세요! 기존에 만들어져있는 Vue 프론트엔드 소스를 build하는 과정에서 위와 같은 오류가 났다. 🐞 버그가 나타난 이유? "Local package.json exists, but node_modules missing, did you mean to install?" 해석한 그대로 package.json이 있지만, node_modules 파일이 존재하지 않아 생긴 에러다. 🕸 어떻게 이 버그를 잡을까? node_modules를 설치해주면 위의 에러를 잡을 수 있다. > npm install ... -- 설치 뒤에 > npm run build -- 정상 작동함

사전 작업 1. firebase project 페이지에서 api 관련 키를 전부 복사한다. 2. 콘솔에 npm i --save firebase를 입력해 firebase 설치 ( 최신 버전으로는 node.js가 14ver 이상 설치되어 있어야 함) npm i --save firebase 3. react 프로젝트 내의 src에 firebase.js를 추가해 아래와 같이 입력한다. import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_APIKEY, aut..