개탕 IT FACTORY

DOM이란 무엇인가? MDN 문서에 따르면 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다 쉽게 말하면 일종의 웹페이지 문서라고 생각하면 편하다. 그러면 DOM이 왜중요한가? 브라우저 동작 방식을 이해할려면 DOM에 대한 이해가 있어야된다 아래는 Webkit 동작과정이나 브라우저엔진의 동작과정은 대부분 비슷하게 동작한다 DOM Tree 생성 브라우저가 HTML을 전달받으면, 브라우저 렌더 엔진이 이를 파싱 DOM 노드(Node)로 이루어진 트리생성 Render Tree 생성 외부 CSS파일 및 엘리먼트의 inline스타일을 파싱, 스타일 정보를 사용하여 DOM트리에 따라 새로운 트리 생성 Render Tree 이..

HTTP란 무엇인가? HTTP란 HyperText Transfer Protocol 의 줄임말로 웹 상에서 정보를 주고받는 프로토콜이다 쉽게 위의 그림처럼 클라이언트와 서버간의 Request(요청)과 Response(응답)을 도와주는 프로토콜이다. 요청의경우 클라이언트(브라우저)가 서버에서 보내는 것 응답의 경우 서버가 클라이언트(브라우저)에게 결과값을 보내는 것 보통 80번 포트를 사용한다. TCP/IP 모델에서 Application 레벨의 프로토콜로 작동한다 HTTP의경우 Stateless로 작동된다 쉽게 상태를 저장하지 않는 구조 위에서 설명했듯이 요청과 응답에 의해서만 연결하여 보낸다 그전의 상태에대해서는 알지 못하는 구조 상태값의 데이터가 필요한 경우 쿠키나 세션등을 사용하여 저장 Request와..

2019년 회고를 한지가 벌써 어그제 같은데 벌써 2020년이 마무리 되었다. 사실 2020년은 내외적으로 다사다난한 한해였다. 코로나로 인한 대외적인 이슈나 내적으로는 대학교 편입에 성공하여 재입학한 사례나 참 많은 일이 있었다. 그래서 이번에도 2020년을 회고하면서 21년에 나에게 다짐을 하는 의미로 작성해 볼까 한다. 2020년 회고 대학교 편입 성공 사실 가장 원했던 것 중에 하나였다 작년 회고를 작성하고 며칠뒤에 발표된 소식이였지만 가장 좋았던 순간일수 밖에 없다 가족 모두 자고 있을때 혼자 발표소식을 확인하고 바로 가족들에게 알려서 모두가 좋아했던 기억이 있다. 정말로 내 자신에 원했던 것이였지만 사실 코로나라는 시기에 겹쳐서 상당히 고생을 많이 했다. 필자는 신입생이 아니지만 이번에 입학한..

파이어 베이스란? 데이터베이스, 호스팅, 업로드 서버, 사용자 인증 등 다양한 백엔드를 제공해주는 서비스입니다 흔히 XaaS 서비스를 많이 말하는데 BaaS (Backend as a Sevice)입니다. 많이들 이런 서비스 종류로 대표적으로 아마존의 AWS, 마이크로소프트의 Azure, 구글의 Cloud Platform 이있는데 Cloud Platform은 Firebase와 통합된 것으로 알고 있습니다 무엇보다 AWS를 많이 이용하시는데 아마 1년 무료여서 이용하시는 분들이 많고 무엇보다 웹서비스 1위이기도 하고 안정적이기 때문이죠 하지만 파이어 베이스는 놀랍게도 기간 상관없이무료입니다. 단, 조건부 무료로써 일정 사용량 이상은 가격을 지불해야 됩니다. (뭐… AWS나 Azure도 마찬가지지만) 일단 장..

2019년 회고와 2020년 다짐 2020년 1월의 반 이상이 지난 시점에서 2019년 회고라니 정말 아이러니할 수도 있다 하지만 이 회고를 적지 않으면 나 자신을 잡을수 없다고 생각하여 회고를 하는 게 좋다고 생각하였다 아직 음력(?) 으로는 2019년이니 설 기준으로 2019년 회고를 해보자(?) 첫 회사 입사와 퇴사 2019년 7월 졸업 후 5개월 만에 직장을 얻었다 아는 친구는 이력서 몇 개 넣고 바로 입사하던데 나는 정말로 몇백 개는 넣은 것 같다… 면접도 50번넘게 본 것 같은데 취준 기간이 길어질수록 자신감은 하락했는데 합격소식은 정말 제일 기쁘고 좋았던 것 같다. 하지만 최근 2020년 1월을 마지막으로 첫 회사와 작별하였다 사실 여러 가지 이유가 있지만 모두 변명이라고 생각된다. 내가 회..

학교 개인 프로젝트중에 웹사이트에 구글맵 API를 연동해서 사용하는 경우가 생겼다... 사실 처음 사용하는것이고 몇몇 자료를 찾아보니 충분히 쉽고 누구나 할수 있게 구글에서도 한글문서화가 잘되어 있었다 하지만 난관에 부딪힌건 바로 다중 마커표시인데 사실 다중 마커 표시가 그리 어려운것은 아니다 var locations = [ ['명동', 37.563576, 126.983431], ['가로수길', 37.520300, 127.023008], ['광화문', 37.575268, 126.976896], ['남산', 37.550925, 126.990945], ['이태원', 37.540223, 126.994005] ]; 이렇게 배열로 나열해서 맵에 뿌려준뒤 마커로 표시하는 방식인데 사실 이 소스를 구하는데 엄청난 시..