Frontend on jaylab-log

[Nuxt] How to build a static website

Mon, 22 Jan 2024 00:00:00 +0000

Nuxt Framework 애플리케이션을 배포하기 위해 알아야할 기본적인 커맨드

Errors when changing the "nvm" version

Mon, 15 Jan 2024 00:00:00 +0000

nvm -v 실행시 발생했던 에러에 대한 조치방법

[Nx] Monorepo structure design

Wed, 10 Jan 2024 00:00:00 +0000

하나의 repository가 있다. 이 저장소의 코드는 A라는 기존 템플릿 코드에 B 템플릿 코드를 합친 형태다. 하나의 도메인 안에서 A와 B 화면이 유기적으로 사용되어야했고, A와 B에 각각에 있는 스타일이나 기능 코드를 쉽게 가져다 쓰기 위해 이렇게 병합된 형태가 되었다. 그런데 애플리케이션의 사이즈가 커지면서 점점 패키지 충돌이 발생하게 되었다. 그래서 처음부터 다시 설계하여 분리하는것이 적절하다고 판단했고, 이 때 Monolithic Repository 구조를 적용하게되었다.

[Nuxt3] HTML to PDF

Tue, 12 Dec 2023 00:00:00 +0000

Nuxt3에서 HTML 내용 일부를 PDF 파일로 추출하는 방법

📌 기능구현에 사용된 패키지 : “html2pdf”

패키지 설치

npm install --save html2pdf.js

위 명령을 입력하면 package.json 파일의 dependencies 안에 "html2pdf.js": "^0.10.1", 한줄 추가된 것을 확인할 수 있다.

HTML to PDF Code

PDF로 다운로드하고자 하는 특정 HTML 요소의 id를 html-to-pdf 라고 가정

// PDF 다운로드 버튼 추가 예시
<button type="button" @click="generatePdf"> PDF Download</button>

PDF 다운로드 기능 js

<script setup lang="ts">
import html2pdf from "html2pdf.js"

const generatePdf = () => {
 let element = document.getElementById('html-to-pdf');
 let opt = {
 margin: 0,
 filename: 'myfile.pdf',
 image: { type: 'jpeg', quality: 0.98 },
 html2canvas: { scale: 2 },
 jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
 };

 // New Promise-based usage:
 html2pdf().set(opt).from(element).save();
}
</script>

[Nuxt3] Layout 설정 및 동적 변경

Tue, 31 Oct 2023 00:00:00 +0000

Nuxt3에서는 vue 파일에 특별한 설정이 없다면 해당 페이지의 레이아웃은 “default” 레이아웃으로 설정된다.

default 레이아웃 예시

<template>
 <div>
 <slot />
 </div>
</template>

실무에서 사용중인 레이아웃 예시

~/layouts/ 경로에 default.vue 파일을 추가하여 설정할 수 있다.

<template>
 <div id="page" class="page font--jakarta">
 <HeaderLayout1 />
 <slot />
 <FooterLayout1 />
 </div>
</template>

*default.vue *

※ 참고

slot 태그는 페이지를 렌더링하는 특수한 태그
해당 태그가 존재하지 않을 경우, 이상 동작할 수 있으므로 반드시 포함 필요
단, 페이지 영역을 숨겨할 경우는 v-show 등을 사용하여 제어해야 하며, v-show는 반드시 slot이 아닌 상위 Element에 위치해야 한다

[Nuxt3] $fetch 함수에 대하여(feat. 일반적인 fetch와의 차이)

Mon, 23 Oct 2023 00:00:00 +0000

우선 fetch와 $fetch를 사용한 각각의 예시코드부터 확인해보자.

fetch 사용 예시

import { useAsyncData } from 'nuxt3'

export default {
 setup() {
 const { data, pending, error, refresh } = useAsyncData('user', () =>
 fetch('http://localhost:8080/api/user/1')
 .then(response => response.json())
 )

 return { data, pending, error, refresh }
 }
}

$fetch 사용 예시

const { data, pending, error, refresh } = await useAsyncData(
 'mountains', // key
 () => $fetch('https://api.nuxtjs.dev/mountains')
)

fetch, $fetch 차이점

위의 코드를 살펴보면 둘 다 useAsyncData의 두 번째 매개변수로 함수를 전달하고 있다. 이 함수는 데이터를 가져오는 데 필요한 비동기 작업을 수행하며, 이 함수가 반환하는 Promise의 결과값이 useAsyncData의 data로 설정된다.

이 중 첫 번째 코드는 fetch 함수를 직접 사용하여 HTTP 요청을 보낸 후 .then 메서드를 사용하여 응답을 처리하는 내용이다. 그리고 응답값을 JSON 형식으로 파싱하기 위해 response.json()을 직접 호출하고있다. response.json()은 Fetch API에서 제공하는 메서드로, 응답값을 JSON 형식으로 파싱한다. 두 번째 코드에서 $fetch를 사용하면 이 메서드가 자동으로 적용된다. $fetch는 내부적으로 fetch를 사용하되, 추가적인 처리를 수행한다. 그 중 하나가 바로 응답을 자동으로 JSON 형식으로 파싱하는것이기 때문에 $fetch를 사용하면 response.json()을 호출하지 않아도 된다.

[Nuxt3] useFetch, useAsyncData의 차이

Thu, 12 Oct 2023 00:00:00 +0000

Nuxt3에서는 useAsyncData와 useFetch라는 훅을 지원한다. 이 둘은 코드 구성 형태가 비슷하기 때문에 차이점은 무엇인지 정리해보았다.

useFetch

useFetch는 created 단계 이후에 실행 (즉 ,새로운 Vue 인스턴스가 만들어진 후 데이터가 준비된 후에 실행)
이렇게 하면 useFetch가 실행되는 시점에는 컴포넌트의 데이터가 이미 준비되어 있으므로, 이 데이터를 기반으로 서버로부터 필요한 데이터를 요청하거나 필요한 작업을 수행할 수 있다. 이는 비동기적으로 데이터를 처리하는 웹 애플리케이션에서 매우 중요한 부분

useAsyncData

useAsyncData는 created 단계 이전에 즉, 첫 렌더링이 시작되기 전에 실행

[JS] input box 사용자 편의성에 대한 고민

Tue, 01 Aug 2023 00:00:00 +0000

Thinking about user usability for ‘input box’

[JS] document.cookie 사용 이슈 및 해결 방법

Fri, 21 Jul 2023 00:00:00 +0000

document.cookie

들어가며

Frontend에서 Cookie를 다룰 때, 일반적으로 javascript의 document.cookie 를 통해 get, set, delete 할 수 있다. 이러한 cookie는 같은 브라우저 내에서 값을 저장, 전달, 공유할 수 있다는 점에서 유용하게 사용된다. 현재 투입되어있는 프로젝트에서도 document.cookie로 쿠키가 관리되고있으며, 다음과 같은 용도로 사용되고있다.

다른 화면으로 파라미터를 넘기기 위해
뒤로가기 시 이전의 검색조건 값을 다시 불러오기 위해
window.open 을 통한 팝업 창에서 부모 창으로 값을 전달하기 위해

문제점

이러한 document.cookie를 단순하게 사용하기에는 한 가지 문제가 있었다. 사용자가 목록페이지에서 “각기 다른 여러 글”을 Ctrl을 누른채 클릭하여 새로운 탭으로 띄울때, 그리고 이 과정이 짧은 시간에 이루어질때 몇가지 문제가 발생했다. A, B, C 글을 짧은시간에 ‘거의’ 동시에 띄울경우 A, B, C 글에 대한 각각의 탭이 열리는게 아닌, C의 글만 3개가 띄워진 것. 이는 A탭이 열린 직 후 A에 대한 파라미터를 담은 쿠키를 조회하기 전, C에 대한 쿠키로 덮어쓰기되어 발생된 현상이었다.