코린이탈출

√ 구글이 소유하고 있는 모바일 애플리케이션 개발 플랫폼앱을 개발, 개선, 더욱 키워나갈 수 있음.OAuth로 소셜 로그인을 구현할 수는 있지만, 파이어베이스는 훨씬 간단하게 구현할 수 있다!더보기OAuth(Open Authorization)인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹 사이트 상의 자신들의 정보에 대해웹 사이트가 어플리케이션의 접근 권한을 부여할 수 잇는 공통적인 수단으로 사용되는 접근 위임을 위한 개방형 표준=> 어플리케이션을 이용할 때 사용자가 해당 어플리케이션에 ID,PW 등의 정보를 제공X=> 신뢰할 수 있는 외부 어플리케이션(Naver, Google, Kakao, Facebook 등)의 Open API에 ID,PW를 입력하여신뢰할수있는 해당 어플리케이션이 인증과정을 처리해..

EC2(Elastic Compue Cloud) 가상 서버 제공물리적 컴퓨터처럼 컴퓨팅 리소스를 제공함 => 피시방에 가서 돈을 내고 컴퓨터를 이용하는 것과 비슷이 서버는 AWS 클라우드에서 실행필요에 따라서 확장 or 축소할 수 있음이 가상 서버를 "인스턴스"라고 부름EC2를 사용해서 애플리케이션을 호스팅하고 실행할 수 있음더보기EC2는 AWS가 제공하는 독립적인 컴퓨터 서버클라우드 공간 안에 원하는 OS(Linux, Ubuntu, Cent OS 등)를 선택하여 원하는 서버를 설치할 수 있으며생성된 EC2 하나를 인스턴스라고 부름* 애플리케이션 및 OS 이미지(Amazon Machine Image) 정보 : AMI는 인스턴스를 시작하는데 필요한 소프트웨어 구성(운영체제, 어플리케이션 서버 및 애플리케이션..

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..