기록장

https://youtu.be/T4N9wjx7_E4

깃에 올릴라했는데 안대서 친구가 같은 오류를 경험해봤다고 알려줬다.

https://komodor.com/learn/how-to-fix-fatal-refusing-to-merge-unrelated-histories-error/

git pull origin master --allow-unrelated-histories

이러고 push하니까 됐다!!!

상단 Nav 메뉴 만들기

App.vue

> template 부분에 Nav 추가

  <div class="menu">
    <a>Home</a>
    <a>Products</a>
    <a>About</a>
  </div>

>style 부분에 추가

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}

그리고

npm run serve

반복적인 요소 짧게 출력

> 반복문

<태그 v-for="작명 in 몇회" :key="작명">
(:key="작명"도 필요)->안 쓰면 에러남

-> Vue 문법을 쓰면 비슷한 HTML들 만들 때 코드 한 줄로 끝낼 수 있다!

-> 몇회 자리에 데이터도 집어넣기가 가능하다.

메뉴 생성에 필요한 정보들을 data() 란에 저장

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      메뉴들: ['Home', 'Shop', 'About'],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};

Vue 반복문 특)

> array/object 집어넣기 가능 => 자료 안의 데이터 갯수만큼 반복됨

> 작명한 변수는 데이터 안의 자료가 됨

>> 변수 작명은 2개까지 가능하다. v-for="(a,i) in 메뉴들" 

=> 괄호 안의 왼쪽 변수는 array 내의 데이터, 오른쪽 변수는 1씩 증가하는 정수

    <a v-for="작명 in 메뉴들" :key="작명">{{ 작명 }}</a>

1. 자료 안의 데이터 갯수만큼 반복됨

2. 작명한 변수는 데이터 안의 자료가 됨

:key="" 의 용도

> 반복문 쓸 때 꼭 써야 함

> 반복문 돌린 요소를 컴퓨터가 구분하기 위해 씀

ex) :key="a" => a는 반복문 돌면서 변하는 숫자/문자

숙제

> 상품목록도 반복문으로 축약하기

  <div v-for="(a,i) in products" :key="i">
    <h4>{{ a }}</h4>
    <p>50 만원</p>
  </div>

https://youtu.be/0BbF7UxKKvg

App.vue

Hello World를 다 지우고 시작합시다!

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

{{ 데이터바인딩 }}

> 자바스크립트 데이터를 html에 넣는 문법.

<script>
//document.getElementById().innerHTML = ??  기존의 자바스크립트 문법

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      price1: 60,
    };
  },
  components: {},
};
</script>

이렇게 data( ){ } 안에 데이터를 넣어준다.

그리고 위의 <template>에서 데이터를 가져오고 싶다면, {{ }} 로 가져온다.

{{ price1 }}

짜잔~~

이 문법을 왜, 언제 사용하는지?

{{데이터바인딩}하는 EU

> 1. HTML에 하드코딩해놓으면 나중에 변경이 어려움.

> 2. Vue의 실시간 자동 렌더링 기능을 이용할 수 있음. (Vue는 data를 변경하면 data와 관련된 HTML에도 실시간으로 반영됨.)

자주 변할 것 같은 데이터들은 데이터로 보관하고 HTML로 {{꽂아넣는다}}.

Q. 쇼핑몰 이름도 데이터바인딩할까?

->애초에 바뀔 일이 없으면 안해도 될 듯 (굳이?)

HTML 속성도 데이터바인딩 가능

:속성="데이터이름"

<h4 class="red" :style="스타일">XX원룸</h4>

숙제: 이 사진처럼 만들어오기

데이터 값에 아래 코드 추가함.

products: ["역삼동원룸", "천호동원룸", "마포구원룸"],

> 숙제 끝!

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h4>{{ products[0] }}</h4>
    <p>50 만원</p>
  </div>
  <div>
    <h4>{{ products[1] }}</h4>
    <p>가격은 아무거나</p>
  </div>
  <div>
    <h4>{{ products[2] }}</h4>
    <p>가격은 아무거나</p>
  </div>
</template>

<script>
//document.getElementById().innerHTML = ??  기존의 자바스크립트 문법

export default {
  name: "App",
  data() {
    //데이터 보관 통, 데이터는 object형으로 저장
    return {
      price1: 60,
      price2: 70,
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

https://youtu.be/NONWar0jGLM

Vue 강의를 찾아보던 중,,, 되게 쏙쏙 들어오게 설명해주시는 것 같은 분을 발견해서 듣기 시작했습니다.

코딩애플님의 Vue로 만드는 직방/인스타그램 웹앱 강의 따라하기... 시작해봅니다!

설치, 세팅

node js 설치. -> npm을 사용하기 위해서.(npm은 각종 웹개바 라이브러리 설치 도우미)

npm install -g @vue/cli

* vue/cli->vue프로젝트 빠르게 생성해주는 라이브러리

확장 기능 Vetur, HTML CSS Support, Vue 3 Snippets 설치

프로젝트 생성

vue create vuedongsan

* vue create 프로젝트명

App.vue가 메인 파일이라고 생각하면 된다.

<template>안에는 HTML,

<script> 안에는 JavaScript, 

<style> 안에는 CSS를 짠다.

미리보기

npm run serve

App.vue를 HTML로 컴파일하기 때문에 웹 사이트처럼 동작을 하고 있는 것이다!

index.html에 App.vue에 짠 코드들을 박아넣고 있는것임! 박아넣는 작업은 main.js가 하고 있음.

파일, 폴더 설명

node_modules: 프로젝트에 쓰는 라이브러리들

src: 소스코드 다 담는 곳

public: html 파일, 기타파일 보관

package.json: 라이브러리 버전, 프로젝트 설명 기록

문자열 비교

- equals()로 문자열 비교 : 동일한지만 비교
기준값.equals(비교할값) 으로 사용
* ==는 주소값 비교. equals()는 내용 자체를 비교

- compareTo()를 이용하여 문자열 비교 : 두 개의 값을 비교하여 int 값으로 반환하는 함수
숫자의 비교> 작다(-1) / 같다(0) / 크다(1) 의 결과값 리턴
문자열 비교> 같다(0) / 양수/음수값 반환

기준값.compareTo(비교할값) 으로 사용

참고 블로그: https://mine-it-record.tistory.com/m/133

처음에 이렇게 코드를 작성했는데... 틀렸다.
import java.util.*;
public class Main{
    public static void main(String args[]){
        Scanner sc = new Scanner(System.in);
        String str = sc.next();
        
        if(str.equals("joonas")){
            System.out.println(str+"??!");
        } else{
            System.out.println(str);
        }
    }
}


찾아보니 그냥 뒤에 ??!만 붙이면 되는 거였다... :(
그렇게 맞은 문제... 답
import java.util.*;
public class Main{
    public static void main(String args[]){
        Scanner sc = new Scanner(System.in);
        String str = sc.next();
        System.out.println(str+"??!");
    }
}