'분류 전체보기' 카테고리의 글 목록

- 화면 구성

new THREE.Scene() : 장면

new THREE.PerspectiveCamera(fov, aspectRatio, near, far) : 카메라

fov(field of view) : 디스플레이어 보이는 장면의 범위, deg단위(45 = 45도)

aspect ratio : 보통 화면의 너비 나누기 높이값을 사용

new THREE.WebGLRenderer : 렌더러

setSize(w, h) : 렌더링시에 사이즈를 설정해줘야함

document.body.appendChild를 통해 설정을 끝낸 렌더러를 추가해준다. 일반적으로는 윈도우의 가로 세로값을 사용하지만 /2와 같이 사이즈를 줄여사 사용하기도 한다

* 해당도를 낮추려면 setSize메서드를 사용할때 세번째 인자로 false를 넣어주면 절반의 해상도로 렌더링 함

- 큐브 만들기

new THREE.BoxGeometry(w, h, depth, widthSegments, heightSegments, depthSegments) : 6면체의 큐브를 만들 수 있다

new THREE.MeshBasicMaterial() : {color: hex} 와 같은 형태로 파라미터를 전달해서 큐브의 색을 설정할 수 있다.

new THREE.Mesh() : 생성한 상자와 설정한 색상값을 파라미터로 사용해서 큐브를 생성합니다.

scens.add(cube) : 생성한 큐브를 화면구성에서 만든 scene에 추가합니다.

- 장면 렌더링

requestAnimationFrame( animate ) : 장면을 초당 60회 렌더합니다.

function animate() {

    requestAnimationFrame( animate )

    renderer.render( scene, camera )
}

animate()

위의 코드처럼 초당 60회 렌더를 할 수 있는 함수를 생성합니다.

생성한 큐브를 회전시키기 위해 rotate값을 animate 함수안에 넣어주면 회전이 가능합니다.cube.rotation.x += 0.01과 같은 형태로 회전이 가능합니다.

express로 프로젝트 세팅

express --view=pug [projectName]

실시간 렌더링을 위한 nodemon설치

npm i nodemon

package.json > scripts: { "dev": "nodemon app.js" }

사용할 db 설치

npm i mysql2 --save

orm사용을 위한 knex 설치

npm i knex --save

env파일 로딩을 위한 dotenv설치

npm i dotenv --save

app.js와 같은 depth에 .env생성

HOST=localhost
USER=root
PASSWORD=1234
DATABASE=apiTest

app.js와 같은 depth에 dbconfig.js생성

require('dotenv').config()
module.exports = (require('knex')({
  client: 'mysql',
  debug: true,
  connection: {
    host: process.env.HOST,
    user: process.env.USER,
    password: process.env.PASSWORD,
    database: process.env.DATABASE
  },
  log: {}
}))

env를 통해 테스트서버와 운영서버를 나누고싶다면

require('dotenv').config()
module.exports = (server) => (require('knex')({
  client: 'mysql',
  debug: true,
  connection: {
    host: `${process.env.HOST}_${server}`,
    user: `${process.env.USER}_${server}`,
    password: `${process.env.PASSWORD}_${server}`,
    database: `${process.env.DATABASE}_${server}`
  },
  log: {}
}))

위의 코드와 같이 dbconfig를 설정해 준 뒤 env에서 _local / _global 이런식으로 작성해주면 된다

사용은 아래와 같이 사용할 수 있다.

const db = require('./dbconfig')

db('local').select~~~~~

실행이 안될때

npm install

최근 모든 코딩 작업을 intellij로 진행을 하는데

퍼블리싱할 때만 vscode를 사용을 하다 보니 슬슬 단축키도 헷갈려오고 해서

퍼블리싱도 intellij에서 해야겠다는 생각이 들더라고요

그래서 찾아보니 플러그인을 받고 어쩌고.....

생각보다 귀찮기도 하고 해서 다른 방법은 없는지 찾아보던 중

터미널 명령어 하나로 라이브 서버를 작동시킬 수 있는 방법을 찾았습니다.

먼저 node.js가 설치가 되어있어야 합니다.

그리고 터미널을 열어서

sudo npm install -g live-server

명령어를 입력해주면 설치가 끝나게 되고 퍼블리싱을 할 directory로 가서

live-server만 입력을 해주면 index.html을 찾아서 실행하게 됩니다.

index.html이 없다면

터미널에 나와있는 ip주소:포트/test.html로 들어가 주시면 됩니다.

ctrl + s를 눌러 확인해 보면 바로바로 적용이 되는 모습을 확인할 수 있습니다.

열려있는 브라우저의 개발자 도구에 들어가면 body하단에

live-server가 생성한 script부분이 보이는데 vscode에서 동작하는 live-server와

같은 형태를 가지고 있는걸 보아 아마도 vscode 또한 npm의 live-server를 사용하는 듯합니다.

이 방법을 사용하시면 어떤 툴을 사용하더라도

라이브 서버를 통해 퍼블리싱의 생산성을 향상할 수 있고

새로운 툴의 단축키를 신경 쓰지 않아도 되는 점이 참 좋은 것 같습니다 :)

'IDE > IntelliJ' 카테고리의 다른 글

<Mac>IntelliJ 단축키 모음 (0)	2022.03.21
Mac Intellij GitHub 연동 (0)	2021.10.13

본 포스팅은 동영상 강의의 요약 설명본으로

자세한 내용은 유튜브를 참고해주시길 바랍니다.

(유튜브 업로드 예정)

<Editor>

수많은 에디터가 존재하고 어떤 걸 사용하셔도 상관은 없지만 MS사에서 나온 visual studio code를 사용하도록 하겠습니다. Mac과 window환경 어디에서든 동작을 하기때문에 환경에 제약이 없이 사용이 가능하다는 게 장점입니다.를 다운로드할 환경이 안된다면 codepen.io사이트에서도 간단하게 연습을 할 수 있습니다.

군대와 같이 인터넷 사용이 제한된다면 메모장을 이용해서도 연습을 해 볼 수 있는데 뒤쪽 강의에서 사용하는 방법을 같이 알려드리도록 할게요.

-vscode

먼저 installer를 다운받기 위해 구글에 vscode를 검색해줍니다.

홈페이지에 들어가면 os환경에 맞게 다운로드 버튼이 보이게 되는데 다운로드를 눌러주고 설치를 쭉 진행해 줍니다.

-codepen

간단하게 연습을 해볼 수 있는 사이트로 구글에 codepen을 검색후 페이지로 들어가 줍니다.

가입을 하지 않아도 start coding버튼을 눌러 바로 연습을 해볼 수 있습니다.

-chrome

크롬은 에디터는 아니지만 웹 개발의 표준 브라우저로 자리 잡았습니다.이번 강의는 크롬을 통해 진행되므로 크롬이 설치가 안 돼있다면 크롬을 설치해주면 됩니다.

구글에 크롬을 검색 후 다운로드하여주시면 돼요!

이제 프런트엔드의 필수 요소를 하나씩 배워볼까요?

먼저 HTML에 대해서 알아보도록 하겠습니다.

<HTML>

1. Html이 뭔가요?

HyperTextMarkupLanguage의 약자로서 HyperText를 표현하기 위한 마크 업 언어입니다. 생소한 단어들이 나왔는데 하나하나 보도록 할게요.

HyperText란 사용자가 특정 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트라고 하는데 예시를 들면 구글에 검색을 했을 때 제목을 누르면 새로운 창이 열리고 해당페이지로 이동을 하게 됩니다. 이처럼 다른문서로 접근할 수 있는 문자를 hypertext라고 해요.

마크업은 마크 혹은 태그로 둘러싸인 언어를 말합니다. 어떠한 내용을 표현해줄 수 있는 태그를 의미하는데 이 태그라는 건 <>이렇게 생긴 문자를 태그라고 부릅니다. 앞으로 자주 사용하게 될 거예요.

태그는 기본적으로 <여는 태그></닫는 태그>로 구성되어있고 여는 태그와 닫는 태그 사이에 내용이 들어가게 됩니다. 태그마다 기능을 조금씩 다르고 앞으로 천천히 배워보도록 할게요. 마크 업 언어에는 HTML, XML 등이등이 있으며 구조가 동일합니다.

2. 여러 browser와 Html의 역사

HTML은 1991년에 HTML1.0 버전에 나오게 됐습니다.그 뒤 여러 버전이 추가적으로 나왔고 현재는 2007년에 나온 html5 버전을 계속 이어서 사용 중이에요. 보게 되면 제일 상단에 <! DOCTYPE html>이렇게 적어주고 시작하는데 버전을 적어주지 않으면 최신 버전을 사용한다는 뜻이 됩니다. 사실 html5 버전 외에는 사용할 일이 없기 때문에 지루한 역사에 대해서는 요정도만 하고 넘어갈게요.

브라우저라는 말을 많이 들어보셨을까요? 흔히 인터넷 익스플로러(지금은 죽어가는 중이죠…), 크롬, 파이어폭스, 사파리 등 수없이 많은 브라우저가 존재를 합니다. 브라우저는 html문서를 html문서와 그림, 멀티미디어 파일 등 웹을 기반으로 한 인터넷의 콘텐츠 검색 및 열람을 위한 응용프로그램을 의미합니다.

Html로 코드를 작성하고 작성한 코드를 네이버처럼 내용을 확인할 수 있게 봐야 할 때 사용이 되는 거죠.

이제 간략한 html이 무엇인지와 역사를 훑어봤으니 본격적으로 코드를 작성해보도록 할게요

3. Html의 기본 구조

<! DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

지금 보는 것처럼 제일 상단에는 html의 버전을 명시하고 그 하단부터 html의 시작을 의미합니다.

<html></html> => 문서의 모든 부분을 감싸주는 태그입니다.이 html태그 안에 해당 문서에 대한 모든 정보를 입력을 해줘야 정상적으로 화면에 출력이 되게 됩니다.

<head></head> => 문서의 메타데이터를 입력하고 트위터 카드, 여러 가지 정보들이 들어가는 부분인데 실제로 사용자의 눈에는 보이지 않는 정보들을 설정할 수 있는 부분이에요.

잠깐 단어정리를 하고 넘어가도록 할게요

메타데이터 -> 다른 데이터를 설명해주는 데이터를 의미합니다. 동영상 혹은 소리 문서와 같이 실제로 존재하거나 사용할 수 없는 데이터지만 실제 데이터들과 연결을 해주는 다리 역할을 하는 데이터입니다.

트위터 카드 -> 크게 오픈 그래프와 트위터 카드를 많이 사용하는데 친구에게 카카오톡으로 링크 주소를 복사해서 보내볼까요? 해당 페이지의 사진과 페이지 이름, 페이지 설명이 들어가게 됩니다. 이런 부분을 설정하는 방법이 트위터 카드와 오픈 그래프가 있는 거예요

Javascript -> 프로그래밍 언어 중 하나로 주로 html내부의 요소들을 동적으로 처리하거나 서버에 데이터 요청을 할 때도 사용이 됩니다. 예전에는 브라우저에서만 작동을 할 수 있었지만 최근 nodejs를 통해 서버를 만들 수도 있는 각광받고 있는 언어 중 하나입니다.

Css -> html 코드를 작성해보고 결과를 보면 알게 되겠지만 css가 없으면 페이지를 이쁘게 만들어 줄 수가 없습니다. 페이지에 대한 디자인을 위해 css를 사용해서 페이지를 이쁘게 꾸밀 수 있어요.

<body></body> => 눈치채셨을까요? 이 안에 작성한 모든 내용이 사용자에 눈에 보이게 됩니다. Body태그 안에 사용자에게 보여줄 모든 요소를 입력을 할 수 있습니다. 이 안에 다양한 태그를 잘 조합해서 시맨틱 하게 코드를 작성해야 나중에 css와 javascript를 추가할 때도 문제가 생기지 않습니다.

시맨틱 하다?처음 들어보는 단어일 수도 있어요. 컴퓨터가 태그를 통해 태그 안에 콘텐츠의 뜻을 이해하고 논리적 추론까지 하는 웹을 시맨틱 웹이라고 합니다. 조금 어렵죠? 간단하게 구글에 검색을 해보도록 할게요

이때 A라는 사이트는 <게시물 이름> A </게시물 이름> 이렇게 html문서에 작성을 해놓은 반면 B라는 사이트는 <???> A </???>이렇게 작성을 해놓은 거예요.그러면 사용자가 구글에 A를 검색했을 때 A사이트가 먼저 나올 수밖에 없습니다. 이밖에도 다양한 분야에서도 적용이 됩니다. 그렇기 때문에 시맨틱 하게 코드를 작성하는 게 매우 중요해요.

4. Head

Head태그에는 메타데이터가 들어간다고 설명을 했었죠? Head태그 안에 들어가는 여러 가지 태그들을 알아볼게요

1. <title></title> : 특정 사이트를 들어갈 때 브라우저 상단 탭에 나오는 이름을 정해줄 수 있는 부분입니다. <title> 네이버 </title>라고네이버</title>라고 하게 되면 해당 페이지로 들어갔을 때 네이버라고 브라우저 상단 탭에 나오게 되죠

2. <script></script> : 자바스크립트 코드를 작성하거나 파일을 가져올 수 있는 부분입니다. 자바스크립트의 경우 페이지 내에서 작성을 하기도 하지만 코드의 가독성을 고려했을 때 파일로 빼놓고 script태그를 이용해서 가져오는 형식으로 많이 사용하게 됩니다. 속성값으로는 src가 있는데 자바스크립트 파일 위치를 입력해서 가져올 수 있습니다.

3. <style></style> : css 코드를 입력할 수 있는 부분입니다. 현재 문서 내에서 디자인을 하고 싶을 때 사용할 수 있습니다.

4. <link/> : 처음으로 닫힌 태그만 사용하는 부분이 나왔네요. 태그는 일반적으로 열리는 태그와 닫히는 태그로 구성이 되어있지만 태그 사이에 들어갈 내용이 없는 경우 닫히는 태그만 사용할 수 있습니다. 또한 마지막에 /를 붙여서 단일 태그라고 해 줄 수 있지만 제거해도 동작은 똑같습니다. Link태그의 경우 css파일을 가져와야 될 경우 사용할 수 있습니다. Script태그와 마찬가지로 코드의 가독성을 생각해서 파일로 빼두고 link태그를 통해 가져오는 것이 일반적입니다. Rel속성에는 stylesheet를 적어주고 href에 css 위치를 적어주면 파일을 가져올 수 있습니다.

5. <meta /> : 페이지 내에 다양한 메타데이터를 설정할 수 있습니다. 예를들어 charset, 문자 인코딩 방식 혹은 http-equiv, name, content속성을 이용한 다양한 정보 저장을 할 수 있습니다. 앞서 언급했던 트위터 카드와 오픈 그래프를 meta태그 안에서 사용을 할 수 있습니다.

트위터 카드는 트위터를 통해 공유될 때 나오는 페이지 이미지와 설명을 보여줄 수 있고 오픈그래프는 카카오, 페이스북과 같은 sns로 공유가 될 때 나오는 이미지와 설명을 보여줍니다. 일반적으로 두 개를 모두 설정해 두니 알아두면 좋을 거예요!

A. Name : Twitter:card / Content: summary, photo, player => 트위터카드의 종류를 설정할 수 있다. Summary : 웹페이지에 대한 요약정보를 보여주는 카드, 우측에 썸네일을 보여주고 그 옆에 페이지의 제목과 요약 정보를 보여준다.

Photo : 이미지를 전체적으로 보여줌

Player 오디오혹은 비디오를 보여줌

B. Name : twitter:url / content : https://dd.com => 트위터 카드를 사용하는 url

C. Name : twitter:title / content => 카드에 나타낼 제목

D. Name : twitter:description / content : hello => 카드에 나타낼 요약 설명

E. Name : twitter:image / content : img.url => 카드에 보여줄 이미지

F. Property : og:type / content : website, video.movie => 페이지의 유형

G. Property : og:site_name / content : dd => 사이트의 이름

H. Property : og:title / content : dd => 페이지의 이름

I. Property : og:description / content : dd : 페이지의 간단한 설명

J. Property : og:image / content : img url => 대표 이미지

K. Property : og:url / content : url => 페이지 주소

6. Head 태그 에서 자주 사용되는 태그들을 알아봤습니다. Link와 script는 매우 많이 사용됩니다. 트위터카드, 오픈그래프는 만든 사이트를 실제로 서비스할 때 적용시켜두면 좋을 거예요.이제 눈에 보이는 부분에 대해서 공부를 하러 가볼까요?

5. Body

1. 이제 눈에 안 보이는 부분이 아닌 눈에 보이는 부분, 컨텐츠를 채워 넣으러 가 볼게요

Body태그 안에는 사용자들 눈에 보이는 부분을 입력할 수 있다고 했습니다. 혹시 앞선 강의에서 말했던 시맨틱 웹에 대해서 생각이 나실까요? 시맨틱하게 코드를 작성하기 위해서 꼭 필요한 태그들을 배워보도록 할게요. 태그마다 의미가 다르고 기본적인 속성들 그리고 기능이 다른 경우도 있습니다. 예전에 사용하던 태그들은 강의에 담지 않았고 최근 많이 사용되는 코드 위주로 강의를 진행하겠습니다. 예전 코드는 MDN에 들어가면 확인해 보실 수 있지만 많이 사용되지 않는 태그를 알 필요는 없다고 생각해서 강의에는 담지 않았습니다.

2. 구분

A. 먼저 구역을 나누는 태그들을 알아보도록 할게요.

구역을 나눈다는 것은 같은 카테고리의 콘텐츠끼리 묶어준다는 뜻이에요.

예를 들어서 메뉴가 있다면 메뉴에 들어가는 콘텐츠들을 묶어서 이 안에는 메뉴가 있어라고 알려줄 수 있는 태그가 있다면 나중에 코드를 수정하기 매우 편리하겠죠? 그렇기 때문에 구역을 잘 나눠주는 것이 좋습니다.

B. <header></header> : 모든 콘텐츠 중 머리 부분을 의미해요. 이 태그 안에는 내비게이션 혹은 문서의 대제목이 들어갈 수 있겠죠?

C. <footer></footer> : 제일 하단에 들어가는 콘텐츠들을 의미하는데 네이버를 들어갔을 때 페이지 제일 하단에 사업자라던가 특정 메뉴 등이 있는 부분을 푸 터라고 합니다.

D. <main></main> : 이름만 봐도 어떤 느낌인지 알 수 있겠죠? Header와 footer를 제외한 모든 콘텐츠를 묶어둘 수 있는 공간을 의미해요 그래서 크게 header, main, footer의 삼단 구조로 코드를 작성하는 게 좋아요. 어떤 페이지는 메뉴가 왼쪽에 있던데요? 하고 의문이 들 수도 있어요. Html코드를 작성할 때는 디자인에 대한 부분은 전부 베제 하고 작성을 해야 됩니다.앞으로 나올 태그들 중 기본 스타일이 있는 태그가 매우 많아요 근데 그런 디자인 적인 요소들은 css를 통해서만 바꿔줘야 되고 html은 매우 시맨틱 하게,의미적으로 잘 맞게 작성을 잘해주는 것이 중요하답니다.

E. <section></section> / <article></article> : 두가지 태그 모두 main태그 안에서 구역을 나눌 때 사용할 수 있습니다.

F. <aside></aside> : 광고가 들어갈 부분에 이 태그를 사용해 줄 수 있어요

G. <nav></nav> : 메뉴에 들어가는 내용을 묶어줄 수 있습니다.

H. <address></address> : 주소에 대한 정보를 묶어줄 때 사용합니다.

I. <div></div> : 위의 태그들에 적합한 태그가 없을 때 사용할 수 있는 태그입니다. 특정 요소를 디자인을 위해 묶어야 할 경우, 자바스크립트를 통해 제어를 하기 위해 묶어야 되는 경우 등 여러 가지 상황에서 적합한 태그가 없을 때 이 div태그로 묶어줄 수 있습니다. 물론 이 태그로 모든 요소들을 묶어도 동작은 잘 되지만 시맨틱 웹에는 적용되지 않기 때문에 위의 태그를 사용하다 묶어줄 방법이 없을 때 div태그를 사용할 것을 추천드립니다.

3. 컨텐츠

A. <h1></h1> : 페이지의 대 제목을 의미합니다. H는 headline이라는 뜻을 가지고 있는데 1~6까지 있습니다. 숫자가 높아질수록 크기가 작아지며 갖는 의미의 중요도가 낮아집니다. 일반적으로 h1태그는 하나의 html에 한 개만 존재하는 게 시맨틱 하게 작성하는 방법이며 h2~h6까지는 중복해서 사용해도 문제는 없지만 같은 뎁스를 유지해주는 게 좋습니다.

여기서 말하는 뎁스라는 것은 코드를 작성할 때 태그 안에 태그가 들어가는 경우가 매우 많습니다. 그때 들어가는 깊이를 의미해요. 후반부에 해볼 클론 코딩에서 경험해 보도록 합시다.

B. <a></a> : html의 풀네임이 기억날까요? Hypertext 이 친구의 역할을 해주는 태그가 a태그입니다.의 약자로 이 태그로 감싸진 콘텐츠를 클릭하면 연결된 url로 이동하게 됩니다. 이렇게 이동을 시켜주기 위해서는 태그 안쪽에 속성을 작성해 줘야 합니다. <a href=”url”> 이렇게 href를 통해 url을 입력해주면 클릭했을 때 해당 url로 이동하게 됩니다. 추가적으로 target이라는 속성을 추가해 이동할 url이 현재 탭에서 이동될지 새로운 탭이 열릴지를 설정할 수 있습니다. 기본값은 _self로 작성을 하지 않아도 적용되는 값으로 현재 페이지에서 이동함을 의미하며 새로운 탭에서 열고 싶을 때는 target속성을 _blank로 입력해주면 됩니다.

C. <strong></strong> : strong 하면하면 강해 보이는 이미지가 떠오르지 않나요? 이태그를 사용하면 강조의 의미를 가지게 됩니다. 기본 스타일 값도 bold로 표시가 되게끔 나와있어요.

D. <pre></pre> : 혹시 강의를 들으면서 엔터 혹은 스페이스바를 많이 입력해본 적이 있을까요? Html은 기본적으로 모든 공백을 스페이스바 한 칸으로 인식합니다. 오류나 버그가 아니에요 그런데 그런 공백들을 내가 입력한 대로 출력하고 싶어!라는 생각이 들었다면 그때 pre태그를 사용해주면 됩니다. Pre태그 안에 모든 문자는 눈에 보이는 대로 화면에 출력되게 돼요.

E. <p><p> : Paragraph의 약자로 문단을 뜻합니다.

F. <hr/> : 자주는 아니지만 간혹 쓰이는 경우가 있어요. Horizontal Rule의 약어로 문단 분리를 위해 수평선을 넣어줄 때 사용됩니다.

G. <i></i> : 아이콘을 사용할 때 사용되는 태그입니다.

H. <code></code> : 이 태그도 자주 사용하지는 않지만 만약 테크 블로그를 만들고 싶을 때는 사용하게 될 것 같아서 소개해드립니다. 프로그래밍언어를 사용한 코드를 묶어줄 때 사용됩니다.

I. <ol></ol> / <ul></ul> : 각각 ordered list, unordered list를 의미하며 순서가 있는 리스트를 표현할 때는 ol, 순서가 없는 리스트를 표현할 때는 ul을 사용해주면 됩니다.

J. <li><li> : ol태그와 ul태그의 직계 자식으로는 li태그만 올 수 있습니다. 이 태그를 통해 리스트를 생성할 수 있어요.

K. <span></span> : 컨텐츠 안에 특정 요소를 묶어야하는 경우 사용할 수 있습니다. 컨텐츠 안에 특정 문자가 의미적으로 강조되는 건 아니지만 스타일적으로 바꿔주고 싶을 때 사용할 수 있습니다.

L. <img / > / <audio /> / <video /> : 세가지 태그 모두 멀티미디어를 다룰 때 사용되는 태그로서 태그 이름과 같은 뜻을 가지고 있어요. src속성을 통해 파일을 가져올 수 있습니다. 태그별로 조금씩 다른 속성들이 있어서 알아보도록 할게요.

i. Img : alt -> 이미지의 대체 텍스트 / 이미지가 어떠한 오류 때문에 화면에 정상적으로 출력되지 않을 때 어떤 이미지인지 알려줄 대체 텍스트입니다.

ii. Audio

1. Autoplay : 브라우저에서 오디오를 사용할 준비가 완료되면 자동으로 재생한다는 뜻

2. Controls : 오디오 컨트롤 바를 화면에 보여줌(재생 정지 등)

3. Loop : 끝까지 재생이 끝나면 다시 처음부터 재생

4. Muted : 음소거를 할 수 있다.

iii. Video

1. 앞서 말한 오디오 속성을 모두 사용할 수 있으며 추가적인 기능이 있다.

2. Poster : 동영상의 썸네일 이미지 url

M. <form></form> : 로그인 또는 회원가입을 할 때 필요한 정보들을 묶어주는 태그입니다.

Action : 태그 안에 입력된 정보들을 전송할 url을 담아줍니다.

Method: post와 get으로 구분되며 서버로 데이터를 전송하는 방식을 정할 수 있다.

Form태그의 경우 프런트보다 백엔드에서 중요하게 여기는 부분이기 때문에 여기서는 깊게 다루지 않겠다.

i. <input /> : 사용자로부터 입력을 받을 수 있는 태그

A. Type

i. Checkbox

ii. Color

iii. Email

iv. File

v. Hidden

vi. Image

vii. Number

viii. Password

ix. Radio

x. Range

xi. Reset

xii. Tel

xiii. Text

xiv. url

B. value

i. Autocomplete : on/off 값을 할당해서 자동완성 여부를 넣어줄 수 있다.

ii. Autofocus : 페이지가 로드될 때 자동으로 포커싱 됨

iii. Checked : type이 checkbox, radio일 때일때 체크 속성을 줄 수 있다

iv. Disabled : 비활성화

v. Multiple : 파일의 경우 여러 파일 업로드 시,이메일일 경우, (콤마)로 구분

vi. Placeholder : 입력할 값의 힌트

vii. Readonly : 읽기 전용

viii. Value : 초기값

ii. <label><label/> : input 태그와태그와 연결해서 이름을 달아줄 수 있는 태그

iii. <button></button> : 버튼

1. Button : 버튼

2. Submit : 전송

3. Reset : 초기화

iv. <textarea></textarea> : 게시판등 긴 글을 입력받을 때 사용되는 태그

v. <select></select> : 셀렉트박스를 만들 수 있다

vi. <option></option> : 셀렉트 박스 안에 선택지를 추가할 수 있다.

vii. 폼태그에는 위에 설명한 속성 외에도 다양한 속성이 있지만 백엔드 개발자들이 사용하는 속성이므로 본 강의에서는 넘어간다

viii. 간단한 페이지 마크업 - 1

ix. 간단한 페이지 마크업 – 2

4. 공통 속성

A. 모든 태그는 id와 class를 가질 수 있다.

i. Id = 태그가 가지는 고유한 식별 값으로 문서 내에 단 하나만 존재할 수 있다. 중복으로 선언을 해도 동작은 하지만 css, javascript 등의등의 동작이 원하는 대로 작동하지 않을 것이다.

ii. Class = 스타일, 기능 등을 위해 사용할 수 있는 식별자이다. 동일한 모양의 버튼이 많이 있다면 같은 클래스를 설정해서 해당 버튼에 대한 식별자를 만들어서 스타일 정의가 가능하며 id와 다르게 중복이 가능하다.

iii. Style = css스타일을 주는 방법은 head태그에서 style태그를 열거나 link태그를 통해 css파일을 가져오거나 태그에 style속성을 통해서 줄 수 있다. 자세한 내용은 css강의에서 이어서 하겠다

iv. Data-* = 사용자 정의 속성 값이다.클래스 혹은 다른 속성 값으로 정의하거나 저장하기 어려운 값을 저장할 수 있다. Data-로 시작하며 뒤에는 이름을 지어주면 된다. 예를들어 data-user-id=’kade’ 이런식으로 정의가 가능하며 css, javascript를 통해서 접근도 가능하다.

※ 본 포스팅은 mac환경을 기반으로 작성되었습니다.

[ pwd ]

print working directory

현재 위치한 폴더를 출력해 줍니다.

$ options

-L (logical) : 심볼릭 링크가 포함된 경우에 사용

-P (physical) : 모든 심볼릭 링크를 필할때 사용

심볼릭 링크에 대해서는 추후 포스팅 하도록 하겠습니다.

pwd
pwd -L
pwd -P

[ cd ]

change directory

경로를 이동할때 사용합니다.

GUI가 있다면 폴더를 클릭해서 이동을 할 수 있지만 커맨드라인 인터페이스를 가지고있는 Linux의 경우 cd명령어를 통해 directory를 이동할 수 있습니다.

절대 경로와 상대 경로모두 사용이 가능하며, 최상위 directory로 이동시에는 cd만 입력을 해주면 됩니다.

$options

- : 전에 작업중이던 directory로 이동이 가능하며 현재 directory와 이전 directory를 왕복해야한다면 -를 붙혀서 편하게 옮겨갈 수 있다.

cd ../
cd /Users/kade/Desktop

cd -

[ ls ]

list

현재 위치한 directory내부의 파일과 폴더목록을 확인할 수 있는 명령어 입니다.

파일의 권한과 같은 자세한 내용을 확인할때도 사용하는 명령어기 때문에 알아두면 유용하게 쓰일거에요!

$options

-a (all) : 숨겨진 file 혹은 directory까지 출력

-l (long) : 자세한 내용을 출력

권한, 포함된 파일 수, 소유자, 그룹, 파일 크기, 수정일자, 파일이름

-S (size) : 파일 크기 순으로 정렬해서 출력

-r (revers) : 알파벳의 역순으로 정렬 후 출력

-R (recursive) : 하위 directory까지 출력

-h (human) : 파일 크기를 k, m, g단위를 사용해서 출력

-lu (atime) : 접근 시간 출력

-lc (ctime) : 수정 시간 출력

ls
ls -a
ls -l
ls -lS
ls -r
ls -R
ls -lh
ls -lu
ls -lc

[ cat ]

concatenate

파일을 열어서 확인해 볼 수 있는 명령어 입니다.

txt같은 파일의 경우 정상적으로 잘 출력이 되지만 이미지등 멀티미디어 파일은 문자로 인코딩되서 알아볼 수 없는 상태로 나오게 됩니다.

cat /Users/kade/Desktop/test.txt
cat /Users/kade/Desktop/test.jpg

[ mkdir ]

make directory

directory를 생성할 수 있는 명령어 입니다.

mkdir hello
mkdir /Users/kade/Desktop/hello

[ rm ]

remove

파일을 삭제할 수 있는 명령어 입니다.

폴더를 삭제해야될 경우 -r옵션을 붙혀줘야 삭제가 가능합니다.

rm test.txt
rm -r hello

command + shift + t
- 테스트 케이스 생성
option + enter
- static import
command + e
- 해당 프로젝트 파일 히스토리
command + option + m
- 메소드 생성
command + f12
command + b 위치 추적
- 부모 클래스 혹은 인터페이스 추적
command + option + b
- 구현 클래스 추적
command + p
- 파라미터 추적
shift + F6
- 변수 한번에 변경
controll + o
- 상속 메소드 override
command + shift + []
- 열려있는 텝에서 이동
command + option + n
- 라인 합치기
command + shift + r
- 프로젝트 내에 일치하는 모든 단어 치환

'IDE > IntelliJ' 카테고리의 다른 글

vscode 버려! intellij에서 live-server쓰는방법 (0)	2022.04.30
Mac Intellij GitHub 연동 (0)	2021.10.13

* 본 포스팅은 맥을 기반으로 작성했습니다.

[ ffmpeg설치 ]

먼저 ffmpeg을 사용하기 위해 설치를 해야 됩니다.

사용 중인 쉘을 열고

brew install ffmpeg

위의 명령어만 입력해주면 완료됩니다.

[ 사용 ]

먼저 여러 개의 이미지의 길이를 정해주기 위해 init.txt 파일을 생성 후 아래와 같이 작성을 해줍니다.

주의할 점은 마지막 파일의 duration을 적어주고 duration을 적지 않은 상태로 한번 더 적어줘야 동작이 오류 없이 처리됩니다.

file '/path/1.jpg'
duration 3
file '/path/2.jpg'
duration 1
file '/path/2.jpg'

경로와 이미지별 시간에 대한 설정 파일 작성이 끝난 후 아래와 같이 코드를 작성해 줍니다.

ffmpeg -f concat -safe 0 -i [경로 및 시간설정 파일] -vsync vfr -t 6 -pix_fmt yuv420p [출력 파일]
ffmpeg -f concat -safe 0 -i init.txt -vsync vfr -t 6 -pix_fmt yuv420p output.mp4

-safe명령어를 삭제할 경우 init이라는 파일명이 안전하지 않다는 오류를 만나볼 수 있습니다.

이펙트 비디오 파일이 필요한 경우 오버레이 기능을 통해 덮어씌워 줍니다.

ffmpeg -i [원본 파일 명] -i [중첩할 파일 명] -filter_complex "overlay=0:0" -c:a copy [출력 파일 명]
ffmpeg -i output.mp4 -i effect.mov -filter_complex "overlay=0:0" -c:a copy final.mp4

"overlay=0:0"의 경우 두 영상의 사이즈가 같을 경우 xy좌표 0,0에 왼쪽 상단이 위치하게 됩니다.

마지막으로 소리를 추가해 줍니다.

ffmpeg -i [영상 파일 명] -i [음악 파일 명] -c:v copy -c:a aac -strict experimental -map 0:v:0 -map 1:a:0 -shortest [출력 파일 명]
ffmpeg -i noSound.mp4 -i music.mp3 -c:v copy -c:a aac -strict experimental -map 0:v:0 -map 1:a:0 -shortest output.mp4

최종 출력 결과물을 확인할 수 있습니다.

[ Brew ]

brew를 사용해서 설치를 진행함으로 Brew가 필요합니다!

brew를 이미 사용 중이라면 update 해주고 사용 중이지 않다면 다운로드해줍니다.

brew update

[ PHP설치 ]

맥에는 기본적으로 설치가 되어있지만 최신 버전 혹은 설치가 안되어있다면 설치를 위해 다음 명령어를 입력해 주세요

brew search php
brew install php

php를 brew에서 검색 후 설치를 진행해 줍니다.

[ composer ]

php의 의존성 관리 도구로 스프링에서 흔히 쓰는 maven 혹은 gradle과 같은 역할을 한다.

- 설치

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === '906a84df04cea2aa72f40b5f787e49f22d4c2f19492ac310e8cba5b96ac8b64115ac402c8cd292b8a03482574915d1a8') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

위의 명령어를 차례대로 입력하면 컴포저의 설치가 끝난다.

- 전역 설정

sudo mv composer.phar /usr/local/bin/composer

전역에서 사용할 수 있도록 sudo 명령어를 통해서 설정을 완료한다.

[ laravel ]

이제 라라 벨을 설치하자

- installer

composer global require "laravel/installer"

라라벨을 사용하기 위해 먼저 인스톨러를 설치해준다.

- path설정

vi ~/.zshrc

zsh를 사용하는 경우 vi를 사용해 path를 변경해준다.

위의 명령어 입력 후 해당 파일로 진입 후 i를 누르면 insert모드로 변경이 되며

확인하기 편한 공간에 밑의 path를 추가해주자.

export PATH="$PATH:$HOME/.composer/vendor/bin"

추가가 끝났다면 esc버튼을 누르고 :wq를 입력해 vi에디터를 빠져나온다.

source ~/.zshrc

방금 설정한 파일을 적용하기 위해 위의 명령어를 입력해 새 로고 침해 주자.

- valet설치

< macOS 미니멀리스트를 위한 개발 환경입니다. 라라 벨 발레은 시스템이 시작될 때 항상 백그라운드에서 Nginx를 실행하도록 Mac을 구성합니다. 그런 다음 발레은 DnsMasq를 사용하여. test 도메인의 모든 요청을 프락시 하여 로컬 컴퓨터에 설치된 사이트를 바라보게 만듭니다. >라고 공식 홈페이지에 나와있습니다.

간단하게 프로젝트 이름. test로 모든 프로젝트에 접근할 수 있게 만들어주는 기술입니다.

* tomcat이 이미 설치가 돼 있는 경우 php artisan serve 명령어를 통해 실행하는 방법도 있습니다.

다음 명령어를 통해 valet을 설치해 줍니다.

composer global require laravel/valet
valet install

* valet을 사용하는 경우 valet park 명령어를 실행해야 됩니다.

- 프로젝트 생성

laravel new board

다음 명령어를 통해 프로젝트 생성이 가능하며 php artisan serve혹은 valet을 통해 실행을 하면 laravel을 사용할 수 있게 됩니다.

Developer_kade

분류 전체보기

Three.js - 1

NodeJS + Express 기본 세팅

vscode 버려! intellij에서 live-server쓰는방법

'IDE > IntelliJ' 카테고리의 다른 글

<Kade의 Front 뿌시기> HTML

꼭 알아야할 리눅스 명령어 모음

<Mac>IntelliJ 단축키 모음

'IDE > IntelliJ' 카테고리의 다른 글

FFmpeg을 이용한 photo video 만들기

Mac에서 Laravel설치하기

+ Recent posts

티스토리툴바