YELOPER

[VUE3] defineEmits vs defineExpose

예글 — Sat, 4 May 2024 22:55:39 +0900

회사에서 일하다... datepicker와 input radio 선택 후 모달 취소버튼을 누르면 초기화작업을 해야하는데 아무리 emit으로 보내도 반응이 없었는데... 다행히 천사같은 선임님이 알려주셔서 해결할 수 있었다...

defineExpose를 이때 알게 되었는데 둘의 차이를 확실히 해두면 좋을 것 같아서 작성한다

1️⃣ defineExpose

자식 컴포넌트 내에서 부모 컴포넌트에게 노출할 변수나 함수를 정의하는 데 사용.
자식 컴포넌트에서 expose를 사용하여 노출된 속성들을 정의.
부모 컴포넌트에서 자식 컴포넌트의 인스턴스에 접근하여 해당 노출된 속성을 사용할 수 있음
자식에서 부모로 데이터를 노출시킬 때 사용

// ChildComponent.vue
import { defineComponent, defineExpose } from 'vue';

export default defineComponent({
  setup() {
    const message = 'Hello from child';
    
    // Expose message to parent
    defineExpose({
      message,
    });

    return {};
  }
});

<!-- ParentComponent.vue -->
<template>
  <ChildComponent ref="childRef" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const childRef = ref(null);

    // Accessing the exposed message
    console.log(childRef.value.message);

    return { childRef };
  },
};
</script>

2️⃣ defineEmits

자식 컴포넌트 내에서 이벤트를 정의하여 부모 컴포넌트로 보낼 때 사용.
이벤트는 부모 컴포넌트에서 리스닝하여 자식 컴포넌트의 동작을 조작하거나 상태를 변경하는 데 사용.
자식에서 부모로 이벤트를 발생시킬 때 사용

[VUE] npm ERR! gyp verb check python checking for Python executable "python2" in the PATHnpm ERR! gyp verb `which` failed Error: not found: python2

예글 — Mon, 22 Apr 2024 22:43:18 +0900

회사에서 사이드 프로젝트로 하던 거를 집에서도 작업하려고 깃 클론을 하고 npm install을 했는데...

1시간이나 여기서 잡아먹혔다 ㅠㅠㅠ

해결했던 방법은

파이썬 설치가 아닌..

1- npm uninstall node-sass

2- npm i -D sass  ---> 에러나서

3- npm install -D sass-loader@^10 sass ---> 이렇게 했더니 성공

3- npm i

이것이었다...

이 분의 방법을 따라하였다.. 드디어 프로젝트 켜졌다.. 하...

[VUE] VUEX 알아보기

예글 — Sun, 21 Apr 2024 21:27:10 +0900

VUEX란?

무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리
React의 Flux 패턴에서 기인함
Vue.js 중고급 개발자로 성장하기 위한 필수 관문

Flux란?

MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Unidirectional data flow

action: 화면에서 발생하는 이벤트 또는 사용자의 입력
dispatcher: 데이터를 변경하는 방법, 메서드
model: 화면에 표시할 데이터
view: 사용자에게 비춰지는 화면

데이터의 흐름이 여러 갈래로 나뉘지 않고 단방향으로만 처리

Vuex가 필요한 이유

복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워짐

Vuex로 해결할 수 있는 문제

1. MVC 패턴에서 발생하는 구조적 오류

2. 컴포넌트 간 데이터 전달 명시

3. 여러 개의 컴포넌트에서 같은 데이터를 업데이트 할 때 동기화 문제

Vuex 컨셉

State: 컴포넌트 간에 공유하는 데이터 data()
View: 데이터를 표시하는 화면 template
Action: 사용자의 입력에 따라 데이터를 변경하는 methods

단방향 데이터 흐름 처리를 단순하게 도식화한 그림

Vuex 구조

컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태

Vuex 시작하기

1️⃣ src 폴더 밑에 store 폴더를 만들고 store.js 파일 생성

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({});

2️⃣ main.js에 불러오기

import Vue from "vue";
import App from "./App.vue";
import { store } from "./store/store";

new Vue({
  el: "#app",
  store,
  render: (h) => h(App),
});

3️⃣ Vuex 기술 요소

state: 여러 컴포넌트에 공유되는 데이터 data()
getters: 연산된 state 값에 접근하는 속성 computed()
mutations: state 값을 변경하는 이벤트 로직, 메서드 methods
actions: 비동기 처리 로직을 선언하는 메서드 async methods

1. state란?

여러 컴포넌트 간에 공유할 데이터 - 상태

// Vue
data : {
  message: 'Hello Vue.js!'
}

// Vuex
state : {
  message: 'Hello Vue.js!'
}

<!-- Vue -->
<p> {{ message }} </p>

<!-- Vuex -->
<p> {{ this.$store.state.message }} </p>

2. getters란?

state 값을 접근하는 속성이자 computed()처럼 미리 연산된 값을 접근하는 속성

// store.js

state:{
  num : 10
},
getters: {
  getNumber(state) {
    return state.num;
  },
  doubleNumber(state) {
    return state.num * 2;
  }
}

<p> {{ this.$store.getters.getNumber }} </p>
<p> {{ this.$store.getters.doubleNumber }} </p>

[VUE] 카테고리 필터링 기능 / vue transition 적용하기

예글 — Fri, 19 Apr 2024 16:46:46 +0900

vue Transition

1. Transition

엘리먼트나 컴포넌트가 돔에 들어갈 때와 나갈 때 애니메이션을 적용
내장된 컴포넌트. 그래서 등록할 필요없이 모든 컴포넌트의 템플릿에서 사용할 수 있음
v-if 를 통한 조건적인 렌더링
v-show 를 통한 조건적인 디스플레이
스페셜 엘리먼트인 <component>를 통해 동적인 컴포넌트 토글링

2. TransitionGroup

list와 같이 여러 개의 태그가 들어가는 경우를 고려한 Transition 컴포넌트
감싸는 태그가 없이 v-for 등을 이용해 여러 개 태그가 들어가야함. 대신 tag 라는 속성을 통해 감쌀(wrap) 태그를 지정할 수 있음
리스트의 태그들은 각자 나타나거나 사라지고 순서만 바뀌기 때문에, 서로 영향을 주지 않음. 따라서 transition mode(out-in, in-out)가 없음.
각 태그들은 반드시 고유한 key 속성 값을 가지고 있어야 함.
v-xxx와 같은 클래스는 그걸 감싸는 컨테이너(container)가 아닌 태그 각각에 들어감.
만약 컴포넌트의 template 속성을 사용한다면 <TransitionGroup>이 아닌 <transition-group>으로 사용해야 함.

1. HomeView.vue

<template>
  <div class="home" ref="parent">
   ...

    <!-- 카테고리 -->
    <Category :categoryType="categoryType" @setCategory="setCategory" />

    <!-- 상품 리스트 -->
    <MainList :categoryType="categoryType" />

  ...
  </div>
</template>

<script>
export default {
  components: {
    ...
  },
  data() {
    return {
      categoryType: "all",
    };
  },

  methods: {
    setCategory(value) {
      this.categoryType = value;
    },
  },
};
</script>

카테고리와 상품 리스트 컴포넌트에 데이터, 함수를 전달해야 하므로 그들의 상위 컴포넌트인 HomeView.vue에 변수, 함수 생성

2. Category.vue

<template>
  <!-- isScrollDown이 true일 때 categoryTop 클래스 적용 -->
  <nav class="categoryWrap" :class="{ categoryTop: isScrollDown }">
    <ul>
      <li @click="$emit('setCategory', 'all')">전체</li>
      <li @click="$emit('setCategory', 'outwear')">아우터</li>
      <li @click="$emit('setCategory', 'top')">상의</li>
      <li @click="$emit('setCategory', 'footwear')">신발</li>
      <li @click="$emit('setCategory', 'bags')">가방</li>
      <li @click="$emit('setCategory', 'stuff')">잡화</li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: "Category",
  props: ["categoryType"],
  data() {
    return {
      nowScrollY: 0,
      isScrollDown: false,
      navTop: 0,
    };
  },

  methods: {
   ...
  },

  ...
};
</script>

<style lang="scss" scoped>
  ...
</style>

해당 li 클릭하면 $emit('setCategory')에 그 카테고리에 맞는 value 부여

3. MainList.vue

<template>
  <div>
    <h2>상품 목록</h2>
    <List :data="product" :categoryType="categoryType" />
  </div>
</template>

<script>
export default {
  components: { List },
  props: ["categoryType"],
  data() {
    return {
      product,
    };
  },
};
</script>

<style lang="scss" scoped>
  ...
</style>

4. List.vue

<template>
  <transition-group tag="ul" class="listWrap">
    <template v-for="item in data">
      <div
        v-if="categoryType === 'all' || item.category === categoryType"
        :key="item.id"
      >
        <MainItem :item="item" />
      </div>
    </template>
  </transition-group>
</template>

<script>
import MainItem from "@/components/Molecules/MainItem.vue";
export default {
  props: ["data", "categoryType"],
  components: { MainItem },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
.listWrap {
  padding: 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* 트랜지션 전용 스타일 */
.v-enter-active,
.v-leave-active,
.v-move {
  transition: opacity 1s, transform 1s;
}
.v-leave-active {
  position: absolute;
}
.v-enter {
  opacity: 0;
  transform: translateY(-20px);
}
.v-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

...
</style>

(1) 카테고리에 맞는 데이터만 보여줌

(2) 여러 개의 태그가 들어가는 경우이므로 transition-group 적용

(3) <template> cannot be keyed. place the key on real elements instead. 라는 에러가 떠러 template 하위 태그인 div에 :key="item.id" 적음

[VUE] 2. Vue 핵심문법 알아보기 / typescript 모듈 또는 해당 형식 선언을 찾을 수 없습니다. 오류 해결

예글 — Tue, 9 Apr 2024 16:38:49 +0900

1️⃣ UI를 컨트롤하는 디렉티브 - UserInterface

1. 선언적 렌더링

Vue.js 데이터바인딩의 가장 기본
데이터 바인딩의 가장 기본적인 형태: 이중 중괄호 {{ }} 문법을 사용한 텍스트 보간법
이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석. 실제 HTML을 출력하려면 v-html 디렉티브를 사용

2. Class와 Style 바인딩

1) HTML Class 바인딩

HTML 클래스 바인딩을 하기 위해선 v-bind: class (축약형 - :class)를 사용
객체로 바인딩 되며 클래스를 동적으로 토글하기 위해 객체를 :class에 전달할 수 있음

<div :class="{ active: isActive }"></div>

isActive: state 영역 즉, data 영역에 선언한 임의의 변수이며 이 변수는 true와 flase 값을 가짐

2) HTML Style 바인딩

v-bind 디렉티브를 활용하여 클래스 바인딩과 동일하고 객체로 바인딩함
:style은 HTML Element의 style 속성에 해당하는 자바스크립트 객체에 대해 바인딩을 지원

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

해당 프로퍼티 속성은 카멜케이스로 작성

<template>
  <div>{{ rawHtml }}</div>
  <div>{{ rawHtml2 }}</div>
  <!-- html처럼 사용하기 위해서 -->
  <h1 v-html="rawHtml2"></h1>

  <h2 v-bind:class="{ active: isActive }">클래스 바인딩 테스트입니다.</h2>
  <!-- 축약형 -->
  <h2 :class="{ active: isActive }">클래스 바인딩 테스트입니다.</h2>
  <button @click="change">버튼</button>

  <h3 style="color: red; font-size: 24px">스타일 바인딩 테스트입니다.</h3>
  <h3 :style="{ color: fontColor, fontSize: fontSize + 'px' }">
    스타일 바인딩 테스트입니다.
  </h3>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: "이것은 텍스트입니다.",
      rawHtml2: '<span style="color: red">이것은 빨간색이어야 합니다.</span>',
      isActive: false,
      fontColor: "#888888",
      fontSize: 48,
    };
  },
  methods: {
    change() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

<style scoped>
h2.active {
  color: green;
}
</style>

3. 조건부 렌더링

1) v-if / v-else-if / v-else

조건부로 블록을 렌더링하는 데 사용
블록은 디렉티브 표현식이 truthy값을 반환하는 경우에만 렌더링 됨
전환 비용이 더 높음 -> 실행 중에 조건이 변경되지 않을 경우에 사용

2) v-show

v-if와 사용법이 크게 다르지 않음
다만, v-show가 있는 엘리먼트는 항상 렌더링 되어 DOM에 남아있다는 것이 차이점
v-show는 엘리먼트의 display CSS 속성만 전환이 됨
초기 렌더링 비용이 더 높음 -> 매우 자주 전환해야 하는 경우에 사용

<template>
  <div>
    <div v-if="isVisible" class="red"></div>
    <div v-if="isVisible" class="blue"></div>
    <div v-else class="black"></div>

    <div v-if="count > 1" class="red"></div>
    <div v-else class="blue"></div>
    <button @click="count++">증가</button>
    <button @click="count--">감소</button>

    // v-show는 false여도 다 렌더링 됨
    <div v-show="isVisible" class="red"></div>
    <div v-show="!isVisible" class="blue"></div>
    
    // v-if는 ture인 것만 렌더링 됨
    <div v-if="isVisible" class="black"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false,
      count: 0,
    };
  },
};
</script>

4. 리스트 렌더링

배열 데이터를 기반으로 동일한 구조의 UI를 반복호출하는 기능
v-for 디렉티브 사용
배열을 리스트로 렌더링 할 수 있음
item in items 형식의 특별한 문법이 필요 (item: 배열 내 반복되는 엘리먼트의 별칭 / items: 선언한 배열 데이터)
객체의 속성을 반복하는 데 사용 가능
순회순서: 해당 객체를 Object.keys()를 호출한 결과에 기반

<template>
  <div>
    <li v-for="item in sampleArray" :key="item">{{ item }}</li>
    <li v-for="user in otherArray" :key="user.id">
      {{ user.id }} / {{ user.name }}
    </li>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sampleArray: ["a", "b", "c", "d"],

      otherArray: [
        { id: 0, name: "John" },
        { id: 1, name: "Kim" },
        { id: 2, name: "Lee" },
        { id: 3, name: "Park" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped></style>

2️⃣ Data를 컨트롤하는 디렉티브

1. 이벤트 핸들링

1) 인라인 핸들러

이벤트가 트리거 될 때, 실행되는 인라인 JavaScript 기능
어떤 기능을 동작하는 코드가 HTML Element 내에 직접 할당되는 것을 의미

2) 메서드 핸들러

컴포넌트 script 부분에 정의된 메서드(함수)를 이벤트 핸들러에 할당해주는 방식

<template>
  <div>
    <button v-on:click="count++">인라인 핸들러</button>
    <h1>{{ count }}</h1>

    <button v-on:click="changeName">메서드 핸들러</button>
    <h1>{{ name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: "Vue.js",
    };
  },

  methods: {
    changeName() {
      this.name = "변경된 텍스트 데이터입니다.";
    },
  },
};
</script>

<style lang="scss" scoped></style>

2. Computed

정의: 함수처럼 코드를 작성하지만, return 시키는 데이터를 사용하기 때문에 데이터 취급을 하는 공통적으로 사용되는 로직 혹은 복잡한 로직을 미리 처리하여 반복된 로직처리를 방지하는 계산된 형태의 데이터를 만드는 속성
사용 이유: 너무 많은 연산을 스크립트 혹은 템플릿 HTML 안에서 처리하면 코드가 비대해지고, 유지보수가 어렵다는 치명적인 단점이 있음
연산이 복잡한 형태라면 계산된 데이터 형태로 만드는 computed 속성을 사용해서 해결할 수 있음

<template>
  <h1>{{ text }}</h1>
  <h1>changeText 함수 호출 값: {{ changeText() }}</h1>
  <h1>changeText 함수 호출 값: {{ changeText() }}</h1>
  <h1>changeText 함수 호출 값: {{ changeText() }}</h1>

  <h2>{{ computedText }}</h2>
  <h2>{{ computedText }}</h2>
  <h2>{{ computedText }}</h2>
</template>

<script>
export default {
  data() {
    return {
      text: "Computed 테스트 데이터 문구입니다.",
    };
  },
  // methods 부분에 선언된 함수와 동일한 로직일 때,
  // 캐싱 기능이 없는 methods는 호출될 때마다 console 값이 출력 됨
  // 반면에, computed는 캐싱 기능이 있기 때문에 methods와 어떤 차이점이 있는지 주의 깊게 살펴보는 것이 포인트
  computed: {
    computedText() {
      console.log("Computed 기능을 생성하였습니다.");
      return this.text.split("").reverse().join("");
    },
  },
  methods: {
    changeText() {
      console.log("함수 호출");
      console.log(this.text);

      return this.text.split("").reverse().join("");
    },
  },
};
</script>

<style lang="scss" scoped></style>

똑같이 3번 호출하였음에도 methods는 3번 다 호출 computed는 한 번만 호출

3. Watch

어떤 데이터를 감시하고 있다가 그 데이터의 값이 변했을 때, 그것을 감지하여 그와 관련된 함수, 로직, 연산 등 다양한 기능을 추가적으로 활용할 수 있도록 도와주는 속성
데이터 변경에 대한 응답으로 비동기식 또는 시간이 많이 소요되는 조작을 수행하려는 경우에 가장 유용
예) 게시판 페이지를 변경하거나, 선택한 페이지에 대한 리스트만 불러올 경우, 변경된 페이지번호만 감지하여 해당 데이터만 호출할 때 사용

<template>
  <button @click="changeMessage">{{ message }}</button>
</template>

<script>
export default {
  data() {
    return {
      message: "안녕하세요. Vue.js Watch 기능 테스트 오리지널 문구",
    };
  },

  // message라는 변수가 바뀌는 것을 지켜보고 있다가 changeMessage()를 통해 바뀌게 되면 alert창을 띄워줌
  // 데이터 뿐만 아니라 computed로 계산된 형태의 데이터도 watch로 감지할 수 있음
  // 보통 게시판에서 한 컬럼을 선택하였을 때, 고유한 id 값이 바뀜을 감지하고
  // 이때, 그 id 값에 따른 상세 데이터를 호출할 때 주로 사용함
  watch: {
    message() {
      window.alert("message 변수에 담긴 데이터가 변경되었습니다.");
    },
    id() {
      // 해당 상세데이터를 조회하는 api 호출
    },
  },

  methods: {
    changeMessage() {
      console.log("함수 호출");
      this.message = "변경된 message 데이터입니다.";
    },
  },
};
</script>

<style lang="scss" scoped></style>

4. Props와 Emits

Props	Emits
상위 컴포넌트 -> 하위 컴포넌트	하위 컴포넌트 -> 상위 컴포넌트
OptionsAPI: props:{} 사용 CompositionAPI: defineProps 사용	OptionsAPI: this.$emits 사용 CompositionAPI: defineEmits 사용
Prop 받은 데이터의 타입 설정	첫 번째 인자: 이벤트 이름 두 번째 인자: 보낼 데이터

1) Options API - Props

<template>
  <div>
    <ChildComponent
      v-bind:sendProps1="title"
      v-bind:sendProps2="createdAt"
      v-bind:sendProps3="obj"
    />
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      title: "부모 컴포넌트에서 선언된 데이터입니다.",
      createdAt: 2024,
      obj: {
        id: 2024,
        name: "John",
      },
    };
  },
};
</script>

<style lang="scss" scoped></style>

- ChildComponent.vue

<template>
  <div>{{ sendProps1 }}</div>
  <div>{{ sendProps2 }}</div>
  <div>{{ sendProps3.id }}</div>
  <div>{{ sendProps3.name }}</div>
</template>

<script>
export default {
  props: {
    sendProps1: String,
    sendProps2: Number,
    sendProps3: Object,
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped></style>

2) CompositionAPI - Props

<template>
  <div>
    <ChildComponent
      :sendProps1="title"
      :sendProps2="createdAt"
      :sendProps3="obj"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import ChildComponent from "./components/ChildComponent.vue";

interface Obj {
  id: number;
  name: string;
}

const title = ref<string>("부모컴포넌트에서 선언된 데이터입니다.");
const createdAt = ref<number>(2024);
const obj = reactive<Obj>({
  id: 2024,
  name: "John",
});
</script>

<style lang="scss" scoped></style>

compositionAPI 에서는 setup을 꼭 추가해줘야 한다.
'./components/ChildComponent.vue' 모듈 또는 해당 형식 선언을 찾을 수 없습니다.
갑자기 이런 오류가 나타나서 구글링 해봤더니 개발도구인 VSCode에서 개발에 제공되는 내부 타입스크립트 플러그인과 뷰와 관련된 타입스크립트의 중첩으로 발생하는 문제였다.

https://lts0606.tistory.com/663

[Vuejs] 타입스크립트(Typescript) 적용, 모듈 또는 해당 형식 선언을 찾을 수 없습니다.

* 개발도구 : vs코드(VSCode) * 운영체제 : 윈도우 뷰에서 타입스크립트(typescript)를 적용해 보았는데 아무 행위도 안했는데 만났던 오류 입니다. 난 그저 단지 설치하고 소스코드를 눌러서 보려고 했

lts0606.tistory.com

이 블로그에서 하신 대로 했더니 바로 해결!

- ChildComponent.vue

<template>
  <div>{{ props.sendProps1 }}</div>
  <div>{{ props.sendProps2 }}</div>
  <div>{{ props.sendProps3.id }}</div>
  <div>{{ props.sendProps3.name }}</div>
</template>

<script setup lang="ts">
interface Obj {
  id: number;
  name: string;
}
interface Props {
  sendProps1: String;
  sendProps2: Number;
  sendProps3: Obj;
}

// import 할 필요 없음
const props = defineProps<Props>();
</script>

<style lang="scss" scoped></style>

<CompositionAPI에서 타입스크립트를 활용하는 방법>

① Prop 받은 데이터 형식에 맞게 타입을 지정해준다.

② Prop 받은 데이터 이름 자체에 미리 선언해둔 타입을 설정해준다.

interface Obj {
  id: number;
  name: string;
}

interface Props {
  sendProps1: String;
  sendProps2: Number;
  sendProps3: Obj;
}

③ defineProps, toRefs 내장함수를 통해 Prop 받은 데이터를 활용하여 템플릿 부분에 호출하여 사용한다.

defineProps는 import 할 필요 X
toRefs는 import 해야함

const props = defineProps<Props>();
const { sendProps1, sendProps2, sendProps3 } = toRef(props);

3) CompositionAPI - Emits

- ChildComponent.vue

<template>
  <button @click="sendEvent">자식컴포넌트에서 만든 버튼</button>
</template>

<script setup lang="ts">
import { ref } from "vue";

const data = ref<string>("자식 컴포넌트에서 선언된 데이터입니다.");
const emit = defineEmits(["send-event"]);
const sendEvent = () => {
  emit("send-event", data.value);
};
</script>

<style lang="scss" scoped></style>

- App.vue

<template>
  <div>
    부모컴포넌트 레이아웃
    <ChildComponent @send-event="parentEvent" />
  </div>
</template>

<script setup lang="ts">
import ChildComponent from "./components/ChildComponent.vue";

const parentEvent = (event: string) => {
  console.log(event);
};
</script>

<style lang="scss" scoped></style>

4) OptionsAPI - Emits

- ChildComponent.vue

<template>
  <button @click="sendEvent">자식컴포넌트에서 만든 버튼</button>
</template>

<script>
export default {
  data() {
    return {
      text: "자식 컴포넌트에서 선언된 데이터입니다.",
    };
  },
  methods: {
    sendEvent() {
      this.$emit("send-event", this.text);
    },
  },
};
</script>

<style lang="scss" scoped></style>

- App.vue

<template>
  <div>
    부모컴포넌트 레이아웃
    <ChildComponent @send-event="parentEvent" />
  </div>
</template>

<script>
import ChildComponent from "./components/ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  methods: {
    parentEvent(event) {
      console.log(event);
    },
  },
};
</script>

<style lang="scss" scoped></style>

5. v-model

1) 양방향 데이터 바인딩

'Props와 Emits의 기능이 동시에 진행된다.'

2) input의 기능에 따라

보통 v-model은 input 태그의 inputValue 값과 연관지어 많이 사용함

<template>
  <div>
    <!-- 영어로 입력받을 때 -->
    <input type="text" v-model="inputValue1" />

    <!-- 한글을 입력받을 땐 이 방법이 권장됨 -->
    <input
      type="text"
      :value="inputValue2"
      @input="inputValue2 = $event.target.value"
    />
  </div>
  <div>{{ inputValue1 }}</div>
  <div>{{ inputValue2 }}</div>
</template>

<script>
export default {
  data() {
    return {
      inputValue1: "",
      inputValue2: "",
    };
  },
};
</script>

<style lang="scss" scoped></style>

[VUE] 1. vite로 Vue 시작하기 / npm cache 오류 해결 / 라이프사이클 훅 학습하기

예글 — Tue, 9 Apr 2024 01:06:07 +0900

이직하게 된 회사에서 React나 Next가 아닌 VUE를 사용하게 되어서 출근하기 전까지 조금이라도 공부하기 위해 유튜브에 올라온 강의를 보며 학습을 시작하였다!

https://www.youtube.com/watch?v=9lWaIhE05m8&t=430s

구디사는 개발자 9Din님께서 유튜브에 올려주신 강의로 학습하였다.

1️⃣ VUE 시작하기

구글링해본 결과 VUE는 Vue-CLI나 Vite 둘 중 하나로 시작을 하는 것 같았다

리액트로 예를 들면 CRA vs Vite 이런 느낌일라나..

Vue-CLI vs Vite

1. Vue-CLI의 장단점

장점
- 다양한 기능을 제공하며 Vue.js 애플리케이션의 빌드, 테스트 및 배포를 위한 다양한 구성을 제공합니다.
- 프로젝트의 개발을 위한 설정을 쉽게 커스텀 할 수 있는 설정 파일을 제공합니다.
- 대규모 운영 애플리케이션에 적합합니다.
- 공식 Vue.js 팀에서 유지 보수하므로 업데이트와 일관된 개발 경험을 보장합니다.
- Vue2, Vue3 모두 지원합니다.

단점
- Vue-CLI는 간단한 프로젝트를 구성할 때 설정이 복잡하다 느낄 수 있습니다.
- 프로젝트의 규모가 커질수록 빌드나 서버 실행의 속도가 Vite보다 느려집니다.

2. Vite의 장단점

장점
- ESM(ES Module)을 기반으로 한 빠른 개발 서버입니다.
- 설정이 간소화 되어있어 직관적인 구성 설정을 제공합니다.
- Vue3에 최적화되어 있으며, Vue2가 사용 종료될 시점이 다가오므로 상당한 이점으로 작용합니다.
- 속도와 간결성 때문에 중소 규모 프로젝트를 빌드하는 데 탁월합니다.
- Vue 뿐만 아니라 Vanilla, React, Preact, Lit, Svelte, Solid, Qwik 등의 다른 프레임워크와도 사용할 수 있습니다.

단점
- Vue-CLI만큼 많은 최적화 및 프로덕션 기능을 제공하지 않을 수 있습니다.
- Vue-CLI에 비해 플러그인이나 커뮤니티 등이 부족할 수 있습니다.
- 좀 더 전문화하기 위해서는 Webpack을 직접 이해하고 구성해야 할 수 있어 Vite의 모든 기능을 끌어내지 못할 수 있습니다.

난 강의에서 vite로 시작하였기에 똑같이 vite로 시작!

npm create vite@latest

Project name: vue-baic
Select a framework: Vue
Select a variant: JavaScript

이렇게 지정해주고 내 프로젝트 폴더로 들어가서

npm install

이렇게 해주었는데 오류!

Your cache folder contains root - owned files, due to a bug in

npm ERR! previous versions of npm which has since been addressed

설치부터 오류가 발생하다니...

하지만 구글링을 통해 빠르게 해결해버리기-

https://velog.io/@zzaoman/npm-cache-%EB%AC%B8%EC%A0%9C

npm cache 문제

실습을 하는 도중에 평소처럼 git clone해서 npm install을 하는데 에러가 발생했다..!Your cache folder contains root-owned files, due to a bug in previous versions of npm which ha

velog.io

나는 이 블로그에서 처음에 하신 대로

sudo npm cache clean --force

이렇게 해주었더니 바로 해결되었다!

2️⃣ VSCode 확장 프로그램 설치하기

강의에서는 TypeScript Vue Plugin, Vue Language Features(Volar), Vue VSCode Snippets를 설치하셨다고 했는데 2024.04.09 기준 TypeScript Vue Plugin, Vue Language Features(Volar) 이 두 개는 지원하지 않고 Vue-Official로 대체되었다고 떴다. 그래서 나는 Vue-Official과 Vue VSCode Snippets를 설치하였다!

Snippets를 사용하면서 v-b를 치면 이렇게 많은 템플릿을 사용할 수 있어서 아주 편리하다

강의에서는 vbase-3을 사용하였다

<template>
  <div>

  </div>
</template>

<script>
export default {
  setup () {
    

    return {}
  }
}
</script>

<style lang="scss" scoped>

</style>

그럼 이렇게 뙇!!! 아주 편리하다..

3️⃣ 라이프사이클 훅 학습하기

출처: 구디사는 개발자 9Diin님 블로그 https://blog.naver.com/PostView.naver?blogId=weartstudio&logNo=223242014244&categoryNo=13&parentCategoryNo=&from=thumbnailList

1. beforeCreate(), created()

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  beforeCreate() {
    console.log("lifeCycle is beforeCreate", this.count); // undefined
    this.test(); // 에러 남
  },
  created() {
    console.log("lifeCycle is created", this.count);
    this.test();
  },
  
  methods: {
    test() {
      console.log("함수 호출!!");
    },
  },
};
</script>

<style lang="scss" scoped></style>

beforeCreate()에서는 컴포넌트를 생성하기 전이므로 data, method에 접근할 수 없다
따라서, count는 undefined이 뜨고 test를 불러오면 에러가 난다
created()에서는 컴포넌트 생성 후 this 키워드를 사용해 data, method에 접근 가능하다
따라서, count는 0이 뜨고 test를 불러오면 '함수 호출'이라는 결과물이 나타난다

2. beforeMount(), mounted()

<template>
  ...
  <h1>Vue.js 라이프사이클 테스트</h1>
</template>

<script>
export default {

 ...

  beforeMount() {
    console.log("lifeCycle is beforeMount", document.querySelector("h1")); // null
  },
  mounted() {
    console.log("lifeCycle is mounted", document.querySelector("h1"));
  },
  methods: {
    test() {
      console.log("함수 호출!!");
    },
  },
};
</script>

<style lang="scss" scoped></style>

beforeMount()에서는 UI가 렌더링되기 전이라 null이 뜸
mounted()에서는 UI가 렌더링된 직후여서 해당 UI가 뜸

기술면접 준비하면서 그냥 마구 외웠을 때는 이해가 잘 안 갔는데 이렇게 그림과 코드를 같이 보면서 공부하니까 확실히 이해가 더 되는 것 같다!

[NEXT] 8. 1차 개발 끝 / Vercel로 배포하기 / 배포 후 오류 해결

예글 — Sun, 24 Mar 2024 22:31:45 +0900

드디어 1차 개발이 완료되었다!

어떤식으로 배포를 진행할까 고민하던 찰나.. vercel로 많이 한다길래 처음이니까 ㅎㅎ vercel로 배포를 진행했다!

Vercel이란?

Next.js에서 제공하는 배포 플랫폼
빌드, 배포, 호스팅 제공, 공식문서에서도 Vercel을 통한 Front Project 배포 권장
Github Repository를 통해 쉽게 배포 가능

1️⃣ pakage.json에 script 추가 및 수정

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

처음에 블로그를 보며 이렇게 script를 수정하고 빌드를 진행하였는데

PrismaClientInitializationError: Prisma has detected that this project was built on Vercel, which caches dependencies. This leads to an outdated Prisma Client because Prisma's auto-generation isn't triggered. To fix this, make sure to run the `prisma generate` command during the build process.

이러한 오류가 떠서

다시 검색 진행...

알고보니 prisma와 무슨 연관이 있는 것이었다

  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate",
    "build": "prisma generate && next build",
    "vercel-deploy": "next build && next export"
  },

스크립트를 이렇게 바꾸니 오류 해결

2️⃣ Vercel 회원가입 또는 로그인

1. 이 곳에 들어가 github로 계정 연동하기

https://vercel.com/solutions/nextjs

Next.js on Vercel - Vercel – Vercel

Get the fast builds and simple setup that developers love, now integrated into a single, automated workflow.

vercel.com

2. repository import 하기

3. Settings에서 Build Command 수정하기

4. 빌드 진행 후 배포 완료!

배포가 잘 진행되면 이런식으로 Ready가 뜬다!

3️⃣ 배포 후 만난 오류들

배포가 끝나고 신나는 마음으로 페이지에 들어가서 테스트를 해보았는데... 회원가입부터 시작해서 로그인, 게시판까지 모두 작동을 안 하는 것이었다

1. Error querying the database: Error code 14: Unable to open the database file

오류 로그를 보니까 데이터베이스를 찾을 수 없는 것이 문제였다..

수많은 검색을 통해 알아낸 것은

Vercel은 SQLite와 같은 로컬 파일 시스템을 기반으로 하는 데이터베이스를 직접적으로 지원하지 않습니다. SQLite는 파일 기반의 경량 데이터베이스이며, 여러 인스턴스 간에 데이터를 공유하기 어렵습니다. Vercel과 같은 서버리스 호스팅 플랫폼은 각 인스턴스가 독립적인 환경을 갖기 때문에 SQLite와 같은 데이터베이스는 적합하지 않습니다.

이 프로젝트에서 db로 SQLite를 사용 중이었는데 vercel이 지원하지 않아 연결이 안 되었던 것이었다!!

해결방법

1. 계속 SQLite를 사용하며 배포를 다른 방식으로 진행하기

2. DB를 바꾸기

--> 현실적으로 다른 배포 방법을 사용하기 보다는 vercel에서 지원하는 데이터베이스를 사용하는 것이 공수가 덜 들어갈 것 같아서 DB를 Postgresql로 변경하였다

https://vercel.com/yegris-projects/cock-user/stores

Dashboard

vercel.com

여기에서 database를 만들고

vercel link
vercel env pull .env.development.local

- 터미널에서 연동해주기

- 그럼 자동으로 .env.local 파일이 만들어주는데 여기서 파일 이름을 .env로 변경해주기

- postgres 설치하기

npm install @vercel/postgres

- db 정보 변경해주기

// 어떤 종류의 DB를 쓰는지, 해당 파일에 대한 url
datasource db {
  provider = "postgresql"
  url = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}

이렇게 해주니까 오류 해결!

2. 401 Unauthorized 오류

며칠을 헤맸던 오류...

1번에서 만났던 오류를 해결하니까 회원가입은 잘 되었는데 로그인이 안 되어서... 콘솔을 봤더니 401 오류가 뜨는 것이었다

POST https://cock-user-yegris-projects.vercel.app/api/auth/callback/credentials 401 (Unathorized)

구글에 모든 401에러를 검색 해보았으나... 명확한 해답은 없고

있다 하더라고 나에겐 맞지 않은 솔루션들 뿐이었다

이것저것 실행해보다가

로그인 페이지에서 콘솔을 찍어보았는데

const result = await signIn("credentials", {
      username: id,
      password: password,
      redirect: false,
 });

console.log(result);

로컬에서는 이렇게 뜨고

콘솔에서는 이렇게 떴다

error : "Cannot read properties of null (reading 'state')" 이런 오류가 뜨면서 url에 아무것도 안 뜨는 것이었다?????

어라라 그럴리가 없는데 하며 .env 파일을 까보는 순간

      async authorize(credentials, req) {
        const res = await fetch(`${process.env.NEXTAUTH_URL}/api/login`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            username: credentials?.username,
            password: credentials?.password,
          }),
        });
        const user = await res.json();
        console.log(user);

        if (user.state === 401) {
          console.log("error");
        }

        if (user) {
          return user;
        } else {
          return null;
        }
      },
    }),

여기에 들어가야 할 NEXTAUTH_URL이 없는 것이었다!

데이터베이스를 바꾸면서 .env 파일도 바뀌었는데

내가 입력해 놓은 NEXTAUTH_URL이 사라져 버린 것!!

NEXTAUTH_URL="https://cock-user-yegris-projects.vercel.app"

.env 파일에 이렇게 입력해주고 다시 배포 진행하니까 드디어!!! 드디어!! 모든 것이 잘 돌아갔다...

너무 감격

나 왜 콘솔 안찍어보고 애먼 것만 하고 있었냐고...

역시 디버깅은 콘솔찍기가 진리인 것 같다...

이렇게 1차 개발의 모든 것이 끝나고!!

차근차근 디테일 잡으면서 반응형도 시작하고... 그래야겠다!

[자료구조/알고리즘] 슬라이딩 윈도우 알고리즘

예글 — Wed, 20 Mar 2024 21:47:31 +0900

1️⃣ 슬라이딩 윈도우란?

고정 사이즈의 윈도우가 이동하면서 윈도우 내에 있는 데이터를 이용해 문제를 풀이하는 알고리즘
배열이나 리스트의 요소의 일정 범위 값을 비교할 때 사용하면 매우 유용
배열과 그 부분 배열을 어떤 조건하에서 계산하는 경우에 주로 사용
예) 구간 합 구하기, 부분 문자열 구하기 등

2️⃣ 구간마다 일일이 합을 구할 경우 vs 슬라이딩 윈도우 알고리즘을 활용할 경우

1. 구간마다 일일이 합을 구할 경우

앞에서 구했던 값이 있음에도 불구하고 다음 번에 또 구하고.. 또 구하고.. 시간복잡도가 늘어날 수밖에 없다 -> 효율성이 떨어짐

2. 슬라이딩 윈도우 알고리즘을 활용할 경우

최초 윈도우에 대해서만 값을 구하고
한 칸씩 윈도우를 밀 때에는 이전 구간 합을 활용함 -> 효율성 좋음
윈도우에서 빠진 원소의 값을 빼주고 윈도우에 들어온 원소의 값을 더해줌

3️⃣ 문제

const solution = (elements) => {
    const sumSet = new Set();
    
    const len = elements.length;
    for (let i=1; i<=len; i++) { // 연속 부분 수열의 길이
        // 슬라이딩 윈도우 
        let sum = 0;
        for (let j=0; j<len; j++) { // 연속 부분 수열 시작 지점의 인덱스
            if (j === 0) { // 최초 한 번의 창문에 대해서만 직접 합을 구하기
                for (let k=0; k<i; k++) {
                    sum += elements[k];
                }
            }
            else { // 이후 창문들에 대해서는 이전에 구한 합을 활용하기
                sum -= elements[j-1]; // 윈도우에서 빠진 값 빼주고
                sum += elements[(j+i-1) % len]; // 윈도우에 들어온 값 더하기
            }
            sumSet.add(sum);
        }
    }
    
    // 원형 수열의 연속 부분 수열 합으로 만들 수 있는 수의 개수를 return
    return sumSet.size;
}

- 참고 블로그

https://velog.io/@dianestar/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4-%EC%97%B0%EC%86%8D-%EB%B6%80%EB%B6%84-%EC%88%98%EC%97%B4-%ED%95%A9%EC%9D%98-%EA%B0%9C%EC%88%98-JavaScript-%EA%B5%90%EA%B3%B5-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98-%EC%8A%A4%ED%84%B0%EB%94%94-48%EC%A3%BC%EC%B0%A8

[프로그래머스] 연속 부분 수열 합의 개수 (JavaScript) | 교공 알고리즘 스터디 48주차

연속 부분 수열 합의 개수 | 문제 바로가기 ✔ 아래의 캡쳐본은 문제의 일부입니다. 보다 자세한 제한 사항 및 입출력 예시는 위의 링크를 참고해주세요! ⭐ 풀이의 핵심 | 슬라이딩 윈도우

velog.io

[자료구조/알고리즘] 탐욕법 (greedy) 알고리즘

예글 — Mon, 18 Mar 2024 15:52:07 +0900

1️⃣ 그리디 알고리즘이란?

선택의 순간마다 당장 눈 앞에 보이는 최적의 상황만을 쫓아 최종적인 해답에 도달하는 방법
그리디 알고리즘을 해결하기 위해서는 최적이라 생각되는 해답을 찾고 이를 통해 최종 문제의 해답에 도달하는 방식으로 접근해야 함
locally optimal solution -> globally optimal solution
그러나, 이런 방법은 항상 최적의 결과를 보장하지 않음 (특정한 상황에서만 보장)

2️⃣ 그리디 알고리즘을 사용할 수 있는 두 가지 조건

탐욕적 선택 속성(Greedy Choice Property) : 앞의 선택이 이후의 선택에 영향을 주지 않는다
최적 부분 구조(Optimal Substructure) : 문제에 대한 최종 해결 방법은 부분 문제에 대한 최적 해결 방법으로 구성

3️⃣ 그리디 알고리즘 예제 문제

1. 짐나르기(backpack Problem)

김코딩과 박해커는 사무실 이사를 위해 짐을 미리 싸 둔 뒤, 짐을 넣을 박스를 사왔다. 박스를 사오고 보니 각 이사짐의 무게는 들쭉날쭉한 반면, 박스는 너무 작아서 한번에 최대 2개의 짐 밖에 넣을 수 없었고 무게 제한도 있었다.
예를 들어, 짐의 무게가 [70kg, 50kg, 80kg, 50kg]이고 박스의 무게 제한이 100kg이라면 2번째 짐과 4번째 짐은 같이 넣을 수 있지만 1번째 짐과 3번째 짐의 무게의 합은 150kg이므로 박스의 무게 제한을 초과하여 같이 넣을 수 없다.
박스를 최대한 적게 사용하여 모든 짐을 옮기려고 합니다.
짐의 무게를 담은 배열 stuff와 박스의 무게 제한 limit가 매개변수로 주어질 때, 모든 짐을 옮기기 위해 필요한 박스 개수의 최소값을 return 하도록 movingStuff 함수를 작성하세요.

function movingStuff(stuff, limit){
	let count = 0; //옮긴 횟수
	let sortedStuff = stuff.sort((a,b) => a - b);

	while (sortedStuff.length !== 0){
		if(sortedStuff[0] + sortedStuff[sortedStuff.length-1] <= limit){
			count++;
			sortedStuff.shitf(); //shift() 메서드는 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다.
			sortedStuff.pop();
		}else{
			count++;
			sortedStuff.pop(); //가장 무거운 걸 나른다.
		}
	}
	return count;
}

가장 무거운 것과 가장 가벼운 것을 박스에 넣기

그게 안 된다면 가장 무거운 것 부터 넣기

2. 편의점 알바 (Coin Change Problem)

편의점에서 아르바이트를 하고 있는 중에, 하필이면 피크 시간대에 손님에게 거스름돈으로 줄 동전이 부족하다는 것을 알게 되었습니다.현재 가지고 있는 동전은 1원, 5원, 10원, 50원, 100원, 500원으로 오름차순으로 정렬되어 있고, 각 동전들은 서로 배수 관계에 있습니다.
동전 개수를 최소화하여 거스름돈 K를 만들어야 합니다. 이때, 필요한 동전 개수의 최솟값을 구하는 함수를 작성해 주세요.

function partTimeJob(k){
	let count = 0; 
	const arr = [500,100,50,10,5,1];
	for(let item of arr){
		count = count + Math.floor(k/item); //동전의 갯수
		k = k - item * Math.floor(k/item); //남은 돈 계산
	}
	return count; 
}

필요한 동전의 최솟값을 구하는 문제이므로 가장 큰 동전부터 주기

- 참고 블로그

https://velog.io/@hhhminme/Javascript%EB%A1%9C-%ED%92%80%EC%96%B4%EB%82%B8-greedy-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98

[NEXT] 7. 게시판 만들기, 기본 CRUD

예글 — Sat, 16 Mar 2024 22:27:36 +0900

드디어 마지막 관문인 게시판 만들기!

전 회사에서도 CRUD 정도는 해봤지만,, 백엔드 분이 만들어 주신 api를 받아서 프론트 쪽 작업만 했었기에,, 항상 api 만드는 과정이 궁금했었다 다음 개인프로젝트에서 무조건 게시판을 만들어봐야겠다라고 결심한지 어언 몇 개월,, 드디어 실행에 옮겼다!

1️⃣ 글 작성페이지 만들기 (CREATE)

우선 퍼블리싱은 다 해놓은 상태니,, 데이터만 붙이이면 다 되니까 빨리 끝나겠지 ㅎㅎ 라고 생각했다면 경기도 오산

1. schema.prisma 에서 필드 정의하기

model Post {
  id        String     @default(cuid()) @id
  title     String
  content   String?
  published Boolean  @default(false)
  author    User?    @relation(fields: [authorId], references: [id])
  authorId  Int
  createdAt DateTime @default(now())
  updatedAt DateTime?
}

2. 게시글 작성 페이지

"use client";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { SyntheticEvent, useEffect, useState } from "react";

const PostForm = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [authorId, setAuthorId] = useState<Number | null>(null);

  const { data: session } = useSession();
  const author = session?.user?.name;
  const router = useRouter();

  useEffect(() => {
    // 세션 데이터가 로드되면 사용자 식별자를 설정
    if (session?.user?.id) {
      setAuthorId(session.user.id);
    }
  }, [session]);

  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value);
  };

  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault();

    // authorId가 null인 경우 처리
    if (authorId === null) {
      console.error("사용자 식별자가 없습니다. 사용자를 다시 로그인하세요.");
      return;
    }

    try {
      await fetch("/api/addpost", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ title, content, authorId }),
      });
      router.refresh();
    } catch (error) {
      console.log(error);
    }

    setTitle("");
    setContent("");
  };

  return (
    <>
      {/* <h1>{initialData.title ? "글 수정하기" : "글 작성하기"}</h1> */}

      <form onSubmit={handleSubmit}>
        <div>
          <div>
            <label htmlFor="title">글 제목</label>
            <input
              type="text"
              id="title"
              name="title"
              value={title}
              onChange={handleTitleChange}
              required
            />
          </div>
        </div>

        <div>
          <label htmlFor="content">내용</label>
          <textarea
            name="content"
            id="content"
            value={content}
            onChange={handleContentChange}
            required
          />
        </div>

        <div>
          <button type="submit">저장하기</button>
          <button>취소하기</button>
        </div>
      </form>
    </>
  );
};

export default PostForm;

처음에는 작성자 이름을 보내려고 했으나,, db에서 author가 user와 관련되어 있어서 type 지정할 때 계속 오류가 나는 것이었다,,

여기서 한 시간은 헤맨 듯 ㅠㅠㅠ

그래서 그냥 authorId를 받아서 서버로 보내주기,, 생각해보니까 이름은 동명이인이 있을 수 있으니 id를 받아서 보내는 게 더 좋을 것 같다는 생각이 들었다!

3. addPost api 만들기

import prisma from "@/app/lib/prisma";
import { NextResponse } from "next/server";

type PostCreateInput = {
  title: string;
  content: string;
  published: boolean;
  authorId: number;
};

export async function POST(request: Request) {
  const res: PostCreateInput = await request.json();

  const { title, content, authorId } = res;

  const result = await prisma.post.create({
    data: {
      title,
      content,
      published: true,
      authorId,
      updatedAt: new Date(),
    },
  });

  return NextResponse.json({ result });
}

여기에서도 계속 오류가 났었는데... 저 updatedAt 때문이었다

DB에서 updatedAt이 필수로 지정해져 있어서 optional 하게 바꾸었는데도,,, 그래서 저렇게 new Date()로 지정해놓으니까 드디어 해결!

이게 맞는 방법인지 모르겠지만,, 차근차근 고쳐나가도록 해야겠다

4. postForm 컴포넌트에 붙이기

"use client";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { SyntheticEvent, useEffect, useState } from "react";
import * as styles from "./index.css";

const PostForm = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [authorId, setAuthorId] = useState<Number | null>(null);

  // 로그인한 유저 데이터
  const { data: session } = useSession();
  const router = useRouter();

  useEffect(() => {
    // 세션 데이터가 로드되면 사용자 식별자를 설정
    if (session?.user?.id) {
      setAuthorId(session.user.id);
    }
  }, [session]);

  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTitle(e.target.value);
  };

  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value);
  };

  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault();

    // authorId가 null인 경우 처리
    if (authorId === null) {
      console.error("사용자 식별자가 없습니다. 사용자를 다시 로그인하세요.");
      return;
    }

    try {
      await fetch("/api/addpost", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ title, content, authorId }),
      });
      alert("저장하시겠습니까?");
      router.push("/board");
      router.refresh();
    } catch (error) {
      console.log(error);
    }

    setTitle("");
    setContent("");
  };

  return (
    <div className={styles.formBox}>
      {/* <h1>{initialData.title ? "글 수정하기" : "글 작성하기"}</h1> */}

      <form onSubmit={handleSubmit} className={styles.form}>
        <div className={styles.inputBox}>
          <label htmlFor="title" className={styles.label}>
            제목
          </label>
          <input
            type="text"
            id="title"
            name="title"
            value={title}
            onChange={handleTitleChange}
            required
            className={styles.input}
          />
        </div>

        <div className={styles.textAreaBox}>
          <label htmlFor="content" className={styles.label}>
            내용
          </label>
          <textarea
            name="content"
            id="content"
            value={content}
            onChange={handleContentChange}
            required
            className={styles.textArea}
          />
        </div>

        <div className={styles.buttonBox}>
          <button type="submit" className={styles.saveBtn}>
            저장하기
          </button>
        </div>

        <div className={styles.buttonBox}>
          <p
            onClick={() => {
              alert(
                "작성 중인 내용은 저장되지 않습니다. 그래도 취소하시겠습니까?"
              );
              router.push("/board");
            }}
            className={styles.cancelTxt}
          >
            취소하기
          </p>
        </div>
      </form>
    </div>
  );
};

export default PostForm;

5. DB에서 확인

다행히 잘 들어오는 것이 확인된다,,

2️⃣ 게시글 데이터 불러오기 (READE)

1. 전체 게시글 리스트

// 전체 게시글 가져오는 함수
async function getPosts() {
  const posts = await prisma.post.findMany({
    where: { published: true },
    include: {
      author: {
        select: { name: true }, // 작성자의 이름만을 선택
      },
    },
  });

  // 각 게시물의 작성자 이름만을 추출하여 반환
  return posts.map((post) => ({
    ...post,
    authorName: post.author?.name || "Unknown", // 작성자 이름 또는 'Unknown'으로 설정
  }));
}

export default async function BoardListPage() {
  const posts = await getPosts();

  return (
    <div className={styles.root}>
      {/* <div className={styles.hotPost}>
        <h2>인기 게시글</h2>
        <div className={styles.hotPostItemBox}>
          <BoardItem id={dummy.id} />
        </div>
      </div> */}

      <div className={styles.newPost}>
        <div className={styles.topBox}>
          <h2>최근 게시글</h2>
          <Link href="/board/write" className={styles.goWrite}>
            게시글 작성 &gt;
          </Link>
        </div>

        <div className={styles.newPostTable1}>
          <span className={`${styles.th} ${styles.th1}`}>No</span>
          <span className={`${styles.th} ${styles.th2}`}>제목</span>
          <span className={`${styles.th} ${styles.th3}`}>작성자</span>
          <span className={`${styles.th} ${styles.th4}`}>날짜</span>
          <span className={`${styles.th} ${styles.th5}`}>추천수</span>
        </div>

        <div className={styles.newPostTable2}>
          {posts.map((post, index) => {
            return (
              <BoardNewItem
                num={index + 1}
                key={post.id}
                id={post.id}
                title={post.title}
                content={post.content}
                authorName={post.authorName}
                createdAt={post.createdAt}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
}

BoardNewItem 컴포넌트를 만들어서 데이터를 보내도록 하였다.

처음에는 grid로 스타일링 하여 한 줄에 4개씩 보이게 만들었는데 아무래도 게시판은 기본 게시판 스타일로 보여주는 게 좋을 것 같아서

2. 개별 게시글 페이지

- 개별 게시글 페이지 데이터 가져오는 api 작성 (api/post/[id]/route.ts)

import prisma from "@/app/lib/prisma";
import { NextResponse } from "next/server";

export async function GET(request: Request, { params }: any) {
  const id = params.id;

  const post = await prisma.post.findUnique({
    where: { id },
    include: {
      author: true,
    },
  });

  const authorName = post?.author?.name || "Unknown";

  // 필요한 데이터만 추출하여 반환
  const postData = {
    id: post?.id,
    title: post?.title,
    content: post?.content,
    published: post?.published,
    authorId: post?.authorId,
    createdAt: post?.createdAt,
    updatedAt: post?.updatedAt,
    authorName: authorName, // 작성자 이름 추가
  };

  return NextResponse.json(postData);
}

- 상세페이지 features에 적용

"use client";

const BoardDetailPage = ({ postId }: any) => {
  // 로그인한 유저 정보
  const { data: session } = useSession();
  const userId = session?.user?.id;

  // 좋아요
  const [like, setLike] = useState(false);

  const OnHeartClick = () => {
    setLike(!like);
  };

  // 게시글
  const [postState, setPostState] = useState<{
    title: string;
    authorName: string;
    createdAt: string;
    updatedAt: string | null;
    content: string | null;
    authorId: number | null;
  }>({
    title: "",
    authorName: "",
    createdAt: "",
    updatedAt: null,
    content: null,
    authorId: null,
  });

  // 게시글 데이터 가져오기
  useEffect(() => {
    async function fetchPost() {
      try {
        const response = await fetch(`/api/post/${postId}`, {
          method: "GET",
        });
        const postData = await response.json();
        setPostState(postData);
      } catch (error) {
        console.error("Error fetching post:", error);
      }
    }

    fetchPost();
  }, [postId]);

  const newFormat = dayjs(postState?.createdAt).format("YYYY-MM-DD H:mm:ss");

  return (
    <div className={styles.root}>
      <div className={styles.titleBox}>
        <div className={styles.titleTop}>
          <p className={styles.title}>{postState?.title}</p>

          {/* 로그인한 유저와 글쓴 유저가 같을 때만 나타남 */}
          {userId === postState?.authorId && (
            <div className={styles.subTxt}>
              <UpdatePostButton postId={postId} />
              <span className={styles.bar}>|</span>
              <DeletePostButton postId={postId} />
            </div>
          )}
        </div>

        <div className={styles.info}>
          <p>작성자: {postState?.authorName}</p>
          <span>{newFormat}</span>
        </div>
      </div>

      <div className={styles.top}>
        {/* <span className={styles.mainImgBox}>
          <Image src={example1} alt="예시사진" className={styles.mainImg} />
        </span> */}
        <span className={styles.heartBox}>
          <Image
            src={like ? heart_fill : heart}
            alt="빈 하트"
            className={styles.heartImg}
            onClick={OnHeartClick}
          />
        </span>
      </div>

      <div className={styles.bottom}>
        <div className={styles.nameWrap}>{postState?.content}</div>
      </div>
    </div>
  );
};

export default BoardDetailPage;

fetch 함수를 통해서 만들어놓은 api를 불러오고
로그인 한 유저의 아이디와 작성자 아이디가 일치하면 수정, 삭제 버튼이 보이도록 하였다.
하트를 누르면 검은색 하트로 바뀌면서 그 정보가 db에 저장되도록 할 예정

로그인한 유저와 작성자가 같지 않을 때

로그인한 유저와 작성자가 같을 때

3️⃣ 게시글 수정하기 (UPDATE)

1. update api 작성하기

export async function POST(request: Request, { params }: any) {
  const id = params.id;
  const { title, content, authorId } = await request.json(); // JSON 형식으로 파싱

  // 글 수정 로직 구현
  const updatedPost = await prisma.post.update({
    where: { id },
    data: {
      title,
      content,
      authorId,
    },
  });

  return NextResponse.json(updatedPost);

2. postForm 컴포넌트 수정

"use client";

const PostForm = ({ postId }: any) => {
 ...

  useEffect(() => {
    // postId가 존재하면 해당 글 데이터를 불러옴
    if (postId) {
      // postId를 사용하여 글 데이터를 불러오는 API 호출
      fetch(`/api/post/${postId}`)
        .then((response) => response.json())
        .then((postData) => {
          setTitle(postData.title);
          setContent(postData.content);
          // 작성자 식별자를 설정
          setAuthorId(postData.authorId);
        })
        .catch((error) => console.error("Error fetching post:", error));
    }
  }, [postId]);

  // 새 글 작성 및 수정 로직
  const handleSubmit = async (e: SyntheticEvent) => {
    e.preventDefault();

    // authorId가 null인 경우 처리
    if (authorId === null) {
      console.error("사용자 식별자가 없습니다. 사용자를 다시 로그인하세요.");
      return;
    }

    try {
      // postId가 있으면 글 수정, 없으면 새 글 작성
      const url = postId ? `/api/post/${postId}` : "/api/addpost";
      await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ title, content, authorId }),
      });
      alert("저장하시겠습니까?");
      router.push("/board");
      router.refresh();
    } catch (error) {
      console.log(error);
    }

    setTitle("");
    setContent("");
  };

  return (
    <div className={styles.formBox}>
      <h1 className={styles.formTitle}>
        {title ? "글 수정하기" : "글 작성하기"}
      </h1>

      <form onSubmit={handleSubmit} className={styles.form}>
        <div className={styles.inputBox}>
          <label htmlFor="title" className={styles.label}>
            제목
          </label>
          <input
            type="text"
            id="title"
            name="title"
            value={title}
            onChange={handleTitleChange}
            required
            className={styles.input}
          />
        </div>

        <div className={styles.textAreaBox}>
          <label htmlFor="content" className={styles.label}>
            내용
          </label>
          <textarea
            name="content"
            id="content"
            value={content}
            onChange={handleContentChange}
            required
            className={styles.textArea}
          />
        </div>

        <div className={styles.buttonBox}>
          <button type="submit" className={styles.saveBtn}>
            저장하기
          </button>
        </div>

        <div className={styles.buttonBox}>
          <p
            onClick={() => {
              alert(
                "작성 중인 내용은 저장되지 않습니다. 그래도 취소하시겠습니까?"
              );
              router.push("/board");
            }}
            className={styles.cancelTxt}
          >
            취소하기
          </p>
        </div>
      </form>
    </div>
  );
};

export default PostForm;

수정 잘 되는 것 확인!

4️⃣ 게시글 삭제하기 (DELETE)

1. delete api 작성하기

import prisma from "@/app/lib/prisma";
import { NextResponse } from "next/server";

export async function DELETE(request: Request, { params }: any) {
  const id = params.id;

  const post = await prisma.post.delete({
    where: { id },
  });

  return NextResponse.json(post);
}

2. 삭제 버튼 컴포넌트 작성

"use client";

import { useRouter } from "next/navigation";
import * as styles from "./index.css";

const DeletePostButton = ({ postId }: any) => {
  const router = useRouter();

  async function handleClick() {
    try {
      await fetch(`/api/post/${postId}`, {
        method: "DELETE",
      });

      router.refresh;
    } catch (e) {
      console.error(e);
    }
  }

  return (
    <span onClick={handleClick} className={styles.deleteBtn}>
      삭제
    </span>
  );
};

export default DeletePostButton;

asdfasdf 게시글이 삭제된 것을 볼 수 있다

이렇게 기본적인 CRUD도 끝!

이렇게 api까지 만들어 db 연결하고,, 처음이라 많이 헤맸지만 (typescript 오류까지 겹쳐서 더더,,) 풀로 다 만들어보니 전체적인 과정도 알 수 있어서 좋은 경험이었다!