JudithHopps JudithHopps

목적 : 부트스트랩으로 모달창 이쁘게 구현하기 코드 : 글쓰기 공통 임시저장 완료 실행 화면 :

목적 : 모달창 열기 닫기 버튼 생성 코드 : 공통 닫기 (생략) export default { name: 'qaView', data() { return { modal: false, } } } body { margin : 0 } div { box-sizing: border-box; } .black-bg { width: 100%; height : 100%; background :rgba(111, 110, 110, 0.5); position: fixed; padding :20px; } .white-bg { width :100%; background: white; border-radius: 8px; padding: 20px; } 실행화면 :

1. Git 설치하기 Git이란?? 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 분산 버전 관리 시스템이다. 아래 링크 참고하셔서 설치하시면 됩니다. https://taewow.tistory.com/13 [GITHUB 입문] Git 설치하기(2.35.1 이상, 상세한 설치법) [GITHUB 입문] 깃허브 사용법 - 2 Git 설치하기 Git과 GitHub에 관해 다룬 이전 글([GITHUB 입문] Git과 GitHub의 차이)을 작성하다 보니 한 가지 아쉬움이 있었습니다. 독자가 Git을 설치하여 직접 따라 하면 taewow.tistory.com 2. git clone git clone이란?? 원격 저장소에 있는 코드를 내 컴퓨터에 복제할때 사용한다. 사..

카카오 계정으로 로그인하기 카카오 개발자 센터에 접속한 다음 회원가입해주세요 '내 어플리케이션' 클릭 '어플리케이션 추가하기' 클릭 어플리케이션을 생성한 후 클릭 플랫폼 등록을 해준 후 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..

Axios란? Vue 프로젝트에서 서버와의 통신을 위해 가장 많이 사용하는 패키지 중 하나 서버와 데이터를 송수신 할 수 있는 HTTP 비동기 통신 라이브러리 Promise 객체 형태로 값을 return한다. 터미널에 아래 명령어를 입력하여 설치해준다. npm install axios --save src/mixins.js파일을 생성해주세요 import axios from "axios"; export default { methods: { async $api(url, method, data) { return ( await axios({ method: method, url, data, }).catch((e) => { console.log(e); }) ).data; }, }, }; main.js 파일을 아래와 ..

[Vue.js 프로젝트 투입 일주일 전] part 7 서버 데이터 바인딩 실습 파트이다. router/index.js main.js mixins.js DataBindingList2.vue 포스트맨 add request를 3~4번 반복하고 있다... 하지만 되지 않는다 가장 화나는 것은 다른 사람의 mock서버는 정상 작동이라는 것이다. 가상 서버 list url링크로 들어가면 아래와 같이 뜬다. 1시간 동안 헤맸다..... 왜 안될까............뭐가 문제지 postman 문제 같은데 초기화하고, 삭제하고 다시 생성해도 문제는 반복된다. json으로도 설정했고, add request -> add example 순으로 잘 했는데... 왜 안될까............... json 코드를 수정한 결과..

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을 클릭한다...