지식 줍줍 🐿️

코딩 자율학습 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

객체지향이 나오게 된 배경

• 1970년대 이전에는 설계없이 필요할때마다 개발하는 방식으로 진행
    → 시간이 지나면서 중복코드 증가, 유지보수의 어려움 발생으로 신뢰도 바닥 및 성능 저하 등의 이슈가 발생하게됨

• 1970년대 이후, 프로그램을 쪼개어 개발하는 구조적 개발 방법이 많이 사용 (분석 - 설계 - 개발 - 테스트)
    → 사용자 요구사항이 명확하고 변화가 많이 않은 환경에서는 효율적이나, 생명주기 각 단계별(ex. 물품구매..물품조회..물품삭제..)로 자연스럽게 서로 연결되지 않고, 프로그램 내부 기능들은 데이터와 복잡하여 얽혀있어 소프트웨어를 변경하는게 쉽지 않음
    → 유지보수 비용 증가
    → 객체지향이 나오게됨

• 객체지향은 현실세계에 존재하는 실체 및 개념들을 객체라는 독립된 단위로 구성 & 메세지로 상호작용 & 객체지향 시스템을 가시화하고 명세화하고 문서화한것이 UML

객체지향 요소

• 객체(Object) : 속성과 행동을 가지고 있는것
    → (자료(=속성(변수) + 값(변수값)=클래스에서 정의) 및 오퍼레이션(=클래스에 포함되어있는 메소드))

• 클래스(Class) : 객체를 생성할 수 있는 구조와 정보를 가지고 있는 틀 

• 메세지(Message) : 어떤 한 객체가 다른 객체에게 특정 작업을 요청하는 신호
    → 수신객체 이름 + 수행할 오퍼레이션 이름 + 전달되는 매개변수 

객체지향 특성

• 캡슐화(Encapsulation) : 해당 기능의 동작에 대한 흐름을 자세하게 알필요 없이, 외부에서 원하는 기능들을 수행하도록 지시하는것. 
    → 외부에서 객체 내 직접 접근 X
    → 외부에서 접근할 수 있는 오퍼레이션을 통해 관련 데이터에 접근 (이로써 단순하고 명확하게 표현가능)
    → 정보은닉이 가능 

• 상속(Inheritance) : 프로그램을 확장 가능하도록 해주는 수단
    → 재사용 및 확장성 
    → 일반화(Generalization) : 하위클래스의 공통적 특성을 추상화하여 상위 클래스로 정의하는것 (하위 -> 상위)
    → 특수화(Specialization) : 상위 클래스의 속성을 상속받아 하위 클래스에 실체화 (상위 -> 하위)

• 추상화(Abstraction) : 특정측면을 강조하여 나타낸것. 실세계상황을 간결하고 명확하게 모델링하여 이것을 프로그램으로 구현(=실체화)

• 다형성(Polymorphism) : 여러클래스에 같은 메소드명을 사용하나, 동작이 다른 케이스 (오버라이딩)

>>> 캡슐화와 추상화를 헤깔리면 안될듯!
캡슐화는 결과의 행동만 바라보는것이면(호출하는자의 입장에선 내부사정은 알필요 없다!), 추상화는 구체화를 하기 위한 수단의 시작으로 봐야할듯