프론트엔드 로드맵 (35) 썸네일형 리스트형 프론트엔드 로드맵 4 - DNS와 작동원리 DNS(Domain Name System)란 무엇일까? - 먼저 example.com이라는 도메인 이름을 가진 사이트가 있다고 가정하자. DNS는 서버로부터 이 도메인에 123.65.445.890라는 IP주소를 받아 저장한다. 클라이언트가 인간이 읽을 수 있는 도메인명 example.com을 입력해 해당 페이지에 대한 정보를 요청하면 DNS는 저장된 IP주소를 불러와 클라이언트와 서버가 서로 통신할 수 있도록 한다. 쿼리 : DNS 서버가 요청받은 도메인 명을 IP주소로 변환해 클라이언트에게 어떤 서버에 연결할 지를 제어하는데, 이 요청을 쿼리라고 부른다. 참고 사이트 : https://aws.amazon.com/ko/route53/what-is-dns/ https://opentutorials.org/c.. 프론트엔드 로드맵 3 - 브라우저와 동작원리 최근 사용자들이 이용하는 브라우저에는 인터넷 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 이렇게 있다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 표시하는 것이다(HTTP). 브라우저에 표시되는 자원은 보통 HTML문서지만 PDF나 이미지 또는 다른 형태일 수도 있다. 자원의 주소는 URI(Uniform Resource Identifier). 현재 브라우저들은 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한 명세에 따라 HTML과 CSS를 해석해 표시한다. 이전에는 각 브라우저 별로 다른 명세에 따라 구현했으나 현재는 표준 명세에 따르고 있다. 1. 사용자 인터페이스 (주소 표시줄, 이전/다음 버튼, 북마크 메뉴, 새로고침 버튼과 로드를 중단하는 .. 프론트엔드 로드맵 2 - http는 무엇일까요? HTTP (Hyper Text Transfer Protocol), 하이퍼텍스트 전송 프로토콜 HTTP는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규약을 말한다. 1989년 Tim Berners Lee 팀 버너스리가 처음 설계했으며, 초기 단계에서 발전을 거듭해 현재는 HTML 문서와 같은 정보들을 가져오는데 사용된다. TCP/IP(Transmission Control Protocol / Internet Protocol)을 이용하며, 사용 포트 번호는 기본적으로 80이다. 인터넷 기반 서비스에는 HTTP 외에도 Email, FTP, DNS, NEWS 등이 있다. 인터넷 주소를 지정할때 http://www.~~~ 와 같이 시작하는 것은 www.~~이라는 인터넷 주소가 가진 데이터 정보 .. 프론트엔드 로드맵 1 - 인터넷은 어떻게 동작하는가 인터넷은 웹의 핵심적인 기술이며, 컴퓨터들이 서로 연결돼 정보를 주고받는 거대한 네트워크를 말한다. 인터넷은 1960년대 소련을 경계한 미국에서 새로운 기술을 연구하던 중 ARPA(Advanced Research Projects Agency 고등 연구 계획국 부서)에서 현재 웹의 모태가 되는 ARPANET을 개발했다. 인터넷이라는 말은 하나의 통신망 안에 연결된 컴퓨터들을 의미하는 'International Network'에서 줄여 명명되었다. 1. 인터넷이 가능하려면 무조건 2대 이상의 컴퓨터가 필요하다. 하지만 이러한 네트워크 환경은 여러대의 컴퓨터를 연결하려면 매우 복잡해진다. 2. 이 문제를 해결하기 위해 '라우터'라는 특수한 소형 컴퓨터가 등장한다. 라우터는 한 컴퓨터에서 보낸 메시지가 올바른 .. 2020 프론트엔드 개발자 로드맵 시작 프론트엔드 개발자로의 성장을 위해 오늘부터 아래 로드맵대로 공부를 시작하려한다. 1. 인터넷 - 인터넷은 어떻게 작동될까요? - HTTP는 무엇일까요? - 브라우저와 동작 원리 - DNS와 작동 원리 - 도메인 네임은 무엇일까요? - 호스팅은 무엇일까요? 2. HTML - 기초 배우기 - 의미론적(Semantic)인 HTML 작성 - 폼과 유효성 검사 - 컨벤션과 모범 사례 (Best Practice) - 접근성 - 기본 SEO 3. CSS - 기초 배우기 - 레이아웃 만들기 (Floats / Positioning / Display / Box Model / CSS Grid / Flex Box) - 반응형 디자인과 미디어쿼리 4. JavaScript - 구문(Syntax)과 기본 문법 - DOM 조작 방법.. 이전 1 2 3 4 다음
