[클립명] 1. GraphQL이란? 2. Express연동 3. 데이터 읽기 GraphQL 이번에는 Node 웹 프로그래밍 올인원 패키지 과정 중에서 GraphQL 강의 시청을 시작하였다. GraphQL은 페이스북에서 만든 쿼리용 언어이다. 쿼리용 언어라고 표현을 하다보니, SQL을 다뤄본 백엔드 개발자라면 'SELECT FROM USER WHERE ....' 같은 쿼리문을 떠올릴 것이다. 하지만, GraphQL은 일반 SQL과 구조가 많이 다르다. SQL은 데이터베이스에 저장된 데이터를 효율적으로 조회하는 것이 목적이고, GraphQL은 클라이언트에서 서버로부터 데이터를 효율적으로 가져오는 것이 주 목적이다. 따라서 GraphQL의 쿼리는 주로 클라이언트단에서 작성한다. //SQL 구조 SELECT n..

오늘은 패캠 프론트엔드 개발자 강의에서 설명해준 빈태그, 글자와 상자에 대해 알아보자. empty tag HTML에서 '빈(empty)태그'라는 개념이 있다. 요약하자면 시작태그는 있는데, 종료태그()가 없는 것을 말한다. 위 샘플코드를 보면 열리는 태그와 닫히는 태그가 존재하는 태그들이 있다. (ex) , , ... 그런데 이와는 달리 닫히는 태그가 없는 태그들도 보인다. (ex) ... 이렇게 닫힌 태그가 없는 것들을 빈태그라고 부른다. 이 빈태그를 작성하는 방법은 크게 2가지가 있다. 아래 이미지처럼 시작태그만 쓰거나 슬러쉬(/)를 붙여서 작성하는 방법이다. HTML1~4 버전까지는 뒤에 슬러쉬를 붙이는 문법이 없었는데, HTML4와 5사이에 생긴 XHTML에서는 보다 엄격한 문법을 사용하는 것을 ..

codepen.io 강의에서 소개해준 사이트이다. 간단한 html, css, javascript 코드들을 테스트해보고 싶을 때 좋은 사이트이다. 프론트엔드 개발자들에게는 엄청 유용한 사이트이다. 현재 개인적으로 사이드 프론트엔드 프로젝트를 진행해보려고 하는데, 이 사이트가 엄청 유용하게 쓰일 것 같다. 브라우저 스타일 초기화 이번 패캠 강의에서는 브라우저 스타일 초기화에 대해 배웠다. 각 웹브라우저마다 html을 해석하는 스타일이 다르다. 아래 캡처를 보면 body 태그 안에 단순히 div태그를 생성하고, width/height 속성을 부여해서 네모 박스를 생성한 html 파일을 크롬 브라우저로 열어서 개발자 도구로 확인해보면 body 태그에 내가 설정하지 않은 margin 속성이 8px로 적용돼 있는 ..

[클립명] 1. 크롤링개요 2. 배송위치 추적 3. puppeteer 1 ~ 2 Crawling 웹 크롤러(web crawler)는 조직적, 자동화된 방법으로 월드 와이드 웹을 탐색하는 컴퓨터 프로그램이다. 웹 크롤러가 하는 작업을 '웹 크롤링'(web crawling) 혹은 '스파이더링'(spidering)이라 부른다. 검색 엔진과 같은 여러 사이트에서는 데이터의 최신 상태 유지를 위해 웹 크롤링한다. 웹 크롤러는 대체로 방문한 사이트의 모든 페이지의 복사본을 생성하는 데 사용되며, 검색 엔진은 이렇게 생성된 페이지를 보다 빠른 검색을 위해 인덱싱한다. 또한 크롤러는 링크 체크나 HTML 코드 검증과 같은 웹 사이트의 자동 유지 관리 작업을 위해 사용되기도 하며, 자동 이메일 수집과 같은 웹 페이지의 ..

[클립명] 1. Promise 2. Promise Chaining, Promise All 3. async await 이번에는 자바스크립트의 promise에 대해서 알아보자. nodejs에서는 모든 이벤트들이 기본적으로 비동기 처리 방식으로 실행되기 때문에, promise 객체에 대해서는 조금이라도 알고 있어야 한다. Promise promise에 대해 간단히 알아보자. promise란 비동기 작업의 최종 완료 또는 실패를 나타내는 객체이다. 이게 무슨 말이냐면, 특정 코드가 실행되는 것이 끝날때까지 기다리지 않고, 다른 코드가 실행되는 비동기 처리 작업의 최종완료 or 실패한 시점을 컨트롤 할 수 있도록 도와주는 객체라고 생각하면 쉬울 것 같다. 화장실에서 소변을 볼 때, 우리는 아래와 같은 순서대로 소..

요새 이클립스에서 인텔리제이로 넘어가기 위해 이것저것 만져보고 있는 중인데, 자바 프로그래밍 할 때 많이 쓰이는 syso 단축키가 인텔리제이에서는 안 먹는다. 인텔리제이 system.println.out 단축키 "sout" + tab키 public static void main(String[] args) 생성 단축키는 "main" + tab키