코린이탈출

vue-router 설치페이지 이동을 지원하는 vue-router 설치함 bootstrap -> primeVue 로 변경기존에 학원에서 만들었던 프로젝트 두개는 내가 CSS를 설정해본 적이 없었다.CSS에 대해서 알아보고싶기도 했고, 프론트쪽 하려면 어느정도는 알고 있어야 한다고 생각했다.그래서 첫번째 개인 프로젝트에서는 css를 적용시킬때, UI 프레임워크 없이 사용자 정의 CSS를 사용하여 구현하였다.전체적으로 모든 CSS를 직접 해보고 나니까 아주 조금이나마 알게된것 같다. 그리고 이번 프로젝트에서는 부트스트랩과 같은 UI 프레임워크를 사용해보려고 한다.처음에는 학원다녔을때 썼던 부트스트랩을 써볼려고 했다.뷰 플젝에 부트스트랩5를 사용하려고 적용시켰는데부트스트랩 문서에 작성되어있던 내용들 때문에 부..

https://ux.stories.pe.kr/256#google_vignette Vue의 Vuetify로 대규모 프로젝트 SCSS(CSS) 진행하는 방법안정성이 입증되었는지 요즘에는 Vue로 대규모 프로젝트를 많이 하는 추세인것 같습니다. 저도 대규모 프로젝트에 퍼블리셔로 참여하면서 얻은 경험을 기록 차원에서 포스팅을 해보려고 합니다ux.stories.pe.krSCSS 폴더 구성 layout : 웹페이지 전체를 구성하는 레이아웃 cssview : 각각 개별 화면에 대한 csstemplates : 여러개의 Components로 구현된 웹사이트에 특화된 템플릿components: 버튼, 인풋박스 등의 개별 컴포넌트에 대한 css_common.scss : 공통적으로 적용되는 CSS_index.scss : 모든..

Vue3 프로젝트 실행구조 이해하기1) 제일 먼저 Vue 프로젝트가 실행됨npm run serve 2) 플젝이 시작되면, 가장 먼저 main.js 파일을 실행함 3) main.js 에서 App.vue 컴포넌트로 Vue 앱을 생성 4) main.js 라우터(router), 상태관리(vuex), 믹스인(mixins),   + VSCode 폴더/파일 아이콘 직관적으로 바꾸는 법"Material Icon Theme" 다운받아서 적용시키https://devent.tistory.com/138 VSCode 파일/폴더 아이콘 직관적으로 바꾸기VSCode에서 제공하는 기본 폴더에는 아이콘이 없습니다. VSCode의 익스텐션 기능을 이용하여 보다 직관적인 아이콘을 설정해주도록 하겠습니다. 먼저 왼쪽 사이드바에 익스텐션 바..

HTML 파일에서 뷰 코드 작성 시의 한계점뷰 애플리케이션은 여러 개의 컴포넌트로 화면을 구성하며, 페이지 사이를 이동할 땐 라우터를 사용해야함HTML 파일에서 컴포넌트를 등록해 사용하기 어려움 => 오탈자 찾기 + 상위태그와 하위태그 관계 파악 어려움싱글 파일 컴포넌트 체계이러한 문제점을 해결하는 것이 바로 싱글 파일 컴포넌트(Single File Components) 체계싱글 파일 컴포넌트 체계: '.vue' 파일로 프로젝트 구조를 구성하는 방식확장자 .vue 파일 1개는 뷰 애플리케이션을 구성하는 1개의 컴포넌트와 동일함 .vue 파일 기본 구조  뷰 CLI(Command Line Interface)싱글 파일 컴포넌트 체계를 사용하기 위해 .vue 파일을 웹 브라우저가 인식할 수 있는 형태의파일로 ..

이벤트 처리화면에서 발생한 이벤트를 처리하기 위해 v-on 디렉티브와 methods 속성을 활용클릭... 태그에 v-on:click 디렉티브를 추가하여 [클릭] 버튼을 클릭하면 clickBtn() 메서드가 실행되도록 지정함따라서 [클릭] 버튼을 클릭하면 methods 속성의 clickBtn() 메서드에 정의한 alert() 내장 API가 실행됨 클릭...v-on 디렉티브로 메서드를 호출할 때 아래와 같이 인자 값을 넘기는 방법 클릭...event 인자를 이용해 화면 요소의 돔 이벤트에 접근하는 방법HTML 태그에서 v-on:click으로 호출하는 메서드에 인자를 전달하지 않아도 clickBtn:function(event){ }와 같이event 인자를 정의하면 해당 돔 요소의 이벤트 객체에 접근할 수 있음..

뷰 템플릿이란?HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성 template 속성- 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환- 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할- 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해짐 템플릿 속성을 사용하는 방법1) 뷰 인스턴스의 template 속성을 활용하는 방법 : template : Hello {{ message }}2) 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법 Hello {{ mess..

웹 앱의 HTTP 통신 방법HTTP : 브라우저 - 서버 간 데이터를 주고 받는 통신 프로토콜(protocol)동작방식 : 브라우저 특정 데이터를 보내달라고 요청(request) => 서버에서 응답(response)으로 데이터를 보내주는 방식 ajax : 웹 앱 HTTP 통신의 대표적인 사례. 제이쿼리의 ajax.ajax는 서버에서 받아온 데이터를 표시할 때, 화면 전체를 갱신하지 않고 화면의 일부분만 변경할 수 있게 하는 자바스크립트 기법뷰에서도 마찬가지로 ajax를 지원하기 위한 라이브러리를 제공함뷰 프레임워크의 필수 라이브러리로 관리하던 뷰 리소스와 요즘 가장 많이 사용하는 엑시오스(axios) 뷰 리소스초기 코어 팀에서 공식적으로 권하는 라이브러리였으나 2016년 말에 에반이 공식적인 지원을 중단..

라우팅이란?라우팅 : 웹 페이지 간의 이동 방법라우팅은 현대 웹 앱 형태 중 하나인 SPA(Single Page Application, 싱글 페이지 애플리케이션)에서 주로 사용함 라우팅은 화면 간의 전환이 매끄럽게 해줌, 애플리케이션의 사용자 경험을 향상시킬 수 있음라우팅으로 처리하면 화면의 깜빡거림 없이 매끄럽게 전환, 더 빠르게 화면을 조작할 수 있음 뷰, 리액트, 앵귤러 모두 라우팅 이용하여 화면 전환프론트엔드 프레임워크를 사용하지 않고 일반 HTML 파일로도 라우팅 자바스크립트 라이브러리를 이용해라우팅 방식의 페이지 이동을 구현할 수 있음뷰 라우터뷰 라우터 : 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리뷰 라우터를 이용해 뷰로 만든 페이지 간에 자유롭게 이동할 수 있음태그설명페..