인턴 기간중 3일차 회고.
일자 : 2023.09.27 (수)
- 오늘은 Nuxt.js 코드 실습을 계속해서 진행함.
- 백엔드 학습사항을 전달받음.
- Nest.js / typeORM / Bun + TypeScript
- 사내 CP 구축
- 요구사항 던져주고 조언만....
배운 것 ( Today I learned )
- 작성한 Markdown을 첨부함. [추후에]
https://github.com/kimYHgit/nuxt-practice
GitHub - kimYHgit/nuxt-practice
Contribute to kimYHgit/nuxt-practice development by creating an account on GitHub.
github.com
useFetch API를 이용한 데이터 가져오기
- https://nuxt.com/docs/getting-started/data-fetching#usefetch
- https://nuxt.com/docs/api/composables/use-fetch#usefetch
Nuxt에는 브라우저 또는 서버 환경에서 데이터 불러오기를 수행할 수 있는 두 가지 컴포저블과 내장 라이브러리인 useFetch, useAsyncData 및 $fetch가 포함되어 있다.
상품 목록을 구성할 데이터를 받아오는 API 서버는 다음을 활용한다.
https://fakestoreapi.com/
Fake Store API
Fake store rest api for your ecommerce or shopping website prototype
fakestoreapi.com
전체 상품의 정보를 나타내기
pages/products/index.vue
<template>
<div>
<div class="grid grid-cols-4 gap-5">
<div v-for="p in products">
<NuxtLink :to="`/products/${p.id}`">{{ p.title }}</NuxtLink>
</div>
</div>
</div>
</template>
<script setup>
definePageMeta({
layout: "products",
});
//fetch products data.
const { data: products } = await useFetch("https://fakestoreapi.com/products");
</script>
<style scoped></style>
특정 상품의 세부정보 페이지 만들기
- useFetch 함수를 활용해 특정 상품id에 대한 세부 정보 페이지를 구현
- useFetch 함수 옵션 객체에 key 속성을 부여해서 id값이 변할때마다 data Fetching 할수 있도록 함.
[id].vue
<template>
<div>
<p>{{ product.title }}</p>
<p>{{ product.price }}</p>
<p>{{ product.id }}</p>
</div>
</template>
<script setup>
const { id } = useRoute().params;
const url = "https://fakestoreapi.com/products/" + id;
//fetch the product
const { data: product } = await useFetch(url, { key: id });
definePageMeta({
layout: "products",
});
</script>
<style scoped></style>
사용자 정의 컴포넌트
- 루트 폴더에 components 폴더를 이용해서 사용자 정의 컴포넌트를 관리하고 컴포넌트를 재사용할수있다.
- import 구문없이 컴포넌트를 자동으로 인식함.
전체 상품 페이지 수정
- 디렉티브(v-for, :product)와 클래스(class)를 활용하여 제품 목록을 그리드 형식으로 표시함.
- Vue 컴포넌트 템플릿 코드를 다음과 같이 작성한다.
index.vue
<template>
<div>
<div class="grid grid-cols-4 gap-5">
<div v-for="p in products">
<ProductCard :product="p" />
</div>
</div>
</div>
</template>
1. `<div class="grid grid-cols-4 gap-5">`
- `grid` 클래스는 그리드 레이아웃을 정의
- `grid-cols-4` 클래스는 열의 수를 4로 지정.
- `gap-5` 클래스는 그리드 요소 사이의 간격
2. `<div v-for="p in products">`:
- `v-for` 디렉티브를 사용하여 반복 작업을 수행
- `products` 데이터 속성을 기반으로 반복 작업을 수행하며, 각 반복마다 변수 `p`에 할당.
3. `<ProductCard :product="p" />`
- 커스텀 컴포넌트인 `ProductCard`를 렌더링.
- `:product="p"` 부분은 `ProductCard` 컴포넌트에 `product`라는 속성을 전달
components/ProductCard.vue
컴포넌트 내에서 동적으로 바인딩된 제품 이미지와 제목을 표시하고,
"View Detail" 버튼을 클릭하면 해당 제품의 상세 정보 페이지로 이동
<template>
<div class="card text-center">
<img :src="product.image" alt="product thumb" class="thumb" />
<p class="font-bold text-garay-500 m-4 truncate">{{ product.title }}</p>
<NuxtLink :to="`/products/${product.id}`">
<p class="btn my-4">View Detail</p>
</NuxtLink>
</div>
</template>
<script setup>
const { product } = defineProps(["product"]);
</script>
<style scoped>
.thumb {
max-height: 120px;
max-width: 70%;
margin: 0 auto;
}
</style>
- Composition API를 사용
- 컴포넌트의 템플릿 부분과 `<script setup>` 영역
템플릿 부분 코드설명
1. `<div class="card text-center">`
- 제품 카드의 루트 엘리먼트로 사용되는 `<div>` 요소
- `card`와 `text-center` 클래스가 적용. 제품 카드 가운데 정렬.
2. `<img :src="product.image" alt="product thumb" class="thumb" />`
- 제품의 이미지
- `:src` 디렉티브를 사용하여 이미지의 `src` 속성을 `product.image` 값으로 동적으로 바인딩.
- 이미지의 대체 텍스트는 "product thumb"로 설정되며, `thumb` 클래스가 적용
3. `<p class="font-bold text-garay-500 m-4 truncate">{{ product.title }}</p>`
- 제품의 제목을 나타내는 `<p>` 요소.
- `font-bold`, `text-garay-500`, `m-4`, 그리고 `truncate` 클래스가 사용
- `{{ product.title }}` 템플릿 보간
4. `<NuxtLink :to="`/products/${product.id}`">`
- `NuxtLink` 컴포넌트를 사용하여 링크를 생성
- `:to` 디렉티브를 사용하여 동적으로 `product.id`를 기반으로 URL을 생성.
5. `<p class="btn my-4">View Detail</p>`
- `btn` 클래스가 버튼 스타일을 정의
- `my-4` 클래스가 위아래 여백을 설정.
script setup 부분 코드설명
- Composition API
- 컴포넌트의 데이터와 프로퍼티를 설정.
1. `const { product } = defineProps(["product"]);`
- 부모 컴포넌트로부터 `product` 프로퍼티를 전달받아 컴포넌트 내부에서 사용할 수 있도록 설정
css/tailwind.css
@layer components {
.btn {
@apply bg-[#12b488] text-white px-3 py-2 rounded-md text-sm text-white inline-block;
}
.card {
@apply p-3 rounded-md bg-white shadow-md h-full;
}
}
상세 페이지 수정
- 상세페이지의 화면구성을 사용자 정의 컴포넌트로 대체하여 변경한다.
components/ProductDetails.vue
<template>
<div class="card">
<div class="grid grid-cols-2 gap-10">
<div class="p-7">
<img :src="product.image" alt="product img" class="mx-auto my-7" />
</div>
<div class="p-7">
<h2 class="text-4xl my-7">{{ product.title }}</h2>
<p class="text-xl my-7">Price - ${{ product.price }}</p>
<h3 class="font-bold border-b-2 mb-4 pb-2">Product Description:</h3>
<p class="mb-7">{{ product.description }}</p>
</div>
</div>
</div>
</template>
<script setup>
const { product } = defineProps(["product"]);
</>
<style scoped>
img {
max-width: 400px;
}
</style>
template 부분을 수정한다.
pages\products\[id].vue
<template>
<div>
<ProductDetails :product="product" />
</div>
</template>
참고 - vue 디렉티브
- Nuxt.js에서 Vue.js의 디렉티브들을 사용할 수 있음.
- Vue.js 디렉티브는 HTML 요소에 속성(attribute) 형태로 추가되어
해당 요소의 동작을 제어하거나 데이터와 뷰를 바인딩할 때 사용됨.
- 화면에 데이터를 렌더링하고 사용자 상호작용을 처리
1. v-if / v-else-if / v-else
- 조건부 렌더링을 처리할 때 사용
- `v-if`는 주어진 조건이 `true`일 때 해당 요소를 렌더링
- `v-else-if` 및 `v-else`는 이전 조건이 `false`일 때 렌더링될 요소를 정의.
2. v-for
- 배열을 순회하며 여러 번 요소를 렌더링하는 데 사용
- 예를 들어, 반복문을 사용하여 목록을 생성하거나 데이터를 표시.
3. v-bind (단축표현 :)
- `v-bind` 또는 단축 표현 `:`은 요소의 속성과 Vue 인스턴스의 데이터를 연결.
- 예를 들어, `:src` 디렉티브를 사용하여 이미지의 `src` 속성을 동적으로 설정할 수 있음.
4. v-on (단축표현 @)
- `v-on` 또는 단축 표현 `@`은 이벤트 핸들러를 등록하고 HTML 요소의 이벤트를 Vue.js 메서드와 연결
- 클릭, 입력, 마우스 오버 및 기타 이벤트에 대한 핸들러를 정의할 수 있음.
5. v-model
- 양방향 데이터 바인딩을 제공
- 입력 요소의 값과 Vue 데이터 속성을 자동으로 동기화하므로 사용자의 입력을 Vue 데이터에 반영하고 반대로 Vue 데이터를 입력 요소에 반영할 수 있음.
6. v-show
- 요소를 숨기거나 보이게 하는 데 사용.
- `v-if`와 달리 요소는 항상 렌더링되며 CSS `display` 속성을 통해 숨김 또는 표시됨.
7. v-pre
- 해당 요소와 하위 요소에 대한 컴파일을 건너뛰도록 지시.
- 요소와 하위 요소를 Vue 인스턴스 초기화에서 제외하는 데 사용.
- 이는 성능 향상을 위해 사용되며, 요소의 내용은 Vue.js 템플릿 컴파일러에 의해 처리되지 않음.
8. v-cloak
- Vue 인스턴스가 초기화될 때까지 요소를 감추기 위해 사용
- 주로 CSS 스타일링과 함께 사용하여 초기화 시 화면에서 플래시되는 문제를 해결함.
회고 (restropective)
- Nuxt 3는 웹페이지 클론코딩으로 끝났고 기본적인 기능을 접해볼수 있었다.
- 백엔드 학습 분량이 갑자기 많아졌다... 공부 열심히 해야겠다.
etc...
너무 피곤해서 시간나면 나머지 부분 채워야겠다...
정처기 실기 언제 준비하지....
강의
https://nomadcoders.co/dashboard
typeORM
- https://fomaios.tistory.com/entry/Nodejs-TypeORM%EC%9D%B4%EB%9E%80-feat-Typescript-ORM-Library
- https://orkhan.gitbook.io/typeorm/README_ko
- https://docs.nestjs.com/recipes/sql-typeorm
- https://www.npmjs.com/package/typeorm
타입스크립트
https://product.kyobobook.co.kr/detail/S000208416779
https://www.typescriptlang.org/ko/docs/handbook/intro.html
Nest.js
https://product.kyobobook.co.kr/detail/S000200383301
Bun.js
Insight - 소프트웨어 아키텍처 및 패턴
코드를 컨트롤러, 서비스 및 비즈니스 로직으로 나누는 이유는????
- [신입 개발자들이 갖춰야할 능력( 책과 강의 추천 )] https://youngban.tistory.com/5
- https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000005406019
- https://ebook-product.kyobobook.co.kr/dig/epd/ebook/E000005295801
코드를 컨트롤러, 서비스 및 비즈니스 로직으로 나누는 이유는
- 코드의 구조와 유지 관리성을 향상시키기 위해입니다.
- 소프트웨어 품질을 향상시키는 데 도움이 됩니다.
- 표준화된 접근 방식을 사용하여 팀 간의 협업을 용이하게 합니다. 개발의 효율성을 높입니다.
이러한 아키텍처 패턴은 다음과 같은 이점을 제공합니다:
1. 모듈화
- 각 부분은 특정 역할을 수행하며, 모듈 간의 역할 및 책임이 명확하게 구분됩니다.
- 이로 인해 코드를 쉽게 이해하고 유지 보수할 수 있습니다.
2. 재사용성
- 서비스 및 비즈니스 로직 레이어에서 로직을 분리하면 동일한 로직을 여러 컨트롤러에서 재사용할 수 있습니다.
3. 확장성
- 새로운 기능이나 변경 사항을 추가할 때, 비즈니스 로직 레이어에서 변경을 가하면 다른 부분에 영향을 덜 미칩니다. 이것은 애플리케이션의 확장성을 향상시킵니다.
4. 테스트 용이성
- 각 계층은 단위 테스트하기에 용이하며, 모의 객체를 사용하여 테스트하기가 편리해집니다.
5. 보안
- 중요한 비즈니스 로직은 서버 측에 보관되므로 클라이언트에서 직접 액세스하지 못하도록 보안성이 높아집니다.
6. 협업
- 팀원 간 협업이 간소화되며, 각자 독립적으로 작업할 수 있으므로 개발 프로세스가 원활해집니다.
소프트웨어 아키텍처와 코드 구조를 설계하는 개념에 익숙하지 않다면, 다음 주제들을 학습하는 것이 도움이 될 것입니다
기본 개념을 습득하고 실습을 통해 경험을 쌓는 것이 중요합니다.
학습 과정을 단계적으로 진행하고 기본을 탄탄히 다지면서 더 복잡한 주제로 나아가면 됩니다.
1. 기본 프로그래밍
- 먼저 언어(예: Java, Python, C#)에 대한 기본 프로그래밍 지식을 습득하세요.
- 변수, 조건문, 반복문 등을 이해하고 실습해보세요.
2. 객체 지향 프로그래밍 (OOP)
- 객체 지향 개념을 이해하고, 클래스, 객체, 상속, 다형성 등의 개념을 학습하세요.
- 코드를 모듈화하고 재사용성을 높이는 데 도움이 됩니다.
3. 웹 개발 기초
- 웹 애플리케이션 개발에 대한 기본 이해를 얻으세요.
- HTML, CSS, JavaScript를 학습하고 웹 서버와 클라이언트의 상호 작용을 이해하세요.
4. MVC 패턴
- 모델-뷰-컨트롤러 (MVC) 아키텍처 패턴에 대한 이해가 중요합니다.
- 이 패턴은 코드를 컨트롤러, 모델, 뷰로 구분하는 데 도움이 됩니다.
5. 서버 프로그래밍
- 서버 측 프로그래밍에 대한 기초를 학습하고, RESTful API 디자인과 HTTP 프로토콜을 이해하세요.
6. 데이터베이스
- 데이터베이스 기초를 학습하고,
- SQL 쿼리 언어와 관계형 데이터베이스 관리 시스템(RDBMS)에 대한 이해를 높이세요.
7. 소프트웨어 아키텍처 및 패턴
- 소프트웨어 아키텍처의 기본 개념과 패턴에 대한 학습을 시작하세요.
- MVC, MVVM, REST 등의 패턴을 이해하고 어떤 상황에서 사용해야 하는지 파악하세요.
8. 프로젝트 경험
- 실제 프로젝트에 참여하거나 작은 프로젝트를 개발하여 이론을 실무에 적용해보세요.
9. 온라인 강의 및 자습서
- 인터넷에 소프트웨어 개발에 관한 다양한 무료 및 유료 학습 리소스가 많이 있으니 이용하세요.
각 주제에 대한 상세 설명
객체 지향 프로그래밍 (OOP)
객체
- 객체는 현실 세계의 실체를 모델링한 소프트웨어 개체입니다.
- 예를 들어, 자동차, 고객, 주문과 같은 것들이 객체가 될 수 있습니다.
클래스
- 객체를 생성하기 위한 템플릿 또는 설계도입니다.
- 객체의 공통된 특성과 동작을 정의합니다.
- 예를 들어, 자동차 클래스에는 속성(색상, 모델)과 메서드(주행, 정지)가 정의됩니다.
상속
- 클래스 간의 관계를 나타냅니다.
- 하위 클래스(파생 클래스)가 상위 클래스(기본 클래스)의 특성을 상속받아 재사용할 수 있게 해줍니다.
- 코드 재사용성을 높입니다.
다형성
- 같은 이름의 메서드나 연산자를 서로 다른 방식으로 동작하게 하는 개념입니다.
- 객체가 다양한 상황에서 다르게 작동할 수 있음을 의미합니다.
캡슐화
- 데이터와 해당 데이터를 처리하는 메서드를 하나로 묶는 것을 의미합니다.
- 데이터에 직접 액세스하는 것을 방지하고 데이터 무결성을 보호할 수 있습니다.
MVC 패턴 (모델-뷰-컨트롤러)
MVC 패턴은 소프트웨어를 구조화하고 관리하기 위한 패턴으로,
애플리케이션의 유지보수성을 향상시키고 코드의 재사용성을 높입니다.
모델
- 응용 프로그램의 데이터와 비즈니스 로직을 나타냅니다.
- 데이터베이스와의 상호 작용을 처리하고, 데이터를 관리하며 비즈니스 로직을 수행합니다.
뷰
- 사용자 인터페이스를 나타냅니다.
- 사용자가 보는 화면을 생성하고 데이터를 표시하는 역할을 합니다.
- 모델의 변경 사항을 반영하고 사용자 입력을 모델로 전달합니다.
컨트롤러
- 모델과 뷰 간의 중개자 역할을 합니다.
- 사용자 입력을 받아 모델을 업데이트하거나 모델로부터 데이터를 가져와 뷰에 표시합니다.
- 응용 프로그램의 흐름을 제어합니다.
소프트웨어 아키텍처 및 패턴
아키텍처
- 시스템의 구조와 구성요소 간의 상호 작용을 설계하는 것을 의미합니다.
- 시스템의 성능, 확장성 및 유지보수성에 큰 영향을 미칩니다.
소프트웨어 패턴
- 소프트웨어 개발에서 자주 발생하는 문제에 대한 일반적인 해결책입니다.
- 예를 들어, MVC, MVVM, 싱글톤, 팩토리 메서드 패턴 등이 있으며,
- 이러한 패턴을 사용하면 일반적인 문제에 대한 검증된 해결책을 활용할 수 있습니다.
