지식 줍줍 🐿️

미니PC에서 실습하는 것도 좋지만,
기기를 왔다 갔다 하면서 작업하는 건 너무 번거롭다.
그래서 Mac에서 집에 있는 Ubuntu PC로 SSH 접속하는 환경을 만들어봤다.

☼ OpenSSH 는 ssh 서버/클라이언트 프로그램 패키지, ssh는 원격 접속 프로토콜 ㅎ

아래 순서대로 하면 깔끔하게 원격 접속이 가능하다.

-- OpenSSH 설치
sudo apt update
sudo apt install openssh-server -y

-- ssh 자동 실행 설정
sudo systemctl enable ssh 

-- ssh 실행
sudo systemctl start ssh

-- 접속
ssh [ubuntu 계정명]@[서버아이피] -p 22

(우선) 내부아이피로 접속완료!

코딩 자율학습 Vue.js 프런트엔드 개발 입문 (~3.3장)

• 강의링크: https://www.youtube.com/watch?v=hLaikZ_vy28

vue

1. 프로그레시브 프레임워크
2. MVVM 아키텍처
3. 뷰에 집중하는 프레임워크

vue 특징?

1. 가상 DOM 사용
2. 양방향 데이터 바인딩 (뷰↔뷰모델↔모델)
3. 설치간단

설치관련

1. node.js : 뷰가 노드 기반으로 실행하는 자바스크립트 프레임워크라 필요함
2. Vue CLI : 윈도우, 맥 등의 터미널에서 사용자 명령어 입력시 PC가 그에맞는 기능 실행해주는 처리함
3. 비주얼스튜디오 : 개발툴
   1. Vue - Official : 뷰에서 제공하는 문법 및 파일을 인식 가능하도록 하는 익스텐션
   2. Live Server : HTML 실시간 반영
   3. Prettier - Code formatter : 코드 이쁘게 정리
4. 크롬확장프로그램 : Vue.js devtools

개발방식

1. CDN (콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장해 제공하는 시스템)
   1. <script src="https://unpkg.com/vue@3.5.13/dist/vue.global.js"></script> 을 추가하여 바로 개발 가능
   1. npm create vue@latest : 뷰 프로젝트 설정
   2. npm install : npm create 으로 생성된 package.json 파일 참조해 패키지 설치
   3. npm run dev : 뷰 어플리케이션 실행
   4. npm 이용하여 뷰 애플리케이션 생성
      NPM (node.js 패키지 관리 도구)

CDN vs NPM

1. cdn 은 빠르게 적용 가능 but 의존성 관리(=필요 라이브러리 관리)를 직접 해야함. 서비스 커질경우 난감
2. npm 은 의존성 관리 쉽고, 큰 프로젝트에서도 개발하기 편함 *

애플리케이션 기본 구조 (중요한것 위주)

1. package.json
   1. 중심! 기본정보 및 의존성 모듈 정보, 스크립트 명령 정보
   2. npm run dev 실행할 수 있는 근거가 script 부분의 dev 속성이 있어 실행 되는 것
      1. vite 라이브러리 실행해 개발 서버 구동
2. index.html
   1. npm run dev 실행시 해당파일 먼저 로드.
3. main.js
   1. 뷰 애플리케이션을 초기화하고 구성하는 역할. (index.html 에서 실행)
4. App.vue
   1. 컴포넌트 (SFC: Single File Components)
   2. 문법
      1. <script> : 컴포넌트에서 사용할 로직 불러옴
      2. <template> : html 태그 작성
      3. <style> : css 적용

디렉티브 사용

접두사 -v 가 붙음. <template> 영역에서 사용 (https://vuejs.org/api)
v-html, v-text, v-pre, v-bind...

출처
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=341090647&start=pebook

현재 GUI 모드로 우분투를 갖고노는중인데 갑자기 키보드가 한글이 안먹는 현상이 생겼다 (?)

windows key + space 을 치니 한영키가 먹더라 (???)

어느날 미니PC을 구입하였다. (?)

제품은 [레노버 M710Q] 이거다.
(모니터 연결을 위해 DP to DP 양방향 케이블 및 usb 포트 지원 마우스도 같이 구매 ㅎ.. 키보드는 이미 있고..)

해당 PC 에는 이미 윈도우가 설치되어 있었다. 
그러나 나는 윈도우를 지우지 않고 리눅스(우분투!)를 같이 설치하여 멀티부팅을 하고 싶었다.
(나중에 개인적인 용무로 인한? 윈도우 환경으로 뭔가 작업이 필요할수 있을수도있지 않을까 하여?)

★ 멀티부팅을 하기 위한 준비

1) 우분투를 설치하기 위해 집에 돌아다니던 usb을 찾았고 포맷했다.
(대충 이런식..https://www.samsungsvc.co.kr/solution/40474)

2) 부팅디스크를 만들었다.
우분투 사이트를 가서 osi 파일을 PC에 다운받고, Refus 라는 프로그램을 설치하여 부팅디스크 만드는 작업을 진행했다. 
(https://amkorousagi-money.tistory.com/entry/%EC%9A%B0%EB%B6%84%ED%88%AC-%EB%B6%80%ED%8C%85-usb-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%9A%B0%EB%B6%84%ED%88%AC-%EC%84%A4%EC%B9%98 을 참고했다)

3) 윈도우 하드디스크 파티션 분할을 진행했다. 이유는 추후 우분투를 위한 공간을 할당하기 위함!
(대충 이런식..https://www.samsungsvc.co.kr/solution/25065)

4) 미니PC에 부팅디스크USB을 꼽아놓고!!!! 재부팅을 했다.
부팅 화면이 떳을때 부트 디바이스 선택 화면으로 이동하도록 F12을 검나게 눌렀다. (이게 PC 기기 별로 살짝 다른듯 했다.)

USB 을 선택! 엔터!

5) 우분투 설치 시작!

...쭉쭉

아까 윈도우 하드디스크 파티션 나눴던걸 기억!하여 수동 파티셔닝으로 선택!

쭉쭉...계정 설정까지 하면 우분투 설치 끝!

6) 미니PC에서 USB 제거 및 재실행시 F12을 눌러 OS을 선택 및 실행하도록함!

REST & API

• REST : HTTP URL 로 서버의 자원(resource)을 명시하고, HTTP 메서드로 해당 자원에 대해 CRUD하는것
• API : 클라이언트가 서버의 자원을 요청할 수 있도록 서버에 제공하는 인터페이스 

PUT / PATCH 차이

• PUT: 기존 데이터를 전부 새 내용으로 변경. 만약 기존 데이터가 없다면 새로 생성! (requestBody 에 전체 요청값을!)
• PATCH: 기존 데이터 중 일부만 새 내용으로 변경 (requestBody 에 일부 요청값을!)

HTTP 상태

• 1XX : 요청이 수신돼 처리 중
• 2XX : 성공 (정상)
• 3XX : 요청이 완료되려면 추가 행동이 필요함 (리다이렉트..)
• 4XX : 클라이언트 요청이 잘못되 수행할 수 없음
• 5XX : 서버 내부에 에러가 발생!

RequestBody (요청 메세지)

• 요청라인: method type: POST, PATCH.., url..
• 헤더: content-type..host..
• 본문: json 

ResponseBody (응답 메세지)

• 상태라인: 200..201..
• 헤더: content-type...
• 본문: json

로깅 (logging)

시스템이 작동할 때 당시의 상태와 작동 정보를 기록 

로깅단계

JPA 및 로깅 관련 properties 설정 

-- 프로젝트 내 resources > application.properties (or yaml)

server.servlet.encoding.force = true
spring.h2.console.enable=true
spring.jpa.defer-datasource-initialization=true

# JPA 로깅 설정
logging.level.hibernate.SQL=DEBUG

# 쿼리 줄바꿈
spring.jpa.properties.hibernate.format_sql=true

# 매개변수 값 보여주기
logging.level.org.hibernate.type.descriptor.sql.BasicBinder=TRACE

# 유니크 URL 생성하지 않기
spring.datasource.generate-unique-name=false

# 고정 URL 설정
spring.datasource.url=jdbc:h2:mem:testdb

링크 (Link)

• 미리 정해 놓은 요청을 간편히 전송하는 기능 (페이지이동!)
• 클라이언트가 링크를 통해 어느 페이지로 이동하겠다고 요청하면, 서버는 결과 페이지를 응답!

리다이렉트 (Redirect)

• 클라이언트가 링크를 통해 어느 페이지로 이동하겠다고 요청하면,
서버는 결과 페이지를 응답 하지 않고 재요청하라는 회신을 보냄 (재요청)
리다이렉트(재요청)을 지시받은 클라이언트는 서버가 보내준 주소로 다시 요청을 보내고 서버는 이에대한 결과를 응답

클라이언트 링크 이동 요청 → 서버에서는 클라이언트에게 리다이렉트로 응답 → 클라이언트는 재요청 주소로 다시 요청  → 서버응답

롬복 (Lombok)

• 코드를 간소화해 주는 라이브러리 (@Data)
    → https://projectlombok.org/features/Data 

    → 꼭 필요한 어노테이션만 사용하는것이 좋다. (@Data 지양 구글 검색)

• 로딩 기능 지원 (@Slf4j)

리팩터링

• 코드의 기능에는 변함없이 구조 및 성능을 개선하는 작업

폼데이터 (form data)

• <form> 태그에 실려 전송되는 데이터. 전송된 데이터는 컨트롤러가 객체에 담아 받음(=DTO)
• DTO(Data Transfer Object) 을 지지고 볶아 DB 에 저장

Database & JPA

• 데이터베이스는 데이터를 관리하는 창고 (DB)
• DB는 자바언어를 모름! DB는 SQL(Structured Query Languate) 만 알고있음.
• 자바에서 DB에 데이터 기록을 하기위한 수단중에 하나로 JPA가 있음 
    → JPA(Java Persistence API) 을 통해 자바언어로 DB에 명령을 내림!
    → 객체지향적으로 관리를 할 수 있음
    → JPA 는 entity, repository 가 있음

실습관련

1. H2 DB에 웹 콘솔로 접근 허용하도록 함 (application.yaml)

spring.h2.console.enabled=true

2. h2 db 접속 관련
→ 인텔리제이 > debug 콘솔 > jdbc: 검색 후, jdbc url 정보 찾아 localhost:8080/h2-console 내의 JDBC URL 에 기입

뷰템플릿 (View Template)

• 화면을 담당하는 기술
• 웹페이지(View) 을 하나의 틀(Template) 으로 만들고 여기에 변수를 삽입해 서로 다른 페이지로 보여줌 ❓
    → 정보성의 데이터(변경 가능한 정보) 들을 유동적으로 변경하여 보여준다는 내용
• mustache
    → 뷰템플릿 만드는 도구 (템플릿 엔진)
    → src > main > resources > templates 에 위치
    → 컨트롤러 메소드 내에서 에서 mustache 파일명을 return 하면 서버에서는 알아서 mustache 파일을 찾아 웹브라우저로 전송함!

    → 플러그인 추가 필요 
• 그외에도 Thymeleaf..JSP 등이 있다.ㅎㅎㅎ

MVC 패턴 

• Model : 데이터를 관리!

• View : 화면에 보여줌!

• Controller : 요청과 응답을 받음!

실습관련

1. html 파일 내에서 한글이 깨지는 경우, application.properties 파일 내에 아래의 내용 추가 필요 

server.servlet.encoding.force=true