먹고 기도하고 코딩하라

신에게는 잘 돌아가긴 하는데 스타일을 잘못 입혀서 지저분하고 텃밭에서 구르는 프로젝트가 있사옵니다. 텃밭에서 빼내와서 잘 씻기고 먹여야 깔끔해서 포트폴리오에 넣기 좋을 것이온데 걱정입니다... 나의 첫 웹 프로젝트인 이미지테스트는 그야말로 아비규환이다. 미안하다... 한 달밖에 안 했는데 그냥 다짜고짜 해서 세상으로 내놔서 그러나 정말 미안해해야 할 것은 지금의 나에게이다. 그 코드 고치는 거 누구? 바로 나! 프로젝트 끝나고 단 한 달밖에 지나지 않았는데도 그 사이에 배운 게 좀 있어 이렇게 짜면 안 됐는데.. 하고 보이는 게 너무 많다. 하지만 오히려 생각해보면 배우고 한 달만에 그렇게 빨리 시작을 해서 다행인 것 같기도 하다. 좋은 코딩 스타일은 물론 큰 도움이 되고 매력적이지만 신출내기에게는 사치..

정적 웹페이지 정적 웹페이지는 서버에 미리 저장된 파일이 그대로 전달되는 웹페이지이다. 정적 웹사이트(static site)는 HTML, CSS, JS로만 이뤄진 사이트이다. 정적 파일만 CDN을 통해 배포하면 별도로 서버를 운영할 필요가 없다. 모든 상황에서 모든 사용자에게 동일한 정보를 표시하며 글 자체가 html 단위의 파일로 이뤄진다. 사이트 관리자가 만들어둔 웹페이지만 볼 수 있으며 서버에 저장된 html 파일이 그대로 브라우저에 보이는 식이다. 정적 웹페이지는 빠르고 데이터베이스가 필요없으며 어떤 호스팅 서버에도 올릴 수 있다는 점에서 비용이 적지만, 서비스가 한정적이며 추가, 수정, 삭제 등의 관리가 힘들다는 단점이 있다. 동적 웹페이지 동적 웹페이지는 서버는 요청을 해석해 데이터를 스크립트..

SPA(Single Page Application)가 붐이다 이런 소리 많이 듣긴 했지만 SPA가 뭔지는 제대로 모르고 있었다. 시간이 남아서 여러 번 검색한 김에 나중에 까먹을 때 보려고 정리한다. SPA란? SPA란 쉽게 말해 1개의 페이지만 있는 애플리케이션이다. 하나의 페이지에서 내용만 바뀌는 것이다. 서버로부터 새 페이지(html)를 불러오지 않고 현재 페이지를 동적으로 다시 작성하는 웹앱 혹은 그런 웹앱을 작성하는 패러다임, 디자인 패턴이다. 최초로 한 번 페이지 전체를 로드한 후에는 데이터만 변경해서 쓸 수 있다. 서버로부터 정적 파일을 한 번이나 여러 번에 걸쳐 다운로드 받고 사용자와 상호작용 중 필요한 데이터만 서버에서 동적으로 받는다. SPA 결과물은 하나의 웹 문서가 아니라 응용 프로..

도메인 네임 시스템(Domain Name System, 이하 DNS)은 IP 주소와 URL을 매칭시켜서 갖고 있는 시스템이다. 호스트의 도메인 이름을 호스트의 네트워크 주소(=IP 주소)로 바꾸거나 그 반대로 변환하는 것이 그 역할이다. 사람이 기억하기에는 IP 숫자보다 문자가 더 편하므로 문자로 된 도메인 이름을 IP 주소로 바꿔준다. 참고로 네임 서버는 일반적으로 DNS를 제공하는 서버를 일컫는다. 엄밀히 말하면 DNS 자체가 서버를 나타내는 말은 아니다. 도메인 이름 시스템(DNS)을 제공하는 서버가 네임 서버이다. 컴퓨터끼리는 IP 주소로 통신한다. 그리고 브라우저는 IP 주소 없이는 어떤 웹페이지도 열 수 없다. 우리가 www.naver.com이라고 주소창에 입력해서 네이버 사이트를 볼 수 있는..

브라우저의 주 기능은 서버에 웹 리소스를 요청하고 받은 리소스를 브라우저 창에 잘 보여주는 것이다. 브라우저 구조 : UI(주소창, 뒤로가기/앞으로가기, 북마크 메뉴 등) 브라우저 엔진 렌더링 엔진 네트워크 ui 백엔드 자바스크립트 인터프리터 데이터 스토리지(localStorage, IndexedDB, WebSQL 등) 렌더링 엔진은 요청받은 콘텐츠를 브라우저 스크린에 보여주는 역할을 한다. 렌더링 엔진은 Trident(IE), Gecko(firefox), Webkit(safari), Blink(Chrome, Opera) 등이 있는데 보다시피 브라우저 회사마다 엔진이 조금씩 다르다. Blink의 경우 Webkit의 부분집합과도 같다. 브라우저는 서버에서 받은 html을 DOM트리로 파싱하고 트리 구조로 ..

HTTP란 무엇인가? HTTP란 HyperText Transfer Protocol의 약자로, 클라이언트/서버 컴퓨터 간 요청-응답(request-response) 통신을 위한 클라이언트-서버 통신 규약(프로토콜)이다. 여기서 클라이언트-서버 프로토콜이란 수신자(브라우저) 측에 의해 요청이 초기화되는 프로토콜을 말한다. HTTP를 통해 전송되는 자료는 http://로 시작되는 URL로 조회 가능하다. 다른 말로 하면 인터넷 주소의 http://는 HTTP 프로토콜을 이용해 정보를 교환한다는 뜻이기도 하다. HTTP 통신으로 서버에서 HTML 문서와 같은 리소스들을 가져올 수 있도록 한다. HTTP는 전송 계층인 TCP(Transmission Control Protocol)/IP(Internet Protoc..

원본 영상은 code.org의 "What is the internet?" 재생목록 링크 여기 (유튜브 재생목록) CC가 안 돼서 한국어 자막을 못 달아서 그냥 보고 정리를 해둠 1. 인터넷은 무엇인가? - 인터넷 : 표준이 있는 프로토콜들로 소통하는 컴퓨터들이 전세계적으로 연결된 망. 인터넷은 완전히 분산되어 있다. 2. 와이어, 케이블, 와이파이 - 인터넷 상의 정보는 어떤 컴퓨터에서 다른 컴퓨터로 비트 형태로 전해진다. 이 전달의 매개체는 와이어(집에서 봤을 법한 이더넷선 등)가 될 수도 있고, 빛의 형태로 전해지거나 섬유 케이블이 될 수도 있다. 또 정보는 무선(와이파이)으로 전해질 수도 있다. - 인터넷은 정보가 비트 단위로 여기저기로 전해진다. 매개체는 전기, 빛, 전파가 될 수 있다. - 전기..

To do list 할 일 목록 적기 dev-dain.github.io 개발일지에 넣기엔 다소 조촐~한 느낌(진짜 튜토리얼!)이라 FE 공작소에 씁니다. JS 걸음마를 갓 뗀 사람이 할 수 있다는 그것.. 투두리스트 저도 만들어 봤습니다. 사실 어떻게 해야될지 몰라서 뭉개고 있다가 여느 때처럼 노트에 적고 시작해 봤습니다. 첫 단계는 항상 계획! 일단 HTML DOM 트리를 그린 다음 자바스크립트가 어떤 일을 할지 쭉 적어봤습니다. (노트는 글씨가 너무 더러워서 공개할 수 없습니다) 그리고 이번에는 flex를 써보기로 했습니다. 테스트 페이지에서는 flex를 안 쓰고 그냥 했는데 안 쓰다보니 까먹을 것 같아서요 ^^ 저 자신에게 주는 과제: 시계 구현 flex로 레이아웃 잡기 바닐라 자바스크립트 쓰기 (..