본문 바로가기

개발66

Vuex / 상태관리 / Vuex 패턴 및 요소 Vuex 란? Vue.js 의 상태 관리를 위한 패턴이자 라이브러리이다. 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. Vuex 를 사용하지 않은 경우 컴포넌트 기반 프레임워크는 한 화면을 작은 단위의 컴포넌트 여러 개로 쪼개어 구성한다. 예를 들어, 뷰에서는 컴포넌트 간 데이터 전달을 위해 emit, props 등을 사용하는데 여기서 몇 가지 문제점이 있다. 데이터의 움직임을 확인할 수 없다. 부모-자식 컴포넌트의 관계가 복잡해지면 데이터의 이동을 파악하기 어렵다. 컴포넌트로부터 데이터를 전달받기 위해 중간에 거쳐야 할 컴포넌트가 많아진다. 먼저, 자식 컴포넌트의 깊이에 따라 props, emit 의 수가 많아지며 관리에 어려움이 생긴다. 게다가 부.. 2022. 4. 5.

Vue 라우터 / SPA / Router 값 전달 SPA (Single Page Application) 일반적인 웹 어플리케이션은 클라이언트가 웹 페이지를 요청하면 서버로부터 html 을 전달 받아 렌더링 엔진을 통해 화면에 보여준다. 한 페이지에 해당하는 페이지 용량이 커지면 요청마다 매번 새로운 페이지를 전달 받기 버겁다. 이러한 문제를 해결하는 것이 SPA, Single Page Application 이다. SPA 는 단일 페이지로 구성된 웹 어플리케이션으로 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현한다. 페이지 변경이 일어난다는 것이 최초 로드되었을 때 미리 브라우저에 올라간 템플릿만 교체하는 것이다. 화면 이동 시에 필요한 데이터를 html 로 전달(서버사이드 렌더링) 받지 않고 필요한 데이터만 서버로부터 전달 받아 동적.. 2022. 4. 4.

Vue 컴포넌트 / 컴포넌트 간 통신 Vue 컴포넌트 컴포넌트는 화면의 영역을 일정한 단위로 쪼개어 재활용 가능한 형태로 관리하는 것이다. Vue 에서 최상위 컴포넌트는 root 고 이를 시작으로 트리 구조로 형성된다. - 전역 컴포넌트 여러 인스턴스에서 공통으로 사용, 모든 자식 컴포넌트에서 사용 가능하다. 주로 플러그인, 라이브러리 등 앱 전역에서 사용할 공통 컴포넌트를 작성한다. vue 인스턴스 생성 전에 컴포넌트를 만들어주어야 한다. Vue.component('component-a', { template: ' hello world AAA !!!'}) Vue.component('component-b', { template: ' hello world BBB !!!'}) Vue.component('component-c', { templat.. 2022. 4. 4.

Vue 사용법 / 문법 / 옵션 / 디렉티브 Vue.js 적용 방법 👆CDN 방식으로 Vue 시작하기 - 개발용 // 최신버전 불러오기 // 특정버전 불러오기 - 상용 ✌️Webpack 방식으로 Vue 시작하기 npm으로 cli를 설치해 vue 라이브러리를 불러오는 방식이다. npm install -g @vue/cli # OR yarn global add @vue/cli 🔎 npm(Node Package Manager) node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통해서 관리하고 배포한다. 직접 개발한 모듈이나 다른 사용자들이 미리 만들어놓은 모듈을 간편하게 다운받아 사용할 수 있다. 🔎 Node.js 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼으로 자바스크립트를 활용하고 내장 http 서버 라이브러리를 가지고 있어 웹 .. 2022. 3. 28.

Vue.js 기본 개념 / 사용하는 이유 / 가상 돔 Vue.js 란? 자바스크립트(이하 js) 기반으로 만들어진 웹 개발을 위한 프레임워크 중 하나이다. MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리로 데이터가 변경되면 DOM에 다시 대입해줘야 화면이 변경되었던 일반적인 웹 개발 방식과 다르게, 데이터 변화를 감지하여 화면에 변경사항을 바로 표시할 수 있다. MVVM 패턴을 사용한다. Virtual DOM을 사용한다.(React의 가상 돔 채택) 양방향 데이터 바인딩을 제공한다.(Angular의 데이터 바인딩 채택) Template와 Component를 사용하여 재사용이 가능한 인터페이스를 만든다. 왜 Vue.js 를 사용할까? 1. 데이터 바인딩이 간편하다. 아래 HTML 코드에서 엘리먼트를 변경하려면 어떻게 해야할까? hello.. 2022. 3. 17.

Spring Security 중복 로그인 방지 설정 WebSecurityConfigurerAdapter를 구현한 Spring Security 설정 파일 내 아래와 같은 코드를 추가한다. http .sessionManagement() .maximumSessions(1) .maxSessionsPreventsLogin(false) .expiredUrl("/login") .sessionRegistry(sessionRegistry()); - maximumSessions 최대 유지 가능한 세션 수는 1로 설정 - maxSessionsPreventsLogin 은 중복 로그인이 되었을 때 먼저 로그인한 사용자를 세션 아웃 시키려면 false, 나중에 로그인한 사용자를 튕기려면 true로 설정 @Configuration @EnableWebSecurity @Required.. 2022. 3. 15.

Java NIO / 논블로킹 / 비동기 방식 IO와 NIO 자바에서 소켓 통신을 구현하기 위해서는 io 또는 nio 패키지를 활용하게 될 것이다. 자바 4부터 새로운 입출력이라는 뜻에서 java.nio 패키지, 자바 7부터 네트워크 지원을 강화하여 java.nio 패키지를 업그레이드 했다. IO는 스트림(Stream)이라는 단방향 통로로 외부 데이터와 통신 NIO는 채널(Channel)이라는 양방향 통로로 외부 데이터와 통신 ▶ NIO는 읽기/쓰기를 하나의 통로로 해결할 수 있다. IO는 입출력 시 버퍼를 사용하지 않지만, 필터 스트림을 사용할 수는 있음 NIO는 입출력 시 버퍼를 사용함 ▶ NIO는 버퍼를 사용하여 입출력 속도가 빠르다. IO는 블로킹 방식만 지원하여 스레드를 생성하고 없애는데 큰 비용이 들어감 NIO는 블로킹/논블로킹 방식 중 .. 2022. 3. 14.

TCP 소켓 통신 소켓(Socket) 네트워크에서 데이터 통신이 가능하도록 연결해주는 연결부이다. 소켓은 프로토콜, IP 주소, 포트로 구성된 두 호스트를 연결해주는 도구이다. 소켓 종류 - TCP 양방향으로 바이트 스트림을 전송, 연결 지향, 흐름제어 보장 - UDP 비연결형, 데이터 크기 제한, 확실한 전달 보장 X TCP 소켓 프로그래밍과 HTTP 프로그래밍의 차이 🔎 연결 방식 - TCP: Server와 Client가 특정 Port를 통해 실시간 양방향 통신, 연결을 유지하고 있음 - HTTP: Client의 요청이 있을 때만 Server가 응답하여 요청한 정보를 반환하는 단방향 통신, 정보를 반환하며 바로 연결을 종료함 🔎 데이터 형태 - TCP: Byte Array - HTTP: String 클라이언트 소켓과 .. 2022. 3. 11.

Spring Boot 프로젝트 git 연동 Spring Boot + Git Spring Boot 프로젝트 형상 관리를 위해 git과 연동하는 방법이다. 1. Clone Git Repository STS에서 Window > Show View > Other... > Git 검색 > Git Repositories 선택 오른 쪽 상단에 Open Perspective 버튼(테이블 + 버튼)을 눌러 더 쉽게 Git Repository에 접근할 수 있다. 2. Clone Git Repository Clone a Git repository 버튼을 눌러 자신의 git respository에서 복사한 url과 git ID/PW를 넣어준다. 다음으로 넘어가 로컬 저장소를 지정한다. 이렇게 만들면 Git Repository에 내가 연결한 repository가 추가된다.. 2022. 3. 9.

Spring Boot에 MySQL / Mybatis 연결하기 Spring Boot + MyBatis + MySQL Spring Boot 프로젝트에서 MyBatis를 이용한 MySQL 연동 방법이다. * Spring Boot 프로젝트를 생성하고 기본적인 세팅을 하는 방법은 여기에 1. 의존성 추가 mybatis 및 mysql을 사용하기 위해 해당 의존성을 추가한다. maven을 사용하는 프로젝트의 설정파일인 pom.xml에서 의존성을 추가하면 글로벌 저장소에서 필요한 라이브러리를 로컬 저장소로 다운로드하고 클래스 패스를 지정하여 프로젝트에서 사용할 수 있도록 한다. 아래 링크의 MVN Repository에서 원하는 의존성을 검색하여 추가할 수 있다. 보통 보편적인 버전이나 최신 버전을 사용한다. https://mvnrepository.com/artifact/mysq.. 2022. 3. 9.

이전 1 2 3 4 5 6 7 다음

티스토리툴바