
1일차: Vue 프로젝트 설정
2022-10-12 last update
6 minutes reading 100daysofcode programming vue webdev안녕하세요 여러분, 이 글에서는 제가 #100daysofcode 챌린지를 시작한 이유와 챌린지 첫날에 한 일에 대해 이야기하겠습니다.
사실 한 가지 이상의 이유가 있습니다. 그래서 나는 그것들을 나열할 것이다.
솔직히 저는 게으른 사람이고, 이것을 꼭 해야 하는 것으로 만들지 않는 한 꾸준히 무언가를 하는 것은 저에게 어렵습니다. 내가 말하려는 것은 실제로 게으른 것이 아니라 일을 하는 데 책임감을 느껴야 한다는 것입니다. 그런 이유로 나는 보통 누군가에게 약속하거나 이 경우 블로그를 시작합니다. 하지만 저는 코딩을 좋아하기 때문에 매일 코딩하는 것이 그렇게 어렵지는 않습니다. 진짜 이유는 공부를 해야 하고 그것이 나에게 일상적인 일이 아니었기 때문입니다. 그래서 나는 스스로에게 이렇게 말했다.
이것은 여러분 중 일부에게는 어리석게 들릴지 모르지만 실제로 제가 하는 것은 공부를 좋아하도록 제 두뇌를 속이는 것입니다. "하지만 어떻게?"라고 묻는 것을 들을 수 있습니다. 실제로는 매우 간단합니다. 코딩은 게임이나 소셜 미디어에서 시간을 보내는 것과 같으며 자신에게 보상으로 줄 수 있는 것입니다. 그리고 뇌가 보상을 받으면 도파민을 생성하고 기본적으로 행복해집니다. Brain은 왜 그 보상을 받았는지 기억하고 다음에 공부할 때 더 동기 부여되고 집중되기를 바랍니다. 적어도 그것이 효과가 있다고 믿는 방법입니다. 저는 이 분야의 전문가가 아닙니다.
새로운 기술을 배우고 기존 기술을 연마 매일의 코딩 습관 만들기 블로그를 시작하고 프로그래밍에 대한 콘텐츠 만들기 오픈 소스 커뮤니티에 참여하기 중요한 일에 내 시간을 사용
이 여정에서 저는 다음과 같은 새로운 기술을 달성할 계획입니다.
Vue.js Nuxt.js 웹소켓(실제로 웹소켓으로 작업했는데 오래전 일임) 수파베이스 인증 서비스 바퀴벌레DB
그리고 내가 더 잘하고 싶은 기술:
반응형 웹사이트 디자인하기 플러터 파이어베이스 React & Next.js UI 디자인 SQL 및 NoSQL 데이터베이스 고
처음에는 새로운 것을 배워야 해서 첫날부터 지루하지 않다고 생각했습니다. 그러다 발견한 것은 기본적으로 Vue 3, Vuex 4, Firebase를 사용하여 웹사이트를 만드는 것입니다. 하지만 Supabase를 배우고 싶어서 테크 스택을 조금 변경하기로 했습니다. 여기 내 기술 스택이 있습니다.
Firebase 대신 Supabase Vue 3과 Vuex 4는 분명히 동일합니다. 튜터가 만든 일반 스타일 대신 TailwindCSS 및 Javascript 대신 Typescript
그 결정 후에 VSCode를 열고 vue cli를 사용하여 앱을 만들었습니다. 그런 다음 TailwindCSS를 설정하고 폴더 구조를 만듭니다. 그리고 마지막으로 아래에 탐색 모음을 만들었습니다.

vuex-supabase
왜요?
사실 한 가지 이상의 이유가 있습니다. 그래서 나는 그것들을 나열할 것이다.
주된 이유
솔직히 저는 게으른 사람이고, 이것을 꼭 해야 하는 것으로 만들지 않는 한 꾸준히 무언가를 하는 것은 저에게 어렵습니다. 내가 말하려는 것은 실제로 게으른 것이 아니라 일을 하는 데 책임감을 느껴야 한다는 것입니다. 그런 이유로 나는 보통 누군가에게 약속하거나 이 경우 블로그를 시작합니다. 하지만 저는 코딩을 좋아하기 때문에 매일 코딩하는 것이 그렇게 어렵지는 않습니다. 진짜 이유는 공부를 해야 하고 그것이 나에게 일상적인 일이 아니었기 때문입니다. 그래서 나는 스스로에게 이렇게 말했다.
You won't code before you study
이것은 여러분 중 일부에게는 어리석게 들릴지 모르지만 실제로 제가 하는 것은 공부를 좋아하도록 제 두뇌를 속이는 것입니다. "하지만 어떻게?"라고 묻는 것을 들을 수 있습니다. 실제로는 매우 간단합니다. 코딩은 게임이나 소셜 미디어에서 시간을 보내는 것과 같으며 자신에게 보상으로 줄 수 있는 것입니다. 그리고 뇌가 보상을 받으면 도파민을 생성하고 기본적으로 행복해집니다. Brain은 왜 그 보상을 받았는지 기억하고 다음에 공부할 때 더 동기 부여되고 집중되기를 바랍니다. 적어도 그것이 효과가 있다고 믿는 방법입니다. 저는 이 분야의 전문가가 아닙니다.
다른 이유들
알겠습니다. 하지만 내 목표는 무엇인가요?
이 여정에서 저는 다음과 같은 새로운 기술을 달성할 계획입니다.
그리고 내가 더 잘하고 싶은 기술:
나는 1일차에 무엇을 했는가? (드디어)
처음에는 새로운 것을 배워야 해서 첫날부터 지루하지 않다고 생각했습니다. 그러다 발견한 것은 기본적으로 Vue 3, Vuex 4, Firebase를 사용하여 웹사이트를 만드는 것입니다. 하지만 Supabase를 배우고 싶어서 테크 스택을 조금 변경하기로 했습니다. 여기 내 기술 스택이 있습니다.
그 결정 후에 VSCode를 열고 vue cli를 사용하여 앱을 만들었습니다. 그런 다음 TailwindCSS를 설정하고 폴더 구조를 만듭니다. 그리고 마지막으로 아래에 탐색 모음을 만들었습니다.

이 프로젝트의 Github 저장소
이브라힘호준 / vuex-supabase
vuex 및 supabase가 있는 Vue 웹 앱
vuex-supabase
프로젝트 설정
yarn install
개발을 위한 컴파일 및 핫 리로드
yarn serve
프로덕션을 위해 컴파일 및 축소
yarn build
린트 및 수정 파일
yarn lint
구성 사용자 정의
Configuration Reference 를 참조하십시오.
View on GitHub
그것을 코딩하는 것은 매우 재미있었습니다. 어쨌든 기본 로그인 페이지를 만들었고 불행히도 그것이 첫째 날의 전부입니다. 공부도 하고 Vue 튜토리얼에 대한 연구도 하고 비디오 게임도 했기 때문에. 그래서 남은 시간에 할 수 있는 건 그것뿐이었다. 좋은 시작은 아니지만 여전히 시작이고 그것이 중요한 것이라고 생각합니다. 바라건대 내일 나는 더 생산적이 될 것입니다.
나에게 추천할 사항이 있습니까? 댓글로 읽어보고, 즐겁고 생산적인 하루 보내세요!
yarn install
yarn serve
yarn build
yarn lint