혼자 적어보는 노트

vue에서 테스트로 컴포넌트들을 만드는데 컴포넌트 명이 한 단어여서 ESlint에서 표시를 해주는데 꽤나 거슬렸다. 기본 vue3-recommened 플러그인 안에 설정이 되어있는 모양인데 이 부분이 뜨지 않게 하려면 eslint 설정을 변경해주어야 한다. 지정한 컴포넌트 감시하지 않기 "vue/multi-word-component-names": ["error", { "ignores": ["Home"] }] 전체 multi-word 감시하지 않기 "vue/multi-word-component-names": "off"

eslint/eslint-plugin-vue 설치 npm i -D eslint eslint-plugin-vue 루트 경로에 .eslintrc.json 파일 생성 { "env": { "browser": true, // window에서 사용하는 전역 객체 허용 "node": true // node에서 사용하는 전역 api 허용 }, "extends": [ "eslint:recommented", "plugin:vue/vue3-recommended" ] } json으로 작성했지만 js로도 작성이 가능하다. extends에서는 일단 eslint와 vue plugin의 추천 설정을 기본으로 작성했다. VSCode 확장프로그램 설치 .eslintrc.json에서 설정한 규칙이 적용될 수 있게 확장프로그램을 설치한다...

💻 기본 환경 설정 package.json 파일 생성 npm init -y 현재 프로젝트에 webpack설치 npm i -D webpack webpack-cli 루트 경로에 webpack.config.js 파일 생성 const path = require("path"); module.exports = { entry: "./src/main.js", // 진입점 output: { path: path.resolve(__dirname, "dist"), // 반환되는 경로 clean: true, // true 시 매번 dist폴더를 정리 // filename: '', // 반환되는 파일의 이름. 생략 시 entry의 파일 명으로 지정 }, }; path의 경우 최종 결과를 내는 파일이 webpack.config.j..

일단 뷰 자체의 환경을 처음 만들어 본다는 가정으로 작성을 할 예정이다. Parcel의 경우 패키지와 구성옵션을 신경쓰지 않고 간단하게 프로젝트를 시작할 수 있는 환경을 제공한다 1. npm init -y를 통해 package.json 생성 2. 최신버전의 vue 설치 npm i vue@next 3. src폴더 생성 후 하위 파일들 생성 src ㄴ App.vue ㄴ index.html ㄴ main.js index.html * parcel 세팅에서는 script부분의 type을 module로 설정하고 main.js를 불러온다. App.vue {{ msg }} main.js import * as Vue from "vue"; import App from "./App.vue"; Vue.createApp(App)..

과제를 하면서 공유된 repository에 브랜치를 만들어서 commit/push를 하고 이후 배포를 하고 싶어서 나의 개인 repository에도 연결을 시켜서 push를 하고 싶었다. 즉, 1개의 프로젝트에 2개의 저장소를 연결해서 관리 하는 것이다. 1. 새로운 원격 저장소 연결하기 git remote add [새로운 remote 이름] [새로운 repository git주소] 보통 한 프로젝트에 첫 remote를 연결하면 origin이라는 이름으로 연결이 되는데 기존의 remote와 구분을 하기 위해 이름을 새로 지어서 연결을 시킨다. 나는 project 라고 지었다. 2. remote 확인 git remote -v 위 명령어를 사용해서 연결된 remote를 확인했다. 3. 브랜치 연결 git p..

private 레퍼지토리 클론 시 오류날 때. (윈도우만 해당) 링크에 유저아이디랑 비밀번호를 넣으라는 등등 여러가지를 시도해보았으나 실패했다😓 해결방법 github에서 액세스 토큰 발급받고 윈도우 자격증명란에서 git:https://github.com 편집 버튼 클릭(삭제 후 다시 만들어도 됨) -> 비밀번호란에 토큰 붙여넣기 참고한 곳

프론트서버(Next.js), 백엔드서버(Express), 데이터베이스(MySQL)를 연결하여 회원가입을 하는 기능을 구현해보자 📄 준비된 것 - 프론트에서 회원가입 submit시 데이터 전달을 하는 코드 작성 - Node Express를 이용한 서버 세팅 - Sequalize를 사용하여 모델 세팅 - MySQL으로 연결하여 데이터를 넣을 테이블 세팅 현재 Sequalize에서 만든 모델들을 MySQL에 연결해 놓은 상태이기 때문에 그 이후 과정을 진행해보겠다. 😇 연결 전 기억해야 할 것 1. 브라우저와 프론트서버의 포트는 동일하다. 프론트의 포트를 변경할 경우 front의 package.json에서 변경을 해준다. "scripts": { "dev": "next -p 3060" }, 2. 백엔드 서버의 ..

회원가입 구현을 하는 도중에 데이터를 서버로 넘기는데 자꾸 아래와 같은 에러가 발생했다. parent: Error: Data too long for column 'password' at row 1 처음에 password column의 속성으로 DataTypes.STRING(30) 로 설정해서 문자열 길이가 30으로 설정이 되어있었다. 그래서 단순하게 100으로 변경을 하고 저장을 했는데 자꾸 저 에러가 떴다. 200으로 변경을 해보고 암호화된 password를 콘솔로 찍어봤는데 길이가 100이 넘지 않았다. 연동이 안되는 것 같아서 mysql 워크벤치로 확인을해보니 역시나 이전 설정 그대로인것! 변경하는 것을 알아보니 sequelize의 Table 속성은 변경할 수 없고 삭제하고 다시 생성을 해야 한다고..