JudithHopps JudithHopps

TypeScript 추천 강의 TypeScript를 쓰는 이유와 핵심 문법에 대해 알 수 있다. 단 10분의 강의이므로 꼭 들어보길 바란다. https://www.youtube.com/watch?v=xkpcNolC270&t=307s TypeScript 추천 사이트 https://www.typescriptlang.org/docs/handbook/intro.html Handbook - The TypeScript Handbook Your first step to learn TypeScript www.typescriptlang.org TypeScript 관련 handbook 사이트이다. 웬만한 문법은 다 담겨져 있으므로 이 사이트를 보고 TS에 대해 알아가면 좋을 것 같다. TypeScript 관련 도서에서 좋..

TypeScript란? 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. TypeScript는 실행 전에 프로그램에 오류가 있는지 확인하고 값의 종류에 따라 수행 하는 정적 유형 검사기 입니다. 확장자는 ts입니다. TypeScript 설정 node.js를 설치한다(최신버전 추천) 터미널에 아래 구문을 입력해준다. npm i -g typescript TypeScript 간단 예제 VS Code를 열어 ex.ts 파일을 생성해준다. 아래 코드를 입력한다. let Name :string = 'you'; tsconfig.json 파일을 생성한 후 아래 코드를 입력한다. { "compilerOptions" : { "target": "es5", "module": "commonjs", } } 터미널 > 새 터미..

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

데이터 바인딩이란? Angular와 마찬가지로 양방향 데이터 바인딩을 지원합니다. (React는 단방향 데이터 바인딩 지원) ※ 양방향 데이터 바인딩이란? 모델에서 데이터를 정의한 후 뷰와 연결하면 어느 한쪽에 변경이 일어났을 때 다른 한쪽에 자동으로 변경사항이 반영되는 것 데이터 바인딩 예제 1. vue-project\src 폴더에 DataBinding.vue 파일을 생성한 후 다음 코드 작성 Hello, {{title}}! export default { data() { return { title : 'world' }; } } 2. vue-project\src\router 폴더에 index.js 파일을 열어 코드 추가(이때, 기존 코드는 삭제하지 않는다. ) import DataBinding from ..