Clloud's devlog

이번 포스팅에서는 프로그래밍에서 트래픽(Traffic)이란 무엇인지에 대하여 공부를 해보고자 한다. 트래픽이란 트래픽(Traffic)이란 일반적으로 네트워크나 웹 서비스에서 데이터의 이동량이나 사용량을 의미한다. 트래픽은 특정 시간 동안 전송되는 데이터의 양을 측정하는 데 사용되며, 보통은 초당 비트 단위로 측정된다. 트래픽은 네트워크 또는 서비스의 성능과 확장성을 평가하는 데 중요한 지표이다. 높은 트래픽은 시스템에 더 많은 부하를 가하고, 대역폭을 소비하며, 응답 시간과 성능을 저하시킬 수 있다. 따라서 시스템 아키텍처, 네트워크 구성, 데이터베이스 및 서버 용량 등을 설계할 때 트래픽을 고려해야 한다. 트래픽은 주로 두 가지 유형으로 분류된다. 인바운드 트래픽(Inbound Traffic) 네트워크..

이번 포스팅에서는 애플리케이션 안에서 웹 콘텐츠를 표시하기 위한 컴포넌트인 웹뷰(WebView)에 대하여 공부를 해보고자 한다. WebView란 WebView는 안드로이드에서 제공하는 View 클래스 중 하나로, 웹 페이지를 표시할 수 있는 뷰를 말한다. 즉, 안드로이드 애플리케이션 내에서 웹 페이지를 표시할 수 있는 기능을 제공한다. WebView는 안드로이드의 내장 브라우저 기능을 활용하여 동작한다. 웹 페이지 로딩, 네트워크 통신, 캐시 관리, 자바스크립트 실행 등의 기능을 지원하며, WebView에서 사용하는 내장 브라우저 엔진은 안드로이드 버전에 따라 다르게 지정된다. 안드로이드 4.4 KitKat 이전까지는 WebKit 엔진을 사용했지만, 이후에는 Chromium 엔진을 사용하고 있다. 안드로..

이번 포스팅에서는 웹 통신을 위한 간단한 토큰 기반 인증 방식인 JWT(Json Web Token)에 대하여 공부를 해보고자 한다. JWT란 JWT는 "JSON Web Token"의 약어로, 웹 애플리케이션 간에 정보를 안전하게 전송하기 위한 토큰 기반 인증 시스템을 말한다. JWT는 정보를 디지털로 서명하여 검증 가능하며, 클라이언트와 서버 간의 인증 및 권한 부여를 지원하는 인증 프로토콜이다. JWT는 서버와 클라이언트 간에 통신할 때, 인증과 권한 부여를 위해 사용된다. 클라이언트는 로그인 요청을 서버에 보내면, 서버는 유효한 사용자인지 확인하고, JWT를 발행하여 클라이언트에게 전달한다. 클라이언트는 이후 요청 시, JWT를 서버에 함께 보내어 인증 및 권한 부여를 받는다. JWT 구성요소 JWT..

이번 포스팅에서는 CSS3에서 사용되는 단위인 px, rem, em의 차이에 대하여 공부를 해보고자 한다. 이 단위들은 웹 페이지의 요소들의 크기를 지정하는 데 사용된다. 각 단위에 대한 설명 px(픽셀) px은 "픽셀"을 나타내며, 고정된 크기를 나타낸다. 예를 들어, font-size: 16px;는 해당 텍스트의 글꼴 크기를 16픽셀로 설정한다. 픽셀 단위로 크기를 지정하므로, 장치의 해상도에 따라 크기가 변하지 않는다. 고정 크기로 웹 페이지를 디자인하고자 할 때 주로 사용된다. rem (루트 엠) rem은 "루트 엠"을 나타내며, 상대적인 크기를 나타낸다. 기본적으로 HTML 요소의 기본 글꼴 크기인 "루트 엠"을 기준으로 삼는다. 예를 들어, font-size: 1.2rem;은 해당 텍스트의 글..

이번 포스팅에서는 CSS3에서 flex 태그에 대하여 공부를 해보고자 한다. flex 태그란 flex는 CSS3의 속성 중 하나로, 유연한 박스 모델(flexible box model)을 생성하는 데 사용된다. 이를 통해 요소들을 좀 더 유연하게 정렬하고 배치할 수 있다. flex 속성은 부모 요소에 적용되며, 그 자식 요소들에게 유연한 동작을 제공한다. 부모 요소에 display: flex;를 적용하면, 해당 요소와 그 자식 요소들은 flex 컨테이너가 되며, 내부의 자식 요소들은 flex 아이템이 된다. flex 속성 flex 속성은 아래와 같은 세 가지 속성으로 구성된다. flex-grow 아이템의 확장 비율을 설정한다. 값은 양의 정수로 지정하며, 기본값은 0이다. flex-grow 값이 클수록 ..

이번 포스팅에서는 자바스크립트에서 this 키워드에 대하여 공부를 해보고자 한다. this란 this는 자바스크립트에서 함수가 호출될 때, 해당 함수를 호출한 객체를 참조하는 키워드이다. this를 사용하면 함수가 어떻게 호출되었는지에 따라 해당 함수 내부에서 다른 객체나 변수를 참조할 수 있다. this의 값은 호출되는 위치에 따라 달라질 수 있다. 객체의 메서드로 함수가 호출될 경우 this는 해당 객체를 가리키지만, 일반적인 함수로 호출될 경우, this는 전역 객체를 가리킨다. 예제 코드 let person = { name: 'John', greet: function() { console.log(`Hello, my name is ${this.name}.`); } }; person.greet(); ..

이번 포스팅에서는 자바스크립트에서 변수명으로 쓰이는 '$'와 '_'에 대하여 공부를 해보고자 한다. 변수 명명 규칙 자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다. 첫 글자는 숫자가 될 수 없다. 기호 '$' '$'는 보통 jQuery 라이브러리에서 사용되며, 전역 함수 $( )는 DOM 요소를 선택하는 데 사용된다. 이 외에도 jQuery에서는 $를 변수명의 맨 앞에 사용하여 변수를 구분하고, 객체명으로 $를 사용하여 jQuery 객체임을 나타낸다. 예제 코드 // jQuery로 body 요소를 선택하여 변수에 저장 let $body = $('body'); // $를 변수명 앞에 사용하여 jQuery 객체를 표시할 수도 ..

이번 포스팅에서는 자바스크립트에서 parseFloat 함수와 parseInt 함수에 대하여 공부를 해보고자 한다. parseFloat와 parseInt는 JavaScript에서 숫자로 변환하기 위해 사용되는 함수다. 각각의 함수는 문자열을 숫자로 변환하는 데 사용되지만, 두 함수는 다른 방식으로 작동하며, 사용되는 상황에 따라 다른 결과를 반환할 수 있다. parseFloat parseFloat 함수는 문자열을 부동소수점 숫자로 변환한다. 함수는 문자열을 왼쪽부터 읽어가면서 숫자와 소수점, 그리고 지수(E 또는 e)를 인식한다. 만약 문자열이 숫자로 시작하지 않는다면, NaN(Not-a-Number)을 반환한다. 소수점 이하의 숫자가 있는 경우, 그 숫자도 인식하여 반환한다. 지수 표기법을 사용하는 경우..

이번 포스팅에서는 자바스크립트에서 제이쿼리(jQuery)에 대하여 공부를 해보고자 한다. jQuery란 jQuery는 자바스크립트 라이브러리 중 가장 대표적인 것으로, 자바스크립트로 작성된 코드를 더욱 쉽게 작성할 수 있도록 도와주는 라이브러리를 말한다. jQuery를 사용하면 HTML 문서의 DOM 요소를 쉽게 조작하고, 이벤트 처리를 보다 쉽게 구현할 수 있다. 이외에도 jQuery UI 등 다양한 플러그인을 사용하여 웹 개발을 보다 효율적으로 할 수 있다. jQuery를 사용하는 이유 Ajax 요청을 구현할 때 jQuery를 사용하면 다음과 같은 이점이 있다. 브라우저 호환성 jQuery는 브라우저 호환성이 좋아 다양한 브라우저에서 동일한 결과를 보장한다. 이를 통해 웹 개발자는 브라우저별로 코드를..

이번 포스팅에서는 자바스크립트에서 에이잭스(Ajax)에 대하여 공부를 해보고자 한다. Ajax란 Ajax(Asynchronous JavaScript and XML)는 웹 애플리케이션에서 비동기적으로 서버와 통신하여 데이터를 동적으로 로드하고 업데이트하는 기술을 말한다. Ajax를 사용하면 전통적인 웹 페이지에서의 페이지 로드를 줄이고 사용자 경험을 향상시킬 수 있다. Ajax를 사용하는 이유 사용자 경험 개선 Ajax를 사용하면 사용자가 페이지를 새로고침하지 않고도 데이터를 동적으로 로드하고 업데이트할 수 있다. 이는 페이지 로딩 시간을 줄이고 사용자 경험을 개선한다. 서버 부하 감소 Ajax를 사용하면 필요한 데이터만 서버에서 가져올 수 있다. 이는 전체 페이지를 다시 로드하는 것보다 서버 부하를 줄이..