미치게힘든코딩

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하고

선언해서 사용한다.  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~~~

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

난 백단이 주인데 왜 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에서가 주라서 요것만....올림...요렇게 해서 앞단은 좀 정리 되었다.

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

에 넣어서 처리하고

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

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

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

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

전체코드는 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

시작하기로 가서

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에서는 보안이라는게 자동으로 있다.

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를 만드는 것이다.

참고!!!!

https://jwt.io/

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

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

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

7. logOut.....마지막

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

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

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

# 데이터 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 영역에 함수를 추가한다.

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

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