웹 컴포넌트 스타일링 관리 (CSS-in-HTML, CSS-in-CSS, CSS-in-JS) 웹 개발에서 CSS를 적용하는 방식은 프로젝트의 구조와 요구 사항에 따라 다양하게 선택할 수 있으며, 주요 스타일링 접근 방식으로는 CSS-in-HTML, CSS-in-CSS, CSS-in-JS가 있다. CSS-in-HTML인라인 스타일링을 말하며, HTML 요소에 style 속성을 사용해서 해당 요소에 직접 스타일을 적용하는 방식이다.소규모의 간단한 스타일을 적용할때 사용할 수 있으며, 해당 요소에만 영향을 준다.별도의 css 파일이 필요없다. 하지만 html 태그와 style 코드가 혼재되어 유지보수가 어려우며 재사용이 안되기 때문에 동일 스타일을 여러 요소에 적용하기 위해 중복코드가 발생할 수 있다. ..
별점 컴포넌트를 만들어보자
react(nextjs), tailwind를 통해 별점 컴포넌트를 만들어보자. 준비물로는 5점짜리 별 5개가 이어진 이미지 2장이 필요한데, 별이 채워진 이미지와 별이 채워지지않은 이미지가 필요하다. (하나의 별만 있다면 크기를 지정하고 반복해서 배경이미지를 repeat 시키면 될 듯하다.) 그 이유는 마우스가 호버될때, 아래 영상과 같이 마우스 커서에 따라 채워진 이미지를 보여주기 위함이다. 컴포넌트 코드'use client';import clsx from 'clsx';import React, { useState } from 'react';interface Props { value?: number; onChange?: (radio: number) => void; width?: num..
this.$router.push(동일path)일 경우 에러가 나고 새로 고침을 하자니 SPA페이지에서 낭비인 것 같기도 해서 어떤 방식을 써야하나? 고민을 하다가 찾은 방식. (기록을 위한 작성) 검색하다가 알게된 블로그에서 3가지 방식을 알려주고 있었다. v-if 방식, forceUpdate 방식, 그리고 key를 통한 방식. 가장 추천하는 방식으로 (vue가 원하는..?) 진행했다. 레이아웃 단계에서 진행. base-header 컴포넌트에 gnb가 있으며 nuxt 컴포넌트는 페이지이다. // BaseLayout.vue // base-header.vue {{nav.name}} // .... * 출처: 3가지 방식을 안내해줌 https://michaelnthiessen.com/force-re-render/
vue.js 기초- 인스타그램 만들어보기 07_slot (코딩애플 세미나 후기)
에 대해 배워보겠습니다. 저는 강의를 들으면서 slot에 대해 처음알게되었습니다. slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다. 그리고 을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다. 컴포넌트를 사용할때 로 사용하고는 했는데, 가끔 강의를 보면 로 사용하고는 하는 사람들을 봤습니다. 은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다. 문법 child parent 여기에 HTML을 넣으면 slot 안에 표현된다 을 vue파일에 추가합니다. App.vue App.vue 파일에서 태그 사이에 타이틀을 삽입해보겠습니다. Editor.vue 을 사용해줍니다. 아래와 같이 확인이 됩니다. 정상적으..