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..

💋 테스트 데이터 격리의 필요성 테스트 코드를 통해 아래 코드를 실행했다. @Test void findItems() { Item item1 = new Item("gitchan", 1000, 10); Item item2 = new Item("irene", 1000, 20); Item item3 = new Item("oing", 1000, 30); itemRepository.save(item1); itemRepository.save(item2); itemRepository.save(item3); List result = itemRepository.findAll(); assertThat(result).containsExactly(item1, item2, item3); } 하지만 실패했다. 이유는, findAl..

💋 RestAssured란? RestAssured는 자바를 기반으로한 API 테스트 프레임워크 RESTful API를 테스트하기 위한 라이브러리 중 하나로, API 요청과 응답에 대한 테스트가 가능하다. RestAssured는 테스트할 API의 요청과 응답을 쉽게 파싱하고 검증할 수 있는 다양한 메서드와 기능을 제공한다. ✔ RestAssured에서 사용되는 메서드 given() : 요청을 설정하는 메서드 요청 URI, 헤더, 쿠키, 요청 바디 등을 설정 when() : 요청을 수행하는 메서드 요청 메서드(GET, POST, PUT, DELETE 등)를 설정 then() : 응답을 검증하는 메서드 응답 코드, 헤더, 바디 등을 검증 extract() : 응답에서 값을 추출하는 메서드로, JSON 응답에서..

💋 인수테스트란? 소프트웨어 개발 과정에서 사용자의 요구사항과 기대에 부합하는지 검증하는 테스트 주로 사용자가 사용할 환경과 유사한 환경에서 수행 인수테스트의 '인수'는 '수용'을 뜻하는데, 소프트웨어 개발이 끝나고 사용자가 수용할 수 있는 상태가 되었을 때 테스트가 이루어지기 (통과되기) 때문에 이런 이름이다. 💋 인수테스트가 필요한 이유 인수테스트는 모든 것을 해결할 수는 없지만, 필요한 상황에 맞춰서 사용하는 도구이다. 우리는 개발하다가 길을 잃을 때가 종종 있다. 예를 들면, 다음에 어떤 일을 하려고 이 코드를 짜려고 했는 지 잊는 경우이다. 특히나 세부적인 기능을 구현하다 보면, 내가 궁극적으로 어떤 일을 하려고 했는 지 까먹을 때가 많다. 작은 단위의 세부적인 계획을 세우지 않고, 큰 단위로 ..