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키

이번에는 프론트엔드 개발자가 꼭 알아야 할 정보를 의미하는 태그들에 대해 알아보자. title 태그는 웹브라우저의 tab부분에 출력할 값을 설정할 때 사용된다. 주로 회사명, 서비스명, 슬로건 등을 조합해서 사용한다. 주로 css 파일(문서)을 가져와서 사용할 때 쓰인다. 하지만 css 파일이 아닌 다른 파일을 가져올 경우도 있다. 웹브라우저는 파일의 확장자까지 체크하지 않기 때문에, 가져오려는 파일이 html 파일과 어떤 관계를 가지는지 명시해줘야 한다. 이 때 사용되는 html 속성이 'rel'이다. rel은 'Relationship'단어의 약어이며 가져올 외부문서가 현재의 HTML과 어떤 관계인지를 명시하는 HTML속성(Attribute)이다. rel에 명시된 값을 이용하여 웹브라우저는 해당 파일이..

[클립명] 1. Moment.js 2. DB수정 3. DB삭제 DB 수정 (update) sequelize에서의 DB update는 아래와 같이 처리한다. ( models.테이블명.update ) update 함수의 매개변수로 2개가 전달된다. - 첫번째 : update할 칼럼명과 값 - 두번째: where절 조건 exports.post_products_edit = (req, res) => { //update models.Products.update( //update할 칼럼 정보 { name:req.body.name, price:req.body.price, description:req.body.description }, //where절 { where : { id : req.params.id} }).the..