cks._.hong 개발 블로그 cks._.hong 개발 블로그

HOC를 활용한 사용자 인가 처리 왜 궁금했을까❓아카이뷰 서비스는 사용자 등급이 존재하여 접근 권한이 존재하여 일부 페이지에 접근이 가능하다. API 서버에서 Spring Security를 활용하여 사용자 권한을 체크하고 있지만 프론트엔드에서도 페이지 자체에 접근을 못하게 막아야 한다. 이를 해결하고 React의 HOC를 활용하여 사용자 접근을 관리해보려고 한다.  1. HOC(Higher Order Component) 고차 컴포넌트 – ReactA JavaScript library for building user interfacesko.legacy.reactjs.orgHOC(Higher Order Component)의 약자로 컴포넌트 로직을 재사용하기 위한 React의 고급 기술이라고 설명한다. 컴포넌..

React Tour를 활용한 서비스 가이드 왜 궁금했을까❓뉴스타 서비스를 런칭하고 사용자들에게 설문 조사를 실시하여 피드백을 받았다. 사용자들은 처음에 서비스를 어떻게 이용하는지 모르겠다는 의견을 보였다. 이를 해결하고자 초기 사용자에게 React Tour를 이용하여 서비스 이용 가이드를 제시하려고 한다.  1. 사용자 피드백36개의 사용자 피드백 중 21개의 피드백이 서비스 이용에 대한 부분을 문제점으로 뽑았다. 2. React Tour Install and use the Mask – Reactour docs.react.tours서비스 가이드 라이브러리를 찾아봤는데 React-joyride와 React Tour가 있었다. 프로젝트 기간이 얼마 남지 않은 상황에서 많은 기능을 지원하지만 러닝 커브가 높은..

Blue-Green 배포 전략을 활용한 무중단 서비스 왜 궁금했을까❓뉴스타 프로젝트에 Blue-Green 배포 전략을 도입하여 무중단 서비스를 구축한 과정에 대해 작성해보려고 한다. 또한, 배포 전략 중에 Blue-Green을 선택한 이유도 작성해보겠다.  [Infra] 무중단 배포 전략 (Rolling / Blue-Green / Canary)무중단 배포 전략 (Rolling / Blue-Green / Canary) 왜 궁금했을까❓뉴스타 서비스 CI/CD 과정에서 서비스가 중단되는 문제점으로 인해 사용자가 일정 시간동안 서비스를 이용하지 못하는 문제점이 있었pslog.co.kr위 포스팅을 통해 무중단 배포 전략에 대한 개념을 학습할 수 있다.1. 왜 Blue-Green 배포 전략인가?1개의 서버와 어플리..

ElasticSearch를 활용한 검색 속도 향상 왜 궁금했을까❓이번 포스팅에서는 ElasticSearch를 프로젝트에 적용시키고 MySQL을 활용해서 구현했던 뉴스 검색 기능과 성능 차이를 비교해보려고 한다.ElasticSearch의 개념과 작동 원리가 궁금하다면 아래 포스팅을 통해서 확인할 수 있다. [FastAPI] ElasticSearch pslog.co.kr 1. Docker / Elasticsearch & Kibana 설치services: elastic: container_name: elastic image: docker.elastic.co/elasticsearch/elasticsearch:7.10.0 restart: always ports: - 9200:920..

무중단 배포 전략 (Rolling / Blue-Green / Canary) 왜 궁금했을까❓뉴스타 서비스 CI/CD 과정에서 서비스가 중단되는 문제점으로 인해 사용자가 일정 시간동안 서비스를 이용하지 못하는 문제점이 있었다. 이러한 것을 해결하고자 무중단 배포 전략을 도입하여 사용자들에게 무중단 서비스를 제공하고자 한다. 무중단 배포 전략을 알아보고 뉴스타 서비스에 알맞은 배포 전략을 도입해보겠다.1. 무중단 배포란?사용자에게 서비스 중단 없이 새로운 버전의 서비스를 배포하는 방법1.1. 일반적인 배포 과정서비스를 운영하면서 새로운 버전을 배포하기 위해서는 기존 서비스를 종료이후, 새로운 서비스를 시작하여 사용자에게 새로운 버전의 서비스 제공1번과 2번 사이에 사용자들이 서비스를 이용하지 못하는 시간이 생..

Axios API 모듈화 왜 궁금했을까❓뉴스타 프로젝트를 개발할 때, 팀원들이 Axios를 모듈화 하지 않고 직접 Axios 코드를 필요할 때마다 작성하는 것을 보고 유지보수가 어려울 것이라 생각되었다. 그래서 재사용성을 증가하고 오타와 같은 개발자 실수를 줄이기 위해 Axios를 모듈화 하여 사용하기로 결정했다. 1. Axios API 모듈화 장점API를 모듈화하여 사용함으로써 코드의 중복을 줄이고 가독성을 향상시켜 유지보수의 이점이 있다.Access Token을 헤더에 지속적으로 넣어줘야 하는 번거로움을 줄일 수 있다.Intercepter를 활용하여 인증 처리를 손쉽게 할 수 있다. 2. Axios 모듈 생성const axiosInstance = axios.create({ baseURL: BAS..

프로젝트 환경 분리 왜 궁금했을까❓프로젝트를 할 때, Dev와 Prod 환경 설정들을 분리하지 않고 사용하다 보니 지속적으로 Config를 수정해야 한다는 문제점이 있었다. 이러한 부분에서 팀의 생산성을 향상시키고자 Dev와 Prod 환경을 분리하려고 한다. 또한, 분리를 통해 운영 서버의 데이터를 조작할 수 없게 하여 안전성을 향상시키고자 한다. 1. 기존의 환경 변수 관리법기존에는 각 어플리케이션의 환경 변수를 하나의 YAML 파일에 넣고 GitLab에 PUSH하여 팀원끼리 공유하는 식으로 진행이 되었다.위와 같은 방식으로 운영하다보니 환경 변수가 prod와 dev가 섞이게 되어 운영 서버에 데이터가 들어가거나 개발 서버의 환경 변수로 인해 작동이 안하는 장애가 발생했다.각 팀원들이 pull을 할 때..

ElasticSearch 왜 궁금했을까❓뉴스타는 1시간마다 크롤링한 뉴스 데이터를 요약해서 사용자 맞춤형으로 뉴스를 추천하는 서비스이다. 뉴스 검색 기능도 지원하여 MySQL의 like 함수를 이용하여 구현했다. 하지만, 추후 데이터가 늘어나면 사용자 응답 속도가 늦어질 것이라 판단했고 이에 대안으로 ElasticSearch를 도입하기로 했다. 이번 포스팅에서는 ElasticSearch의 개념과 동작원리 등에 대해서 알아보려고 한다. 1. ElasticSearch란?Apache Lucene기반의 Java 오픈 소스 분산 검색 엔진빅데이터를 신속하게 저장, 검색, 분석단독으로 검색엔진으로 사용되기도 하며 ELK(ElasticSearch, Logstash, Kibana)로 사용하기도 함ElasticSearc..