🐳
Engineering Wiki
  • 🖐️Welcome
  • 📚백엔드 로드맵
    • 메인페이지
  • Spring
    • spring boot
      • security
        • security 기본
        • filter
        • JWT
      • 스프링 핵심 원리
        • 객체지향 설계와 스프링
        • 스프링IoC컨테이너와 bean
      • IntelliJ
        • Spring boot 생성 및 git clone
        • Spring boot 프로젝트 생성
      • vscode
        • Spring boot 프로젝트 생성
      • scheduling
        • 스케쥴링 설정시 에러 상황
      • paging
      • 에러 핸들링
        • ErrorCode생성 및 ExceptionHandler로 에러처리
        • Security & JWT 에러처리
        • spring cloud sleuth
      • 로그 핸들링
        • logback
        • HttpRequestServlet 래핑
      • gradle
        • hidetake.ssh 키파일 설정
      • maven
        • maven tomcat
      • lib
        • lombok
        • tiles
      • API 부하테스트 툴 K6
      • JPA
        • Mybatis / JPA 차이
      • Mybatis
    • spring batch
      • batch
        • Spring Batch 기본개념
  • FRONT
    • vue
      • Spring boot & Vue.js 설치 및 연동
      • Spring boot & Vue.js 웹개발 세팅
      • vue의 기본구조 실행순서
      • SPA 이해
  • JAVA
    • 환경설정
    • 자바의 정석
      • generics
  • DATABASE
    • mongoDB
      • 정규표현식을 사용해 대소문자 구분없이 검색
      • mongoDB export import
      • MAC 설치 및 실행
    • MYSQL
      • dbeaver 데이터 내보내기 불러오기
      • [에러] 스프링 mysql 8 연결 에러
      • MAC M1 mysql 설치
      • GROUP BY 정리
      • 테이블 명세서 빠르게 생성
  • AWS
    • IAM
    • 설치&명령어
      • eb 설치 & 명령어
      • CLI 설치 & 명령어
    • sam
      • SAM 개념
      • SAM Lambda S3이벤트 트리거, MongoDB 접근코드
      • SAM intellij 배포
    • peering
      • mongodb atlas AWS vpc peering
      • MongoDB & Lambda VPC peering ,endpoint설정
    • 쉘스크립트
      • 도커 컨테이너 중단시 슬랙 리포팅 및 재실행
  • DOCKER
    • 설치&명령어
      • Docker 기초
      • Docker Container 유용한 명령어
    • MAC관련 문제
      • 이미지 빌드 관련 문제상황
      • MAC M1 도커 실행 원리
      • [에러] docker: Error response from daemon: Mounts denied:
  • ELK
    • 세팅
      • 로드벨런서에 logstash 세팅
      • Elastic Beanstalk + Elastic Cloud + docker 설정
      • ElasticCloud + filebeat + logstash + docker 설정 (버전8.5.0)
      • ELK 적용 사례, 로그수집(filebeat/logstash) 설명
    • logstash
      • Logstash는 로그를 왜 message라는 field로 저장할까?
      • logstash health check
    • filebeat
      • filebeat 아키텍쳐
  • unity
    • 유니티 기본
      • 캐릭터 이동
      • 카메라
  • WORDPRESS
    • 워드프레스 기본
  • git
    • GIT 개념
      • 라이프사이클
    • 명령어
      • defult 브랜치 main 으로 변경
      • 첫번째 커밋 삭제(브런치삭제) 후 원격저장소에 강제 push
      • git 원격저장소에 remote 방법(vscode로 진행)
      • git gh
      • git reset
      • git rebase
  • MAC
    • 개발 환경세팅
      • 맥 초기 개발세팅
    • 유용한내용
      • app store 다운로드 없이 웹에서 Xcode 다운
      • ubuntu iso 설치 usb 만들기
      • 응용프로그램 에러
      • 잠김 파일
  • CS
    • data structure & algorism
      • 자료구조의 정의 및 종류
  • 방통대
    • 대학수학의 이해
      • 1강. 수학의 기초(1)
    • 딥러닝
      • 1강.신경망의 개요
  • NODE
    • 개발기록
      • 인스타그램 API 활용하여 게시물 슬랙에 리포팅
Powered by GitBook
On this page
  1. FRONT
  2. vue

SPA 이해

자바스크립트의 프레임워크가 등장하기 전에는, 플레인 자바스크립트나 제이쿼리로 프론트 개발함

프론트엔드의 개발이 복잡해지면서 프레임워크가 등장함

SPA싱글 페이지 어플리케이션이라는 뜻

기존의 방식은 MPA멀티 페이지 어플리케이션인데

클라이언트에서 리퀘스트가 있을때 마다 > 서버로부터 리소스를 받아와 > 페이지를 렌더링 하는 방식으로

매 페이지마다 서버를 거쳐 리소스를 받아와 렌더링함

페이지를 렌더링할때마다 중복된 html, css, javascript를 받아옴,

이를 보완하기 위해

SPA는 기존의 한계를 보완해서 갱신이 필요한부분만 json 형태로 데이터를 가져와 바인딩함 ⇒ ajax같은 방식

비동기로 서버와 데이터가 통신할 수 있는 방식임

이는 url 을 변경 시키지 않아 뒤로가기가 불가함 (히스토리 관리 불가, SEO이슈도 있다함)

HASH 방식은 이를 보완하기 위해 나온 라우팅 방식임

이는 사용해보지 않아 자세히 모르겠지만 브라우저에선 url이 바뀐걸로 인식하게 해서 히스토리 관리가 가능하게한다함

Vue는 가상 DOM을 생성할수있으며 DOM을 통해 모든 요소를 실시간 반응형 컴포넌트로 제작할 수 있음

규모가 커질수록 컴포넌트도 커지기 때문에 이를 관리할 수 있는 라이브러리들을 제공함

뷰로 웹개발시

  • 프로젝트 구축 및 기타 작업을 수행해줄 Vue Cli

  • 라우팅을 담당해줄 Vue Router

  • 컴포넌트간의 status 관리를 담당할 Vuex

를 사용함

Refer

Previousvue의 기본구조 실행순서Next환경설정

Last updated 9 months ago

OKKY | [VUE] SPA 웹 프론트앤드 개발을 위한 정리