KBW's cosmos

CDN, CDN 자주 들어봤는데 간단하게만 이해하고 명확히 그 개념을 알지 못했다. 이번 포스팅을 통해 CDN에 대해 자세히 알아보도록 하겠다! CDN (Content Delivery Network) CDN은 Content Delivery Network의 준말로 직역하면 콘텐츠를 전달하는 네트워크라는 의미이다. CDN은 웹페이지, 이미지, 동영상 등의 콘텐츠를 서버에서 사용자로 전달한다. 그런데, 그런 것들은 이미 인터넷망을 통해 이미 전달되고 있지 않은가? 그렇다면 CDN은 왜 필요한 것일까? CDN은 왜 필요할까? 분명히 CDN 없이도 서비스들은 동작한다. 먼저 일반적인 클라이언트와 서버의 통신을 생각해보자. 누군가 어떠한 사이트에 접속한다는 건 해당 사이트를 제공하는 서버 컴퓨터에 방문자의 컴퓨터가..

로그인을 구현한다면 꼭 알아야 할 개념들이다. 이번에 프로젝트를 진행하면서 Next-Auth를 사용해 소셜 로그인을 구현했는데, 이때 공부한 내용들과 실제 프로젝트에서 사용한 인증, 인가 방법에 대해 소개하겠다. 쿠키(Cookie)란? 먼저 쿠키다. 쿠키는 사용자를 기억하기 위해 서버가 사용자의 브라우저에 저장하는 데이터(작은 기록 정보 파일)라고 할 수 있다. 사용자가 사이트에 방문하면, 1. 브라우저는 서버에 요청(request)을 보내고 2. 서버는 응답(response)한다. 이 응답에는 사용자가 찾던 페이지 정보, 데이터뿐만 아니라 브라우저에 저장하고자 하는 쿠키가 있을 수 있다. 이 쿠키를 브라우저에 저장하게 되면, 사용자가 해당 웹 사이트를 방문할 때마다 브라우저가 자동으로 해당 쿠키를 요청..

개발하면서 자주 사용하였지만 개념적으로 잡힌 느낌은 아니여서 포스팅하며 정리하고자 한다. 콜백함수 정의 : 함수에 파라미터로 들어가는 함수 콜백함수 용도 : 순차적으로 코드를 실행하고 싶을 때 사용 먼저 addEventListener를 보겠다. document.querySelector('.button').addEventListener('click', function(){ }) 해당 함수를 사용할 때 콜백함수를 집어넣게 되어있다. addEventListener도 함수인데 파라미터 자리에 또 하나의 함수를 집어넣고 있다. 이것을 콜백함수라고 한다. setTimeout에서도 마찬가지다. setTimeout(function(){ }, 1000) 안에 콜백함수를 집어넣게 한다. 그렇다면 함수안에 함수를 넣으려면 ..

디자인 패턴이란? - 과거 소프트웨어 개발 과정에서 발견한 설계 노하우를 패턴으로 정리한 것을 말한다. 장점 1. 코드 스타일이 비슷해진다 -> 의사소통을 효율적으로 할 수 있다. 2. 이미 검증된 구조이므로 설계를 빠르게 할 수 있다. 디자인 패턴은 목적에 따라 크게 세 가지로 나뉜다. 1. 생성 패턴 2. 구조 패턴 3. 행동 패턴 이 중 생성 패턴에서는 싱글턴, 팩토리 메서드, 구조 패턴에서는 어댑터, 행위 패턴에스는 템플릿 메서드를 알아보겠다. 1. 싱글톤 패턴 (생성 패턴) - 인스턴스를 오직 1개만 생성하는 패턴 A, B, C라는 클래스가 있다고 하자. 이때 A, B, C 클래스에서 각각 D라는 클래스가 필요해 가져다 쓴다면 메모리에 같은 객체가 3개 생기게 된다. 만약 각각이 다른 정보, 다..

메소드(method)는 코드들을 담은 상자이다.(함수를 의미) -> 여기까지는 절차적 프로그래밍에서 가능한 것들 근데 범위가 커지고 해야할 작업이 복잡해지면 코드도 길어지고 프로그래밍하기가 벅차진다. 여기서 객체지향 프로그래밍의 요소들이 추가된다. 클래스는 변수들과 메소드를 담은 상자이다. 이렇게 데이터와 기능이 클래스로 ‘캡슐화’된 컴퓨터 자원의 묶음을 ‘객체’라고 한다. 인스턴스는 클래스로 찍어낸 변수로 하나의 클래스안의 변수 값들을 계속 바꿔주다보면 불필요한 코드가 많아지고 오류가 생길 확률이 높다. 이에 따라 다른 초기값을 가진 클래스를 인스턴스 변수에 찍어내는 방식을 쓴다.(클래스를 복제해 또다른 구조를 만드는 방식)(생성자를 이용해 초기값을 원하는 값으로 지정해줄 수 있다. -> 자바의 경우 ..

최근 앱개발을 하면서 레이아웃을 많이 만져 이제는 익숙해졌지만 처음에는 헷갈리는 개념이었다. margin과 padding은 대상 레이아웃에 공백을 만들어준다는 점에서 비슷하지만 조금 다른 부분이 있다. 먼저 두 개념에 대해 정리하자면 다음과 같다. margin : 바깥쪽 여백 padding : 안쪽 여백 아래 사진을 보자. 굵은 선이 레이아웃의 크기 경계라고 할 때, 이 선을 기준으로 바깥쪽의 여백을 margin이라 하고 안쪽 여백을 padding이라 하는 것이다. margin의 경우 왜 쓰는지 이해가 가는데 padding은 어떻게 사용해야하는지 감이 안올 수 있다. 필자 또한 그랬다.. padding의 경우 레이아웃의 위치(구조)에 영향을 주지않으면서 레이아웃 안의 내용물의 위치를 수정할 수 있는 좋은..