본문 바로가기
728x90
반응형

프로그래밍&IT

 (155)
[JQuery] 기본 다지기 JQuery 자바스크립트를 이용해 만든 라이브러리 언어. 자바스크립트로 만들어진 다양한 함수들의 집합. 자바스크립트가 가지고 있는 "각 브라우저에 따른 호환성 문제"를 해결 쉽고 편리한 애니메이션 효과 기능 구현 1. jquery 사이트에서 라이브러리 파일을 다운받아 웹 문서에 연동 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use AP..
[Javascript] events , 이벤트 객체 이벤트 (Events) 브라우저에서 방문객이 취하는 모든 동작 ex) 마우스 클릭, 키보드 타이핑 등 자바스크립트에 등록 가능한 이벤트들 종류 설명 마우스 이벤트 onmouseover 마우스가 지정한 요소에 올라갔을 때 발생 onmouseout 마우스가 지정한 요소를 벗어났을 때 onmousemove 마우스가 지정한 요소 영역에서 움직일 때 onclick 마우스가 지정한 요소를 클릭했을 때 ondbclick 마우스가 지정한 요소를 더블 클릭했을 때 키보드 이벤트 onkeypress 지정한 요소에서 키보드를 눌렸을 때 '입력되는 키를 눌렀을 때' 반응. ex) 한글 입력, 방향키 등 즉시 text에 입력되는 사항이 아닌 건 이벤트가 발생하지 않는다> onkeydown 지정한 요소에서 키보드를 눌렀을 때 (..
[Javascript] 문서 객체 모델 (DOM, Document Object Model) DOM , Document Object Model HTML 문서의 구조 의미. HTML tag는 각각의 기능 (Method)과 속성 (Properites)을 갖고 있다. 이런 태그들을 (트리) 구조적으로 갖고 있는 문서 객체라 보면 될듯. 배우는 목적 자바스크립트를 사용해 문서 객체를 선택하고 속성이나 스타일(CSS)을 적용하기 위해서 단, 브라우저별 (크롬, 오페라, 사파리 등) 차이가 존재하기에 호환성 문제가 있으므로, 브라우저별로 확인이 필요하다. html은 root가 되고, 그 아래는 node 라 부른다. node에는 아래와 같이 존재한다. html 태그를 연결하는 요소 노드 (Element node) 텍스트를 연결하는 Text node 태그에 속성을 연결해 주는 속성 노드 (Attribute n..
[Javascript] 브라우저 객체 모델 (BOM, Browser Object Model) 브라우저 객체 모델 (BOM, Browser Object Model) 브라우저에 대한 모든 내용을 담고 있는 객체. 뒤로가기, 북마크, 즐겨찾기, History, Url 등 브라우저가 가지고 있는 정보를 객체화시켜서 관리한다 계층적 구조 window (브라우저, 최상위 객체) document screen location history navigator body, div, img, a 등 사용자의 모니터 정보(속성)를 제공한다. 브라우저 주소창의 url에 대한 정보와 새로고침기능 등 제공 사용자가 방문한 사이트에 대한 이력(history) 브라우저의 정보 운영체제 정보 등 window 객체 메서드 종류 oper() , alert() , prompt() : 질의응답 창을 띄운다 , confirm() : 확인..
[파이썬] 웹 스크래핑.7 - Selenium 활용. "구글 무비" (동적페이지) 정보 수집 "구글 무비"에서 정보 수집 스크롤내리면 데이터를 가져와서 로딩하는 동적 페이지에서 정보를 수집하는 방식을 확인한다. Selenium 사용 전. requests 사용한 단순 수집 - 현황 & 문제점 파악 import requests from bs4 import BeautifulSoup url = "https://play.google.com/store/movies/top" # 받을 언어 headers = { "User-Agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36" , "Accept-Language": "ko-KR, ko" } res ..
Coding Apple, React 강좌 내용 정리.20 - PWA PWA (Progressive Web App) 웹사이트를 모바일 앱처럼 설치해서 사용할 수 있다. 설치 마케팅 비용이 적다. (앱 스토어 유도 안하고 바로 등록하게 만들 수 있다.) 아날로그 유저들 배려 html, css, js만으로 앱까지 푸시알림, 센서 등 웹브라우저 이용해서 이용 가능 PWA가 셋팅된 리액트 프로젝트를 생성해야 한다. 터미널에서 아래의 명령어를 기입한다. npx create-react-app 프로젝트명 --template cra-template-pwa ex) npx create-react-app my-app --template cra-template-pwa [기존 프로젝트를 PWA로 못만든다고..] 조건 manifest.json service-worker.js public / man..
[CSS 기본] 선택자 CSS 기본 , 기초 내용들 선택자 종류 종류 사용 예 속성 전체 선택자 * { 속성 : 값; } 전체 요소 선택할 때 사용 요소명 선택자 요소명 {속성: 값;} ex) h1 { color: red; } 태그 이름(요소명)으로 선택할 때 id #id명 {속성: 값;} id를 가진 요소 선택시 (단독 사용) class .class명 {속성: 값;} class 가진 요소 선택시 (반복 사용할 때) 가상 클래스 a:link {속성: 값} link 걸린 텍스트 a:visited {속성: 값} 링크 방문을 했던 텍스트만 a:hover {속성: 값} 링크걸린 텍스트에 마우스 올렸을 때 a:focus {속성: 값} 링크걸린 텍스트에 포커스 생성시 a:active {속성: 값} 링크걸린 텍스트에 마우스 눌렀을 때 수도..
[Javascript] 블록, 인라인, 범용 요소 / 문단 & 테이블 & form 태그 Javascript & CSS 기본 블록, 인라인, 범용 요소에 대해 구분 블록 요소 인라인 요소 범용 요소 특징 - 줄 바꿈 속성을 가지고 있다 - 기본 너비 속성이 100% - 블록 요소를 포함할 수 없지만, 예외인 요소도 존재 - 인라인 요소를 포함할 수 있다. - 줄 바꿈 속성이 없다 - 내용만큼 너비가 유지 - 너비와 높이의 속성을 사용할 수 없다 - 블록요소를 포함할 수 없으며, 인라인 요소는 포함될수 있다. - 블록 요소임에도 불구하고 모든 요소를 포함할 수 있다. 종류 , , , , , , , , , , , , , , , ,,,, ,, , , , (p 요소만 가능) 문단 태그 일부 종류 설명 종류 설명 ~ 제목 요소: 숫자가 적을 수록 큰 제목 이미지 단락 구분 링크 구분선 맵 선언 짧은 ..
Coding Apple, React 강좌 내용 정리.19 - lazy loading / React devtools, memo (재렌더링 방지) lazy loading / React devtools 1. 되도록이면 함수나 오브젝트는 별도로 선언해서 사용. 메모리문제를 어느정도 보완이 가능하다 ex) function Clicked() { ... } lazy , Suspense 이용 import {lazy, Suspense} from 'react' let Detail = lazy( ()=> { return import('./Detail.js') } ); //아니면 이렇게 쓰기도. lazy( ()=> import('./Detail.js') ) → Detail를 호출/사용할 때 import 시킨다. 대부분 Suspens라는 걸 같이 쓰는데 => React Dev Tools 크롬 확장 프로그램으로 설치가능. React 내부 구조 보기 데이터 조작 렌더링 ..
Coding Apple, React 강좌 내용 정리.18 - 3.Redux : dispatch 재확인 등 dispatch 등, 기본내용 추가 dispatch()로 수정요청할 때, 데이터를 보낼수도 있다. dispatch( {type: ~ , payload: 전송할 데이터} ) 보낸 자료는 액션 파라미터에 저장되어 있다. // dispatch 전송 : id를 전송한다 { props.dispatch( {id:p.id, type:'수량증가'} ) } }>+ // reducer 관련 function reducer(state=초기값, 액션) { if (액션.type ==='수량증가') { let copy = [...state]; copy[액션.id].quan++; return copy; } else if (액션.type === '수량감소') { let copy = [...state]; if (copy[액션.id].q..
반응형

티스토리툴바