내가 고인물이던 시절, 뒤로 가기 버튼을 누르기가 무서웠다. 뒤로가기 버튼을 누르면 리스트 제일 처음으로 가기 때문이다
하지만 요새 당근마켓/ 헬로마켓/ 쿠팡/ 카카오톡/ 토스 등 모두가 이전 페이지를 기억하고 있다.

어떻게 하면 이런 기능을 구현할 수 있을까? 1 성공 // 2, 3실패 사례

1.Router의 scrollBehavior를 사용

1. router 의 index.js설정
   => 만약 저장된 포지션 (savedPosition)이 있다면 거기로 가거라 !! 아니면 x:0, y:0으로 가라 !!
   

2. router.go(-1)을 사용하여 이용
   

2. page를 기억하자 !

무한스크롤을 보여줄때 page별로 보여주고 '이전 버튼'을 클릭했을때 저장된 페이지로 간다면??
한번 구현 해봤다..

PPT 애니메이션처럼 번쩍 번쩍했다. 이러한 방법은 유연하게 내려가는 무한스크롤을 본질을 무너뜨렸다.
그럼 limit 을 더 늘리면 되지 않을까 ? 라는 생각이 들어 시도 해봤지만 똑같았다.
=> 실패 !!!

3. Vue.js 의 'Component'이용하기

component 역시 처음으로 로딩 한다
=> 살패 !!

1) 게시글 row 증가

2) 회원정보 로그아웃, 계정 삭제 버튼 중간 정렬

3) in 게시글 → 중복 부분 component로 만들기 → Board / OfferInfo / ProductInfo

현재 메모리 사용량은 vue 프로젝트: 426 / spring 프로젝트 : 151/ node서버: 14 를 차지 하고 있다.

문제점?

EC2 메모리 용량은 1GB 인데 npm run serve 할때 사용량이 너무 많아서 1GB 가까이 간다. 그럴 때면 linux가 버벅거리고 페#### 이지 역시 느려진다. 또한 이미지 한장은 괜찮은데 , 다른 사용자가 동시에 이미지 업로드시 vue프로젝트가 재부팅 되면서

메모리 용량이 초과되어진다.

해결책?

1. JavaScript 용량이 너무 많으니깐 정리를 한다.

2. Rinux에서는 swap 메모리를 지정 할 수 있다는 점을 활용한다.

문제점

이미지 썸네일 후 저장되는 시간 > 화면에 출력하는 시간

해결책

반성문 쓰는 란

DB 테이블 관계

1)Product(1) : Picture(다)

2)Product(1) : Auction(다)

1번. Group_Concat 이용

원래는 Group_concat을 이용하여 DB를 출력했다.

위를 출력하면 , [product 내용들 , (picture, picture, picture)p_picture ]<=이러한 형식으로 출력되었을것이다.

이렇게 출력된 p_picture- String 을 Domain에서 List형식으로 바꿔주었다.

하지만 경매(Auction)테이블을 출력할때는 price, participant, date등 여러 내용이 출력되어야한다.

이렇게 출력해낸 정보들을 Controller에서 Map에 저장시켜주었다.

이방법의 문제점은 ?

=> DB접근을 2번한다.

=> 지금은 괜찮지만, product와 연결된 table이 많아진다면 개별적으로 DB에 접근해줘야한다.

2번. ResultMap을 사용하자 !!

필요한 내용들을 JOIN을 통하여 출력한다.

(출력한 DB와 똑같은 XML에 위의 내용을 적어야 한다.)

이렇게 출력한 내용을 resultMap에 저장한다. 참고로 은 list 형#### 식으로 받겠다는 의미이다.

Product(1) : Picture(다) : Auction(다)

결국, 위의 형식으로 출력이된다.

위 사진의 파란색에 저장이 되어진다.

이 방법의 문제점 => DB접근 횟수는 낮아졌지만 , Object안에 Object라서 Front- end에서 다루기가 힘들다.

socket.io 작동은 되지만,

처음 "sockjs.js?9be2:1609 GET http://아마존 서버/sockjs-node/info?t=1622872526968

net::ERR_CONNECTION_TIMED_OUT" ### 이러한 에러가 뜬다.

문제점 아마존 서버 IP로 접속된다.

시도 1) port 번호 변경

시도 2) vue.config.js 파일에 proxy 설정

시도 3) Linux에서 proxy 설정

해결책은 Webpack!!!!

JavaScript Map을 검색했을때 정말 여러가지 내용이 많았다. map.get('key') 부터 for문을 이용해서 map의 key값과 value값을
빼내는 방법까지 많은 방법들이 있었지만 통하지 않았다. 하지만 지금까지의 경험을 이용해 여러가지 방법을 시도 해보았다.
사실 List출력하는 방법까지 해보았다. 허허 해결책은 너무나 간단했다.

해결책

결과

v-tap에 틈이 생기는걸까..?

이유는 아래 margin-left때문이었음

해결책?? <v-tap class="ml-0"></v-tap>으로 해주면 완성

요새 어플들을 보면 내 정보 수정을 아이디 따로, 이메일 따로 다 따로 따로 한다.

개발자들은 일이 더 많아진다..

Put 형식으로 하나 하나 다 보내서 백쪽도 하나 하나 다 만들어야한다.

이건 너무 비효율적이라고 생각하여, 프론트에서 조정하기로 했다.

나는 프론트에서도 두가지 갈림길에 갈렸다.

1. store에서 actions를 email수정함수, password수정함수.... 등 다 만들어서 가는 방법

2. 각각의 vue파일에서 수정함수 만드는 방법

협업을 고려한다면 2번 방법이 더 효율적이라고 생각해서 2번 방법을 선택했다.

vue파일

store

아주 잘들어 오는군 흐뭇

ResponseEntity 리턴할때는 (body, headers, (Object) status)로 반환가능

만약, 두개의 값을 보내고 싶을때는 어떻게 하는게 좋은가?

-> User domain에 담아서 user로 보내버리깅 ~~

기존방법: [get방식 ], [ ~?lat=#{lat}&lon=#{lon}&industry=#{industry}] , [data 받을때 : @RequestParam]

문제점: 넘어가는 industy중에 "피자/샐러드", "돈까스/일식" 등 이 존재, URL에 넘기게 되면 '/' 를 인식해서 문제가 발생함

해결시도

1) 일단, URl 로 넘기면 안되겠구나 ! 그럼 payload 로 넘기고 @RequestBody로 받자 !!!

실패 => Why?? @RequestBody는 Post방식에만 사용 가능하다 !!!! 김수영 감수영 되야지!!! 정신 차려!!

해결책 **encodeURI()**을 사용하여 값을 인코딩한 후에 넘겨주면 된다

이 문제는 Tomcat의 문제이다. Tomcat은 Delete가 payload를 넘겨받기 위해서는

1.

이러한 방식이 있다.

2.만약 보내는 값이 하나라면 아래처럼 링크에 숨겨서 보낼수도 있다.

1.aws 등록

2. https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html => putty 설치 링크

키 바꾸는고 putty 접속

3.

HostName 적고 Save
Connect >Data>Auth =>키등록

실행
Linux Server 열림
(제일 기본 Home)

4. CentOS7 node.js 12.x 설치(npm)

curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash -
yum install -y nodejs

확인 ) node -v // npm -v

5.CentOS7 MariaDB 설치

1. vi /etc/yum.repos.d/MariaDB.repo(문서 만들기)

내용:
[mariadb]
name = MariaDB
baseurl = http://yum.mariadb.org/10.4/centos7-amd64
gpgkey=https://yum.mariadb.org/RPM-GPG-KEY-MariaDB
gpgcheck=1

2)yum install MariaDB

3)rpm -qa | grep MariaDB
빨간색 나와도 오류 아님 ㅋㅋ

4)systemctl start mariadb /// 'systemctl status mariadb.service'

5. /usr/bin/mysqladmin -u root password 'P@ssw0rd'
   패스워드 설정하는거임

6. mysql -u root -p
   Enter password: P@ssw0rd

7)부팅시 자동실행
GRANT ALL PRIVILEGES ON . TO '아이디'@'%' IDENTIFIED BY '패스워드';
FLUSH PRIVILEGES;

확인)systemctl is-enabled mariadb

8. Linux 파일 집 할때 알집 NO~~ 까다로움

https://filezilla-project.org/download.php?type=client#close

9. Java설치

1. 있는지 확인 java -version

2. 설치
   $ sudo yum list | grep jdk
   yum install java-1.80-openjdk
   sudo yum install java-1.8.0-openjdk-devel.x86_64

3. 설정
   경로 알아내기
   readlink -f /usr/bin/java
   설정
   vi /etc/profile

//
export JAVA_HOME=/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.282.b08-1.amzn2.0.1.x86_64
export PATH=$PATH:$JAVA_HOME/bin
export CLASSPATH=$JAVA_HOME/jre/lib:$JAVA_HOME/lib/tools.jar

저장
source /etc/profile
4) 테스트
vi Hello.java

//
public class Hello{
public static void main(String[] args){
System.out.println("Hello World!!");
}
}

실행 javac Hello.java
java -cp . Hello

/usr/lib/jvm/java-1.8.0-openjdk-1.8.0.282.b08-1.amzn2.0.1.x86_64/jre/bin/java

UserMapper.xml에서 parameterType= "User"로 했을때 오류가났다
오류를 읽어보니 domain/User을 찾지 못해서였다

-> 해결책? 패키지 명까지 적어주기 !

이미지 업로드 후 바로 인식을 못한다. 한번 load 해야지 인식이 된다.

이미지 경로는 vue파일 아래에 있다.

문제점? 이미지 저장경로가 문제가 있는것 같다 . Vue파일은 npm run build 하면 webpack 처럼 그 상태로 묶여버린다.

그럼 이미지가 폴더 안에 저장되어 있어도 Vue 파일로 묶여버리면 파일 업로드 인식을 못한다.

해결책?

시도 1) 저장 경로를 Vue파일 밖으로 지정한다 => X

시도 2) 저장 경로를 public/picture로 지정한다 => webpakc에서 제외되는 경로 => X

require의 본질에 대해서 생각해 볼 필요가 있다. require은 webpack 되어진 것들을 인식해 가져온다.

기존의 이미지 불러올때 : require('../../asset'+ 이미지이름) 을 아래의 형식으로 변경 시켜야 한다.