JudithHopps JudithHopps

카카오 계정으로 로그인하기 카카오 개발자 센터에 접속한 다음 회원가입해주세요 '내 어플리케이션' 클릭 '어플리케이션 추가하기' 클릭 어플리케이션을 생성한 후 클릭 플랫폼 등록을 해준 후 web에 사이트 도메인을 넣어줍니다. 이후 아래 기록 사항을 따라해주세요. 카카오 로그인 사용 시 Redirect URI를 등록해야 합니다.등록하러 가기 제품 설정>카카오 로그인>동의항목 에서 프로필 정보를 필수 동의로 설정합니다. 내 애플리케이션>제품 설정>카카오 로그인>동의항목 에서 카카오 이메일을 선택 동의로 설정합니다. VS Code를 열어 public/index.html 파일을 열어 아래 코드를 추가합니다. main.js 파일을 열고 제일 하단에 window.Kakao.init("3fd5dc287ce0db6920..

컴포넌트 화면을 구성할 수 있는 블록(화면의 특정 영역)을 의미합니다. 화면을 여러 영역으로 쪼개서 활용할 수 있는 형태로 관리하여 코드를 재사용할 수 있어 사용합니다. 부모 컴포넌트란? 상위 컴포넌트와 동의어이며, 컴포넌트를 등록한 것 import childComponent를 입력된 컴포넌트 자식 컴포넌트란? 하위 컴포넌트와 동의어이며, props로 부모 컴포넌트로 전달받은 데이터를 저장한다. 부모 컴포넌트에서 자식 컴포넌트의 데이터 옵션 값 직접 변경하기(실습) 1. src/views/ChildComponent.vue를 생성해주고 아래 코드를 입력합니다. click 2. src/views/ParentComponent.vue를 생성해주고 아래 코드를 입력합니다. 3. src/router/index.js..

Mock 서버 실제 서버처럼 클라이언트로부터 요청을 받으면 응답하는 가짜 서버를 말한다. 사용하기 위해 Postman이란 툴 설치 필요 다운로드 링크 ↑ Postman으로 Mock 서버 생성 방법 mock 열기 로그인 (계정이 없다면 생성) 왼쪽 메뉴바 Mock servers 선택 create mock 선택 후 아래 화면과 같이 입력 5. mock 서버 이름을 입력한 후 next 입력 6. 오른쪽 상단 No Environment 박스 선택 후 mock(server 이름 필자는 mock이다) 클릭 API 반환 데이터 설정 1. test 옆 화살표 클릭 후 default 클릭 2. Body 부분을 아래와 같이 수정해준다. 3. mock 서버에 커서를 가져가고 우츨 버튼을 눌러 run server을 클릭한다...

이번 포스팅에서는 Vue 컴포넌트에 대해서 알아보고자 합니다. 컴포넌트란 ? View, Data, Code의 세트라고 이해할 수 있다. 컴포넌트는 HTML 코드, 자바스크립트 코드, 데이터가 존재한다. 가장 큰 장점은 재사용이 가능하다는 것이다. 즉, 다른 컴포넌트에 import가 가능하다. Snippet 설정하기 snippet이란 특정 코드를 미리 작성하고 등록하여 단축키로 코드를 불러와 사용하는 기능이다. snippet을 사용하는 방법은 파일 > 기본설정 > 사용자코드조각구성 이다. 그 후 vue를 입력하고 아래와 같이 내용을 수정해준다. "Generate Basic Vue Code": { "prefix":"vue-start", "body": [ "\n" ], "description": "Genera..

Vue 프로젝트를 빠르게 구성하고, 빌드, 배포할 수 있게 도와주는 플로그인을 이용합니다. Vue CLI란? Vue 프로젝트를 빠르게 구성하고, 빌드, 디플로이 할 수 있게 도와주는 도구입니다. CLI는 Command Line Interface의 약자로 터미널에 명령어를 입력하여 컴퓨터와 상호 작용하는 방식을 의미합니다. Vue Router(라우터) 설정 라우팅이란 사용자가 접속한 주소에 따라 페이지(컴포넌트)가 달라지는 것을 의미한다. 즉, url 주소에 따라 페이지가 전환되는 것 클라이언트에서 미리 가지고 있던 페이지를 라우팅을 이용해서 화면을 갱신하게 된다. Vue-Router 설치 cmd(터미널)에 다음 명령어를 입력해주세요 cd vue-project 입력 vue add router 입력 'use..

Vue.js를 활용하기 위해 설치해야 할 것이 있습니다. 설치 필요 Visual Studio Code 설치하기 Node.js 설치하기 (짝수버전 추천) + ) 추가로 크롬 설치하기 Vs Code (Visual Studio Code) 환경구축 Extensions 또는 cmd+sjoft+x를 눌러 확장 프로그램 검색 켜기 vuter 검색 후 설치 prettier-code formatter 검색 후 설치 cmd (터미널) 환경구축 npm install -g @vue/cli 입력 npm create vue-project 입력 후 default 3 선택 cd vue-project 입력 npm run serve 입력 아래와 같이 창이 뜨면 성공입니다. Local 뒤에 있는 url 링크에 들어가면 아래와 같이 창이 ..

Vue.js란? 웹 개발을 단순화하고 정리하기 위해 개발된 자바스크립트 프론트엔드 프레임워크이다. SPA(단일 페이지 애플리케이션) 개발을 위한 프론트엔드 프레임워크이다. 사용자 인터페이스 개발을 위한 Rrogressive Framework이다. Angular와 React에서 부족함을 제거하고 장점을 모아두었다. 프레임워크 선택 : Angular vs React vs Vue 등장 순서 : Angular → React → Vue 세 개의 프레임워크 중 한 가지를 고르자면 Vue를 고르겠다. 이유는 가장 빠르고 직관적으로 익힐 수 있기 때문이다. Vue.js의 장점 직관적이고 배우기 쉽다. 재사용을 통한 애플리케이션을 개발 기간 단축 및 양질의 코드를 생산할 수 있다. Angular의 장점(데이터 바이딩) ..