판교너굴맨의 개발노트

2022.05.07 - [Backend] - [Backend] Firebase, FireStore 설정 및 사용 [1] 이전 게시물에서 만들어 둔 Firestore를 React에서 사용해보겠습니다. 1. Firebase 앱 추가 먼저 생성한 Firebase 프로젝트로 이동합니다. 이동 후에 앱 추가 버튼을 확인할 수 있습니다. 앱 추가 버튼을 클릭 후에 웹 버튼을 클릭합니다. 아래 순서대로 먼저 앱 닉네임을 정한 후 앱 등록 버튼을 클릭합니다. 잠시 기다리면 Firebase SDK 추가 내용이 나옵니다. (이후 페이지를 이탈해도 확인 가능) 2 Firebase SDK 사용 React 프로젝트를 실행하고, firebase를 설치합니다. # npm npm install firebase # yarn yarn ..

React를 사용한 토이 프로젝트를 진행하면서 반응형을 고려하게 되었다. 반응형을 구현할 때 가장 많이 접했을만한 미디어쿼리를 사용할까 했다가 react-responsive라이브러리를 추천 받아서 사용해보려고 한다. 1. 설치 # npm npm i react-responsive # yarn yarn add react-responsive Typescript를 사용한다면 아래 명령어를 추가한다. # npm npm install @types/react-responsive # yarn yarn add @types/react-responsive 2. useMediaQuery react-responsive 라이브러리는 useMediaQuery라는 Hook을 제공합니다. import React from "react"..

Firebase를 사용하면 서버리스로 서비스를 개발할 수 있다. 즉 프론트엔드 개발자 입장에서는 직접 서버를 구현하지 않고 간단한 서비스를 제공할 수 있게 된다. 예전부터 간편하다고 말로만 들어본 Firebase를 이번 기회에 사용해보려고 한다. 1. Firebase 시작하기 Firebase홈페이지로 접속해서 시작하기 버튼을 클릭한다. 2. 프로젝트 생성 프로젝트 만들기 버튼을 클릭한다. 이름을 지정하고 약관의 동의한다. 구글 애널리틱스 설정을 하고 계속 애널리틱스 위치를 설정하고 프로젝트 만들기 버튼 클릭 3. FireStore 설정 FireStore는 Firebase에 포함되어 있는 서비스 중 하나로 유연하고 확장 가능한 NoSQL 클라우드 데이터베이스이다. Collection 데이터를 담고 있는 문..

사내 프로젝트에서 Backend를 담당하시는 분이 서버와 서버의 통신을 GRPC와 NATS를 사용하고 계신다. 사실 두 개로 나누지 않고 한가지로 써도 괜찮지만 GRPC는 외부에서 접근하는 통신을 위해, NATS는 내부 서비스간 통신을 위해 그냥 나누고 싶으셨던 것 같다. 오늘 설명 들은 내용을 내 스스로 기억하고 이해하기 위해 간단히 글로 남기려고 한다. nats 메세지큐 중에 하나이다. pub-sub 패턴을 사용한다. 메세지 브로커 역할을 한다. 인터넷 방송을 예로 들자면 BJ가(publisher) 방송을(message) 시작했고 시청자들이(subscriber) 모두 같은 방송을(message) 보게 된다. 아마 많은 내용이 생략되었지만 대략 이렇게 이해했다. grpc GRPC는 HTTP2 기반으로 ..

Recoil 라이브러리 설치 npm install recoil yarn add recoil 프로젝트 적용 import React from 'react'; import ReactDOM from 'react-dom'; import { RecoilRoot } from 'recoil'; import App from './App'; ReactDOM.render( document.getElementById('root') ); 로 컴포넌트를 감싸준다. 전역 상태를 관리할 디렉터리 (ex stroe, recoil 등)에서 Atoms(공유 상태)와 Selector(순수 함수) 등을 설정한다. 작성하면서 공식문서를 봤는데... 한국어 지원도 되고, 굉장히 잘 읽히는 것 같다. 일단 다른 상태관리 라이브러리를 사용해봤다면 ..

작업 도중 webSocket으로 POST 요청을 해야하는 상황이 생겼다. const ws = new WebSocket('url') ws.onopen = () => console.log("connected!!"); ws.onmessage = (msg) => { console.log(msg.data); }; 위와 같이 GET과 같은 방법으로 요청을 보내면 "Method Not Allowed" 라는 메세지가 반환된다.. 그럼 POST 요청은 보낼 수 없는 걸까?? const ws = new WebSocket('url?method=POST') ws.onopen = () => { console.log("connected!!") ws.send(prams) }; ws.onmessage = (msg) => { cons..

개인적으로 만들어보고 싶은 프로젝트가 생겼다. 그 프로젝트를 위해 회사 Jira의 issue들을 조회할 필요가 있었다. 1. API Token 1. 가장먼저 Jira에서 토큰을 생성해야 한다. 우측 최상단 프로필을 클릭한 후 계정 설정에 들어간다. 2. 좌측 메뉴에서 보안을 클릭한후 API 토큰 만들기 및 관리에 들어간다. 3. API 토큰 만들기를 클릭한 뒤 토큰 을 생성해준다. 4. Token을 생성한 후 복사해둔다. 2. Postman에서 조회 GET url : https://{Jirahostname}/rest/api/2/issue/{issue name} 여기서 2는 버전을 의미하는데 가장 최신 버전을 사용하고 싶으면 2대신 latest를 사용한다. 위 이미지와 같은 순서대로 입력하면 원하는 이슈 ..

1. 쿠키와 세션을 사용하는 이유 쿠키와 세션은 HTTP의 특징이자 약점을 보안하기 위해 사용된다. HTTP 프로토콜은 Connectionless 및 Stateless의 특징을 가진다. 1. Connectionless 클라이언트가 서버에 요청(Request)를 보낸 후 응답(Response)을 받으면 그 연결을 끊어버리는 특징이다. HTTP 1.1 버전에서는 헤더에 keep-alive 값을 줘서 연결을 유지하고, 재활용하는 기능이 Default로 추가되었다. 아래 이미지는 유효 연결이 열려 있어야 하는 최소한의 단위이다. 시간이 지나면 연결을 끊는다. 2. Stateless 통신 연결이 끝나면 상태 정보를 유지하지 않는 특징이다. 예를들어 쿠키와 세션을 사용하지 않고 어떤 페이지에 로그인을 했음에도, 상..

SOP (Same-Origin Policy) 동일 출처 정책 어떤 출처(Origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 중요한 보안 방식이다. 즉, 클라이언트의 Origin과 서버의 Origin이 같지 않으면 통신을 제한하는 것. 출처 (Origin) : URL의 스킴(프로토콜), 도메인(호스트), 포트로 정의된다. 개발자 도구에서 location명령어를 입력하면 출처에 대한 정보가 출력된다. 아래는 구글 크롬의 출처 정보이다. CORS를 통해 제한을 해제할 수 있다. CORS (Cross-Origin Resource Sharing) 교차 출처 리소스 공유 추가 HTTP 헤더를 사용하여, 한 출처(Origin)에서 실행 중인 웹 애플리케이션이 다른 출처..

호이스팅 (Hoistirng) 영어를 번역하자면 '끌어 올리기'라는 뜻이 있다. mozilla문서에서는 Javascript에서의 호이스팅은 코드가 실행되기 전에 변수와 함수를 선언 전에 메모리 공간에 저장하는 과정을 말한다. 호이스팅을 설명할 땐 "변수 및 함수의 선언부가 스코프(유효범위) 최상단으로 끌어올려지는 것처럼 동작하는 것" 이라고 한다. (선언과 할당의 분리) 변수의 초기화: 변수를 선언하고 처음으로 값을 저장하는 것 (undefined) 실행 컨텍스트: 코드가 실행되는데 필요한 정보를 가진 환경(객체 형태), 코드가 실행되기 전에 변수, 함수가 객체로 저장된다. var foo = 1; // 변수의 선언 / 초기화 var foo // undefined // 할당 foo = 1 실행 단계에서 f..