COCO World

🧸 개요 렌더링이란? HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에 출력되는 과정을 말한다. 즉 브라우저가 서버로부터 요청받은 내용을 전달받아 ㅂ라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것이다. 이러한 브라우저 렌더링은 '서버사이드 렌더링(SSR)'과 '클라이언트사이드 렌더링(CSR)'로 나뉜다. 🧸 서버사이드 렌더링(Server-Side Rendering, SSR) 웹 어플리케이션 렌더링 방식 중 하나이다. 클라이언트와 서버 간의 협력적인 렌더링 방식으로, 서버에서 초기 HTML을 생성하고 클라이언트에게 전달하는 방식이다. 즉, 서버가 웹 페이지의 완전한 HTML을 생성하고 클라이언트에게 보여준다. 이렇게 하면 클라이언트는 초기 로딩 시에 완전한 페이지를 받아볼 ..

🍙 들어가기에 앞서 HTTP와 HTTPS는 둘다 인터넷을 통해 데이터를 전송하기 위한 프로토콜이지만 데이터 전송의 보안과 관련하여 중요한 차이점을 가지고 있다. 2014년 구글에서는 HTTP를 HTTPS로 바꾸라고 권고한다. HTTPS를 사용하는 웹 사이트에 대해서 검색 순위 결과에 약간의 가산점을 주겠다고 발표했는데 이는 사실상 HTTP를 사용하는 웹 사이트에게 벌점을 주는 것과 마찬가지였다. HTTP에서 HTTPS로의 전환은 좀 더 번거롭고, 보안측면에서 더 우수한 특징을 가지고 있다. 이제 두 가지의 차이점을 살펴보자. 🍙 HTTP (Hypertext Transfer Protocol) 인터넷에서 웹 페이지, 이미지, 동영상 등의 리소스를 전송하기 위해 사용되는 프로토콜이다. HTTP는 클라이언트와 ..

💙 들어가기에 앞서 쿠키와 세션은 백엔드와 프론트엔드 개발자 모두 접해야하는 필수 개념이고, 초반에 개념을 이해해놓지 않으면 헷갈리기 쉽다. 또한 두 가지 개념을 모두 알아야 구현에도 유용하다. 그러기 위해선 위의 쿠키와 세션의 적용 과정과 필요성을 알아보자. 💙 쿠키와 세션을 사용하는 이유 HTTP 프로토콜의 특성이자 약점을 보완하기 위해서 쿠키 또는 세션 한가지를 선택하여 적용합니다. 그렇다면 HTTP프로토콜의 어떤 특징 때문일까? 1. Connectionless 프로토콜 : 비연결지향 클라이언트가 서버에 요청(Request)을 했을때, 그 용청에 맞는 응답(Response)을 보낸 후 연결을 끊는 처리방식이다. HTTP 1.1 버전에서 연결을 유지하고, 재활용 하는 기능이 Default로 추가되었는..

🌼 웹 브라우저 공격 웹 서비스상에서 발생될 수 있는 모든 보안 허점(Security Hole)을 이용해 악의적인 행위를 하는 것으로 웹 서비스를 대상으로 주로 공격하지만 프레임워크(Spring), 웹 어플리케이션 서버 대상으로 공격을 수행할수도 있다. 웹 브라우저와 방화벽 방화벽이 도입되면서 웹 해킹이 더욱 증가했는데 방화벽은 IP, Port기반으로 차단을 수행하고, 흐름을 Inbound, Outbound로 설정하는 보안장비이다. 방화벽 내부에 웹서버만 존재할 경우 Inbound 정책에 HTTP, HTTPS만 허용하고, 그 외의 포트는 차단하게 된다. Attacker들은 방화벽에서 허용되어있는 웹을 통해 취약점을 찾는다. 웹 해킹의 과정 공격 대상 지정 ➠ 정보 수집 ➠ 취약점 분석 ➠ 공격 ➠ 결과 ..

🌵 REST란 무엇인가? ■ REST의 의미 REST(Representational State Transfer)의 약자로서 자원을 이름으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미하는 소프트웨어 프로그램 아키텍처의 한 형식이다. 기술적으로 의미를 파악하자면, HTTP URI(Uniform Resource Identifier)을 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH )을 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. CRUD Operation이란? CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신..

🦩 우리는 브라우저에 URL을 입력한 후의 과정을 왜 알아야 할까? : SW 엔지니어라면 개발 과정에서 문제가 발생한 부분의 위치와 성능 파악을 위해 위의 과정을 파악해 놔야하고, 그 외에도 우리가 개발하고 있는 큰 프레임의 한 부분으로서 운영 체제, 브라우저 환경에 관련하여 전체적인 과정으로서 알아놔야하는 필수적인 CS이다. 🦩 웹 브라우저에 URL 입력시 과정 요약 웹 브라우저에 URL 입력 웹 브라우저가 도메인명으로 IP 주소 조회 웹 브라우저가 서버와의 TCP 연결 시작 웹 브라우저가 서버로 HTTP 요청 전송 웹 서버가 요청을 처리한 후 웹 브라우저에 응답 전송 사용자에게 웹 브라우저 보여주기 (= 웹 브라우저가 콘텐츠 렌더링) 🦩 URL 입력 후 변화과정을 살펴보자 1. 웹 브라우저에 URL ..

🍉 문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 🍉 제한 사항 array의 길이는 1 이상 100 이하입..

🍉 문제 설명 다트 게임 카카오톡에 뜬 네 번째 별! 심심할 땐? 카카오톡 게임별~ 카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다. 갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다. 다트 게임은 총 3번의 기회로 구성된다. 각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다. 점수와 함께 Single(S), Double(D), Triple(T) 영역이 존재하고 각 영역 당첨 시 점수에서 1제곱, 2제곱, 3제곱 (점수1 , 점수2 , 점수3 )으로 계산된다. 옵션으로 스타상(*)..