설명하기에 앞서🎉 본 글에서 제공하는 모든 내용은 저작권법에 의하여 보호받는 저작물이지만 이에 대한 무단 복제 및 배포를 환영합니다. 🎉  Aleph Kim's Portfolio Website🖥️ 프로젝트 소개Aleph Kim의 포트폴리오 웹사이트는 개발자의 역량과 프로젝트를 효과적으로 소개하기 위해 제작된 개인 웹사이트입니다.이 프로젝트는 데이터와 UI를 철저히 분리하여 사용자에게 커스터마이징과 확장성을 극대화할 수 있도록 제작하였습니다.🚀 주요 강점: 데이터 분리 구조이 웹사이트는 데이터를 독립적으로 관리하는 구조를 채택하여 개발, 유지보수, 확장성에서 많은 이점을 제공합니다.🛠️ 사용 기술Frontend: Vue.js (컴포넌트 기반 설계)Styling: Tailwind CSS (유틸리티 ..

개요프로젝트 진행 중 스크롤 애니메이션을 추가해보려 관련 라이브러리를 찾아보았다.이 글은 vue.js 3버전에서 AOS라는 라이브러리를 사용법하는 방법에 대한 글이다.설치npm install aos@2.3.4 # 마지막 정식 배포 버전이 2.3.4버전이다main.js 수정import { createApp } from 'vue';import App from './App.vue';import AOS from 'aos';import 'aos/dist/aos.css';// Vue 앱 생성const app = createApp(App);// AOS 초기화app.mount('#app');AOS.init();사용 예시 나타날때 올라오는 요소참고aos 다양한 효과 demoaos 공식 github

개요처음으로 컴포넌트 라이브러리를 사용하지 않고 다크모드를 구현하려니 수많은 난관을 만나게 되었다. 다음에는 이번처럼 헤매지 않기 위해 기록해두려 한다.코드tailwind.config.jsclass="dark:text-white"와 같이 다크모드일 경우 스타일 요소를 지정하기 위한 설정module.exports = { purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], darkMode: 'selector', // 3.4.1 버전 이후일 경우 darkMode: 'class'..

개요프로젝트 진행 중 다크모드 전환 간 tailwindcss로 transition 값을 설정한 요소의 transition이 매끄럽지 않음을 발견하게 되어 이를 해결할 방법을 찾아보았다.원인tailwindcss로 transition을 설정할때 transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);라는 값이 포함되는데, 이로 인해 기본 css로 transtion을 설정했을 때와 차이가 발생함을 확인했다.해결 방법transition-timing-function 값을 기본값으로 설정해주면 된다.찾아보니 transition-timing-function의 기본값은 ease값이라고 한다. tailwindcss에서는 ease-[ease]이게무슨이상한코드야로 설정할 수 있..

코드 See the Pen Untitled by 김채민 (@aleph-kim) on CodePen.출처https://cloud-library.tistory.com/entry/CSS%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%83%80%EC%9D%B4%ED%95%91-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98

개요이전 시간에는 homebrew 패키지를 정리(하다가 기껏 정리 다 해놓고 마지막에 실수로 모든 패키지를 삭제해버림)해보았다.이번 시간에는 무분별하게 설치된 pip 패키지를 정리하려 한다.pip 패키지도 오늘 설치한 패키지만 삭제하려 했는데 생각해보니 homebrew와는 다르게 pip은 다양한 관리 도구가 있는데 내가 사용하지 않은 것이고, 다른 사람들은 다들 관리 도구를 사용할 것이기 때문에 굳이 오늘 설치한 pip 패키지 정렬 방법을 찾는다거나, 특정 기간에 설치된 pip 패키지 삭제 방법등은 필요하지 않을 것 같았다.그리하여 그냥 모든 pip 패키지를 깡그리 삭제하려고 한다ㅎㅎ삭제 명령어pip freeze | xargs pip uninstall -y설명pip freeze: 모든 패키지 목록 출력|..

개요파이썬 토이 프로젝트 진행 중 무지성 chatGPT 따라하기를 시전한 결과 내 소중한 맥북에 이상한 패키지가 잔뜩 설치되었다.나는 2개 정도의 패키지만 설치하려 했는데 패키지가 패키지를 설치하고 그 패키지가 또 패키지를 설치하면서 약 20개 정도의 패키지가 추가되는 참사가 발생했다.하지만 homebrew는 기본적으로 설치된 패키지 노출 시 패키지명 오름차순으로 출력하고 설치 시간과 관련한 리스팅을 지원하지 않기 때문에 일일이 brew info 패키지명 명령어를 사용해야 설치 시간을 알 수 있다.내 맥북에 설치된 수많은 패키지의 정보를 일일이 조회할 순 없으니 약간의 꼼수를 부려보았고 이는 그 꼼수에 관한 포스팅이다.주의사항아래에서 설명할 방법은 패키지 설치 시간뿐만 아니라 수정 시간도 포함하여 삭제를..

개요linux를 사용하다 보면 자주 사용하게 되는 ls -al 명령어에서 각 항목이 무슨 의미인지 생각이 안 날 때가 있어 글로 정리 하려한다.각 항목별 설명항목예시설명권한-rw-r--r--파일 유형 및 접근 권한- 첫 글자는 파일 유형(-: 파일, d: 디렉토리 등), 다음 9글자는 소유자, 그룹, 기타 사용자의 권한링크 수1해당 파일이나 디렉토리에 연결된 하드 링크의 수소유자user파일이나 디렉토리의 소유자 이름그룹staff파일이나 디렉토리가 속한 그룹 이름크기1024파일의 크기(바이트 단위) 디렉토리의 경우 메타데이터 크기수정 날짜 및 시간Oct 5 12:34마지막으로 파일이나 디렉토리가 수정된 날짜와 시간파일명example.txt파일이나 디렉토리의 이름예시권한 | 링크 수 | 소유자 | 그룹 | ..