분류 전체보기

Nuxt 3에서는 클라이언트와 서버 환경 모두에서 데이터를 가져오는 다양한 방식($fetch, useFetch, useAsyncData)을 제공합니다. 그런데 왜 같은 목적을 위한 것처럼 보이는 이 세 가지 도구가 필요할까요? Nuxt 3를 처음 접하는 개발자라면 어떤 것을 선택해야 할지 고민하게 될 수 있습니다. 이 게시글은 이러한 헷갈림을 해소하는 데 큰 도움이 될 것입니다. 데이터 호출 시 각 도구가 특정 상황에서 효율성과 유연성을 제공하는지를 이해하는 것이 중요합니다. 이를 통해 더욱 효율적이고 성능이 뛰어난 애플리케이션을 개발할 수 있습니다. 각 방법을 더 자세히 살펴보기에 앞서, 세 가지 메소드를 간단히 요약하자면 다음과 같습니다:$fetch: 네트워크 요청을 수행하는 가장 기본적인 방법으로,..

요즘 프론트엔드 개발에 Next.js나 Nuxt.js와 같은 서버 사이드 렌더링(SSR)을 제공하는 프레임워크들이 널리 사용되고 있습니다. 이번 포스팅에서는 Nuxt.js에서 지원하는 다양한 렌더링 방식인 CSR, SSR, SSG, ISR 방식과 Nuxt.js에서 어떻게 렌더링 기법을 활용하는지에 대해 정리해봤습니다. CSR(Client-Side Rendering)CSR은 말 그대로 클라이언트 측에서 렌더링이 이루어지는 방식입니다. 서버는 초기 페이지를 렌더링한 후 클라이언트에 전달하고, 이후 클라이언트가 서버에 요청할 때마다 필요한 리소스를 받아와서 해석하고 렌더링합니다. 초기 렌더링 시에는 빈 HTML을 받고, 이후 라이브러리와 함께 작성된 JavaScript 코드를 다운로드하여 애플리케이션을 구동하..

최근에 기업 홈페이지를 구축하는 프로젝트를 진행했었다. 해당 프로젝트에서 나는 CRM과 더불어 Editor.js를 활용한 블로그 관련 기능을 주로 개발했다.프로젝트 1차 완성 기간이 끝나고 유지보수 기간으로 들어가게 됐는데, 앞으로 나올 유지보수 주요 사항들이 내가 작업했던 기능들의 고도화와 더불어 프론트단의 일부 수정으로 예정되었다. 따라서 유지보수 업무를 내가 도맡아 진행하게 되었다.1차 프로젝트 기간과 다르게, 유지보수 업무를 진행함에 있어 CI/CD와 더불어 Test Bed 환경을 구축하여 유지보수 프로세스를 강화하기로 결정했다. 우선 기존에 프로젝트를 진행했던 방식을 살펴보면, 아래와 같은 프로세스로 배포를 진행했다. front / back 레포가 존재하는 상태. 변경 사항을 master 브랜치..

#해시 태그 기능은 게시물을 구현할 때 거의 빠지지 않고 사용되는 기능이라고 할 수 있다. 태그를 구현하는 방법에는 여러가지가 있지만, 위의 GIF와 같이 동적으로 태그를 생성하는 디자인이 가장 많이 사용된다고 할 수 있다. 티스토리에서도, Velog에서도 이와 같은 방식으로 해시 태그 기능을 제공하고 있다. 내가 진행하고 있는 프로젝트에서도 아래의 요구 사항을 충족하는 태그 기능을 구현해야했다. #을 입력하고 스페이스바를 누르면 태그를 생성 (최대 5개까지만 입력 가능) 생성된 태그를 눌렀을 때 & 입력이 없는 상태에서 Backspace를 눌렀을 때 태그 삭제 드래그 앤 드롭으로 순서 변경 가능하도록 1. #을 입력하고 스페이스바를 누르면 태그 생성 태그의 목록들을 보여주기 위한 template 코드는..

vue에서 제공하는 v-model은 input, textarea, select 등의 구성요소에서 양방향 바인딩을 구현하는 데 사용될 수 있다. v-model 속성은 v-bind와 v-on의 기능의 조합으로 동작한다. v-bind : 뷰 인스턴스의 데이터 속성을 해당 HTML 요소에 연결할 때 사용 v-on : 속성은 해당 HTML 요소의 이벤트를 뷰 인스턴스의 로직과 연결할 때 사용 사용자 이벤트에 의해 실행된 뷰 메서드(methods) 함수의 첫 번째 인자에는 해당 이벤트(event)가 들어온다 HTML 입력 요소의 종류에 따라 v-model 속성이 각각 다음과 같이 구성된다 input 태그에는 value / input checkbox 태그에는 checked / change select 태그에는 val..

웹 UI, UX개발을 하다보면 scroll event 및 특정 Element의 위치는 거의 무조건 다루게 된다. 때문에 JavaScript에서 Scroll event를 이해하고, Element의 위치에 따라 특정 로직을 매끄럽게 수행하도록 하는 것은 웹 개발에서 중요한 부분 중 하나이다. 내가 구현하고자 하는 부분은 DOM을 활용하여 아래 GIF와 같이 스크롤 시에 해당 id가 나타나게 되면 목차에 하이라이팅을 하는 것이다. 우선 해당 기능을 구현하기 위해 알아야할 것이 어떤 정보들이 있을까? 수직 스크롤바 위치 목차에 해당하는 elements 요소들의 Y축 위치 값 즉, 수직 스크롤바 위치 = elements 요소들의 Y축 위치 값 — 80 다음과 같은 조건으로 해당 기능을 구현하도록 로직을 구성했다...