반응형

2022/10/17 7

114. 네트워크 에러 확인 방법과 에러 처리 코드 구현 | async & await 에러 처리 방법

에러가 났을 때의 대처 방법과 로그 분석하는 방법 - 실제 개발에선 기능보다 에러처리를 잘해야 완성도 높은 코드를 만들수있다. 네트워크 에러 확인 방법과 에러 처리 코드 구현 | async & await 에러 처리 방법 - try, catch 걸어주면된다 - 그러면 에러 나면 몇번째줄 코드의 에러인지 까지 확인 가능 - 이거 안하면 무슨 컴포넌트에 에러가 났는지는 뜨는데 몇번째 줄 인지는 모름 async submitForm() { try { // 비지니스 로직 const userData = { username: this.username, password: this.password, }; const { data } = await loginUser(userData); console.log(data.user...

vue.js/vue.js 2 2022.10.17

112. env 파일과 설정 방법 | vueCLI의 env파일 규칙과 실무 환경 구성 방법

env 파일과 설정 방법 - 프로젝트 루트폴더 위치 .env 파일 생성 - env 파일은 키=값 으로 이루어져 있는 환경변수 파일 vueCLI의 env파일 규칙과 실무 환경 구성 방법 - vue에서 지원하는 env는 3개 - .env - .env.development - .env.production - 설정파일을 변경 했을때는 웹팩이 인지를 못하기 때문에 서버를 껐다 켜야함

vue.js/vue.js 2 2022.10.17

111. API 설정 공통화 | axios.create 로 공통설정(URL) 담는 방법

- URL공통화 , 환경변수 파일에 저장 axios.create(); 란 - axios의 API - 여기에 API들의 공통 설정을 모두 넣을수있다. - baseURL이 속성으로 있다. import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:3000', }); function registerUser(userData) { // const url = 'http://localhost:3000/signup'; // axios.post('http://localhost:3000//signup', userData); return instance.post('signup', userData); } function loginU..

vue.js/vue.js 2 2022.10.17

109. 회원가입 API 요청을 위한 문서 확인 | API 폴더와 회원 가입 API 함수 생성 | 회원가입 API 호출과 주의 사항 | api폴더를 만들어서 axios에 대한 공통 구문을 구조화

회원가입 API 요청을 위한 문서 확인 - 회원가입을 위한 데이터 요청 - 사용자 아이디, 암호, 닉네임 3개의 데이터를 서버로 보내야함 - post요청은 기본적으로 서버에 어떤 데이터를 담아서 보냄으로 Parameters확인 해줘야함 - 요청에 대한 응답은 200, 409, 500 등.. API 폴더와 회원 가입 API 함수 생성 - (https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/) - npm i axios 설치하면 package.json에서 확인 가능 - import axios from 'axios' 로 import 해와서 사용하는 방법도 있지만 - 소스 폴더의 api폴더를 만들어서 a..

vue.js/vue.js 2 2022.10.17

108. 회원가입 폼 데이터 바인딩 및 이벤트 연결

회원가입 폼 데이터 바인딩 및 이벤트 연결 - 인풋의 값을 v-model로 데이터 바인딩 시켜서 연결시킴 - (데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다.) - 버튼 sumit을 클릭하면 이벤트가 발생되면서 form으로 올라간다. - form은 @submit="submitForm()"으로 메서드 실행 - 아이디, 비밀번호, 닉네임 입력하고 버튼 누르면 form 태그의 submitFrom메서드가 실행되는 구조 - prevent를 달게되면 from의 기본구조인 제출하고, 페이지이동하는 새로고침을 막을수 있다. id: pw: nickname: 회원가입 {{ logMessage }}

vue.js/vue.js 2 2022.10.17
반응형