CS5 socket.io 딥다이브 - 개념 과 이해 최근 이직을 위해 면접을 보러 다니는 중에 웹소켓에 관한 질문을 받은 적이 있다. socket.io를 이용해서 실시간 채팅 서비스를 만들었고 그 과정에서 웹소켓에 관한 공부를 진행한적이 있는데, 막상 면접에서 조금 딥하게? 질문이 들어오니 제대로 답변하지 못한 기억이 있어 자세하게 정리해보려고 한다. socket.io 가 웹소켓 이랑 정확히 어떻게 다른지? 대용량 메세지가 들어오면 어떻게 처리할 것인지? 의도치않게 소켓 통신이 끊기면 어떻게 처리할 건지? 이런 질문들에 대해 정확하게 답변을 못했던 것 같다. 아무래도 개념적인 부분을 빠르게 훝고 구현에만 너무 초점만 맞춰서 개발했던 것 같다. 클라이언트와 서버간의 양방향 통신을 위해 소켓은 너무나도 중요한 개념이고 이번기회에 확실히 정리해보려고 한다. 우.. 2023. 6. 29. 토큰 기반의 로그인 인증 방법 이해하기 (JWT) 프로젝트를 진행하며 로그인 / 회원가입 부분을 담당하여 개발하게 되었습니다. 로그인을 구현하기 위해 공부한 내용을 정리하고 공유하고자 하는 목적으로 글을 작성합니다. 우선 사용자 로그인에 관한 이해를 위해 알아야 할 개념이 있습니다. 바로 인증과 인가 입니다. ✔ 인증(Authentication) 과 인가(Authorization) 인증(Authentication) 식별 가능한 정보로 서비스에 등록된 유저의 신원을 입증하는 과정 인가(Authorization) 인증된 사용자에 대하여 자원의 접근권한을 확인하는 것 개념만 정의한다면 추상적이라 구체적인 설명을 붙이자면 간단한 게시판 서비스가 있다고 가정하면 모든 사용자가 글을 읽을 수 있으나 글을 작성하려면 유저 정보가 필요합니다. 사용자는 로그인을 통해 .. 2022. 4. 30. 사용자 로그인 이해하기 (쿠키와 세션) ✔ 사용자 로그인? 우리가 사용하는 web은 http기반의 요청(request)과 응답(response)로 동작을 하게 됩니다. 즉, 서버와 클라이언트 사이에서 수많은 통신이 일어나게 됩니다. 웹 서버의 경우 수많은 클라이언트와 동시에 통신하게 되는데 이 과정에서 서버가 클라이언트의 요청을 식별할 필요가 있습니다. (예를 들어 장바구니 기능, 클라이언트 - 서버 간의 정보가 유지 되어야합니다.) 하지만 http의 특징 중 하나는 stateless하는 것 입니다. 즉, 각각의 요청(request)과 응답(response)은 독립적으로 일어나며 사용자의 상태를 유지 할 수 없습니다. 이를 해결하기 위해 http에서 사용자를 식별하기 위한 기술들이 많이 있습니다. 그 중에서도 가장 보편적으로 사용되는 것이 사.. 2022. 4. 25. SSR CSR 차이 웹 개발을 공부하다 보면 SSR(Server Side Rendering) 과 CSR(Client Side Rendering)에 대해서 듣게 됩니다. 저는 리액트를 관심있게 공부하다 보니다 자연스레 CSR에 대한 이슈를 알게 되었습니다. CSR에 대한 이슈 때문에 Next 같은 SSR을 쉽게 할 수 있게 해주는 프레임워크도 사용되고 있습니다! CSR과 SSR의 차이를 정확하게 이해하고 어떤 장단점이 있는지 알고 있으면 도움이 많이 될 것 같아 정리해 봅니다. ✔ 브라우저 렌더링 과정 우선 브라우저 렌더링 과정을 이해 하고 있어야 합니다. 다음 게시물에 브라우저 렌더링에 관하여 정리 했습니다 2022.03.27 - [javascript/📖 study] - [8주차 스터디]38장-브라우저 렌더링 [8주차 스터.. 2022. 4. 8. jpg, png, svg 차이, 리액트에서 svg 다루기 최근 리액트 material ui 라이브러리를 처음 써보면서 icon을 가져와서 사용 한적이 있다. 확인해 보니 svg파일 형태를 가져오는 걸 알게됨 리액트에서 svg파일을 어떻게 사용하는지! 여러 이미지 파일 확장자 들과 차이점이 무엇인지 알아보자! 우선 웹에서 사용하는 이미지는 크게 비트맵과 벡터로 구분됨! 비트맵(Bitmap) 픽셀 단위의 정보의 집합으로 레스터(Raster) 이미지라고도 부릅니다. 일반적으로 사용하는 대부분의 이미지가 비트맵 형식(jpg, png ...) 그림판, 포토샵 같은 툴로 편집 픽셀 단위로 작업하므로 자연스러운 이미지 표현가능(장점) 이미지 확대 / 축소 시 계단현상 발생, 픽셀 수 가 많아질 수록 파일 커지는 단점 벡터(vector) 수학적 함수를 이용하여 도형이나 선을.. 2022. 1. 25. 이전 1 다음
