Vue Slot 사용법

Slot 이란? Vue에는 Slot이라는 기능이 있습니다. 부모컴포넌트에서 자식 컴포넌트로 temlplate을 전달할 수 있는 기능입니다. Props를 이용해서 데이터를 전달할 수 있지만, template은 전달할 수 없고, Props 만을 이용해서 각각의 template를 전달하려면 코드가 복잡하고 알아보기 어렵게 됩니다. Slot를 이용하면 공통적인 template를 직관적으로 사용할 수 있습니다. Slot 사용법 Content BaseCard 내부에 작성한 Content 가 slot 태그 내부에 들어가게 됩니다. named Slot 사용법 두개의 template를 사용하고 싶을 때가 있습니다. 아래와 같은 방법으로 사용할 수 있습니다. Header Content header 가 들어갈 곳에는 slo..

• format_list_bulleted Develop/Vue
• · 2024. 3. 30.
• textsms

React Query - 비동기 상태 관리 라이브러리 알아보기

React Query란? React Query는 비동기 상태 관리 라이브러리입니다. React에서 서버의 데이터 fetch를 도와주고 관리할 수 있는 라이브러리입니다. React Query 장점 1. 적은 보일러 플레이트 코드 2. 캐싱 3. 중복 요청 방지 4. 오래된 데이터 업데이트 5. 로딩, 에러, 데이터 결과 처리가 쉽습니다. useQuery를 이용해서 직관적으로 사용할 수 있고, 보일러플레이트 코드 작아서 사용하기 간편합니다. 또, 캐시를 이용해서 데이터를 가지고 있어서 성능이 우수하고, 로딩 및 에러 처리 하기가 쉽습니다. 첫 번째 API 호출 시에 데이터를 캐시에 가지고 있습니다. 두 번째 동일한 API 호출 시 캐시에 가지고 있는 데이터를 즉시 반환합니다. 그 이후 다시 데이터를 조회한 ..

• format_list_bulleted Develop/React
• · 2023. 11. 7.
• textsms

Tailwind 설치 방법 사용법 장단점 CSS와 비교

Tailwind 란? Tailwind는 CSS를 HTML 코드에서 class이름으로 이용하여 스타일을 생성하고 작성합니다 클릭하세요 장점 생산성 최적화 HTML과 CSS 파일을 두 개를 열어놓고 작업하지 않아도 돼서 작업 속도가 빠르고, 다양한 에디터에서 자동완성 기능을 제공합니다. 또 CSS 파일 크기가 감소하여, 로딩 속도 향상에도 도움을 줍니다. CSS 파일을 만들게 되면, 스타일을 주기 위해 클래스 이름을 뭐로 할까 고민을 하게 되는데, 그런 시간도 줄일 수 있습니다. 단점 예쁘지 않은 코드 스타일 많게 되면, 코드가 길어지게 되고, 예쁘지 않게 되고 이해하기 어렵습니다. 타이틀 내용 확인 클래스명 학습 런닝 커브 처음 사용하게 되면, 클래스명을 외워서 사용해야 하는데, 조금 공부가 필요합니다 초..

• format_list_bulleted Develop/CSS
• · 2023. 10. 17.
• textsms

Nuxt modules / buildModules 란? 사용법

Nuxt 에서 modules와 buildModules 속성이 있습니다. modules Nuxt에서 모든 기능을 제공하면 매우 복잡하고 어려워서, 사용자가 프로젝트별로 모듈을 추가 할 수 있습니다. modules에서 정의한 모듈은 Nuxt가 부팅될때 순차적으로 실행이 됩니다. nuxt.config.js 에서 modules 옵션을 설정할 수 있습니다. export default defineNuxtConfig({ modules: [ // Simple usage '@nuxtjs/eslint-module', // With options ['@nuxtjs/eslint-module', { /* module options */ }] ] }) buildModules nuxt v2.9 이후로 buildModules 속성이..

• format_list_bulleted Develop/Nuxt
• · 2023. 7. 6.
• textsms

Vue Mixin(믹스인) 사용법과 장단점

Minxin 란? Mixins는 Vue 컴포넌트에서 코드를 재사용할 수 있는 방법입니다. 언제 사용하면 좋을까? Vue 컴포넌트에서 HTML과 Style은 재사용이 가능합니다. 컴포넌트가 비슷한 로직을 가지고 있으면 Mixins를 사용하는 것이 좋습니다. 예를 들면, 회원 정보 List를 조회하는 컴포넌트(UserList)와 프로젝트 List를 조회하는 컴포넌트(ProjectList)가 있으면 컴포넌트 초기화 이후 데이터를 조회하고, List 컴포넌트를 만드는 로직이 비슷하다면 Mixins을 통해서 코드를 재사용하고, 중복 소스를 제거할 수 있습니다. 사용법 mixins 폴더를 생성하고 listMixin.js 파일을 생성합니다. listMixin.js export default { data(): { re..

• format_list_bulleted Develop/Vue
• · 2023. 6. 28.
• textsms

Vue Watch 속성 사용 언제 사용하는 것이 좋을까?

Vue에서 감시자(Watch) 속성이 있습니다. Vue watch 란? watch 속성은 데이터를 감시하고 있고, 데이터가 변경이 될 때, 정의된 함수를 실행합니다. watch 사용방법 data의 정의한 message를 watch 속성 안에 넣고 함수를 작성합니다. message 데이터가 변경이 되면 정의한 함수가 실행됩니다. Composition API const message = ref('Hello, Vue!'); watch(message, function(newValue, oldValue) { console.log('message 변경됨:', newVal, oldVal); }); Options API new Vue({ data: { message: 'Hello, Vue!' }, watch: { me..

• format_list_bulleted Develop/Vue
• · 2023. 5. 10.
• textsms

Vue Computed란? 사용 해야 하는 이유

Vue에서 동적 값을 출력하는 핵심 기능인 computed 가 있습니다. computed를 이용하면 좀 더 간편하게 데이터를 출력시킬 수 있고, 성능을 향상할 수 있습니다. Computed는 언제 사용해야 하는가? {{ price + '원' }} 위와 같이 price 값 뒤에 원이라는 단위를 붙여야 된다면 template에서 넣어 줄 수 있습니다. 하지만 이렇게 하게 된다면, 문제점이 있습니다. 복잡한 연산의 경우 알아보기 어렵습니다. 매번 컴포넌트가 렌더링 될 때마다 실행됩니다. computed 기능을 사용하여 연산하게 되면 해당 연산이 따로 분리되기 때문에 유지보수에 좋고, 알아보기 쉽습니다. price라는 값의 의존성을 가지게 되며 price 값이 변경될 때만 연산을 진행합니다. price 값이 변..

• format_list_bulleted Develop/Vue
• · 2023. 5. 8.
• textsms

nvm 설치 방법 자주 사용하는 명령어 사용법 mac, window

프론트엔드 개발할 때 필수적으로 설치해야 하는 프로그램이 node.js 파일입니다. Node.js 파일의 버전을 관리해주는 파일이 nvm 프로그램에 대해서 설명하고 설치 방법과 자주 사용하는 명령어 사용법에 대해서 소개해드리도록 하겠습니다. nvm이란? Node.js Version Manager 노드 버전 매니저 입니다. Node.js 파일을 특정 버전을 다운로드할 수 도 있지만 다양한 프로젝트가 진행 중일때, 매번 프로젝트에 맞는 버전을 삭제하고 설치하기 번거로우므로 사용하는 버전들을 다운 받고 원하는 버전을 쉽게 변경하여 사용할 수 있습니다. 설치방법 맥 https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating GitHub - ..

• format_list_bulleted Develop
• · 2023. 4. 17.
• textsms

React - 복잡하고 다양한 state 변경에 사용하는 Hooks useReducer

useReducer 리액트 훅 useRedcuer입니다. useState와 같이 useRedcuer는 상태를 업데이트할 때 사용됩니다. useRedcuer 언제 사용하는 것이 좋을까요? 다양한 state를 이용하거나, 복잡할때 다른 state 기반으로 state를 업데이트 할때 useReducer 사용법 const [state, dispatch] = useReducer(reducer, initialArg, init?) reducer 컴포넌트 외부에서 state 관리할 reducer 함수 initialArg state 초기 값입니다. init 초기 상태를 반환하는 함수입니다. 1. 컴포넌트 내에 useReducer 선언 const [state, dispatch] = React.useReducer(reduc..

• format_list_bulleted Develop/React
• · 2023. 4. 6.
• textsms