ALL

Three.js - webpack, 보일러플레이트 설치

webpack이란 프론트엔드 모듈 번들러 웹 애플리케이션을 구성하는 자원(HTML, CSS, JS, Image 등)을 각각의 모듈로 보고 이를 병합된 하나의 결과물을 만드는 도구이다 보다 쉽게 작업하기 위해 Three.js + Webpack가 포함된 보일러플레이트 설치 보일러플레이트란 Boilerplate code 기초 골격을 통으로 찍어내는 플레이트, 매번 반복적인 코드를 짤 필요없는 코드 디자인 오픈 소스와 비슷한 개념이다 아래 깃헙에서 오픈소스로 사용 가능하다 three.js Boilerplate를 오픈소스로 올려서 공유해주시는 분들께 감사를 표합니다 https://github.com/aakatev/three-js-webpack $ npm i $ npm run start localhost:9000 ..

Express - view engine

DB에서 아래 코드 처럼 http 요청을 받아서 html에 뿌려주게 되는데 템플릿의 상속을 이용하거나, 문법에 차이에 따라 사용되며 여러 방법이 있다 app.get('/', (req, res) => { res.send('hello, 안녕, 안녕하세요'); }); app.get('/test-site', (req, res) => { res.send('hello test-site, get 요청했어!'); }); app.use ( '/admin', admin ); app.listen(port, () => { console.log('Express listening on port', port); }); view engine의 Nunjucks를 사용 $ cd code_test $ npm install nunjucks..

Express - Routing

GET 요청으로 여러 파일을 추가해본다 각각의 컴포넌트에 맞게 폴더를 생성해주고 파일을 리팩토링한다 폴더 생성 - routes - 하위 파일 생성 - admin.js 해당 URL 링크는 admin 내에 있는 URL 이다 const express = require('express'); const router = express.Router(); router.get('/' , (req, res) => { res.send('admin 이후 url') }) module.exports = router; 만약 admin 내에 추가 링크를 지정하고 싶다면 아래 추가 router.get을 생성하고 /products 라는 링크를 넣어준다 //admin.js router.get('/products' , (req, res) ..

Express란?

Express란 node.js를 위한 간결한 웹프레임워크이다 여기서 node.js란 JavaScript를 브라우저 밖에서 사용하게 해주는 프로그램이라고 한다 node.js를 사용해서 서버를 만들어보자 먼저 해야할게 무엇이 있을까? AWS서버, NAS 개인서버, 메일서버 등등을 생각해보고 구상도도 그려보고 리눅스도 설치해야겠고 IP 주소도 설정하고 등등 해야할게 아주 많을것이다 Express는 node.js를 사용하여 이런 서버를 개발하고자 하는 개발자들을 위해 서버를 쉽게 구성하고 제작할 수 있게 해주는 프레임워크다 Express를 사용하지 않고 웹 서버를 띄운다고하면 사용자는 요청하고 서버에선 받는게 기본적인 웹 서버의 기준이다 사용자가 원하는 데이터를 볼 수 있게끔 정리해놓고 즉각 보여지게 하는 코드..

Git Github - conflict #7

push를 하고나서 레포지토리를 들어가면 이렇게 초록창이 하나 활성화 되어있다 해당 내용을 들어가보면 하나의 작업물에 두가지 브런치가 있으니 병합을 하라는 뜻같다 skyblue 브런치를 master에 병합하는 방법 이때 merge 라는걸 사용한다 master과 aqua를 지정하고 request를 누른다 합치려고 보니 conflict가 발생했다 즉, 충돌이 발생했다는 의미 각각의 브런치에 같은 위치,같은 코드상에 변경점이 있을 때 어떤걸 적용할껀지 물어보는 것이다 오른쪽에 Reslove conflicts를 클릭 background가 충돌되어있다 나는 skyblue를 선택하고 나머지 내용은 지워야한다 이부분은 충돌이 일어났으니 어쩔 수 없이 강제적으로 지워야한다 잘 해결되었다 이제 나머지 merge 클릭해서..

Git Github - git push origin master #6

이제 우리가 만든 것들을 깃허브에 업로드 해봅시다 현재 master branch와 skyblue branch가 있는 상태다 먼저 master부터 올려보고 확인 git push origin master origin은 원격저장소를 의미한다 깃허브 사이트에도 잘 올라와있는걸 확인할 수 있다 만약 skyblue도 올리고 싶다면 똑같이 명령어 입력을 하면 된다 git push origin master 나중에 작업을 하다보면 branch 복사본이 꽤 많아진다 이럴 떄 한번에 올릴 수 있는 방법도 있다 git push origin --all 만약 github과 vscode를 처음 연동하려고 한다면 github에서 인증을 요구할 수 있다 이때 github에서 api 토큰을 발급 받아야한다 프로필에 setting 클릭 ..

Git Github - git branch #5

branch란, 만약 예시로 팀원들과 대화를 하다가 background 색깔이 pink보단 skyblue가 낫지 않을까 라는 의견을 제시한다 그럴 때 다시 수정을 할 수 있지만 다시 또 pink로 되돌아 갈 확률이 높다고 생각이 든다 이럴 때 pink 버전을 가지고 있으면서 skyblue 버전도 같이 가지고간다 하나의 작업내역안에 두가지 버전을 복사해서 가지고 있을 수 있다 git checkout을 이용하면 과거 내역으로 돌아갈 수 있지만 수정은 불가능하다 하지만 그 시점에서 branch 명령어를 이용하여 복사를 하면된다 git checkout 명령어를 이용하여 과거 시점으로 돌아온 상태다 git branch skyblue 과거 시점에 background 색은 skyblue니까 쉽게 보기 위해 skybl..

Git Github - git checkout(중요) #4

checkout을 사용하여 중요한 커밋시점으로 돌아갈 수 있다 git log를 살펴보니 전에 변경했던 박스 색으로 변경하고 싶다면 "박스 변경" 부분에 commit 주소부분을 복사한다 현재 article 부분 background가 pink로 되어있다 "박스변경" 커밋 주소를 입력하고나면 pink가 수정 전인 skyblue 색으로 실시간 변경된다 즉시 반경되어 변경된 것을 확인가능하다 변경되었기 떄문에 가장 최근 커밋을 올린것은 삭제되어있다 최근 커밋 주소가 사라졌기 때문에 되돌릴 방법이 막막하다면 master 명령어를 사용할 수 있다 다시 최근 커밋 시점으로 돌린다 git checkout master