본문 바로가기

분류 전체보기

 (185)
npm이란? 1. npm(Node Packaged Manager)이란 무엇인가? npm이란 Node.js로 만들어진 pakage(module)을 관리해주는 매니저(툴)을 의미한다. 세상에는 많은 자바스크립트 프로그래머들이 있고, 그들이 유용한 자바스크립트 패키지들을 이미 만들어 두었고, 그런 코드들이 공개되어 있는 것이 바로 npm이다. npm은 세계 최대 규모의 패키지들을 보유하고 있다. 이러한 패키지들은 노드의 생태계를 더욱 견고하게 만들었다. npm에 업로드된 노드 모듈을 패키지라고 부른다. 모듈이 다른 모듈을 사용할 수 있는 것처럼, 패키지도 다른 패키지를 사용할 수 있다. 이러한 관계를 의존 관계라고 한다. npm은 자바스크립트 런타임 환경인 Node.js 의 기본 패키지 관리자 역할을 한다. 그래서 npm..
Node.js란? 1. Node.js란 무엇인가? Node.js는 Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임이다. **런타임이란? 프로그램이 구동되는 환경을 말한다. 자바스크립트 런타임의 종류로는 웹 브라우저(크롬, 파이어폭스, 익스플로러 등)프로그램과 Node.js 라는 프로그램이 있다. 이러한 프로그램들에서 자바스크립트가 구동되기 때문에 자바스크립트 런타임이라고 한다. 즉, Node.js를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 스크립트 언어가 아닌 프로그랜(환경)이며, 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. 자바스크립트 언어를 활용한다. 2. Node.js를 왜 쓰는가?..
[Hweb] CSS grid 기본 1. grid란? grid란 레이아웃을 설정하는 CSS속성입니다. grid 속성을 이용하면 웹페이지의 레이아웃을 한번에 잡을 수 있습니다. 물론 모든 웹디자인에 grid를 사용하기 좋은것은 아닙니다. 보통 규칙적인 비율로 디자인된? 웹사이트에 적용하면 편리합니다. 레이아웃을 잡고자하는 가장 큰 영역에 display: grid를 표기하여 사용하면됩니다. 또, grid안에 grid도 사용 가능합니다. Internet Explorer를 제외한 모든 브라우저에서 호환됩니다. 2. grid 용어 그리드를 사용하려면 주요 구문의 개념을 잘 이해해야 합니다. 아래에 그리드의 다양항 속성들을 정리해 놓았는데 주요 구문의 개념을 알아야 속성의 뜻도 이해하실 수 있을거에요. 1. 그리드 컨테이너(gird container..
[Hweb] Tab menu 기본 See the Pen Untitled by inyoung2200 (@inyoung2200) on CodePen. 1. HTML AWS AZURE GCP tab02 tab03 탭컨텐츠의 클래스 명을 통일해도 상관없다. 하지만 탭 컨텐츠마다 display가 다를수 있기 때문에 css를 더 자유롭게 쓰기 위해서 분리시켰다. 2. CSS .tab_cont1 { display: none; } .tab_cont2 { display: none; } .tab_cont3 { display: none; } .tab_cont1.on { display: grid; } .tab_cont2.on { display: block; } .tab_cont3.on { display: block; } 3. script $(function ..
[Hweb] GSAP ScrollTrigger 기본 사용법 1. 설치 위의 링크를 에 삽입하여 스크롤트리거를 설치한다. 2. 기본 문법 gsap.registerPlugin(ScrollTrigger); gsap.to("대상", { 구현하고싶은 이벤트, scrollTrigger: { trigger: "대상", start: "시작 지점", end: "끝나는 지점", scrub: true 또는 fales 또는 number, markers: true 또는 fales } }); 상단에 gsap.registerPlugin(ScrollTrigger); 를 선언하고 시작한다. gsap.registerPlugin(ScrollTrigger); gsap.to(".s", { y: -800,//y축으로 -800px 만큼 이동 duration: 1,//1초동안 ease: Sine.ease..
07. 다중 테이블 검색 다중 테이블 검색 조인, 서브쿼리, 집합 연산자를 사용하여 두 개 이상의 테이블로부터 데이터를 조회 하는 DML(Data Manipulation Language) 명령문을 작성할 수 있다. 다중 테이블 검색 방법 관계형 데이터베이스는 데이터의 중복을 최소화하기 위해 데이터를 분해하여 저장하고 통 합하여 사용한다. 데이터를 분해하는 방법으로 정규화 기법이 사용되며, 통합하는 기법으 로 다중 테이블에 대한 검색이 사용된다. 다중 테이블을 이용하는 보다 세부적인 기법은 다음과 같다. 조인(JOIN) 1. 조인 개념 조인은 결합을 의미하며, 관계형 데이터베이스에서의 조인은 교집합 결과를 가지는 결합 방법을 의미한다. 교집합이 되는 공통점은 다양한 관점에서 정의될 수 있다. 여기서 그 관 점을 정의하는 것이 바로..
06. 뷰 활용 뷰 활용 먼저 생성된 테이블들을 이용하여 새로운 테이블과 뷰를 생성하는 DDL(Data Definition Language) 명령문을 작성할 수 있다. 뷰(View) 개요 뷰는 논리 테이블로서 사용자에게(생성 관점 아닌 사용 관점에서) 테이블과 동일하다. 아 래 그림에서 `테이블A'와 `테이블B'는 물리 테이블을 의미하고, `뷰C'는 두 개의 테이블을 이용하여 생성한 뷰를 의미한다. 뷰는 `테이블A'와 같은 하나의 물리 테이블로부터 생성 가능하며, 다수의 테이블 또는 다 른 뷰를 이용해 만들 수 있다. 위 그림의 뷰와 같은 결과를 만들기 위해 다음 장에서 배 울 조인(Join) 기능을 활용할 수 있으나, 뷰가 만들어져 있다면 사용자는 조인 없이 하나의 테이블을 대상으로 하는 단순한 질의어를 사용할 수 있..
05. 인덱스 활용 인덱스 활용 테이블 조회 시간을 단축하기 위해 사용하는 인덱스의 개념을 이해하고, 인덱스를 생성하는 DDL(Data Definition Language) 명령문을 작성할 수 있다. 인덱스 개요 1. 인덱스 개념 인덱스는 데이터를 빠르게 찾을 수 있는 수단으로서, 테이블에 대한 조회 속도를 높여 주 는 자료구조를 일컫는다. 인덱스는 다음 그림과 같이 테이블의 특정 레코드 위치를 알려주는 용도로 사용하는데, 이러한 인덱스는 자동으로 생성되지 않는다. PK 컬럼은 PK를 생성할 때 자동으로 인덱스가 생성된다. 즉, PK 컬럼은 PK를 생성할 때 자동으로 PK 인덱스가 생성된다. 예를 들어 위의 그림과 같은 테이블에서 일련번호를 기본키(Primary Key)로 하는 경우, 일련번호에 대한 인덱스는 자동으로 생성..

티스토리툴바