목록분류 전체보기 124
여씨의 개발이야기
1. CommonFunction.js에 공통 함수들을 선언해준다. (export 사용) export function timestamp(date) { // 날짜 포맷 변경(YYYY-MM-DD HH:mm:ss) date.setHours(date.getHours() + 9); return date.toISOString().replace('T', ' ').substring(0, 19); } ... 2. CommonFunction.js를 사용할 컴포넌트에 CommonFunction을 import한다. import * as common from '../../CommonFunction'; 3. CommonFunction의 timestamp 함수를 본문에 사용한다. ... {c.grt_date !== null ? co..

📢 이 버그 좀 보세요! 배열로 된 데이터를 map을 이용해서 뿌려줄 때 위와 같은 오류가 났다. 🐞 버그가 나타난 이유? map으로 데이터를 뿌려주는데 unique한 키값이 없어서 나는 오류이다. 맵 리스트 데이터는 고유한 키값이 꼭 있어야 한다. 🕸 어떻게 이 버그를 잡을까? 당연 키값을 만들어주면 된다. firestore의 document의 id를 배열에 추가해주었다. const fetchCard = async () => { const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 const q = query(collection(database, "users/SUE3vmEn1CixjZiBBxZZ/greetings")) getDocs(q).t..
🤔 제작동기 토이프로젝트 제작 중, 3*3 바둑판 형태를 띈 슬라이드식 리스트 UI를 만들어야하는 상황이 생겼다. 📚 사용할 라이브러리들 1. Slick 검색해본 결과 multiple row가 가능한 carousel list library는 대표적으로 slick이라는 라이브러리가 있는 것으로 파악이 되었다. 원래는 JQuery로 제공해왔는데, 최근에(아마도) react도 제공하는 것 같다. https://react-slick.neostack.com/docs/get-started Neostack The last react carousel you will ever need react-slick.neostack.com slick for react는 위의 링크를 타고 들어가서 설치하는 방법을 볼 수 있다. 필자..

토이 프로젝트에서 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가 들어가있으면 된다.)