멋진 개발자가 되고 싶어

✏️프로토콜 프로토콜 (protocol) 전자기기가 서로 통신하는 데 필요한 절차나 규칙 인터넷을 사용할 때 우리는 다양한 프로토콜을 사용 프로토콜의 사용 인터넷을 둘러볼 때는 HTTP를 사용 인스턴트 메시지를 주고받을 때는 XMPP를 사용 FTP는 파일을 이동할 때 사용하는 프로토콜 ✅참고 자료 드롭박스 - FTP란?

✏️서버의 의미 서버 (Server) 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템 또는 장치를 의미 서버는 클라이언트에게 여러 가지 서비스를 제공하는 것을 뜻한다. 서버가 클라이언트에게 서비스를 제공할 때 다음과 같은 처리를 한다. 클라이언트가 서버에게 어떤 서비스를 요청 서버는 요청에 응답해 처리를 수행 서버는 처리 결과를 클라이언트에게 반환 클라이언트는 처리 결과를 받음 실제 사례를 들어 설명을 하면 웹 브라우저가 웹 서버에게 'www.naver.com' 사이트 데이터를 달라고 요청 웹 서버는 해당 사이트의 파일을 찾음 웹 서버는 찾은 파일을 웹 브라우저에게 반환 웹 브라우저는 파일을 받아 네이버 메인을 화면에 표시 ✅참고 자료 [위키백과] https://ko.wikipedi..

반응형 웹을 만들면 이미지의 크기가 웹의 크기에 따라 달라지는 경우가 생긴다. 이때 이미지 크기에 따라 태그의 개수를 다르게 표시할 수 있는 방법이다. 그러니까 이미지의 가로 크기만큼 태그가 잘리지 않는 선에서 최대한으로 보일 수 있는 방법이다. .....나도 설명하면서 뭔말인지 모르겠다. 그래서 미흡한 설명을 한눈에 확인할 수 있도록 codepen으로 준비해봤다. 아래의 코드펜 창을 통해 바로 확인할 수 있다. 추가로 설명하자면 box 아래에 태그를 감싸는 tags라는 클래스의 div가 존재하고, 이 안에는 태그 100개가 들어가 있다. 그 아래에는 박스의 넓이를 조절할 수 있는 range type의 input이 존재한다. See the Pen How to hide tags by bbungbbun (@..

# SPA는 무엇일까? Single Page Application의 약자로, 이름처럼 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현 하는 것을 의미한다. 웹사이트 용량이 점점 커지게 되면서 새로운 페이지로의 이동이 버거워지게 되었고, 이로 인해서 등장하게 되었다. 최소한의 요소만 변경하여 다른 페이지로 이동했다는 느낌이 들도록 하는 것이 특징이다. 이는 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체하는 것이다. # 참고 자료 https://www.huskyhoochu.com/what-is-spa/

# CDN이란 무엇인가요? CDN (Content Delivery Network) 전 세계 사용자에게 지리적 제약 없이 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술 CDN은 각 지역에 캐시 서버(PoP, Points of presence)를 분산 배치합니다. 따라서 근접한 사용자의 요청에 원본 서버가 아닌 캐시 서버가 콘텐츠를 전달하게 됩니다. 이는 서버와 사용자 사이의 물리적인 거리를 줄여주기 때문에 콘텐츠 로딩에 소요되는 시간을 최소화할 수 있습니다 예를 들어서 미국의사용자가 한국에 호스팅 된 웹 사이트에 접근하는 경우, 미국에 위치한 PoP 서버에서 웹사이트 콘텐츠를 사용자에게 전송하는 방식 # 어떤 경우에 CDN이 필요한가요? - 인터넷을 통한 비즈니스를 운영 - 그래픽 이미지, 동..

See the Pen Untitled by bbungbbun (@bbungbbun) on CodePen. CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io background-size: cover / contain은 사진이나 gif만 적용된다. 하지만 이런 기능을 영상에도 적용하고 싶을 때가 분명 존재한다. 그럴 때는 어떻게 해야하는가? 결론! 적용하고 싶은 영상에 object-fit : cover / contain으로 적용하..