728x90 반응형 CS/그 외4 OAuth 인증 과정 목차 저번에 프로젝트에서 구글 로그인과 구글 드라이브에 있는 파일들을 공유하는 기능을 구현했고, 이때 OAuth를 사용해 회사의 서비스가 구글에 접근할 수 있는 권한을 얻게 되었다. OAuth의 원리에 대해 공부를 딥하게는 하지 못한채로 프로젝트를 끝낸것 같아 글로 정리하고 세미나를 진행해보기로 했다. OAuth를 설명하기 이전에 왜 OAuth를 사용해 다른 서비스에 접근하는 권한을 획득하는 방법을 사용하는지에 대해 생각해봤다. 사실 그냥(google을 예로 들겠다) ID/PW를 우리의 서비스에 저장한 채로 구글에 보내 접근 권한을 획득하는 것이 루트도 짧고 편하지만, 사용자는 자신의 아이디와 비밀번호와 같은 개인정보를 처음보는 서비스에 맡기기에는 부담이 있다. 또한 우리 회사의 입장에서 노출되면 안되는.. 2024. 1. 24. 인증과 인가 목차 보안 프로세스인 인증과 인가에 대해서 설명해보려고 한다. 로그인 기능을 구현할 때 인가코드, 인증 이러한 용어들을 듣게 되는데 정확히 뭔지 궁금해져 공부해보게 되었다. 인증(소셜 로그인) 인증은 식별 가능한 정보로 보호된 리소스에 접근하는 것을 허용하기 이전에 서비스에 등록된 유저의 신원을 입증하는 과정이다. 예를 들어 출국할 때 여권으로 신원을 입증하거나 회사에 들어올 때 출입증을 통해 신원을 입증할 수 있다. 웹의 경우에는 아이디와 패스워드를 입력하거나 휴대폰에 전달된 SMS에 적혀있는 코드를 입력하는 것이다. 인가(OAuth) 인가는 요청된 리소스에 접근할 수 있는 권한이 있는 인증된 유저인지 입증하는 과정이다. 예를 들어 회사가 14층에 위치하고 있다면 13층에 위치한 다른 회사에는 접근할 .. 2024. 1. 23. 프론트엔드 입장에서 바라본 Socket과 WebSocket 회사에서 데모 프로젝트를 수행하는데 웹소켓을 사용해 통신을 할 예정이라고 해서 공부하기 시작했다. 예전에 분명 써본거 같은데 기억이 안난다.. 아마 프로젝트를 끝내고 나면 더 완벽하게 이해할 수 있을 것 같은데, 그건 또 추후에 포스팅해야겠다. 현 시점에서 생각해본다면 비디오 데이터를 보여줘야하고, 실시간으로 업데이트되는 영상들을 띄어줘야하기 때문에 웹소켓을 사용해 실시간 네트워킹이 필요하기 때문이라고 생각한다. Socket이란? 웹소켓에 대해 알아보기 전에 socket이 뭔지에 대해서 궁금했다. socket은 프로그램이 네트워크에서 데이터를 주고받을 수 있도록 네트워크 환경에 연결할 수 있게 만들어진 연결부다. 일반적으로 TCP/IP 프로토콜을 이용하고, TCP/IP 4계층에서 전송 계층 위에 놓인다... 2024. 1. 12. [⭐️⭐️⭐️⭐️⭐️] 브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, 웹킷(Webkit)이나 게코(Geko) 등과 같은 렌더링 엔진을 사용합니다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하여 다음 단계들로 이루어집니다. 1. HTML을 파싱 후, DOM 트리를 구축합니다. 2. CSS를 파싱 후, CSSOM 트리를 구축합니다. 3. JavaScript를 실행합니다. 단, HTML 중간에 스크립트가 있다면 HTML 파싱이 중단됩니다. 4. DOM과 CSSOM을 조합하여 렌더트리를 구축합니다. 단, display: none; 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않습니다. 5. 뷰포트 기.. 2023. 3. 10. 이전 1 다음 728x90 반응형
