분류 전체보기 279

티스토리 자체 광고 도입 2일차 후기

2023년 06월 27일부터 개별 티스토리 본문 내에 티스토리 자체 광고가 신설되었습니다. 말이 좋아 자체 광고 신설이지 시작 전부터 말이 많았는데 시작되고 나서는 이런저런 문제까지 생겨버려 기념으로(?) 관련 글이나 한번 남겨봅니다. 이 블로그는 아직 개인적인 의견이나 잡다한 이야기는 잘 안적는 편이었고, 어지간하면 그러려니 하고 넘어갈텐데 이렇게 글까지 적는 건 내가 이리도 좋아하던 티스토리가 운영을 어지간히도 그지같이 해대고 있는 모습을 보아하니 답답해서입니다. 어떤 점이 문제인가? ① 남들이 모르게 공지를 하기 시작 자기들도 뻔히 욕먹을 짓이라는 걸 알고 있다는 듯이, 처음부터 당당하게 행동하지를 못했습니다. 운영 정책 사항이면 매우 중요한 것일 텐데도, 티스토리 공식 공지 페이지의 메인화면 어디..

요소 비활성화를 위한 강력한 도구 inert

HTML은 웹 페이지의 구조와 상호작용을 정의하는 강력한 도구입니다. 이 중에서도 inert 속성은 요소를 비활성화하여 상호작용을 제한하는 데 사용되는 중요한 속성입니다. inert? inert 속성은 요소와 해당 자식 요소들의 동작을 비활성화하는 기능을 제공합니다. 이 속성을 사용하면 요소와 그 자식 요소들은 마우스 이벤트, 키보드 이벤트, 포커스 등의 상호작용을 받지 않게 됩니다. 이를 통해 사용자의 상호작용을 제한하고, 특정 부분에 집중하거나 모달 창과 같은 팝업 요소를 표시할 때 유용하게 활용할 수 있습니다. inert 속성 사용 방법 inert 속성은 HTML 요소에 다음과 같이 추가할 수 있습니다: 위의 예시에서 div 요소와 그 안의 모든 자식 요소들은 비활성화됩니다. 요소에 inert 속성..

Asustor NAS에서 Vue.js 앱 호스팅: 서버 측 라우팅 설정하는 방법

Asustor NAS를 웹 서버로 사용하고 있다면, Vue.js 앱을 호스팅하여 사용자에게 제공할 수 있습니다. 그러나 Vue.js 앱은 클라이언트 측에서 라우팅을 처리하기 때문에, 서버 측에서도 라우팅을 지원해야 합니다. 일반적으로 웹 서버는 요청된 경로에 해당하는 파일이나 디렉토리를 반환하는데, Vue.js 앱의 클라이언트 측 라우팅과 웹 서버의 동작이 일치하지 않아서 문제가 발생할 수 있습니다 예를들면, 메인 페이지를 거치지 않고 app.myasustor.com/switch와 같은 하위 경로로 직접 접근하는 경우 웹 서버는 해당 경로를 찾지 못하고 "페이지를 찾을 수 없음"과 같은 오류를 반환합니다. 이 문제를 해결하기 위해서는 서버 측에서도 라우팅 설정을 추가하여 모든 경로를 Vue.js 앱으로 ..

자동 커밋 메시지 생성을 위한 aicommits

매번 commit 메시지를 뭘 적어야할지 망설이는 그대들을 위한 Open AI 사용법. aicommits aicommits는 AI로 git 커밋 메시지를 작성하는 CLI 입니다. 사용 방법은 공식 페이지를 통해 그대로 따라만 해도 되지만, 조금 더 간단히 정리해 보았습니다. 필요한 것 ① OpenAI의 API keys를 사용하기때문에 공식 페이지에서 API Keys를 발급 받을 필요가 있습니다. API 키 발급은 이곳에서 > ② 이전에는 무료로 사용 가능했지만, 2023.04.01 이후라면 지불 방법에 대한 설정이 필요합니다. Billing 페이지에서 신용카드를 등록해서 결제가 가능하도록 할 필요가 있습니다. ※ 저의 경험으로 판단해보자면 AI를 이용한 commit 1회당 약 $0.005048 정도 사용..

BEM - 클래스 이름을 작성하는 네이밍 방법론

# BEM이란? BEM은 Block, Element, Modifier의 약자로, HTML과 CSS를 작성하는 데 사용되는 네이밍 방법론입니다. BEM은 페이지의 컴포넌트를 작은 블록(Block)으로 나눈 다음 각 블록(Block)에 속하는 요소(Element)와 요소(Element)의 변형(Modifier)을 식별하기 위해 특별한 클래스 이름을 사용합니다. Block(블록): 독립적으로 존재하는 페이지 컴포넌트의 이름입니다. 블록(Block)은 기능적으로 독립적이며 다른 블록(Block)과 관련이 없습니다. 예를 들어, "header", "menu", "button" 등이 블록(Block)에 해당합니다. Element(요소): 블록(Block) 내부에 존재하며 블록(Block)의 일부를 나타냅니다. 요소..

가볍게 훑어보는 Vue 3

#1. Vue 소개 • Vue 3란 무엇인가? • Vue 3의 특징과 장점 #2. Vue 3 설치 및 설정 ▷ 프로젝트와 파일의 구조와 형식 #3. Vue 3 기본 문법 • Template 문법 ▷ 컴포넌트 단위로 스타일 적용하기 • 디렉티브(Directive) ▷ 데이터 바인딩하는 방법 ▷ 반복문(v-for) 사용하는 방법 ▷ 이벤트 핸들링(v-on) ▷ 조건식 v-if, v-show • 컴포넌트(Component) ▷ 새로운 컴포넌트를 생성하고 추가하는 방법 ▷ 데이터를 전달할 때는 props ▷ 사용자 지정 이벤트(Custom Event) ▷ 데이터를 전달하는 또 다른 방법 Slot • 라우터(Router) ▷ 페이지 전환하기 (라우터 설치부터 사용까지) ▷ 게시물마다 번호를 달아주자 (라우터 파라..

#7. Vue 3 스타일 가이드

# 스타일 가이드란? 스타일 가이드는 코드를 작성하는 방법과 규칙을 정해놓은 문서입니다. 스타일 가이드를 사용하면 다음과 같은 장점을 얻을 수 있습니다. 일관성 유지: 스타일 가이드는 모든 개발자가 동일한 코드 스타일을 따르도록 강제합니다. 이렇게 하면 코드가 일관성 있게 유지되므로 읽기 쉬워집니다. 버그 감소: 일관성 있는 코드 스타일을 따르면 실수를 줄일 수 있습니다. 예를 들어, 잘못된 인덴트, 괄호 누락 등의 문제가 발생할 가능성이 줄어듭니다. 코드 유지보수성 향상: 스타일 가이드는 코드를 더 읽기 쉽고 이해하기 쉽도록 만듭니다. 따라서 코드의 유지보수성이 향상되고 변경이 쉬워집니다. 코드 리뷰 용이: 스타일 가이드는 코드 리뷰를 용이하게 만듭니다. 코드가 일관성 있게 작성되면 리뷰어가 코드를 더..

Apple WWDC23 요약

Apple WWDC(WorldWide Developers Conference) Apple이 매년 6월경 캘리포니아에서 개최하는 대규모 개발자 회의. WWDC23 - Code new worlds. 멋진 코딩 신세계. 15형 MacBook Air with M2 15.3" 리퀴드 레티나 디스플레이 (최대 밝기 500 nits) M2 프로세서 4가지 색상 / 맥세이프 충전 포트 두께: 11.5mm / 무게: 1.5kg 18시간의 배터리 타임 6개의 스피커 사운드 시스템 팬리스(무소음) 디자인 8-Core CPU / 10-core GPU 1080p 카메라 색상: 미드나이트, 스타라이트, 실버, 스페이스 그레이 가격: $1,299 부터 시작 / 교육용은 $1,199 부터 시작 오늘부터 주문 6월 13일 화요일부터 ..

#6. Vue 3 실전 예제

# 간단한 CRUD 앱 만들기 우선 CRUD는 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)의 약자로 데이터베이스나 서버에서 데이터를 다룰 때 가장 많이 사용하는 기능입니다. 이번 예제에서는 간단한 할 일 목록을 다루는 CRUD 기능을 구현해 볼 것입니다 (1) 먼저 src/components 폴더 안에 TodoList.vue 컴포넌트를 만듭니다. 할 일 목록 {{ todo }} 삭제 수정 추가 취소 수정 이 컴포넌트는 할 일 목록을 표시하고, 새로운 할 일을 추가하거나 삭제하는 기능을 가지고 있습니다. data 속성에서 todos 배열에 기본 할 일 목록을 설정하고, newTodo 변수에 새로 추가할 할 일을 저장합니다. methods에서는 addTodo 함수를 통해 ..

#5. Vue 3 성능 최적화

# 렌더링 최적화 Vue에서 렌더링을 최적화하는 몇 가지 방법은 다음과 같습니다: (1) 가상 DOM 활용 Vue에서 가상 DOM을 활용하면 실제 DOM을 추상화하여 변경된 부분만 업데이트할 수 있습니다. 아래는 가상 DOM을 사용하여 성능을 개선하는 예시입니다. {{ item }} Shuffle 위 코드에서는 key 속성을 사용하여 각각의 li 요소를 고유하게 식별할 수 있도록 하였습니다. 이렇게 하면 Vue가 변경된 부분을 추적하여 성능을 향상시킬 수 있습니다. (2) 컴포넌트 분할 Vue에서 컴포넌트를 작은 단위로 분할하면 부분적으로 렌더링할 수 있습니다. 아래는 컴포넌트를 분할하여 성능을 개선하는 예시입니다. Shuffle {{ item }} 위 코드에서는 ParentComponent와 Child..

반응형