Atelier BiCute

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

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

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

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

#1. HTML 소개 • HTML이란 무엇인가? • HTML의 역사 • HTML 개발 환경 설정 #2. HTML 문서의 구조 • DOCTYPE 선언 • HTML 태그 • Head 태그 • Title 태그 • Body 태그 #3. HTML 제목과 단락 • 제목 (h1에서 h6) • 단락 태그 (p) #4. HTML 텍스트 서식 • 굵은 텍스트 • 기울임꼴 텍스트 • 밑줄 텍스트 • 아래첨자와 위첨자 • 줄임말 태그 #5. HTML 목록 • 순서가 없는 목록 • 순서가 있는 목록 • 정의 목록 #6. HTML 링크 • 앵커 태그 • 상대 URL • 절대 URL • 이메일 링크 • target 속성 #7. HTML 이미지 • 이미지 태그 • 이미지 사이즈 • alt 속성 • 이미지 맵 #8. HTML 테이블 ..

#1. CSS 소개 • CSS란 무엇인가? • CSS를 사용하는 이유 • CSS가 HTML과 작동하는 방식 #2. CSS 선택자 • 유형 선택자(Type selector) • 클래스 선택자(Class selector) • 아이디 선택자(ID selector) • 전체 선택자(Universal selector) • 속성 선택자(Attribute selector) • 자손 선택자(Descendant selector) • 자식 선택자(Child selector) • 인접 형제 선택자(Adjacent sibling selector) • 형제 선택자(General sibling selector) • 의사 클래스 선택자(Pseudo-class selector) • 선택자의 우선순위 CSS(Cascading Styl..

#1. 자바스크립트 소개 자바스크립트란 무엇인가? 자바스크립트의 역사 자바스크립트의 작동 방식 #2. 기본 자바스크립트 문법 변수(Variables) 데이터 타입(Data Types) 연산자(Operators) 표현식(Expressions) 구문(Statements) 예약어(Keywords) #3. 자바스크립트 함수 함수 만들기 함수 호출 함수의 매개변수(Parameters)와 인수(Arguments) Return 값 익명 함수 고차 함수 #4. 자바스크립트 객체 객체란? 객체 만들기 속성 액세스 속성 추가 및 수정 속성 제거 객체 리터럴 this 키워드 #5. 자바스크립트의 배열과 반복문 배열(Array) 배열의 반복 forEach 메소드 map 메소드 필터 메소드 reduce 메소드 #6. 조건문 및..

#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) ▷ 페이지 전환하기 (라우터 설치부터 사용까지) ▷ 게시물마다 번호를 달아주자 (라우터 파라..