미치게힘든코딩

Vue 3 강의 - REST API를 이용하여 메모 애플리케이션 만들기(Node.js, Express, MariaDB) 따라하기

나이많은 초보 — Fri, 24 Nov 2023 16:01:42 +0900

https://www.youtube.com/watch?v=ADxbGlwhl_s

어제 이분의 vue3강의를 따라하고 jwt에대해 접하게 되었느데...

오늘 관련 내용을 업무적으로 접하게 되서 자랑스레 말씀드렸다.~~~~~" 어제 공부했어요..ㅋㅋㅋㅋㅋ"

신나서 한개 더 따라 해 본다~~~

1. 뭐든지 설치,,,

이미 전전 시간에 vue설치를 했기 떄문에 바로 vue생성부터 진행....이번엔 memo 앱이니깐 vue3-memo프로젝트로/ 전시간과 마찬가지로 앞단과 뒷단(서버단) 폴더로 분류한다.

vue create frontend 입력하면 자동으로 생성생성....(이것은 이미 vue와 node가 설치되어 있기 때문인걸......잊지말자!!)

2. vue에서 header, footer 만들기....

재사용 코드를 캡슐화 하는 기능 복습!!! components폴더에 화면구성 할 vue파일들을 만든다....include와 같은거...

붙일 화면을 import하고

components : {Header, Footer}

선언해서 사용한다. Ground에 해더와 본문, 푸터를 구조를 만들고 그구조를 App.vue에서 사용하는것....

이후 부트 스트랩으로 화면 꾸며준다......

홈피말고 https://cdnjs.com/libraries/bootstrap https://cdnjs.com/libraries/bootstrap/4.6.1 에서 하는게 좀더 편함...버전설정후 주소 2개임......최신버전보단...지금 영상속의 버전으로 맞추었음.....

1. style하면서 설치 한거...

Node-sass는 널리 사용되는 스타일시트 전처리기인 Sass의 C 버전인 LibSass 에 대한 Node.js 바인딩을 제공하는 라이브러리입니다 .라는 소개와..현재 Node Sass사용하지 않는다며 Dart Sass 이동하라고 한다. 주소:https://sass-lang.com/dart-sass/

난 일단 모르므로 영상따라서 https://www.npmjs.com/package/node-sass

들어가서 PS C:\shin_work\vs_vue_ex\VUE3-MEMO\frontend> npm i node-sass@6.0.1 설치를 했으나...

에러가 납니다.ㅠㅠ

npm ls node-sass //확인하니 empty라고 나옴. 그래서 설치가 안되나 싶어서 알려준 dark sass를 해봄...
npm install -g sass //설치 안됨...역시 관련된 라이브러리 미확인됨.
node --version  // v18.16.0', 내 버전확인하고
npm i node-sass@8.0.1   //  맞게 대충 설치해봄 근데 역시 에러...
npm install node-sass@latest 다시 마지막 버전으로 설치하니깐 됨..ㅠㅠ

하지만 영상을 진행해보니깐 sass-loader라는 node에 의존적인 요아이도 또 설치해야한다....안되것다.... 요것도 안된다.

그럼으로 나는 다시 돌아간다.. 모든것을 삭제하고....uninstall~~~

기존에 설치한 기록을 삭제함...

처음에 실패했는데 json파일에서 삭제하니깐 된다...

하지만 여기까지.........나머지에서 계속 에러가 난다...뭔가가 계속 안된다......갑자기 현타온다...

난 백단이 주인데 왜 css 전처리 설치에 이렇게 목을 매지???????? 진도가 그렇게 나가니깐...ㅠㅠ

일단 프로젝트 삭제하고 다시 설치하자......초심~~~~\

그리고 다시 하였으나 실패함....dark sass로 그 문법을 쓰자니 발생되는 설치가 많고 그것에 대한 예제를 현재는 찾기가 어려워 결국은 3시간만에 일단 포기한다.

그리고 그냥 엣날 방식 css코드 만든다.

<style scoped>
.memo ul{        
    list-style: none;
    padding:15px 0;
    margin:0;
}
.memo ul li{
    padding: 15px;
    margin:5px;
    border: 1px solid #eee;
}
.act{
    padding: 10px 5px 5px 5px;
    text-align: right;
}
</style>

확정된 css스타일에 코드임...

일단 여기까지가 앞단에서 메모장이 띄어지는 것까지의 부분이다...

마지막 코드가면 변경되 부분이 잘 안보니깐..코드도 같이 올린다.

**주의사항....다시 설치하면서는 @vue/cli 5.0.8 버전이였다..그랬더니.

1:1 error Component name "Footer" should always be multi-word vue/multi-word-component-names

에러가 나왔다.한단어랑 하지말고 조합해서 해깔리지 말게 하라는데.....나지금 sass포기자란 말이다...우울하단 말이다.

lintOnSave : false한줄 넣었더니 해결...

작업은 Memo.vue에서가 주라서 요것만....올림...요렇게 해서 앞단은 좀 정리 되었다.

로그인할 때 처럼 동적데이터 처리는

const state = reactive({

data : [ ]

})

에 넣어서 처리하고

import { reactive } from "vue";

기능 가져오도록 import한다는거....여기까지가 34분까지의 내용이다...

일단 정리까지하니 반나절 이상갔다....

수업은 총 1시간 35분 40초인데....난 5시간동안 절반도 못갔다...요하ㅣㄷ93ㅏㅣㅇㄹ902ㅓ깅ㄹㄴ아ㅣ러(욕이다)오늘은 요기까지...너무 힘들다....sass가 절대적이다.

Vue 3 강의 - JWT를 이용하여 로그인 애플리케이션 만들기(Node.js, Express, JWT)따라하기.

나이많은 초보 — Thu, 23 Nov 2023 17:00:16 +0900

https://www.youtube.com/watch?v=JR0jSscNNd4&list=WL&index=52&t=19s

vue3프로젝트 연습하기.

전체코드는 git에 있어서 그걸 참고 하시길...https://github.com/africalib/studies/tree/master/vue3/login

진행하면서 주의사항들을 ..차후 내가 개발할때를 생각해서 정리해본다.

폴더만 봐도 알수 있듯이 화면 view는 vue3로 frontend에서

뒤의 실제 데이터 구현 백단은 backend에서 진행한다.

1. 뭐든 vue부터 설치시작한다...

npm install -g @vue/cli  //install을 i로 기재해도 된다.

2. 상위폴더가서.

PS C:\shin_work\vs_vue_ex> md login  //vue를 연습하는 폴더에 와서 오늘의 프로젝트 폴더생성
PS C:\shin_work\vs_vue_ex> cd login  // 해당 프로젝트 폴더 이동
PS C:\shin_work\vs_vue_ex\login> vue create frontend // 화면단의 폴더 생성하면서 vue관련 모든걸 내려준다.
		//전에 연습한거랑 일치해서 패스
PS C:\shin_work\vs_vue_ex\login>md backend	//생성한다.
PS C:\shin_work\vs_vue_ex\login\backend> npm init //프로젝트 초기화를 한다. 질문에는 그냥 enter

그럼 login 폴더안에 백단과 앞단이 같이 보인다.

여기서 백단 작업은 api-server.js에서 진행하고 이건 새파일생성해서 만들면 된다.

마찬가지 앞단도 src의 App.vue에서 한다. 이것도 앞 공부할때 한거라 설명기재는 패스~~

3.node.js express설치.....https://expressjs.com/ko/starter/installing.html

Express 설치

설치 Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할 디렉토리를 작성하고 그 디렉토리를 작업 디렉토리로 설정하십시오. $ mkdir myapp $ cd myapp npm init 명령을 이용하여 애플

expressjs.com

시작하기로 가서

npm install express

진행하고 hello world가서 예제 내용을 가져온다...

그리고 중요한거..이걸 실행하는건 node 파일명.js라고 터미널에 입력하는것이다........

물론 공식문서에 있다..... hello world가서 예제 내용 밑에도 있다...하지만 배울땐 안보이는 법!!

참고로 vue는 자동재실행이나 node는 그런거 없다 터미널에서 ctrl+c 눌러서 종료하고 다시 node 파일명.js

+ 해서 터미널을 2개로 나눠서 앞, 뒤단 별로로하고 뭔지 나중에 해깔리깐 Rename에서 이름을 앞단 뒷단으로 변경한다.

3.서버와 통신할수 있는 axios설치

//앞단 터미널에서 axios설치
npm i axios
//App.vue에 import 해야  쓸수 있다.
import axios from "axios";

그런데 화면 출력은 port 8080 이고 뒤인 서버단 port는 3000이 였다....

이건 같은 곳이 아니니깐.url주소를 줘서 받아 올수 있으나 우리의 web에서는 보안이라는게 자동으로 있다.

CORS는 따로 공부하세요~~~프록시 기술로 잘받아오게 설정한다.

vue.config.js 파일을 생성해서 코드 넣는다..../api 시작하는 url은 3000이랑 연결하세요~~~란 뜻이다.

여기 까지 왔을 때 한시간 해맸다....시키는데로 했는데 또 안되는것이다. 서버단은 자동재실행 안되서 계속 재실행하는시간.....vue도 파일생성하고 재실행하고 난리였는데......보니깐 파일명 오타, 내용에 console.log 단어에도 오타가 있었다...오타있으면 에러찾다가 코드가 삼천포로 간다.!!!!!!!!!ㅠㅠ

4.서버에서 로그인 정보를 받기

vue.에서 데이터를 request에 전달할때 서버에서는 받을 수 있는 모듈이 필요하다. https://www.npmjs.com/package/body-parser

npm i body-parser   //백단 터미널가서 설치한다.
const bodyParser = require('body-parser')   //백단이니깐 api-server.js에 기재하는것
app.use(bodyParser.json())					//앱에 적용
/////
app.post('/api/account', (req, res) => {		//앞단에서 config설정~~되새김질....
    let loginId = req.body.loginId;				//body통해 읽을 수 있다
    let loginPw = req.body.loginPw;

이때 앞뒤단 모두 get과 post를 같이있어서 에러발생되게 하는걸 이해를 못했는데 나중보니깐 로그인 후 쿠키 및 토큰 처리를 위해 필요한 것이였다.그리고 값전달을 send()에 넣어서 하는데 상태 404, 401등 값을 전달할때는 sendStatus()에 넣어서 보낸다.

5.로그인정보를 쿠키에 넣기

app.post('/api/account', (req, res) => {
    let loginId = req.body.loginId;
    let loginPw = req.body.loginPw;

    const member = members.find(m => m.loginId === loginId && m.loginPw === loginPw);
    if(member){    
    	//account라는 이름의 쿠키에 member의 정보를 만들어준다.
        const options={
        	domain: "localhost",
            path: "/",
            httpOnly: true
        };
        res.cookie("account",JSON.stringify(member),options);
        res.send(member);
    }else{
        res.sendStatus(404);
    }
    console.log(loginId,loginPw);
});

options 없이 재실행해서 되었던것 같다. 서버단은 입력후에 꼭 재실행해야한다.

확인된다.

참고로 get으로 로그인 진행할때는 쿠키정보를 파싱해야한다. 그것도 별도로 설치해야한다.

//서버 백단 터미널에서 설치
npm i cookie-parser

//api-server.js가서 import해야함...
const cookieParser = require('cookie-parser')
app.use(cookieParser());

//get으로 들어올때 쿠키를 읽어야하는것이다.
app.get('/api/account', (req, res) => {
    console.log(req.cookies);
    if(req.cookies && req.cookies.token){
    	const member = JSON.parse(req.cookies.account);
        if(member.id){
        return res.send(member)
    }else{
        res.send(401);
    }
});

6.쿠기 암호화.....토큰.....JWT

이런 쿠키값은 다른사람이 로그인 정보로 쓸수 있다는 보안상 이슈가 있고....여러문제가 있을 수 있다는것....이때 쓰는것이 JWT이다.

//서버단 터미널에서 설치
npm i jsonwebtoken


//api-server.js에 import
const jwt = require('jsonwebtoken')

설치를 하고post에 쿠키정보에 암호화한 jwt에 넣고 get에도 토큰을 확인해 주는코드를 삽입한다.

sing() 통해 만드는데 객체정보를 넣고, 토큰에 암호화 키를 "abc1234567"로 설정한다. verify()로 검증시에 이 암호화키 정보가 일치하지 않으면 이토큰이 그토큰이 아닌것이다.~~

언제까지 유효한지 expiresIn으로 설정한다. 10s 초단위도 된다.

이렇게 만든 token정보로 cookie를 만드는 것이다.

decoded 해도 관련 정보를 파악할 수 없다.

참고!!!!

https://jwt.io/

JWT.IO

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

jwt.io

하단에 Encoded자리에 토큰 정보를 넣으면 decoded다 된다...중요정보는 넣지 않는것이 가장 바람직!!

하지만 변조한다고 해도 위에 말한 암호화키가 없다면 키정보가 일치하지 않아 토큰 정보는 유효하지 않다.

그리고 port와 get두곳에서 키 정보가 쓰임으로 이것도 const jwtKey처리 하는 것도 좋다.

7. logOut.....마지막

app.delete()통해서 통신했고. post때 생성한 쿠키 token을 클리어 한것이다.

아프리카 도서관 님께서 친철하게도 모든 코드를 다 깃처리 해주시기 때문에 중간에 에러 안잡힐때 도움이 되었다.

아직까지 사실 잘모는 것 많은데 한발자국 전진한 느낌적 느낌....조으다~~~

코딩애플 Vue3 직방, 인스타그램 웹앱 -- 6 (import / export)

나이많은 초보 — Fri, 17 Nov 2023 11:42:10 +0900

# 데이터 export 보내주기.....

파일이 있다고 그냥 읽어 올수 없다. 동의가 있어야한다.

동의 서명 코드는 데이터 변수로 선언해서

export default가 기본 값이다.

혹시나 배열 일경우

1개면 default고 2개면 export { }..... 묶어서 보내주기

#데이터 import 받아오기....import는 import '변수명' from '경로' 로 선언하면된다....

받아올때도 배열이면 변수명 자리에 { } 묶어서 받기...

오브젝 배열의 리스트의 자료를 받아온다. [ {}, {}, {}, {}, {} ] 형태의 자료이고 변수를 선언하지 않을때는

export default [ {}, {}, {}, {}, {} ] 파일안에 선언하면 된다.

나는 스크립트안에다가

선언하고

적용했다.

그걸 다시 v-for문을 이용해서 돌리는것이다.

지난시간에 for문에서는 프로젝트 경로의 img를 동적생성해주는 것이였다. require() 할수를 이용해서....

그런데 이번 for문에는 먹히지 않았다.

<div>
  <div v-for="(원룸,i) in 원룸들" :key="i" :style="inStyle">
    <img :src="원룸.image" class="img_room">
    <h4 :style="style" @click="모달창열렸니 =true">{{ i+1}}. {{ 원룸.title }}</h4>
    <p > {{원룸.price}}</p>       
  </div>
</div>

이번껀 그냥 데이터를 넣어야지 되었다. :src안에 문자열로 넣을때는 {{ }} 안에 기재하지 않았다는게 포인트...

그리고 적용되는데 시간이 소요되었다. 에러는 안나왔는데 화면이 아무것도 안뜨길래 에러인줄알았더니 반영이 안되서였다.

한번 데이터가 읽히고 나니깐 그땐 계속 잘됨...

require('${{원룸.image}}') 경우에는 에러가 나옴....ㅋㅋㅋ 이렇게 하시는 분들은 없을 수도 있으나...화면 출력이 안되었을때 뻘짓을 많이 했다.

잘나옴.....

그럼 모달창에 상세내용을 출력하고 싶어졌다...

chatGPT의 힘을 빌려...code수정했다.

#for문 안에 데이터 함수로 전달 하기

여기 부분이겠지...직적 데이터가 아니라 함수를 적용하는 것이다.

여기 저기 손을 봐야했다..ㅋㅋ

//모달창 부분에서 상세데이터를 받은 코드를 추가하고 클릭기능에 함수로 변경한다.
<p>{{ modalContent }}</p>
<button @click="closeModal()" >닫기</button>

//클릭시 모달창 활성화 함수도 수정한다.
<h4 :style="style" @click="modalOpen(원룸.content)">{{ i+1}}. {{ 원룸.title }}</h4>

script의 methods 영역에 함수를 추가한다.

클릭시 상세 페이지에 원룸 상세 내용이 뜬다...

데이터 함수로 전달시 원룸자체를 보내서

this.modalContent = 원룸.content;

로 작성해도 된다..모달창에 띄울 내용이 많다면 이것도 방법~

코딩애플 Vue3 직방, 인스타그램 웹앱 -- 5 모달창

나이많은 초보 — Fri, 17 Nov 2023 10:06:48 +0900

# 이미지 동적 생성.........for문으로 돌리기는 숙제로 했는데 여기 이미지 추가가 있었음...

이미지 경로를 동적으로 생성해야하는데....잘안되어서 ChatGPT도움을 받아 작성함..ㅋㅋ

<div v-for="(a,i) in products" :key="i" :style="inStyle">
    <img :src="require(`./assets/roomImages/room${i}.jpg`)" class="img_room">
    <h4 :style="style" @click="모달창열렸니 =true">{{ i+1}}. {{ products[i] }}</h4>
    <p > {{ price[i] }} 만원</p>
    <button @click="increase2(i)">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수[i] }}</span>
    <button @click="increase">함수연습</button>
  </div>
</div>

Vue에서 require 함수를 사용하면 동적으로 경로를 생성하고 이미지를 로드할 수 있다.

이렇게 잘 나옴.....for문을 통해 이미지 경로 만들기!!

추가로 vue의 기본 폴더는 assets임..src에 있는거 가져올 때 경로는 ./부터 시작해야한다...

그냥 문법이 그러니깐 외어야함.ㅋㅋ

# v-if 조건문에 관련.........조건문을 통한 모달창 on/off 진행하기

1. 역삼동 원룸을 클릭하면 모달창이 나오는 것임.

1차. 모달창 UI를 만듬....간단함...

data에 변수선언후 값을 줌.

v-if를 통해서 모달창열렸니라는 변수가 true일경우에만 활성화시키는 것

그럼 제목줄에 클릭기능을 선언해서 값을 변경해줌..

모달창에 닫기 버튼에는 false값을 선언 클릭기능을 넣음.

간단하게 on/off가 됨.....이렇게 보니깐 너무 간단하다..ㅋㅋ

스프링부트에서 스마트에디터2 사용하기 - javax.servlet.http.httpservletrequest request에러

나이많은 초보 — Mon, 13 Nov 2023 12:36:13 +0900

id 'org.springframework.boot' version '3.1.4'

나의 스프링 부트 버전이다. 3.1.4 버전으로 하면서 겪은 일은 풀어보자면

1. css폴더 안의 이미지와 관련된 주소를 모두 나의 프로젝트 폴더 구조에 맞춰서 변경해야한다.

처음에 툴바가 아니 나와서 보니깐 이 주소들 설정이 안맞아서 그런것이였다.

이건 다행이 그렇게 어렵지 않게 찾고 수정할 수 있었다...물론 일일이 확인하면서 해서 노가다 작업이였으나....이정도야...감사하다..ㅋㅋ

url주소를 모두 변경해줘야 한다.

2. 사진을 올려야 하는데.....이게 문제이다.

<% 
String return1="";
String return2="";
String return3="";
//변경 title 태그에는 원본 파일명을 넣어주어야 하므로
String name = "";
if (ServletFileUpload.isMultipartContent(request)){
	ServletFileUpload uploadHandler = new ServletFileUpload(new DiskFileItemFactory());
	uploadHandler.setHeaderEncoding("UTF-8");
	List<FileItem> items = uploadHandler.parseRequest(request);

원 코드 인데...request부분부터 문제였다....빨간줄이 뜨는데...처음엔 뭐가 문제지????????

The method parseRequest(javax.servlet.http.HttpServletRequest) in the type ServletFileUpload is not applicable for the arguments (jakarta.servlet.http.HttpServletRequest)
에러가 남..

하루정도 형변환도 했다가 import도 다시 했다가 설정 넣었다가 지웠다가 해보다가 안되서 포기하고 집에 누웠는데......갑자기 생각났다..스프링부트는 javax.servlet.http.HttpServletRequest 가 안된다.....그래서 jakarta.servlet.http.HttpServletRequest 다 변경해줬느데 그부분은 까맣게 잊고 있었다...다음날은 그럼 어떻게 이걸로 변경해야하나를 고민했다...영어 잘 못하고 눈치만 늘은 내가 겨우 찾은 것은 apache.fileupload2로 import해야 한다는것....

https://mvnrepository.com/artifact/org.apache.commons/commons-fileupload2-core/2.0.0-M1

    implementation group: 'org.apache.commons', name: 'commons-fileupload2-jakarta', version: '2.0.0-M1'
    implementation group: 'commons-io', name: 'commons-io', version: '2.13.0'
    implementation group: 'org.apache.commons', name: 'commons-fileupload2-core', version: '2.0.0-M1'

gradle설정도 변경해줘야 한다.

그러고 나니깐......

new DiskFileItemFactory

가 안되는것이다......뭐지??????또 apache.fileupload 버전을 설치 했다가 안했다가 쇼를 하다가 또 겨우 찾은공식문서....사실 잘 안봤는데....선배님들이 공식 문서계속 들어가시는게 조금씪 이해되고 있다...블로거를 다 믿으면 안된다는거..ㅋㅋㅋ

https://javadoc.io/doc/org.apache.commons/commons-fileupload2-core/latest/org/apache/commons/fileupload2/core/DiskFileItemFactory.Builder.html

생성할때 전처럼 간단히가 아니라 이렇게 써야한다고 예시되어 있었다.......나를 칭찬하고 싶은 순간...ㅋㅋㅋ

DiskFileItemFactory factory = new DiskFileItemFactory.Builder().setPath("\\resources\\upLoad").setBufferSize(10240).get();

요놈은 파일은 읽어들이고 잠시 보관해야 할 곳을 지정하는 녀석이라서 이렇게 만들어주었는데...사실은 AI질문한거랑 확인한 거랑 짬봉해서 넣은것이다......

.setSizeThreshold(10240) // Set the size threshold to 10 KB

하길래...그냥 맞춰서 넣었다.

3. 그다음 에러....본문에 이미지 파일을 붙여 넣어야 하는데...계속 에러인 것이다...

a.lang.IllegalArgumentException: Invalid character found in the request target [/resources/smartEditor/photo_uploader/popup/callback.html?callback_func=tmpFrame_4468_func&bNewLine=true&sFileName=taling3-search.png&sFileURL=`/resources/upLoad/202311131040129bae9bf3-21f9-44b7-82a9-2e3c7d97efdd.png ]. The valid characters are defined in RFC 7230 and RFC 3986
at org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:482) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:264) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:63) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:894) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1740) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:52) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) ~[tomcat-embed-core-10.1.13.jar:10.1.13]
at java.base/java.lang.Thread.run(Thread.java:833) ~[na:na]

그냥 검색부터 했더니 톰캣에서 특수문자를 못읽는다고 URLEncoder.encode

관련 작업을 하라고 해서 한참을 이것저것 했으나 별다른 반응이 없는것이다...........브라우저 콘솔까지 뒤져서 한참을 보고 알았다... search.png&sFileURL=`/resources/upLoad/202311131040129bae9bf3-21f9-44b7-82a9- 이부분.....

` 요것이 들어가 있었다.....타이밍 실수였던것이다.....욕나옴....

결론은 스마트에디터의 코드는 왠만하면 건들이지 마세요~~~~^^

처음에 request가 안될때 정신줄 놓고 여기저기 만졌더니만 결국은 고생했다...

이제 DB저장과 화면 호출관련된 작업은 프로젝트에 맞게끔 진행하면 된다....

제목에서 스프링부트라고 하고 fileupload 관련 2가 안붙으면 안된다는 거..........결론입니다.~~~^^

코딩애플 Vue3 직방, 인스타그램 웹앱 --4 onclick

나이많은 초보 — Wed, 8 Nov 2023 18:05:52 +0900

이벤트 핸들러 관련중 빈번한 버튼 클릭시 처리방법

고전적 자바스크립는 onclick="" 였으나.

vue에서는 @click=''" 임..

버튼을 누르면 관련된 데이터만 +1만 해주면됨....vue는 실시간 랜더링이 됨으로...

<div>
  <h1>{{ logo }}</h1>
  <div v-for="(a,i) in products" :key="i" :style="inStyle">
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4> &nbsp;
    <p > {{ price[i] }} 만원</p> &nbsp;
    <button @click="신고수++">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수 }}</span>
  </div>  
</div>
//그럼 데이터 추가.
data(){
    return{
      신고수 : 0,
      메뉴들:['Home', 'Shop','About'],
      //데이터 보관함...object자료로 저장 key:value 형식     
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      price :[50,60,80],
      inStyle :'display: inline-flex;align-items: center;',
    }
  },

태그에 스타일 넣는 것은 응용임!!!!...스타일에는 {{ }} 넣는게 아니라 그냥 명칭을 넣는다는것. 주의

여기서 응용.....한번에 다 넣으면 안되지 않습니까???ㅋㅋ

<div v-for="(a,i) in products" :key="i" :style="inStyle">
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4> &nbsp;
    <p > {{ price[i] }} 만원</p> &nbsp;
    <button @click="신고수[i]++">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수[i] }}</span>
 </div>  
 //
 신고수 : [0,0,0],

이렇게 변경하니

각각의 신고수도 별도로 카운트 되었다...우와!!!!!!!!

함수를 추가할수도 있다.

함수를 넣는 위치는 정해져 앴다. export default 의 data와 components사이에 methods 영역을 추가하면된다. 다른된 안됨.

신고수 증가 함수를 넣고자 했는데 methods영역에 읽지 못했다....this를 써줘야 한다...

<div v-for="(a,i) in products" :key="i" :style="inStyle">
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4> &nbsp;
    <p > {{ price[i] }} 만원</p> &nbsp;
    <button @click="increase2(i)">허위매물신고</button>&nbsp;<span>신고수 : {{ 신고수[i] }}</span> &nbsp;
    <button @click="increase">함수연습</button>
</div>  

//메소드 영역
export default {
  name: 'App',
  data(){
    return{
      신고수 : [0,0,0],
      메뉴들:['Home', 'Shop','About'],
      //데이터 보관함...object자료로 저장 key:value 형식     
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      price :[50,60,80],
      inStyle :'display: inline-flex;align-items: center;',
    }
  },
  methods : {
    increase(){
      alert(" 함수 연습");
    },
    increase2(i){
      this.신고수[i]++
    }
  },

  components: {

  }
}

alert도 나오고 카운트도 되었다.... 데이터 전달도 이런식으로 할수 있는것이 고무적이다..ㅋㅋㅋㅋ 좀더 간편한듯함.

숙제는 3가지 원룸에 모두 허위매물신고 버튼을 만드는 것이였다.....이건 이미 했으니깐 숙제가 없다!!!! 아이좋아..ㅋㅋㅋㅋ

코딩애플 Vue3 직방, 인스타그램 웹앱 --3 for문

나이많은 초보 — Wed, 8 Nov 2023 17:36:07 +0900

Vue의 Html 반복문 = <태그 v-for="작명 in 몇회" :key="작명"> //key 꼭 필요함.

<template>
  <div class="menu">
    <a v-for="작명 in 3" :key="작명">Home</a>
    <a>Products</a>
    <a>About</a>
  </div>
  <img alt="Vue logo" src="./assets/logo.png">
<div>
  {{ logo }}
  <h4 class="red" style="color:blue;">XX 원룸</h4>
  <p> {{ price1}} 만원</p>
</div>
<div>
  <h4 :style="style">XX 원룸</h4>
  <p> {{ price2}} 만원</p>
</div>
</template>

이렇게 나옴....

이제 Home을 대체하는 배열을 이용할 것임.

Vue반복문은 array/object집어넣기 가능하며 데이터 갯수만큼 자동 반복됨.

<a v-for="menu in 메뉴들" :key="menu">{{ menu}}</a>
//export default의  data() {} 부분에 추가한것임
return{
      메뉴들:['Home', 'Shop','About'],

메뉴들에서 각각의 값을 menu로 뽑아내는 것이다. 그러므로 key는 꼭 ! 반드시 써야 한다.

작명부분에 2가지 변수를 사용할수 있다.

왼쪽 변수는 배열의 각 값을 의미하는 데이터 변수,

오른쪽 변수는 1씩 증가하는 정수

<a v-for="(menu,i) in 메뉴들" :key="menu">{{ i}}</a>

정수가 출력되었다.

변수를 ( ) 넣고 2개까지 넣을 수 있다.

for문 숙제...111 원룸과 월세를 반복문 처리하기.

<div>
  <h1>{{ logo }}</h1>
  // 가격도 돌아야 하는데 어떻게 하지? if문인가????
  <div>    // 처음에 내가 생각한 부분....
    <h4 :style="style" v-for="(room,a) in products" :key="room">{{ a+1}}. {{ room }}</h4>
    <p > {{ price2}} 만원</p>
  </div>

  <div v-for="(a,i) in 3" :key="i">  //알려주신 정답.. 상위버전 돌아가는 응용력 부족
    <h4 :style="style">{{ i+1}}. {{ products[i] }}</h4>
    <p > {{ price[i] }} 만원</p>
  </div>  
</div>

3을 products로 변경하면된다....

원하는 값이 나옴.

export default {
  name: 'App',
  data(){
    return{
      메뉴들:['Home', 'Shop','About'],
      //데이터 보관함...object자료로 저장 key:value 형식     
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
      price :[50,60,80],
    }
  },
  components: {

  }
}

코딩애플 Vue3 직방, 인스타그램 웹앱 -- 2 데이터 바인딩

나이많은 초보 — Wed, 8 Nov 2023 16:04:42 +0900

{{ 데이터 바인딩 }} JS데이터를 HTML에 꽃아 넣는 문법

왜쓰는가?/

1. html에 하드코딩 해놓으면 나중에 변경 어려움...

2. vue의 실시간 자동 렌더링 쓰기 때문 -- data를 변경하면 관련된html에서 실시간으로 변경이 됨.

반대로 낮은 변경이 없는 데이터는 데이터 바인딩을 할 필요 없음.

3. html속성도 데이터 바인딩 가능 하나 문법은 ** :속성="데이터 이름"

<template>
  <img alt="Vue logo" src="./assets/logo.png">
<div>
  {{ logo }}
  <h4 class="red" style="color:blue;">XX 원룸</h4>
  <p> {{ price1}} 만원</p>
</div>
<div>
  <h4 :style="style">XX 원룸</h4>
  <p> {{ price2}} 만원</p>
</div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      //데이터 보관함...object자료로 저장 key:value 형식
      price1 : 60,
      price2 : 60,
      logo : '원룸샾',
      style : 'color:red;font-size:20px;',
      products : ['역삼동원룸','천호동원룸','마포구원룸'],
    }
  },
  components: {

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

products : ['역삼동원룸','천호동원룸','마포구원룸'],

이것은 for문을 위한 숙제....ㅋㅋ

코딩애플 Vue3 직방, 인스타그램 웹앱 -- 1

나이많은 초보 — Wed, 8 Nov 2023 15:45:08 +0900

vue.js 기본 설치 진행.

>> node.js 설치…다운로드시 기본 설치 하는 곳에 변경하지 말고 그냥 하라고 했으나 나는 지금 개개인 설치되어 있음. 하지만 에러나서 삭제 후 에 그냥 신버전으로 다시 다운 로드 함

>> vs code 비주얼스튜디오 코드 설치--이건 그냥 원래 있는거 썼는데 문제 없었음....

>> 신규폴더 생성해서 경로 이동 후→ 터미널에서 npm install -g @vue/cli 입력 후 엔터 / vue를 설치함

node 명령어로 설치해주는 것임.

에러난것에러안난것—-메세지가 다르네….

에러난

node재설치후 명령어 ( npm install -g @vue/cli ) 입력하니 잘됨.

>> 부가기능 설치 extensions 버튼 누르면 됨.—3가지 설치

Vetur 설치
HTML CSS support
vue 3 snippets ///코드 자동실행 부가기능 설치 extensions 버튼 누르면 됨.—3가지 설치

>> 신규 프로젝트를 생성한다. --여긴 부동산 관련 프로젝트라.....

 vue create vuedongsan

에러남..

스크립트 보안관련 문제라고 함. https://samsons.tistory.com/16 이분글 참고하여히

해결함.....ㅋㅋㅋ

[PowerShell] 스크립트 실행 시 오류(UnauthorizedAccess), (PSSecurityException)

+ CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess ----------------------------------------------------------- ※관리자권한으로 PowerShell 실행해야합니다. 명령어 다음과 같이 입

samsons.tistory.com

해서 다시 vue create vuedongsan 입력 엔터 하면...

문구가 더있는데 되돌아 벌써 선택해서 없어짐....Vue 3를 선택 엔터 하면....마구마구설치가 됨.

설치 확인

드뎌 실행됨..... App.vue로 들어갔떠니... The template root requires exactly one element 에러라고 뜬다.

Vetur버전 문제라고 하는디....터미널가서 npm remove eslint 라이브러리 제거하고...했지만 안되었다....

https://velog.io/@cointreau/vue3-The-template-root-requires-exactly-one-element-%ED%95%B4%EA%B2%B0vetur

vue3 - The template root requires exactly one element 해결(vetur)

vue3 를 배우는 중인데, 강좌에서 권하는 대로 vscode/vetur 를 설치하고 나니 계속해서 아래 에러가 떴다.The template root requires exactly one elementvue2 에서는 root div 태그가 필수적이었는데, vue3 로

velog.io

참고하여 기존의 Vetur을 지우 Vue Language Features(Volar)를 설치함.

없어졌다..ㅋㅋㅋㅋㅋㅋㅋㅋ 힘들다...ㅋㅋ

>> 내가 만든 코드 실행해보기...미리보기.

터미널에서 npm run serve 넣었더니......

npm ERR! Missing script: "serve" // package.json 파일의 scripts 속성에 serve가 없다
npm ERR!
npm ERR! To see a list of scripts, run: // npm start라고 해서 package.json파일에 시작 스크립트 추가해야한다...라고 해서터미널 가서 다시 npm start해봄.... 역시 에러 활성화 ㅠㅠ

뭘 자꾸 하라하라.. 다른 에러도 막 나옴... 마지막 에러~

npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\sejioo\work\vs_vue_ex\package.json
npm ERR! errno -4058
npm ERR! enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\sejioo\work\vs_vue_ex\package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

검색에 검색을 하니...결국은 run을실행할 수 있는 곳은...package.json이 있는 곳에서 해야한다....

나는 처음시작한 vs_vue_ex곳에서 했으니깐 할수 없었던것.......터미널에서...cd vuedongsan해서 이동후 다시 실행하니 설치됨.

되긴 되었다...ㅋ

파란색 http://localhost:8080/ ctrl 누르고 선택하면 화면이 나옴.

나왔따!!!!!

에고...10분짜리 강의를 1시간 넘게 에러 찾아가며 돌려보고 있음...ㅋㅋㅋ

>> 정리 해보자.

1.예상한데로 node.js를 통해 npm 설치 도우미를 활용 할수 있었음... node_modules==라이브러리 집함

2. App.vue가 메인임. 이것을 index.html에 구겨서 넣는것이고 이걸 넣는것이 main.js임.

3. src폴더는 소스코드 넣는곳. public폴더는 html 파일등 기타 파일 넣는곳 임.

4. package.json 은 라이브러리 버전, 프로젝트 설정기록을 하는 곳이다. 프로퍼티 같은 역활

gmail. 인증메일 발송시 에러

나이많은 초보 — Thu, 2 Nov 2023 14:04:54 +0900

1. 비밀번호가 아닌 것같았음....역시나 로그인 안되서 수정하여 다시 올림....

2. 그래도 안됨.

DEBUG SMTP: Attempt to authenticate using mechanisms: LOGIN PLAIN DIGEST-MD5 NTLM XOAUTH2 
DEBUG SMTP: Using mechanism LOGIN
DEBUG SMTP: AUTH LOGIN command trace suppressed
DEBUG SMTP: AUTH LOGIN failed

로그를 자세히 보니 이런 글귀가 있음...메커니즘을 이용하여 로그인을 시도하였으나 안된다는 말........뭐지??ㅋㅋ

https://velog.io/@daydream/ReSeller-Project-Spring-Mail-AuthenticationFailedException-%ED%95%B4%EA%B2%B0

이분의 글과 함께 보니

구글 이메일 작업을 할때 2단계인증만 해서는 안되고 앱 비밀번호 등록해서 이...앱 비밀번호를 받아야 한다...노출하면안됨!!!

그걸 propertice파일로 가서.

여기 뒤에다 이메일 로그인 비밀번호가 아니라 이 앱 비밀번호를 입력하면 에러없이 발송이 된다....

요로게롬 잘 ~~~~~~ 왔다~!!

참고로 코드 정리!!!