Atelier BiCute

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

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 정도 사용..

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

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

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