🐥 Web

[FCM] Firebase Cloud Messaging Vanilla JS + FastAPI에 적용하기

FCM 설정공식 예제에서는 Node JS 기준으로 설명되어 있음https://firebase.google.com/docs/cloud-messaging/js/client?hl=ko&_gl=1*16582yh*_up*MQ..*_ga*MTk1Nzk3ODc5Mi4xNzEzMjI3MTcy*_ga_CW55HF8NVT*MTcxMzIyNzE3Mi4xLjAuMTcxMzIyNzE3Mi4wLjAuMA..#web-modular-apiVanilla JS 환경에서 하는 법 정리 자바스크립트 Firebase 클라우드 메시징 클라이언트 앱 설정Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 자바스크립트 Firebase 클라우드 메시징 클라이언트 앱 설정 컬렉션을 사용해 정리하기 ..

[etc] Logout 후 뒤로 가기 방지 - BF Cache

문제 logout을 한 뒤에 로그인 권한이 필요한 페이지로 뒤로 가기를 눌렀을 때, 데이터가 그대로 노출되는 문제 보안상의 결함으로 수정해야하는 경우 원인 브라우저에서 관리하는 BF Cache(Back-Forward Cache) 웹 페이지를 방문하면 해당 페이지의 css/html/javascript/image 등 모든 리소스를 캐시에 저장 뒤로가기 / 앞으로 가기 버튼을 누르면 서버에 다시 요청하지 않고 캐시 리소스 활용해서 로딩 로그아웃 이후에도 BF Cache가 남아있기 때문에 다시 페이지가 보일 수 있음 해결 방법(Fast API 기준) Jinja Template response 사용 로그인 해야 이용할 수 있는 페이지에 접속 요청을 보내면 라우터에서 access token 확인 권한이 있는 경우 ..

[SciChart] Vanilla Javascript에서 SciChart 사용하기

Javascript에서 SciChart 사용하기 script를 가져오고 미리 필요한 것들 정의하기 ... const { SciChartSurface, NumericAxis, DateTimeNumericAxis, FastLineRenderableSeries, XyDataSeries, XyScatterRenderableSeries, EllipsePointMarker, EZoomState, SweepAnimation, SciChartJsNavyTheme, RolloverModifier, RubberBandXyZoomModifier, NumberRange, LegendModifier, MouseWheelZoomModifier, ZoomPanModifier, ZoomExtentsModifier } = SciCha..

[PostgreSQL] Windows 외부 접속 허용 설정 및 외부 접속 방법

postgresql.conf 수정 C:\Program Files\PostgreSQL\15\data_ 경로에 postgresql.conf listen_addresses = '*' 로 설정 - 모든 ip 주소에서 접속 허용 white list ip 설정하고 싶으면 ip 주소 쓰기 ps_hba.conf 수정 C:\Program Files\PostgreSQL\15\data 경로에 pg_hba.conf # IPv4 local connections: host all all 0.0.0.0/0 scram-sha-256 IPv4 local connection address 0.0.0.0/0 으로 수정(원래는 127.0.0.1) 방화벽 설정 고급 보안이 포함된 windows defender 방화벽 인바운드 규칙 - 새 규..

[Spring 입문] 5. 회원 관리 예제 - 웹 MVC 개발

1. 회원 웹 기능 - 홈 화면 추가 localhost:8080 으로 호출 container에서 뒤짐 localhost:8080/ < 컨트롤러 있음 연결! package hello.hellospring.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class HomeController { @GetMapping("/") public String Home() { return "home"; } } 2. 회원 웹 기능 - 등록 package hello.hellospring.controller; import he..

[Spring 입문] 4. 스프링 빈과 의존관계

1. 컴포넌트 스캔과 자동 의존관계 설정 회원 컨트롤러가 서비스와 레포지토리를 사용가능하도록 하기 → 의존관계 생성 package hello.hellospring.controller; import org.springframework.stereotype.Controller; @Controller public class MemberController { } @Controller 로 annotation을 하게되면 스프링 빈에서 얘를 관리하게 할 수 있음. private final MemberService memberService; 스프링 컨테이너에 등록해서 하나를 여러 개가 공유 @Controller public class MemberController { private final MemberService m..

[Spring 입문] 3. 회원 관리 예제 - 백엔드 개발

1. 비즈니스 요구사항 정리 데이터 회원 ID 이름 기능 회원 등록 조회 아직 DB 선정하지 않은 상황 ← 이라는 설정 컨트롤러 : 웹 MVC의 컨트롤러 (API 생성 등) 서비스 : 핵심 비즈니스 로직 도메인 : 데이터베이스에 저장 / 관리되는 것 리포지토리 : 데이터 베이스 접근 / 도메인 객체를 DB에 저장 및 관리 인터페이스로 구현 클래스 변경 가능하게 설계(DB 선정 안 함) 구현체로 메모리 기반의 가벼운 데이터 저장소로 개발 진행 2. 회원 도메인과 레포지토리 만들기 1. Member 클래스 생성 package hello.hellospring.domain; public class Member { private Long id; // database index에 가까움 private String ..

[Elasticsearch] Index Template 구성하기 with Kibana & Logstash (2) - Mapping 기초

2023.07.06 - [Web/Back-end \ etc.] - [Elasticsearch] Index Template 구성하기 with Kibana & Logstash (1) - Setting [Elasticsearch] Index Template 구성하기 with Kibana & Logstash (1) - Setting Elasticsearch에 데이터를 적재할 때, 어떤 방식으로 데이터를 적재할지에 대한 세팅을 해줄 수 있다. Elasticsearch는 역색인을 기반으로 데이터를 인덱싱하기 때문에, 역색인의 기준이 되는 단어(token) dnai-deny.tistory.com 이전 포스팅에 이어 이번에는 Index Template의 두 번째 주요 구성인 Mapping 영역을 살펴보도록 하겠다. M..

[Elasticsearch] Index Template 구성하기 with Kibana & Logstash (1) - Setting

Elasticsearch에 데이터를 적재할 때, 어떤 방식으로 데이터를 적재할지에 대한 세팅을 해줄 수 있다. Elasticsearch는 역색인을 기반으로 데이터를 인덱싱하기 때문에, 역색인의 기준이 되는 단어(token)들을 어떻게 토큰화하는지에 따라서 검색의 결과도 달라질 수 있다. 이렇게 Token을 생성하는 규칙을 담은 설정을 Index Template라고 부른다. Elasticsearch의 Index Template은 크게 Setting의 영역과 Mapping의 영역으로 나누어진다. 오늘은 Setting의 구성요소인 Analyzer, Tokenizer, Filter에 대해 이야기해보려고 한다! logstash에서 elasticsearch로 데이터를 보내줄 때 json 형태로 미리 setting ..

[Spring 입문] 2. 스프링 웹 개발 기초

정적 컨텐츠 = 파일을 그대로 고객에게 전달 MVC & 템플릿 엔진 = html을 서버에서 가공해서 동적 컨텐츠로 전달 API = json 데이터 포맷으로 클라이언트에 데이터 전달 Vue.js, React 등에서 사용 서버끼리 통신할 때 1. 정적 컨텐츠 Spring boot는 static/ 폴더에서 정적 컨텐츠를 찾아서 사용한다. ex) resources/static/hello-static.html 정적 컨텐츠 입니다. 흐름도 주소 요청 보냄 톰캣 서버에서 접수 먼저 스프링 컨테이터에서 컨트롤러 있는지 확인 없으면 static 하위의 파일 찾음 있으면 웹 브라우저로 리턴해줌 2. MVC와 템플릿 엔진 MVC = Model View Controller 과거 view와 controller가 나누어지지 않았..