디노문경

How Web Browsers Work ? A brief introduction to browser’s architecture medium.com 위의 글을 번역한 글입니다. What is browser? browser는 WWW(World Wide Web)의 정보에 접근하기 위해 사용되는 소프트웨어 어플리케이션이다. browser의 주된 기능은 서버에서 resource를 검색해 browser window에 보여주는 것이다. resource는 보통 HTML 문서지만 PDF, 이미지, 오디오, 비디오 또는 다른 종류의 콘텐츠일 수도 있다. 리소스의 위치는 URI(Uniform Resource Identifier)를 사용하여 지정된다. URL(Uniform Resource Locator)와 URI(Unifor..

이 글은 인프런에서 1분코딩님의 '인터랙티브 웹 개발 제대로 시작하기' 강의를 듣고 정리한 글입니다. 인터랙티브 웹 개발 제대로 시작하기 - 인프런 크리에이티브 넘치는 인터랙티브 웹페이지를 개발할 수 있는 기본기를 다질 수 있는 수업입니다. 초급 웹 개발 UX/UI 프로그래밍 언어 Front-End HTML/CSS Javascript 웹 퍼블리싱 웹 개발 UX/UI 인터랙티브 www.inflearn.com See the Pen NWGQeyL by mungyeung (@mungyeung) on CodePen. 핵심 흐름 1. 앞면과 뒤면에도 3D가 적용될 수 있도록 앞면과 뒤면을 감싸고 있는 카드에 transform-style: preserve-3d;를 적용시킨다. (perspective는 자신의 직계자식..

What is HTTP What is HTTP? HTTP stands for Hyper Text Transfer Protocol WWW is about communication between web clients and servers Communication between client computers and web servers is done by sending HTTP Requests and receiving HTTP Responses World Wide Web Commun www.w3schools.com 위의 글을 번역한 글입니다. HTTP의 정의 HTTP (Hyper Text Transfer Protocol)은 Client와 Server가 정보를 어떻게 주고 받을 것인가에 대한 약속이다. 주로 h..

1. app crashed 노마드코더의 유튜브 클론 코딩할 떼 이 에러가 갑자기 튀어나와서 진도를 못나갔다.. 그래서 복습을 하려고 배운 곳까지 혼자서 만들어보는 데 또 똑같은 에러가 갑자기 발생했다.. 알고보니까 app crashed가 중요한 것이 아니라 Error: 블라블라 이 부분이 에러의 원인을 말해준다. 에러를 일부러 내보니까 app crashed 문장은 똑같이 나오는 데, Error문장은 달랐다. 하.. 근데 이 Cannot read property 'length' of undefined는 도저히 모르겠다.. 2. app.get()와 app.use() home은 잘 되는 데, globalRouter에 있는 다른 라우트들이 동작을 안해서 도대체 뭐가 잘못된건지.. 거의 3시간을 헤맸다.. (어제..

Document dinomoon.github.io 위의 링크는 제가 예시로 만든 Top 버튼입니다. 어려워 보이시나요? 사실 아주 아주 쉽습니다. 왜냐하면 원하는 위치로 스크롤을 해주는 scrollTo라는 함수가 존재하기 때문입니다! MDN에서 한 번 보시면 금방 이해되실 거예요✅ Window.scrollTo() Window.scrollTo() scrolls to a particular set of coordinates in the document. developer.mozilla.org 그리고 Top버튼의 위치는 고정되어야 하니까 position: fixed를 사용해야합니다! 아래는 제가 직접 짠 자바스크립트 코드입니다~ 처음에는 Top버튼이 안 보이다가 스크롤을 조금 아래로 내렸을 때 Top버튼이 보..

이해가 쏙쏙되는 영상 How Does The Internet Work? TLDR: Routers Moving Packets According To Various Protocols user3141592.medium.com 아래의 글은 위의 글을 번역한 글입니다. How does the Internet work? 인터넷은 Internet Protocol (IP), Transport Control Protocol (TCP), 그리고 다른 프로토콜들을 따르는 packet routing network를 통해 동작합니다. What's a protocol? 프로토콜은 네트워크에서 컴퓨터가 서로 어떻게 통신해야 하는지에 대한 방법을 구체화한 규칙의 집합입니다. 예를 들어, Transport Control Protoco..

참고 영상 1. Express의 정의 express는 Node.js를 위한 빠르고 간결한 웹 프레임워크이다. 그리고 express는 React, Angular, Vue와 같이 client-side의 프레임워크가 아니라 "server-side" 또는 "back-end"의 프레임워크이다. 2. 왜 Express를 사용하는가? Node.js를 사용한 웹 어플리케이션을 만들기 훨씬 쉬워진다. 정말 가볍고 빠르며, 무료이다. request와 response를 완전히 통제할 수 있다. 현재까지 Node.js의 가장 인기있는 프레임워크이다. 3. 기본 문법

참고영상 1. 도대체 Node.js가 뭐야? JavaScript Runtime (언어나 프레임워크가 아님) V8 JavaScript engine로 빌드됨 (구글 크롬과 같은 엔진) C++로 작성되었다. 서버에서 JavaScript를 사용할 수 있게 해준다. 한 줄로 표현하자면.. 원래 자바스크립트는 브라우저에서만 쓰였는 데, 브라우저 밖에서도 쓸 수 있게 해준 것이 Node.js라고 한다. 2. Node.js를 사용하는 이유 빠르고 효율적이다. Event Driven, non-blocking I/O model 인기가 많다. 프론트엔드와 백엔드에서 같은 언어를 사용할 수 있다. 3. Node.js를 사용하기 적합한 프로젝트의 형태 CPU를 직접적으로 다뤄야하는 것이 아닌 모든 프로젝트에 적합하다고 한다!

https://www.youtube.com/watch?v=JaMCxVWtW58&t=2683s 이 영상을 보고 localStorage를 처음 알게 되었다. 새로고침을 해도 내가 저장한 책의 정보가 사라지지 않는 데, localStorage에 저장되어있기 때문이다. 처음 봤을 때, 정말 신기했다.. 참고 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage Window.localStorage 읽기 전용 localStorage속성은 사용자 로컬의 Storage객체에 접근하게 해줍니다. localStorage는 sessionStorage와 비슷합니다. 유일한 차이점은 localStorage에 저장된 데이터는 만료 기간이 없지만, sessionSto..

참고 JSON이란 무엇인가? JSON (JavaScript Object Notation) JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 X... velog.io JSON: JavaScript Object Notation => 자바스크립트 객체 표기법 JSON의 특징 1. JSON 문서 형식은 자바스크립트 객체의 형식을 기반으로 만들어졌다. 2. 자바스크립트의 문법과 굉장히 유사하지만 텍스트 형식일 뿐이다. JSON 문법 { "employees": [ { "na..