WEB

💋 Clienct-Side Rendering ✔️ 개념 브라우저가 UI 만드는 작업을 ‘모두’ 담당한다. 페이지의 초기 로딩을 위해 서버가 제공하는 정적인 HTML, CSS 및 JavaScript 파일을 받아오고, 이후에 클라이언트 측에서 동적으로 페이지를 렌더링하는 방식 초기 페이지는 정적 콘텐츠만을 담은 HTML 파일을 받아와서 렌더링되며, 이후 JavaScript 파일을 로드하고 실행하여 동적 데이터를 가져오고 화면을 갱신한다. ✔️ React의 CSR React를 사용해서 만든 애플리케이션은 CSR 방식을 사용한다. 브라우저는 실질적으로 비어있는 div만 존재하는 HTML을 받아 초기에는 빈 화면이지만, 자바스크립트를 해석해서 모든 user view를 만들어낸다. 브라우저에 자바스크립트 비활성화하..

이 포스팅은 유튜버 널널한 개발자 TV의 네트워크 강의 중 웹 서비스 구조 영상을 보면서 작성한 필기입니다. Cookie는 클라이언트에서 상태 기억을 위해 구현한 방법이다. 전체 뷰도 올려주셨는데, 다음과 같다! 도움이 되었다면, 공감/댓글을 달아주면 깃짱에게 큰 힘이 됩니다!🌟 비밀댓글과 메일을 통해 오는 개인적인 질문은 받지 않고 있습니다. 꼭 공개댓글로 남겨주세요!

💋 인트로 안녕하세요. 우아한테크코스 5기 깃짱이라고 합니다. 서버로부터 인증을 완료해 토큰을 발급받았다면 어디에 저장하는 것이 좋을까요? 각각의 특징에 대해 알아봅시다! 💋 저장소 종류 ✔️ Web Storage (Local Storage / Session Storage) 클라이언트에서 자바스크립트로 꺼내서 요청에 담아 보내기 때문에 XSS(Cross Site Scripting) 공격에 취약합니다. XSS 공격을 통해서는 토큰 값 자체를 가져올 수 있습니다. 개발자는 절대절대절대절대 JWT를 HTTP로 보내서는 안됨! 반드시 HTTPS 둘의 차이점은, 브라우저 창을 닫았을 때, 데이터가 보존되는가에 있음! Local Storage: 데이터 유지 Session Storage: 데이터 삭제 ✔️ Cooki..

💋 인트로 안녕하세요. 우아한테크코스 5기 깃짱이라고 합니다. 이번 포스팅에서는, 애플리케이션에서 인증을 구현하기 위해 사용되는 쿠키, 세션, 토큰에 대해서 설명하려고 합니다. 인증을 통해서 서버는 유저가 누구인지 알 수 있다. 쿠키, 세션, 토큰은 모두 인증을 위해서 사용하는 개념이다. 어떤 개념인지 하나씩 보면서, 알아가보자! 💋 쿠키(Cookie) ✔️ 개념 서버가 사용자의 웹 브라우저에 전송하는 데이터 서버에서 사용자를 기억하기 위해서 브라우저에 저장할 데이터를 응답과 함께 브라우저에 전송 브라우저는 그 데이터를 저장해 놓았다가, 동일한 서버에 요청 시 함께 자동으로 전송함. ✔️ 특징 쿠키는 도메인에 따라 제한이 된다. 브라우저는, 유튜브한테 받은 쿠키는 유튜브로만 보낸다. 쿠키는 유효 기간이 ..

💋 인트로 [프로가 되기 위한 웹기술 입문]이라는 책을 읽고, 웹 기술의 역사에 대해 간단히 정리해 보았다. 💋 웹 애플리케이션이란? 웹 애플리케이션을 이해하는 쉬운 방법은 데스크톱 애플리케이션과 비교하는 것이다. ✔ 데스크톱 애플리케이션 모든 처리는 본인의 컴퓨터(PC)상에서 진행된다 화면은 운영체제의 기능을 이용해 표시된다 애플리케이션을 PC에 설치할 필요가 있다 예시) 평소에 사용하는 워드프로세서 소프트웨어나 스프레드시트 소프트웨어, 이메일을 읽고 쓰는 데 이용하는 이메일 프로그램 ✔️ 웹 애플리케이션 주된 처리는 본인의 컴퓨터(PC)가 아니라 서버상에서 진행된다 화면은 HTML로 표현되며, 웹 브라우저에 표시된다 애플리케이션을 PC에 설치할 필요가 없다 웹 애플리케이션이 보급된 커다란 이유 중 하..

💋 인트로 웹사이트에 있어서 속도(성능)는 매우 중요하다. 구글에서 정리한 자료에 따르면, 속도는 실제 서비스의 사용자를 늘리고 서비스의 영업 이익을 늘린다고 한다. 백엔드 개발자가 적은 시간 투자로 최대 성능 효과를 얻을 수 있는 방법은 대략 아래와 같다. HTTP 압축 다양한 리소스 최적화 기법 이미지, JS, CSS, 기타 리소스 HTTP 캐싱 이중에서도 이번 포스팅에서는 캐싱에 대해 집중적으로 다룰 예정이다. 💋 HTTP 캐시(Cache) ✔ 개념 캐시는 데이터나 콘텐츠를 일시적으로 저장하는 임시 저장소 웹에서의 캐시는 웹 페이지, 이미지, 스크립트, 스타일 시트 등의 자원들을 저장하여 이후에 동일한 자원에 접근할 때 더 빠르게 가져올 수 있도록 함. ✔ 캐시를 사용하는 이유 1. 성능 향상: 웹..

안녕! 우아한테크코스 5기 [스탬프크러쉬]팀 깃짱이라고 합니다. 스탬프크러쉬 서비스의 소스 코드 바로가기 💋 인트로 우테코 프로젝트를 진행하면서 회원가입 및 로그인 기능을 구현해야 했다. 직접 id, password를 입력받아 우리 회원으로 만드는 방식도 고려해 보았지만, 데이터 관리가 보안 측면에서 부담스럽다고 생각해 소셜 로그인을 우리 서비스에 도입하기로 했다. 이번 포스팅에서는 OAuth의 과정에 대해서 알아보려고 한다. 💋 OAuth의 필요성 OAuth의 등장 배경과 필요성에 대해서는 이미 많은 포스팅에서 잘 설명이 되어 있기 때문에 생략하려고 한다. 여기 첨부한 링크에 들어가서 OAuth의 등장배경에 대해서 읽어보면 빠르게 이해할 수 있을 것 같다. 💋 OAuth란? OAuth(”Open Aut..

💋 쿠키는 왜 필요할까? 쿠키의 개념이 등장한 배경을 이해하기 위해서는, 먼저 클라이언트와 서버의 구조에 대해 이해할 필요가 있다. 클라이언트가 서버에 요청을 보내고, 서버로부터 오는 응답을 대기한다. 서버는 들어온 요청에 대한 결과를 만들어서 응답을 보내준다. ✔ 무상태(Stateless) 그런데, 이 때 서버는 클라이언트의 상태를 보존하지 않는다. 이 특성을 Stateless라고 한다. 예를 들어서, 로그인 페이지에서 HTTP 요청을 하면, 서버에서 요청을 처리하고 응답을 보낸다. 그렇게 되면 서버와 브라우저의 연결은 끝이다. 또 로그인을 끝낸 후에 home 화면으로 가게 되면 GET 요청을 보내게 되면, 백엔드가 html을 렌더링하고 끝나게 된다. 더이상의 연결은 없다. 이처럼 클라이언트와 서버는 ..

💋 인증(Authentication) 인증은 사용자의 신원을 확인하는 과정이다. 누군지? 를 보는 것이다. 스프링에서 인증은 보안과 직결되기 때문에 매우 중요한 부분이며, 아래와 같은 절차를 따른다. 1. 사용자가 로그인 페이지에 접근하여 아이디와 비밀번호를 입력합니다. 2. 입력받은 아이디와 비밀번호를 가지고 인증 매커니즘을 통해 사용자의 정보를 확인합니다. 3. 사용자 정보가 확인되면, 인증 매커니즘은 사용자의 권한 정보까지 확인하여 인증된 사용자로 세션을 생성합니다. 우리가 웹 서비스에서 사용할 수 있는 인증 방법은 여러 가지가 있다. 대표적으로는 폼 인증(Form Authentication), HTTP 기본 인증(Basic Authentication), OAuth2 등이 있다. 오늘은 그중에서 H..

오늘 포스팅에서는 상태 코드가 무엇인지 그 개념과, 종류에 대해 공부하려고 한다. 상태 코드가 왜 필요할까? 사례를 통해서 필요성에 대해 이해해 보자. 💋 브라우저는 요청에 대한 결과를 알려주지 않으면 알지 못한다 우리가 로그인할 때를 생각해 보자! 위 사진에서 어떤 일이 일어난 걸까? 1. 내가 보낸 아이디, 패스워드는 POST 요청을 통해 서버로 전달되었다. 2. 서버는 데이터베이스에서 내 아이디에 해당하는 패스워드를 (암호화된 형태로 비교해) 확인했지만 잘못된 패스워드였다. 혹은, 아이디 자체도 존재하지 않았다. 3. 서버는 방금 나의 요청에 대해 인증에 실패해서 '아이디 또는 패스워드가 잘못 입력되었습니다.'라는 문구를 내가 보고 있는 페이지로 보냈다. 사용자는 '아이디 또는 패스워드가 잘못 입력..