프로그래밍/Web38 DNS는 무엇이고 어떻게 동작할까? 가족의 전화번호도 외우지 않는 시대가 되었다. 외우지 않는 것일까 혹은 외우기 힘든 것일까? 잘 모르겠지만 스마트폰의 주소록은 사람들이 더 이상 전화번호를 외우지 않아도 잘 살아갈 수 있는 환경을 만들어주었다. 이번에는 웹에도 주소록 역할을 하는 친구를 소개하려고 한다. DNS는 어쩌다 만들어지게 됐을까? 앞서 잠깐 소개했듯이 DNS(Domain Name System)은 Web의 주소록 역할을 하고 있다. 사람들은 더 이상 192.168.0.1과 같은 주소가 아닌 google.com, naver.com 로 웹 사이트에 접근할 수 있게 되었다. 왜냐하면 DNS에서 내부적으로 google.com을 192.168.0.1과 같은 IP 주소 형태로 바꿔주고 있기 때문이다. DNS 동작 방식 www.example... 2022. 12. 4. 브라우저 작동 방식 본 게시글은 mdn에서 작성한 “Populating the page: how browsers work”를 번역하였습니다. 사용자는 콘텐츠를 빠르게 로드하고 원활허게 상호 작용할 수 있는 웹 경험을 원합니다. 따라서 개발자는 이 두 가지 목표를 달성하기 위해 노력해야 합니다. 성능을 개선하는 방법을 이해하려면 브라우저 작동 방식을 이해하는 것이 좋습니다. 개요 빠른 사이트는 더 나은 사용자 경험을 제공합니다. 사용자는 빠르게 로드되고 원활하게 상호 작용할 수 있는 콘텐츠가 포함된 웹 경험을 원하고 기대합니다. 웹 성능의 개선을 위해서는 두 가지 주요 문제를 이해하는 것이 중요합니다. 대기 시간은 빠른 로드를 보장하기 위해 극복해야할 주요 위협입니다. 빠르게 로드하기 위해 개발자의 목표는 요청된 정보를 가능.. 2022. 11. 26. [React] 다른 링크로 이동했는데 페이지가 재렌더링돼서 state가 초기화 될 때 문제의 소스코드 : ShoeShop Cart EVENT 부트스트랩의 nav를 그대로 붙혀와서 링크만 지정해놓았다. 수정 : Cart a태그는 페이지를 재렌더링하게되고, Link 태그로 감싸면 페이지가 재렌더링하지 않기 때문에 다른 링크로 이동하여도 state가 그대로 남아있다. 2022. 7. 23. [jQuery] 다운로드와 사용법 간단한 예제 jQuery는 빠르고 가볍고 기능많은 자바스크립트 라이브러리다. 잘 쓰면 빠르고 간편한 개발이 가능하다. 다운로드 해당 홈페이지의 minified을 클릭하여 script 태그를 소스코드에 넣어주면 된다. 사용하기 아주 간단하게 사용할 수 있는 예시이다. 첫번째 문장은 기존의 javascript이고, 두번째 문장은 jquery이다. 엄청 간단하게 쓸 수 있다는 것을 알 수 있다. //Javascript document.querySelector(".box").innerHTML = "HI"; //Jquery $(".box").html("HI"); 또한 jQuery $의 의미는 querySelectorAll과 유사하다. 위의 예시처럼 하나만 찾아서 바꿀 수도 있지만, 클래스가 여러개 있다고 하면 아래 예시처럼 .. 2022. 5. 16. [자바스크립트] 원하는 요소 사라지게/나타나게 만들기 See the Pen block display/none by Jirong (@jirongkim) on CodePen. document.getElementById('alert').style.display = 'block'; 태그의 onclick에 위의 문장을 입력하면 된다. 근데 저렇게 쓰면 뭔가 html이 더러워지기 때문에 addEventListener라는걸 쓴다. 아래처럼 쓸 수 있다. alertbox임. 닫기 button1 button2 뭔가 더 복잡해진것은 착각이다. 저게 훨씬편하다. 2022. 5. 15. [Web] Flip효과 만들기 이런거 만들어보자. Flip이라고 한다. 자세한 내용은 https://www.w3schools.com/howto/howto_css_flip_card.asp 여기를 참고하면 된다. 대신 영어를 잘해야함. See the Pen flip by Jirong (@jirongkim) on CodePen. 안정적으로 애니메이션을 작동시키기 위해서는 가장 바깥쪽에 outer-wrap이 꼭 필요하다. 이게 없으면 돌아가다가 말고 이런 이상한 동작 함. transform-style: preserve-3d를 이용하면 요소를 3d처럼 표현할 수 있게 된다. 이렇게 화면을 앞, 뒤로 구성하고, 뒤집을 수 있는 이유이다. backface-visibility: hidden; 으로 앞, 뒤 화면이 동시에 보이는 현상을 잡을 수 있다. 2022. 5. 14. 이전 1 2 3 4 ··· 7 다음
