컴포넌트(Component)란 ...?

Vue의 강력한 기능중 하나로, 중복되어 복잡한 코드를 해결할 수 있는 최선의 방안. 
컴포넌트는 쉽게 말해 '나누는 것' 이다. 단적인 예로 홈페이지의 네비게이션 바는 모든 페이지에서 필요하다. 각 페이지에서 중복이 되니 따로 분리해서 컴포넌트의 이름만 명시 하는 것으로 추가 시킬 수 있다.
(HTML로 웹을 제작할때 파일을 분리해서 제작하는 것과 비슷한 느낌을 받는다.)

분리된 컴포넌트는 또 다른 컴포넌트에 삽입되거나, main 파일에 사용될 것이다. 그 경우 삽입된 컴포넌트와 사용하는 파일 사이에는 부모-자식 관계가 성립된다.

 

 

Props는 컴포넌트에서 사용되는 기능이다

앞서 컴포넌트가 사용되면 부모-자식 관계가 성립된다고 말했는데, 부모의 데이터를 컴포넌트에서 사용하고 싶을때 사용하는 것이 props 이다. 데이터 뿐만 아니라 methods를 부모->자식으로 넘겨줘서 자식(컴포넌트)은 이를 이용할 수 있게 된다.

 

 

컴포넌트의 사용법

컴포넌트를 사용하기 위해선 크게 
1. 컴포넌트 파일(.vue)을 만든다
2. 컴포넌트를 import 한다
3. 컴포넌트를 components에 등록한다
4. 컴포넌트를 사용한다
네 가지 단계를 거쳐 사용한다. 복잡해 보이지만 문법적으로 어려운 것 하나없이 손쉽게 사용할 수 있다.
다음에서 예제를 살펴보자.

<template>
	<Nav/> <!-- 4. Nav 컴포넌트 사용 --> 
</template>

<script>
	import Nav from '/Nav.vue파일 경로' <!-- 2. Nav 컴포넌트 import --> 
    	export default{
			name: "App",
        	data() {
			return{
            			menu: ['Home', 'Shop', 'Main'],
                        	<!-- Nav에 들어가는 데이터 --> 
            		}
        	},
       		components: { 
        		Nav: Nav, <!-- 3. Nav 컴포넌트 등록 --> 
        	}
</script>

위와 같이 작성을 한다면, 기존에 사용된 menu 데이터는 Nav 컴포넌트에서 사용할 수 없게 된다.
왜냐하면 기존에는 하나의 파일 안에서 동작했지만, 컴포넌트로 분리된 순간 엄연히 다른 파일이기 때문에 App.vue에 등록한 데이터는 사용할 수 없다.
이를 해결하기 위해선 Nav.vue의 데이터를 똑같이 만들어 줘도 되지만, 중복된 데이터는 없앨 수 있으면 없애는 것이 개발자의 참된 모습이기 때문에 이 방법은 옳지 않다.
따라서 우리는 props를 활용해야 한다!

 

 

Props의 사용법

props는 컴포넌트를 사용할 때 같이 넘겨주면 되는데, 사용 방법은 다음과 같다.
1. 컴포넌트를 사용하는 곳에 명시해 props로 넘겨준다

※속성 바인딩과 같이 :(콜론) 사용

2. 자식 관계의 컴포넌트(예시에선 Nav.vue)파일에 props를 등록해 준다
3. 자식 관계의 컴포넌트 파일에서 데이터 바인딩 형식으로 사용한다

### App.vue ###
<template>
  <Nav :menu="menu" /> <!-- 1. Nav 컴포넌트에 props로 데이터를 넘겨줌 --> 
</template>

<script>
  import Nav from '/Nav.vue파일 경로' 
  export default{
    name: "App",
    data() {
        return{
            menu: ['Home', 'Shop', 'Main'],
            <!-- Nav에 들어가는 데이터 --> 
        }
    },
    components: { 
        Nav: Nav, 
    }
</script>
### Nav.vue ###
<template>
  <div v-for="section in menu" :key="section"> <!-- 3. props로 받은 데이터 사용 -->
    {{section}}
  </div>
</template>

<script>
  export default{
    name: "nav",
    data(){
      return{
      }
    },
    props: {
      menu: Array, <!-- 2. props로 받은 데이터 등록 -->
    }
  }
</script>

 

컴포넌트를 잘 사용한다면 원하는 기능을 알아보기 쉽고, 수정 삭제가 용이하게 제작할 수 있다.

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] Vue 문법 -2 (v-for, v-if)  (0) 2022.01.14
[Vue.js] Vue 문법 -1 (구성, 데이터바인딩)  (0) 2022.01.07
[Vue.js] Vue의 시작  (0) 2022.01.06

Vue만의 특별한 문법

Vue의 특별한 문법이 몇가지 존재하는데, 저번 포스팅에서 봤던 v-bind(데이터 바인딩)과 더불어
v-for, v-if와 같은 많이 쓰는 반복문과 조건문이 있습니다. 
해당 문법은 Vue를 사용하는데 편의성을 높여줍니다. 사용법은 아래에서 설명하겠습니다.

 


 

v-for 

html 태그 속성부분에서 사용하는 반복문 입니다.

사용법은 다음과 같습니다. 

<template>
    <div v-for="(item, index) in Array" :key="index(unique)" class="c1"> 
    	반복해서 보여줄 곳
    </div>
</template>

내부 값들은 각각
item : Array의 요소를 index 순서로 가져옴 ( for each 문과 비슷한 역할)
index : item 과는 별개로 for문이 한번 돌때마다 1씩 증가하는 Number 값 (초기는 0)
Array : 반복문을 몇번 실행할지 결정하는 요소. (Array 값이 오면 해당 Array의 크기 만큼 실행하고, 원하는 만큼 정수를 할당해 줘도 됩니다.) ex) 1, 2, 3
:key="index(unique)" -> v-for문을 사용하기 위해선 key 값을 지정해 줘야 합니다. key 값은 유니크 값으로 해주는 것이 좋으며, 나중에 추적하는데 도움이 될 수 있습니다. key값은 index를 할당해도 되고, item의 요소를 할당해도 됩니다. 

 


 

v-if

v-for와 마찬가지로 template 내에 html 태그의 속성 부분에서 사용됩니다.

사용법은 다음과 같습니다.

<template>
    <div v-if="step==1">
    	첫번째 div
    </div>
    
    <div v-if="step==2">
    	두번째 div
    </div>
    
</template>

위 예시 코드는 step의 값에 따라 div를 보여주는 코드입니다.
일반적인 if문과 같이 특정 조건이 만족하면 true = 태그를 활성화 시키고, 만족하지 않으면 false = 태그를 보여주지 않습니다. 

v-if문은 v-for와 비교했을때 특별한 요소가 없어서 사용하기 쉽습니다.

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] Vue 문법 -3 (Component, props)  (0) 2022.01.19
[Vue.js] Vue 문법 -1 (구성, 데이터바인딩)  (0) 2022.01.07
[Vue.js] Vue의 시작  (0) 2022.01.06

Vue의 기본적인 구성

<template>
  	HTML 작성하는 곳
</template>

<script>
export default {
	JavaScript 작성 및 데이터, 메소드 등 처리하는 곳
}
</script>

<style>
	CSS 작성하는 곳
</style>

Vue의 기본적인 틀은 위와 같이 template, script, style 크게 세 색션으로 나뉩니다.
Vue의 특징은 JavaScript를 사용하면서, Vue만의 독자적인 문법을 가진다는 것입니다.

 


Vue의 데이터 보관함

Vue는 데이터 바인딩 이라는 방법으로 HTML 태그 속성값과 데이터 값을 유동적으로 변경할 수 있는데,
이를 위해서는 변경되는 데이터를 어딘가에 저장해 둬야합니다. 그 데이터를 저장하는 곳을 데이터 보관함이라고 부릅니다.

데이터 보관함의 경우 script 태그 속에 다음과 같이 생성합니다.

<script>
	export default{
    	
        data() {
        	return{
        	//데이터가 보관되는 장소
                //Object 형식으로 저장
                데이터 명 : 데이터 값(Number, String, Array 등)
            
            }
       	}
    }
</script>

data() 내에 데이터를 Object 형식으로 key : value 값으로 정의합니다.
※ return 은 반드시 작성해 줘야함
※ data가 여러개일 경우 꼭 value 값 후에 ,(쉼표)를 찍어줘야함

 

데이터 바인딩

이제 데이터 보관함에 데이터를 저장했으니, HTML 속성이나 JavaScript를 작성할때 사용하면 됩니다.
사용하는 방법은 데이터 보관함의 key 값을 중괄호 두 개로 감싸면 됩니다.

=> {{ 데이터명(key) }} 이런식으로요.

일반적인 데이터 값을 출력할 경우 {{ 데이터명(key) }}  만 사용하면 되지만,
HTML 태그 내의 속성 값을 데이터 바인딩하고 싶다면 문법이 조금 다릅니다.

=> :속성 = "데이터 바인딩 속성" 

일반적인 데이터 바인딩과 다른 점은
속성 값 앞에 ':' 가 추가된 점과 '{{ }}' 기호를 사용하지 않는다는 점입니다.

<p :style = "스타일"> {{ 바인딩출력 }} </p>

...

data(){
	return{
    	스타일 : "color:blue",
        바인딩출력 : "변경되는 값",
    }
}

...

위와 같이 데이터 바인딩을 두 곳에서 진행된 것을 실행시켜 보면,

제대로 출력되는 것을 볼 수 있습니다. 

 

데이터 바인딩을 사용하지 않고, 하드코딩하는 것이 더 간단해 보이는데 굳이 왜 사용하는 것일까요?

여러가지 이유가 있겠지만, 예시와 다르게 큰 규모의 작업을 진행하면 같은 데이터가 여러 곳에 쓰이는 일이 빈번할 것입니다.
만약 그 동일한 값을 변경해야 하는데, 하드코딩으로 소스가 짜여졌다면?
사용된 모든 곳을 찾아 변경해야하는 번거로움이 발생합니다.
하지만 이럴때 데이터 바인딩을 사용했다면?
데이터 보관소의 value 값만 변경하는 것으로 원하는 작업을 일괄적으로 처리할 수 있게 됩니다.

이게 데이터 바인딩을 사용하는 가장 큰 이유가 아닐까 생각합니다. 

 

'Web > Vue.js' 카테고리의 다른 글

[Vue.js] Vue 문법 -3 (Component, props)  (0) 2022.01.19
[Vue.js] Vue 문법 -2 (v-for, v-if)  (0) 2022.01.14
[Vue.js] Vue의 시작  (0) 2022.01.06

시작하며

창업에 뜻이 있어 이것 저것 준비하면서 시간을 많이 그쪽에 투자했었습니다.  그러다 보니 개발공부를 하기엔 어려움이 있다고 판단되었습니다. 

그래서 과감히 공부는 잠시 접어두고 창업 기반을 다지는데 몰두했었습니다. 하지만 창업 아이템의 개발에 있어 웹의 개발도 필요하고, 그렇다고 인력을 충원하기에는 그럴 형편이 안되는 완전 초기 스타트업이기에 '웹 개발의 경험을 살려 공부해서 직접 만들어야겠다' 라는 생각에 다시 개발공부를 시작하게 되었습니다. 

이번에는 Vue를 공부해서 써먹으려고 다짐했습니다. 공부하면서 다시 블로그도 시작해 보려고 합니다. 공유하면서 실력이 늘어가는 것은 경험으로 많이 느꼈으니까요 :)  많은 분들이 찾아 주셨으면 합니다.

 

 

Vue.js 

Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크입니다. 쉽게 말해서 웹 프론트개발을 기존보다 쉽게 할 수 있게 도와주는 프레임워크입니다.

 

 

Vue를 선택하게 된 이유

웹을 개발하기 위해 React 와 Vue 둘중 선택해야 했습니다. React는 커뮤니티가 활성화 되어있다는 장점이 있었지만, Vue의 접근성이 상대적으로 낮다고 판단되었고, + 지인의 추천으로 시작하게 되었습니다.

 

 

Vue 개발 셋팅

저는 VScode를 쭉 사용해 왔기에 이번에도 VScode를 사용하여 개발을 하려고 합니다.

1. VScode ( Extensions : Color Highlight, HTML CSS Support, Vetur, Vue 3 Snippets 등)

2. Node.JS (최신버전)

3. npm(Node Packaged Manager)

기본적으로 위의 것을 준비했습니다. 셋팅 관련 포스팅은 후에 자세히 뜯어보려고 합니다.

 

 C++ 역시 다른 언어들 처럼 소수점 자릿수 표현이 가능하다.

 

사용법

#include<iostream>
using namespace std;

int main(void){
	...
	cout << fixed;
	cout << precision(10); // 소수점 자리 설정
    	...
}

 위와 같이 cout << fixed; 작성후 precision(소수점 자릿수)에 원하는 숫자를 넣으면 된다.

 

출력

 위 코드를 예시로 10/3 을 하면 다음과 같이 소수점 아래 10자리 까지 결과가 출력된다.

결과

 

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 12 repositories available. Follow their code on GitHub.

github.com

 

'Language > C++' 카테고리의 다른 글

[STL] find (vector 내부의 요소 위치 확인)  (0) 2021.02.08
[STL]sort, stable_sort  (0) 2021.01.10
[STL]map, unordered_map  (0) 2021.01.04

서론

 개발은 본인이 불편해서, 더 나은 환경을 만들기 위해서, 재미를 위해서 등등

 다양한 이유로 진행한다. 하지만 결국 결론은 돈을 벌기 위해서 하는 경우가 대부분일 것이다.

 무언가를 개발해서 팔 수도 있지만, 직접 운영하면서 광고를 달아 수익을 창출하는 경우도 많다.

 웹 사이트 개발뿐만 아니라 블로그 등에서도 이런 광고는 흔히 찾아볼 수 있다.

 광고를 하는 방법도 각양각색인데, 이 포스팅에선 매우 쉽고 누구나 할 수 있는 방법을 소개하려고 한다.

 

 

ADFIT - 애드핏 (카카오)

 먼저, 카카오 애드핏이다.

adfit.kakao.com/

 

https://adfit.kakao.com/

 

adfit.kakao.com

 

애드핏 로그인 화면

 본인이 사용하던 카카오톡 메일을 그대로 사용하면 된다.

 

 

광고관리 탭

 광고관리 탭으로 들어가서 +새 매체를 눌러서 새로운 광고를 만든다.

 

 

광고 만들기

 매체명은 본인이 관리하기 쉬운 이름으로 작성하면 된다.

 매체 고유값은 본인의 사이트 URL을 입력하면 된다. 

 그 후, 광고단위 등록을 눌러 다음 화면으로 넘어간다.

 

 

광고 선택

 광고 단위명 역시 본인이 알아보기 쉬운 이름으로 작성하면 되고,

 원하는 출력보양의 광고를 선택하고, 스크립트/SDK 발급을 진행한다.

 

 

스크립트 발행

 스크립트 발행을 완료했으면, 다음과 같이 스크립트 코드가 발행된다. 

 이제 저 코드를 그대로 복사해서 본인의 코드에 넣고 싶은 위치 아무곳이나 넣으면 끝이다.

 돌아가 보면 심사대기인 상태일 것이다. 영업일 기준으로 1~2일 후면, 카톡으로 승인알림이 올 것이다.

 승인 알림이 온 후, 본인의 사이트에 들어가 보면 정상적으로 광고가 출력되는 모습을 볼 수 있다.

 

 

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 12 repositories available. Follow their code on GitHub.

github.com

'개발 후' 카테고리의 다른 글

배포 - WEB  (0) 2021.02.28

서론

 개발에도 다양한 분야가 있다. (프론트, 백, 앱 등)

 어떤 분야든 사용자를 확보하기 위해선 배포(deploy)과정을 거쳐야 한다.

 개발의 종류에 따라 배포 방법도 역시 달라진다.

 이 포스팅은 그 배포의 방법에 대해서 계속해서 추가할 예정이다.

 

 이번에 MBTI 웹 페이지를 제작하면서, 백은 필요없기에 프론트 부분만 작성했다.

 배포에는 github를 사용할 수도 있고 다양한 방법이 있지만, 이번엔 netlify를 사용했다.

 

 www.netlify.com/

 

Netlify: Develop & deploy the best web experiences in record time

A powerful serverless platform with an intuitive git-based workflow. Automated deployments, shareable previews, and much more. Get started for free!

www.netlify.com

 

 

netlify.com

  

 방법은 간단하다 먼저 netlify 홈페이지에 접속해서 회원가입을 진행하고, 로그인을 한다.

 

회원 가입 완료후

 로그인을 완료했다면, 1번 sites를 눌러서 sites 탭으로 이동한다.

 그 후, github등과 같은 저장소 사이트를 활용해서 배포할 수도 있지만, 없다고 가정하고

 2번 위치에 자신이 만든 모든 파일이 든 폴더를 드래그&드롭 한다.

 

완료

 그럼 바로 배포가 완료돼서 화면이 전환된다. 빨간색으로 밑줄 친 부분이 본인의 사이트 주소이다.

 이제 저 주소를 공유하면 다른 사람들도 들어올 수 있다.

 

사이트 이름변경

 그런데 사이트 이름이 이상하다. 사람들이 알기 쉽게 변경하기 위해선 site settings 버튼을 눌러

 위와 같은 탭으로 이동한다. 그 후, change site name을 통해 이름을 변경하면 된다.

 

업데이트

 혹시 웹사이트를 추가, 보완한 사항이 있어 업데이트가 필요하다면,

 1번 Deploys 탭으로 이동해서 수정한 폴더를 마찬가지로 2번에 드래그&드롭을 통해 업데이트가 가능하다.

 그 외에도 다양한 기능이 있지만, 이 정도만 알아도 배포와 사용자 확보까지는 가능하다.

 

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 12 repositories available. Follow their code on GitHub.

github.com

'개발 후' 카테고리의 다른 글

광고 - WEB  (0) 2021.02.28

아직 해보시지 않은 분은 한 번 재미로 해보세요~!

icti.netlify.app/

 

ICTI - 아이스크림 성격테스트

여러분의 성격을 MBTI를 기반으로 분석해서 같은 유형을 가진 아이스크림을 찾아주는 테스트입니다.

icti.netlify.app

 

 

ICTI - 유형

말잘하고 센스넘치는
마당발
"빵또아"
(ENFJ)
항상 걱정이 많은
걱정부자
"쌍쌍바"
(INFJ)

뭐든 궁금해하는
호기심 끝판왕
"끌레도르"
(ENFP)

외로운건 싫지만
혼자있고 싶은
"메로나"
(INTJ)

겉보기엔 차갑지만
속은 부드러운
"캔디바"
(ENTJ)

스스로 특이하다고
생각하는
"민트초코"
(INTJ)
독특하고 새로운
생각의 원천
"생귤탱귤"
(ENTP)
완고한 완벽주의자
"죠스바"
(INTP)
눈치빠른
분위기 메이커
"투게더"
(ESFJ)
눈치를 많이
봐서 피곤한
"빵빠레"
(ISFJ)
혼자서도 잘 노는
마이웨이
"옥동자"
(ESFP)
세상에서 선택이
제일 어려운 선택장애
"돼지바"
(ISFP)
계획과 책임감의
아이콘
"와"
(ESTJ)
혼자하는게 편해!
솔플왕
"비비빅"
(ISTJ)
노는게 제일 좋은
"스크류바"
(ESTP)
얽매이지 않는
자유로운 영혼
"누가바"
(ISTP)

 

 

 

 

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ

 

holicAZ - Overview

holicAZ has 12 repositories available. Follow their code on GitHub.

github.com

'개발일지 > MBTI 테스트' 카테고리의 다른 글

ICTI - 아이스크림 성격 테스트  (3) 2021.02.26