Coding Apple 강의 3일차.

심심해서 만들어보는 Vue JS 강의 수강 1

Vue로 간단한 웹앱 만들어보기.

  1. 준비물

     > nodejs 설치

     > vs code 설치

     > vetur 설치 (vscode 확장 프로그램, vue 2 버전)

     > voloar 설치 (vscode 확장 프로그램, vue 3 버전)

     > HTML Css Surpport (vscode 확장 프로그램)

     > vue 3 snippets (vscode 확장 프로그램)

     > vue.js 설치

   2. App.vue (허위매물신고 버튼, img 추가, 제목 클릭 시 modal 열고 닫기 추가)

<template>
  <!-- 
    * 동적인 UI 만드는법
    1. UI의 현재 상테를 데이터로 저장해둠
    2. 데이터에 따라 UI가 어떻게 보일지 작성
    v-if: 해당 HTML 을 보여줄지말지 결정
   -->
  <div class="black-bg" v-if="모달창열렸니">
    <div class="white-bg">
      <h4>상세페이지임</h4>
      <p>상세페이지 내용임</p>
      <button @click="모달창열렸니 = false">닫기</button>
    </div>
  </div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="menu">
    <!-- Vue의 HTML 반복문 => <태그 v-for="변수명 in (몇회 혹은 Object)" :key="유니크값(보통 인덱스 사용)">-->
    <a v-for="(변수명, i) in 메뉴들" :key="i">{{ 변수명 }}</a>
    <!-- <a>Home</a>
    <a>Products</a>
    <a>About</a> -->
  </div>
  <div v-for="(제품명, i) in products" :key="i">
    <!-- 
      * vue에서 html 속성 데이터 바인딩 방법 => :속성="데이터이름"
      * img src의 경우 webpack 으로 배포됨에 따라 실제 서버에 배포되는 절대경로가 다르다. (/image 로 시작됨) 
        그렇기 때문에 단순히 workspace내 상대경로로 지정하는 것이 아닌 require()를 사용해야한다. 
      -->
    <img
      :src="require(`@/${이미지경로[i]}`)"
      :alt="`room${i}`"
      class="room-img"
    />
    <!-- 파일명으로 세팅하는 법 <img :src="require(`@/assets/${이미지파일명[i]}`)" :alt="`room${i}`" class="room-img"/> -->
    <h4 @click="모달창열렸니 = true" class="red" :style="스타일">
      {{ 제품명 }}
    </h4>
    <p>{{ prices[i] }}</p>
    <!-- onclick vue 문법 => v-on:click 혹은 @click -->
    <button @click="increase(i)">허위매물신고</button>
    <span>신고수 : {{ 신고수[i] }}</span>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    //데이터 보관함
    return {
      모달창열렸니: false,
      신고수: [0, 0, 0],
      //변수 선언 영역 (Object 자료형으로 저장해야함)
      메뉴들: ["Home", "Shop", "About"],
      스타일: "color: blue",
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      prices: ["50만원", "70만원", "80만원"],
      이미지경로: ["assets/room0.jpg", "assets/room1.jpg", "assets/room2.jpg"],
      이미지파일명: ["room0.jpg", "room1.jpg", "room2.jpg"],
    };
  },
  //Vue 에서 함수를 만들고 싶으면 methods:{} 안에 선언하면 됨
  methods: {
    increase(i) {
      this.신고수[i] += 1;
    },
  },
  components: {},
};
</script>

<style>
body {
  margin: 0;
}
div {
  box-sizing: border-box;
}
.black-bg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  padding: 20px;
}
.white-bg {
  width: 100%;
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.room-img {
  width: 100%;
  margin-top: 40px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

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

.menu a {
  color: white;
  padding: 10px;
}
</style>

Coding Apple 강의 2일차.

심심해서 만들어보는 Vue JS 강의 수강 1

Vue로 간단한 웹앱 만들어보기.

  1. 준비물

     > nodejs 설치

     > vs code 설치

     > vetur 설치 (vscode 확장 프로그램, vue 2 버전)

     > voloar 설치 (vscode 확장 프로그램, vue 3 버전)

     > HTML Css Surpport (vscode 확장 프로그램)

     > vue 3 snippets (vscode 확장 프로그램)

     > vue.js 설치

1. npm install -g @vue/cli
2. 원하는 위치에 workspace 생성
3. 생성된 workspace를 vscode로 열기
4. vue 프로젝트 생성
- vue create vuedongsan (뷰동산..)
- vue 버전 선택하라고 나올 시 vue 3 선택하기
5. terminal > npm run serve (서버 시작)

  2. App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div class="menu">
    <!-- Vue의 HTML 반복문 => <태그 v-for="변수명 in (몇회 혹은 Object)" :key="유니크값(보통 인덱스 사용)">-->
    <a v-for="(변수명, i) in 메뉴들" :key="i">{{ 변수명 }}</a>
    <!-- <a>Home</a>
    <a>Products</a>
    <a>About</a> -->
  </div>
  <div v-for="(제품명, i) in products" :key="i">
    <!-- vue에서 html 속성 데이터 바인딩 방법 => :속성="데이터이름"-->
    <h4 class="red" :style="스타일">{{ 제품명 }}</h4>
    <p>50 만원</p>
  </div>
 </template>

<script>
export default {
  name: "App",
  data() {
    //데이터 보관함
    return {
      //변수 선언 영역 (Object 자료형으로 저장해야함)
      메뉴들: ["Home", "Shop", "About"],
      스타일: "color: blue",
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      prices: ["50만원", "70만원", "80만원"],
    };
  },
  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;
}

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

.menu a {
  color: white;
  padding: 10px;
}
</style>

*다음 강의 :Vue 4강 : 이벤트 핸들러 시작

Coding Apple 강의 1일차.

심심해서 만들어보는 React JS 강의 수강 v2

 - 

React로 간단한 블로그 만들어보기.

  1. 준비물

     > nodejs (npm을 사용하기 위해 설치)

     > npm

     > create-react-app (기본 환경이 세팅된 react 프로젝트 생성하는 명령어)

1. npx create-react-app react_blog
2. npm start
3. 생성된 프로젝트 vscode로 열기
 - node_modules : react를 사용하기 위한 라이브러리 코드 보관함
 - public : static 파일 모아두는 폴더
 - src : 코드 짜는 폴더
 - index.js : welcome 세팅
 - package.json : 프로젝트 정보

2. App.js

/* eslint-disable */ //Lint 끄는 기능 (=warning 메시지 끄기)

import { useState } from "react";
import "./App.css";

function App() {
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학",
  ]); //Destructuring 문법(return을 다중으로 받음)
  let [발행일자, 발행일자변경] = useState([
    "2월 17일 발행",
    "5월 25일 발행",
    "9월 8일 발행",
  ]);
  let [따봉, 따봉변경] = useState(0);
  return (
    <div className="App">
      <div className="black-nav">
        <h4>React Blog</h4>
      </div>
      <button
        onClick={() => {
          //state가 array/object시 주의해서 사용해야함!!!(shallow copy를 해야함)
          //let copy = 글제목 선언 시 RAM에 '글제목'과 동일한 주소를 가지는 copy 변수를 생성하고 내부 데이터를 세팅함
          //let copy [...글제목] 선언 시 RAM에 새로운 주소를 가지는 copy 변수를 생성하고 내부 데이터를 세팅함
          //copy[0] 시 copy의 내부 데이터가 변경됨
          let copy = [...글제목]; //[...]으로 하지 않으면 state는 기존 object와 신규 object가 동일하다고 판단함(object가 가리키는 글제목의 주소값이 동일하므로!)
          copy[0] = "여자 코트 추천";
          글제목변경(copy);
        }}
      >
        글수정
      </button>
      <div className="list">
        <h4>
          {글제목[0]} <span onClick={() => 따봉변경(따봉 + 1)}>👍</span> {따봉}
        </h4>
        <p>{발행일자[0]}</p>
      </div>
      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>{발행일자[1]}</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>{발행일자[2]}</p>
      </div>
      <Modal />
    </div>
  );
}

//컴포넌트로 만들면 좋은 케이스
//1. 반복적인 html 축약할 때
//2. 큰 페이지들
//3. 자주 변경되는 것들

//컴포넌트의 단점 : state가져다 쓸 때 문제가 생김(state는 scope이 local임)
function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

export default App;

3. App.css

.App {
  text-align: center;
}

div {
  box-sizing: border-box;
}

.list {
  padding-left: 20px;
  text-align: left;
  border-bottom: 1px solid grey;
}

.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

.black-nav {
  display: flex;
  background: black;
  width: 100%;
  color: white;
  padding-left: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

이 이후는 유료강의...