로그인 페이지도 가입하기 페이지를 그대로 복사하여 필요한 부분만 남겨놓는다. 트위떠 로그인 로그인 계정이 없으신가요? 회원가입하기 import { ref } from "vue"; export default { setup() { // 변수 ref(초기값) usestate 와 동일 const email = ref(""); const password = ref(""); const loading = ref(false); //회원가입 클릭 시 실행되는 함수 const onLogin = () => { console.log(email.value, password.value); }; return { email, password, loading, onLogin, }; }, }; 계정이 없으신가요? 회원가입하기 route..

1. template에 html코드 작성하기 트위떠 회원가입 회원가입 계정이 이미 있으신가요 로그인하기 2. input태그에 v-model을 사용하여 양방향 바인딩을 구현할 수 있도록 한다. 그리고 script로 넘어와서 ref 를 import하고 각 변수를 ref를 사용하여 초기값을 설정한다. 처음 시작 시 username, email, password는 아무런 값이 없으니 ""으로 공백으로 지정한다. input에서 v-model을 사용하여 input의 값이 변경되면 해당 변수에 잘 저장되는지 테스트 하기위해 그리고 onRegister함수를 만들어서 입력한 값을 회원가입을 클릭하면 입력된 값이 잘 저장됐는지 console로 찍어본다. 중요한것은 모든 함수와 변수는 return을 해줘야한다는 점 ! im..

구글 코랩이란? - 구글 코랩은 구글에서 교육과 과학 연구를 목적으로 개발한도구로 2017년에 무료로 공개함. - 코랩에서 파이썬 코드를 실행하거나 텍스트를 작성 및 그래프를 그릴 수 있음 https://colab.research.google.com/?hl=ko Google Colaboratory colab.research.google.com 크롬 -> Google앱 클릭 신규 클 설치 클릭 설치가 완료되면 더보기에 나타남 도구 -> 설정에서 테마 변경 가 파일명은 아래와 같이 변경가 코드를 입력 후 ctrl + enter 또는 왼쪽 플레이아이콘 클릭하면 실행된다.

https://www.python.org/ Welcome to Python.org The official home of the Python Programming Language www.python.org 파이썬 홈페이지에서 다운로드를 클릭한다. 체크하여 install now를 클릭한다. 더블클릭 시 파이썬 셀이 나타남 Hello world를 출력해본다.. print("Hello, world!") File -> New File 을 통해 새로운 파일(스크립트모드)을 만들 수 있다. 스크립트모드는 한 줄 작성하고 엔터를 눌러도 코드가 실행되지 않음 ctrl + s 를 통해 저장 가능하고 c드라이브에 FirstPython으로 저장했다. F5로 코드 실행가

https://ko.vuejs.org/guide/built-ins/transition Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 네브바를 만드는데 반응형으로 제작중이라 모바일 사이즈에서는 오른쪽 햄버거 아이콘을 클릭하면 메뉴가 아래로 펼쳐지길 바랬다. vue에서는 어떻게 만들면 될지 찾아보다가 발견한 Transition 컴포넌트 나는 이렇게 만들었다. export default { components: { Bar, }, setup() { const mobileMenuVisible = ref(false); //모바일 메뉴 //모바일 메뉴 토글 const toggleMobileMenu = () => { mobileMenuVisible.va..

리액트에 익숙해져있고, vue를 독학해서 사용해보니 아직 어색해서... 컴포넌트로 props를 전달할 때는 어떻게 하나 찾아보다가 까먹을까봐 작성함 1. CreditCart 컴포넌트 {{ price }} 원 총 {{ count }}건 발송가능합니다 1건당 15원에 결제가능합니다 {{ credit }} 크레딧 + 10% 기본 크레딧 {{ basic }} 추가 크레딧 + {{ add }} 구매하기 export default { props: { price: { type: String, }, count: { type: String, }, credit: { type: String, }, basic: { type: String, }, add: { type: String, }, }, }; script의 props에 ..

svg파일을 사용해야하는데 간편하게 사용할 수 있는 라이브러리를 찾았다. https://www.npmjs.com/package/vite-svg-loader vite-svg-loader Vite plugin to load SVG files as Vue components. Latest version: 5.1.0, last published: 3 months ago. Start using vite-svg-loader in your project by running `npm i vite-svg-loader`. There are 93 other projects in the npm registry using vite-svg-loader. www.npmjs.com 에 나와 있는 사용 설명대로 설치하면됨 npm in..

https://router.vuejs.org/installation.html Vue Router | The official Router for Vue.js The official Router for Vue.js router.vuejs.org 라우터를 설치한다. src -> router 폴더를 생성하고 index.js를 생성한다. import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "ex) /list", component: ex) List, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default ro..

https://tailwindcss.com/docs/guides/vite Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com https://v2.tailwindcss.com/docs/guides/vue-3-vite Install Tailwind CSS with Vite - Tailwind CSS Setting up Tailwind CSS in a Vite project. tailwindcss.com 테일윈드 사용법을 보고 따라해본다. code . 로 코드를 열어본다. 위와같이 수정한다. /** @type {import('tailwindcss').Config} */ exp..

상세페이지임 상세페이지 내용임 body { margin: 0; } div { box-sizing: border-box; } .black-bg { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; padding: 20px; } .white-bg { width: 100%; background: white; border-radius: 8px; padding: 20px; } 모달창은 클릭하면 출력되어야한다. 1. ui의 현재 상태를 저장해둠 2. 이 데이터에 따라 ui가 어떻게 보일지 작성함 1. 현재 모달창의 상태를 만들어놓는다. export default { name: "App", data() { return {..