문제 상황 React context 사용 시 기존 코드 구성이 context 내부 요소가 늘어날 수록 복잡해져서 리팩토링하려 한다. 기존 구현 // 구성 const UserContext = createContext({}); const SignInContext = createContextvoid>(()=>{}); export const UserContextProvider = ({ children }) => { const [user, setUser] = useState(); const signIn = () => {}; return ( {children} ); } export function useUserState() { const context = useContext(UserContext); return c..

문제 : 도메인(B)이 본 서비스 도메인(A)에서 분리되어 나온 상황에서 유니버셜 링크가 오동작. 원래 사용자의 선호에 따라 모바일 브라우저 상에서 이동되거나 앱을 띄워야 하는데, 무조건 앱으로 연동되는 현상 발생. 원인 : 유니버셜 링크는 다른 도메인에 대해 무조건 앱으로 연동되게 처리한다. 해결 : 유니버셜 링크를 다른 도메인에 대해 처리할 수 있다면 그렇게 처리. 아니라면 URI scheme을 이용하여 에러 시 동작을 구현하는 식으로 수정. 딥링크 딥링크는 특정 주소 or 값에 의해 사용자가 앱 내의 특정 화면으로 이동하는 기능을 말한다. 딥링크는 3가지 방식으로 구분된다. URI scheme : 앱에 URI scheme 값을 등록하는 딥링크 특정 scheme 값을 입력하면 (ex_ ohouse:/..

https://web.dev/fast/#optimize-your-images 를 참고하여 요약한 블로그 글입니다.* 도입 서비스의 속도는 UX에 영향을 미치고, UX는 곧 사용자의 유입을 결정한다. 서비스 속도 개선에는 다양한 최적화가 필요한데, 이번에는 이미지 최적화를 살펴보자. 이미지 종류 이미지는 2가지 종류로 구분할 수 있다. vector 이미지 raster 이미지 vector 이미지는 선, 점, 면 등의 벡터적 요소를 사용하여 이미지를 표현하는 방식이며, 간단한 기하학 모양 (로고, 글자, 아이콘 등)을 나타내는 데에 적합하다. vector 이미지는 사이즈에 따른 깨짐 없이 이미지를 전달할 수 있다는 장점이 있지만, 표현해야 하는 모양이 복잡할 경우 데이터 양이 많아진다는 단점이 있다. rast..

인증 방식 1. API key를 통한 인증 과정 user가 login 정보를 입력한다. Client는 이미 Server에 등록한 API key를 가지고 있다. Client는 user가 입력한 Login 정보를 받아서 API key와 함께 Login API를 요청한다. Server는 API key를 통해 해당 Client가 등록되어있는 지를 검사한다. Sever는 Login 정보를 통해 해당 User가 API를 사용할 수 있는 지를 검사한다. 단점 API key는 모든 Client들이 공통으로 사용하기 때문에 노출되면 전체 API가 노출된다. API key는 시간이 무제한이고 한 번 노출되면 API key 변경 전까지 계속 노출된다. 2. API Token을 통한 인증 과정 user가 login 정보를 입..

기존의 아키텍처 기존의 아키텍처는 Monolitic 아키텍처로 하나의 코드 베이스에 하나의 배포 주기를 가지고 있는 아키텍처를 뜻한다. 서비스 별로 나뉘어져있지 않으며 하나의 서비스를 갱신하여 배포하고자 하면 모든 서비스가 다시 배포 된다. MSA 장점 간단하다. 유지보수가 용이하다. MSA 단점 빌드 시간, 테스트 시간, 배포 시간이 빠르게 상승한다. 하나의 서비스에 장애가 전체 서비스로 이어질 수 있다. 서비스의 영향도나 전체 시스템의 파악이 어렵다. MSA 구조 UI layer 비즈니스 로직 layer 데이터 접근 layer DB Micro Service Architecture MSA는 배포 단위를 서비스 별로 쪼갠 아키텍처를 뜻한다. 비교하자면 위의 그림과 같다. MSA 특징 각 서비스는 mono..

Refresh token의 장점 본인은 원래 API 요청 시 매번 Access Token을 발급하는 식으로 API를 구성하였는데, 이렇게 구성할 경우 사용자가 많아질 수록 시스템 부하가 증가한다. 따라서 Refresh Token을 발급하는 것이 낫다. 또한, refresh token이 있을 경우 access token의 유효 시간을 짧게 하여 탈취 시 빠르게 무효화 시킬 수 있다. Refresh token의 동작 Access Token을 통해 User가 request를 보내고, 유효 시간이 만료 되었다는 응답을 받는다. User는 Access Token고 함께 Refresh Token을 서버로 보낸다. Refresh Token이 유효하다면 유효시간이 갱신된 Access Token이 새로 발급되어 User..

token은 cookie에 저장할 수도, Web Storage에 저장할 수도, Client 자체에 저장할 수도 있다. Cookie 쿠키는 서버가 보낸 데이터를 최대 4KB까지 저장 가능하다. 클라이언트에서 Credential 속성으로 허용하면 서버에서 접근 가능하다. HTTP Request 시 자동으로 포함되어 서버에 쿠키 정보를 제공 가능하다. HttpOnly 설정을 이용하여 사용자가 제어할 수 없도록 만들 수 있다. Web Storage Session Storage 서버에서 접근할 수 없다. 세션이 종료되면 모두 삭제 된다. 5~10MB의 크기를 갖는다. Local Storage 서버에서 접근할 수 없다. 반 영구적으로 저장할 수 있다. 5~10MB의 크기를 갖는다. Client Side 클라이언트 ..

개념 정리 내가 제공하는 서비스를 Client, 다른 서비스를 Resource Server, 두 서비스를 모두 이용하는 사용자를 Resource Owner라고 정의한다. 추가적으로 Resource Server에서 인증을 담당하는 서버를 따로 Authorization Server라고 한다. 이렇게 연합해서 인증체계를 제공하는 것을 federated Identity라고 부른다. 배경 Client가 Resource Server(google, facebook 등)에 있는 Resource Owner의 계정에 접속할 수 있는 방법은 무엇이 있을까? Resource Server에 대한 Resource Owner의 id, pw를 제공받으면 더 좋겠지만 보안 신뢰 문제가 있다. 따라서 oAuth가 나왔다. oAuth를 ..