일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- html제거
- 뉴스수집
- vuejs입문
- javascript
- css rule
- MariaDB
- 개발회고
- vueJS
- 코딩컨밴션
- 웹스크래핑
- 구글CSS
- 프레임워크
- CSS애니메이션
- 자기개발
- 코딩가이드
- 투두리스트
- @keyframes
- to do list
- 자바스크립트
- 파이썬
- Vue.js
- 스타일가이드
- vue-cli
- 코딩규칙
- python
- css규칙
- 구글스타일가이드
- CSS로딩
- google style guide
- 로딩UI
- Today
- Total
목록웹프로그래머 (25)
코드공부방
SELECT 한 데이터들의 정렬을 하기 위해서는 ORDER BY절을 사용한다. SELECT PURCHASE_TYPE FROM TBL_CAR_LIST ORDER BY PURCHASE_TYPE 위 예시 데이터 결과를 보면 '가나다..'순으로 오름차순 정렬된 것을 확인 할 수 있다. 만약 역순으로 하고 싶다면 'DESC'를 붙여주면 된다. SELECT PURCHASE_TYPE FROM TBL_CAR_LIST ORDER BY PURCHASE_TYPE DESC 근데 어떠한 목적으로 내가 원하는대로 순서지정이 필요한 경우가 꼭 있다. (인기있는 키워드를 윗쪽으로 정렬해준다던지.. ) 그런 경우에는 CASE문을 활용할 수 있다. 만약 "선물 > 위탁 > 위탁매입"는 우선 정렬하고 나머지는 오름차순으로 정렬을 원한다면..
웹사이트 크롤링 작업을 하다보면 무조건 직면하게 되는 문제가 있다. 바로 문장에서 HTML태그를 제거해야하는 순간이 온다. 사실은 HTML태그를 제거하는 것은 아니고 HTML코드는 '내용'형태로 되어있기 때문에 정규식을 활용하여 text뭉치에서 '' 문자를 찾아 안에 있는 태그명과 함께 삭제를 하는 것이다. 아래 예제를 보면 자. 웹에서 수집된 HTML태그 제거가 필요한 텍스트는 아래와 같다. 채널배정이 "RB", "A"인 차량 대상 차량 기본 정보 / 배정 정보 1일 2회 업데이트 (오전 10시 / 오후 10시) 차량 조회 수 (매 시간) 리본 상담 수 정보 (매 시간) 엔카 상담 정보 1일 1회 업데이트 (오후 5시) Python에서 정규 표현식을 사용하기 위해서는 내장 모듈인 re를 사용해야 하므로..
MySQL, MariaDB -- 한달 전 SELECT DATE_ADD(NOW(), INTERVAL-1 MONTH) -- 일주일 전 SELECT DATE_ADD(NOW(), INTERVAL-1 WEEK) -- 하루 전 SELECT DATE_ADD(NOW(), INTERVAL-1 WEEK) MS-SQL -- 한달 전 SELECT DATEADD("MONTH", -1, GETDATE()) -- 일주일 전 SELECT DATEADD("WEEK", -1, GETDATE()) -- 하루 전 SELECT DATEADD("DAY", -1, GETDATE())
좌표값과 더불어 웹 UI개발을 할때 거의 항상 쓰이는 window scroll과 관련된 Window 메소드에 대해 알아보자. # window.scrollTo() 지정된 좌표값으로 웹브라우저의 스크롤을 이동시킨다. const $btn = document.querySelector('.btn'); $btn.addEventListener('click', () => { // window.scrollTo(x좌표, y좌표); window.scrollTo(0, 250); }); 스크롤 이동을 부드럽게 하려면 parameter를 객체 형태로 전달하면서 behavior:'smooth'를 추가로 전달한다. const $btn = document.querySelector('.btn'); $btn.addEventListener..
웹 UI개발을 하다보면 필수적으로 브라우저 내 Element나 마우스의 좌표가 필요한 경우가 생긴다. # Element.getBoundingClientRect() getBoundingClientRect 메소드는 Element Object에 포함되어 있다. 이 메소드를 사용하여 특정 Element의 width, height, 좌표(top, left) 값을 구할 수 있다. const $googleLogo = document.querySelector('#google-logo'); const logoRect = $googleCI.getBoundingClientRect(); let logoPositionLeft = logoRect.left; let logoPositionTop = logoRect.top; let ..
window객체는 browser에서 기본적으로 제공하는 것중 하나이다. 그 중 Size(width, height)와 관련된 API를 알아보려 한다. # window.screen : 모니터 사이즈 (해상도) let screenWidth = window.screen.width; let screenHeight = window.screen.height; 스크린(모니터)의 해상도를 나타내기 때문에 헤상도를 바꾸기 전까지 값에 변화가 없다. # window.outer : 브라우저 사이즈 (탭, URL입력창 영역 등 포함) let browserWidth = window.outerWidth; let browserHeight = window.outerHeight; 웹브라우저 창의 width와 height값을 가져올 수 ..
Array는 JavaScript에서 자료구조 중 하나이다. object가 관련이 있는 변수나 함수를 그룹핑 할때 사용한다면, Array는 관련이 있는 변수들을 모아두는데 주로 사용이 되며, 때로는 object들을 모아놓는데에도 사용할 수 있다. ([{}, {}, {}, {}, {}, {}]) # 배열 선언 const array1 = new Array(); const array2 = [1, 2]; # 배열 조회 // index는 0부터 시작 (0,1,2...) const carModels = ['쏘나타', 'K5', '펠리세이드']; // 배열 크기 조회 console.log(carModels.length); // 특정 index 값 조회 console.log(carModels[2]); # 배열 loop ..
object는 연관되어 있는 데이터(변수)나 실행문(함수)를 모아놓을 수 있는 데이터 타입이다. 아래 자동차와 관련된 데이터들을 정의해놓고 console 창에 출력을 해보자. const brand = '현대'; const model = '펠리세이드'; const cc = 3000; //출력 함수 정의 function infoPrint(brand, model, cc){ console.log(`${brand} ${model} >> ${cc}cc`); } //호출 infoPrint(brand, model, cc); 잘 출력이 된다. 하지만 차량이 계속 추가 될 경우 위와 같이 데이터를 관리하면 차량이 많아질 수록 점점 힘들어진다. const car01brand = '현대'; const car01model = ..
JavaScript에서의 class 키워드는 ES6버전에 와서야 만들어졌다. class는 template라고도 불리기도 하는데 그 이유는 class자체적으로는 어떠한 데이터도 갖지 않으며 틀만 정의해둔다. 그리고 이 만들어진 틀(class)에 데이터를 넣어 만드는 것을 object라고 한다. (붕어빵 만드는 틀을 class, 그 틀에 데이터(팥 또는 슈크림 등)을 넣어 만든 붕어빵을 object라고 이해하면 좀 쉬운 것 같다.) 1. class 선언 (틀 제작) 아래는 새로 입고된 중고차를 DB에 입력 후 console에 출력하는 class를 선언한 것이다. class usedCar { //constructor constructor(brand, model){ // fields this.brand = br..
어떤 프로그래밍 언어든 마찬가지이지만 함수는 매우 중요한 역할을 한다. 프로그램 내에서 하나의 함수는 또다른 하나의 프로그램이라고 봐도 된다. 함수에 대해 자세히 알아보자. 1. 함수 생성 function fnName(parameter01, parameter02){ ... //do something ... return result; } 2. 함수는 최소단위의 프로그램 하나의 함수에서는 하나의 일만 하도록 세분화하여 설계해준다. 3. 함수 네이밍 변수명은 명사로 짓는 것이 일반적인데, 함수명은 해당 함수가 어떤 일을 수행하는지 나타내기 위해 getName, deleteName, checkingMembers와 같이 무엇을 하는지? 또는 명령어 형태 또는 동사 형태로 작성해주는 것이 좋다. (함수 이름을 만드..