React&Redux로 시작하는 웹프로그래밍_4주차
HTML/CSS/JS로 만드는 스타벅스 웹사이트
JS라이브러리
CDN Lodash.js
주소: https://cdnjs.com/libraries/lodash.js
속도 제어 라이브러리
CDN GSAP
주소: https://cdnjs.com/libraries/gsap
애니메이션 효과를 주는 라이브러리
gsap easing 검색
타이밍 function
https://greensock.com/docs/v2/Easing
ScrollToPlugin.min.js
화면 스크롤
CDN scrollMagic
주소: https://cdnjs.com/libraries/ScrollMagic
CDN Swiper JS
주소: https://swiperjs.com/
슬라이드 기능들 제공
사용방법:
1. Get started로 들어가서 Installation > Use Swiper from CDN을 이용, 링크를 복붙
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>2. Installation > Add Swiper HTML Layout에서 코드 확인해서 내 코드에 적용
2. DEMO -> Vertical -> 움직임 확인하기
3. API : 어떤 명령을 사용할 수 있는지에 대해 정리된 문서
*주의사항: 꼭 현재 시점에 API를 확인할 것. 변경된 사항이 있을 수 있음
(예. 클래스 네임)
라이브러리 **
오픈되어있는 수 많은 라이브러리를 내 프로젝트에 직접 설치해보고 어떻게 동작하는지 분석하면서 사용 해야한다. API 공식 문서에는 기본적인 사용 방법에 대한 설명만 나와있고, 다양한 사용 방법은 개발자가 알아서 개발자 도구 열어서 분석하여 사용해야한다.
예) Swiper JS 사용하여, 다양한 슬라이드 제작하기
슬라이드 수직(위->아래)
요소 가운데 배치하는 방법* css - calc()1. 컨테이너 만들고, 2. 안에 박스 만들고3. left값 50%주고4. margin-left: -박스의 절반 값 calc(요소사이즈 / -2)
오픈되어있는 수 많은 라이브러리를 내 프로젝트에 직접 설치해보고
어떻게 동작하는지 분석하면서 사용 해야한다.
API 공식 문서에는 기본적인 사용 방법에 대한 설명만 나와있고,
다양한 사용 방법은 개발자가 알아서 개발자 도구 열어서 분석하여 사용해야한다.
영상추가하기 (비율: 16:9)
* 기본적으로 padding은 요소의 크기가 늘어날 수 있는 속성을 갖는다. %로 값을 지정하며, 상대적인 크기로 크게 하는데, 이때 이 코드에서는 부모 요소의 가로 넓이를 기준으로 커진다.
이 속성을 이용해, 영상을 올릴때 사용한다.
* 16:9 는 padding-top에 56.25% 주기
*HTML요소 추가 없이 스타일 주려면, CSS안에서 가상선택자 ::before을 쓰기
*유투브 영상을 삽입하기
youtube iframe api 검색
주소: https://developers.google.com/youtube/iframe_api_reference
* 간단한 페럴렉스 코드.p-bg { background-image: url("../images/p-bg.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover;}
* scrollMagic cdn 사용https://cdnjs.com/libraries/ScrollMagic
*특수문자 (html entities)주소: https://html.spec.whatwg.org/multipage/named-characters.html문제점: <> 같은경우, html이 tag로 인식할수 있음.해결법: © , <, > 등등..
React&Redux로 시작하는 웹프로그래밍_4주차
.p-bg {
background-image: url("../images/p-bg.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
}
React&Redux로 시작하는 웹프로그래밍_4주차
JavaScript Essentials_Node.js
모듈(패키지) 버전 일치시키기
1. 필요한 package.json 파일을 활용할 프로젝트 폴더에 넣은후
2. 터미널에서 npm i로 설치한다.
2. 터미널에서 npm i로 설치한다.
Node.js 개요 및 설치
Node.js란? Chrome V8 JavaScript 엔진으로 만들어진 JavaScript 런타임 (프로그래밍 언어가 동작하는 환경)즉, Javascript가 작동할 수 있는 환경 2가지의 환경이 있다. 1) 컴퓨터환경 (Node.js), 2) 브라우저
웹페이지를 개발하기 위해 약간의 도움을 받기위해 Node.js를 사용해야 함.예) 브라우저에서 직접적으로 사용할수 없는 Sass, less, EJS, BABEL, Stylus, 같은 모듈들을 쓰기위해, 컴퓨터에서 css로 변환을 해야함. 이때, Node.js 환경에서 변환작업을 함
설치주소: https://nodejs.org/en/
1. 노드 버전 매니저(원할때 언제든지 버전을 바꿔주는 프로그램)를 먼저 설치 구글: nvm-windows 검색 (주소: https://github.com/coreybutler/nvm-windows)웹페이지 접속 > download now 누르고 > mvm-setup.zip 받기 > 압축 풀어 설치
2. MS Code에서 설치 확인하기설치 이전에 ms 코드를 켜두었다면 재 실행후,터미널 > nvm --version 쳐서 확인
3. Node.js 원하는 버전 설치하기터미널에서, nvm ls 치면, 현재 깔려 있는 정보가 나옴현재는 없으니 설치해야함
터미널에서 설치 명령어: nvm install 버전예: nvm install 12.14.1예: nvm install 12.21.0
설치 후 다시 nvm ls 치면 12.14.1 이나옴
원하는 버전 설정하기: nvm use 12.14.1
삭제 방법: nvm uninstall 버전예: nvm unintall 12.21.0
**VS CODE에서 작동하지 않을시, 관리자 권한 에러일 가능성이 큼 **
Windows PowerShell 을 관리자로 실행해서 위 명령어 입력하면 작동됨
Node.js란?
Chrome V8 JavaScript 엔진으로 만들어진 JavaScript 런타임 (프로그래밍 언어가 동작하는 환경)
즉, Javascript가 작동할 수 있는 환경
2가지의 환경이 있다. 1) 컴퓨터환경 (Node.js), 2) 브라우저
웹페이지를 개발하기 위해 약간의 도움을 받기위해 Node.js를 사용해야 함.
예) 브라우저에서 직접적으로 사용할수 없는 Sass, less, EJS, BABEL, Stylus, 같은 모듈들을 쓰기위해,
컴퓨터에서 css로 변환을 해야함. 이때, Node.js 환경에서 변환작업을 함
설치
주소: https://nodejs.org/en/
1. 노드 버전 매니저(원할때 언제든지 버전을 바꿔주는 프로그램)를 먼저 설치
구글: nvm-windows 검색 (주소: https://github.com/coreybutler/nvm-windows)
웹페이지 접속 > download now 누르고 > mvm-setup.zip 받기 > 압축 풀어 설치
2. MS Code에서 설치 확인하기
설치 이전에 ms 코드를 켜두었다면 재 실행후,
터미널 > nvm --version 쳐서 확인
3. Node.js 원하는 버전 설치하기
터미널에서, nvm ls 치면, 현재 깔려 있는 정보가 나옴
현재는 없으니 설치해야함
터미널에서 설치 명령어: nvm install 버전
예: nvm install 12.14.1
예: nvm install 12.21.0
설치 후 다시 nvm ls 치면 12.14.1 이나옴
원하는 버전 설정하기: nvm use 12.14.1
삭제 방법: nvm uninstall 버전
예: nvm unintall 12.21.0
**VS CODE에서 작동하지 않을시, 관리자 권한 에러일 가능성이 큼 **
Windows PowerShell 을 관리자로 실행해서 위 명령어 입력하면 작동됨
NVM 사용법
설치: nvm install 버전
삭제: nvm uninstall 버전
설치되있는 정보 확인: nvm ls
현재 버전 확인 nvm --version
원하는 버전 설정하기: nvm use 버전
여러가지 명령 확인: nvm --help
npm 개요
NPM (Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리한다.
사용법 - npm을 이용해 project 만들기1. ms code프로젝트 폴더열고2. 터미널에서 npm init -y 엔터 -> package.json이 생성됨{ "name": "testnode", "version": "1.0.0", "description": "", "main": "index.js", //node.js 클라우드에 업로드 될때만 필요한 정보이므로, 내 홈페이지 개발에서는 필요없어 삭제 가능함 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC"}
3. 터미널 npm install parcel-bundler -D 라는 패키지 설치 node_modules와 package-lock.json이 생성되어 있음. node_modules 안에 parcel-bundler가 들어가 있음
4. 내가 설치한 패키지 내역은 package.json 안에 나오는데,devDependencies 안에는 개발의존성 패키지가 명시되고, dependencies 안에는 일반 패키지가 명시된다.{ "name": "testnode", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { // 내가 설치한 패키지 내역이 나옴 "parcel-bundler": "^1.12.5" }}
삭제: nvm uninstall 버전
설치되있는 정보 확인: nvm ls
현재 버전 확인 nvm --version
원하는 버전 설정하기: nvm use 버전
여러가지 명령 확인: nvm --help
npm 개요
NPM (Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리한다.
사용법 - npm을 이용해 project 만들기
1. ms code프로젝트 폴더열고
2. 터미널에서 npm init -y 엔터 -> package.json이 생성됨
{
"name": "testnode",
"version": "1.0.0",
"description": "",
"main": "index.js", //node.js 클라우드에 업로드 될때만 필요한 정보이므로, 내 홈페이지 개발에서는 필요없어 삭제 가능함
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3. 터미널 npm install parcel-bundler -D 라는 패키지 설치
node_modules와 package-lock.json이 생성되어 있음.
node_modules 안에 parcel-bundler가 들어가 있음
4. 내가 설치한 패키지 내역은 package.json 안에 나오는데,
devDependencies 안에는 개발의존성 패키지가 명시되고,
dependencies 안에는 일반 패키지가 명시된다.
{
"name": "testnode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": { // 내가 설치한 패키지 내역이 나옴
"parcel-bundler": "^1.12.5"
}
}
5. npm install lodash 설치
{ "name": "testnode", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "parcel-bundler": "^1.12.5" }, "dependencies": { "lodash": "^4.17.21" //여기에 내역이 나옴 }}
{
"name": "testnode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.5"
},
"dependencies": {
"lodash": "^4.17.21" //여기에 내역이 나옴
}
}
6. node_modules폴더를 삭제해도, 위에 정보가 있어, 내 프로젝트에 npm i까지만 입력하면, 모두 한번에 설치가 됨
**설치 시, -D (--save-dev) 플래그를 붙이고 안붙이고의 차이는 구분을 위함$npm install -D xxx 개발용 의존성 패키지 설치 : 개발시에만 필요함, 웹브라우저에서는 직접 사용하지 않음$npm install XXX 일반 의존성 설치: 웹브라우저에서 동작 할 수 있음
** package.json 직접 관리package-lock.json은 자동으로 관리되는 파일임
개발 서버 실행과 빌드
6. node_modules폴더를 삭제해도, 위에 정보가 있어,
내 프로젝트에 npm i까지만 입력하면, 모두 한번에 설치가 됨
**
설치 시, -D (--save-dev) 플래그를 붙이고 안붙이고의 차이는 구분을 위함
$npm install -D xxx 개발용 의존성 패키지 설치
: 개발시에만 필요함, 웹브라우저에서는 직접 사용하지 않음
$npm install XXX 일반 의존성 설치
: 웹브라우저에서 동작 할 수 있음
**
package.json 직접 관리
package-lock.json은 자동으로 관리되는 파일임
개발 서버 실행과 빌드
1. 개발 서버 실행
parcel-bundler 을 설치 > 개발 의존성으로 npm install parcel-bundler -D
package.json에 scripts 아래 test: 부분 지우고 아래 코드 넣기"scripts": { "dev": "parcel index.html" },내 프로젝트 안에서 index.html을 기준으로 로컬에서 개발용 서버를 열고 브라우저에서 확인하겠다. 라고 명시해주기
> 터미널: npm run dev (dev스크립트를 실행하겠다.)브라우저에서 열수 있는 링크가 나오면 클릭해보면 실행됨을 확인할 수있다.
package.json에 scripts 아래 test: 부분 지우고 아래 코드 넣기
"scripts": {
"dev": "parcel index.html"
},
내 프로젝트 안에서 index.html을 기준으로 로컬에서 개발용 서버를 열고
브라우저에서 확인하겠다. 라고 명시해주기
> 터미널: npm run dev (dev스크립트를 실행하겠다.)
브라우저에서 열수 있는 링크가 나오면 클릭해보면 실행됨을 확인할 수있다.
2. 내 js파일에
import _ from 'lodash'
console.log('hello world');console.log(_.camelCase('hello world')) ;
import _ from 'lodash'
console.log('hello world');
console.log(_.camelCase('hello world')) ;
입력후 저장하면, 자동으로 브라우저에 반영됨을 확인 할 수 있다.
3. 빌드실제로 user가 보는 용도의 결과물 "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" },
Ctrl+c 현재 서버 종료 후>터미널: npm run build 실행
dist라는 폴더안에 파일이 생김을 확인 할 수 있다.dist로 들어가면 index.html파일이 압축버전으로 생긴다. 실제 브라우저에서 뜨는 것
3. 빌드
실제로 user가 보는 용도의 결과물
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},
Ctrl+c 현재 서버 종료 후
>터미널: npm run build 실행
dist라는 폴더안에 파일이 생김을 확인 할 수 있다.
dist로 들어가면 index.html파일이 압축버전으로 생긴다. 실제 브라우저에서 뜨는 것
유의적 버전(SemVer) semantic versioning 버전에 의미가 부여되어 있다.
버전 확인 방법:터미널: node --version터미널: npm --version
구조: Major.Minor.Patch예: 12.14.1
Major: 기존 버전과 호환되지 않는 새로운 버전Minor: 기존 버전과 호환되는 새로운 기능이 추가된 버전Patch: 기존 버전과 호환되는 버그 및 오타등이 수정된 버전
구조: ^Major.Minor.Patch예: ^12.14.1
^: Major 버전 안에서 가장 최신 버전으로 업데이트 가능12는 바뀌지 않고 14.1이 바뀔수 있다.
터미널: npm info lodashlatest: 최신 버전 확인 방법
버전 확인 방법:
터미널: node --version
터미널: npm --version
구조: Major.Minor.Patch
예: 12.14.1
Major: 기존 버전과 호환되지 않는 새로운 버전
Minor: 기존 버전과 호환되는 새로운 기능이 추가된 버전
Patch: 기존 버전과 호환되는 버그 및 오타등이 수정된 버전
구조: ^Major.Minor.Patch
예: ^12.14.1
^: Major 버전 안에서 가장 최신 버전으로 업데이트 가능
12는 바뀌지 않고 14.1이 바뀔수 있다.
터미널: npm info lodash
latest: 최신 버전 확인 방법
터미널: npm install lodash@4.17.20
기존에 설치된 버전을 다른 버전으로 minor과 patch만 덮어쓰인다.
터미널: npm update lodash최신 버전으로 업데이트하기
터미널: npm update lodash
최신 버전으로 업데이트하기
NPM 프로젝트의 버전 관리(.gitignore)
주의사항*따로 버전관리할 필요 없는 폴더들은 업로드 하지 않는다.-cache, dist, node_modules 폴더를 삭제.
루트에 .gitignore 파일 생성.cache/dist/node_modules/
터미널: git init
터미널: git status
터미널: git add .
터미널: git status
git commit -m '프로젝트 생성'버전 만들기
git log버전 제대로 만들어졌는지
q빠져나올때
웹 저장소에 github 만들기your repository newrepo: testcreat 주소 복사
vs codegit remote add origin 주소 붙여넣기연결
git push origin master푸쉬 완료
웹 저장소 제대로 들어갔는지 확인
삭제 방법setting > delete this repository 주소 복붙 컨펌 삭제
주의사항
*따로 버전관리할 필요 없는 폴더들은 업로드 하지 않는다.
-cache, dist, node_modules 폴더를 삭제.
루트에 .gitignore 파일 생성
.cache/
dist/
node_modules/
터미널: git init
터미널: git status
터미널: git add .
터미널: git status
git commit -m '프로젝트 생성'
버전 만들기
git log
버전 제대로 만들어졌는지
q
빠져나올때
웹 저장소에 github 만들기
your repository
new
repo: test
creat
주소 복사
vs code
git remote add origin 주소 붙여넣기
연결
git push origin master
푸쉬 완료
웹 저장소
제대로 들어갔는지 확인
삭제 방법
setting > delete this repository
주소 복붙 컨펌 삭제
