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가 있었다. 프로젝트 기간이 얼마 남지 않은 상황에서 많은 기능을 지원하지만 러닝 커브가 높은..

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

이번 포스팅에서는 Jenkins 세부 설정과 GitLab과의 연동, 배포까지 진행해보도록 하겠다. 1. GitLab 연동Jenkins 관리에서 System을 누르고 GitLab 설정쪽으로 가서 해당 필드를 채워준다. 2. Credential 등록GitLab과의 연동을 위해 GitLab에서 AccessToken을 발급하고 등록해준다.Kind를 GitLab API token으로 변경 후, API Token 부분에 Access Token을 삽입ID는 GitLab의 아이디를 적어주고 Add를 클릭다시 돌아가서 credential을 선택 3. Pipeline 작성new item을 누르고 pipeline을 선택push에 대해서만 build를 유발시킬 것이기 때문에 build Triggers에서 위의 그림과 같이 설..

Vite가 왜 궁금했을까❓- SSAFY에서 Vue.js 프레임워크 강의를 수강할 때, 강사님이 Vite를 빌드 도구를 사용하는 것을 보고 처음 접하게 되었다. - 강사님께서는 단순히 Vite가 빠르다는 것만을 강조하고 Vue에 대해 학습 할 내용이 많아 추가 설명을 하지 않고 넘어갔다. - 빨리 작동할 수 있는 원리가 궁금하여 Vite에 대해서 학습을 진행해보려고 한다.  Vite란❓프랑스어로 “빠르다”라는 사전적 의미를 가지며, 빠르고 간결한 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.Vite는 React, Vue 등 다양한 템플릿들의 빌드를 지원하고 있었으며 CRA, Vue-Cli 등을 대체할 수 있다.개발자가 소스 코드를 수정하게 되면 Vite는 수정된 모듈과 관련된 부분만 교체하여..