[React] 미니프로젝트 - 배포하기 w.Firebase
2022. 8. 20. 23:29
개발/Javascript
이번 프로젝트에선 배포를위해 파이어베이스를 사용한다 https://firebase.google.com/?hl=ko 프로젝트 생성이 완료되면 Hosting으로 넘어가서 시작하기 버튼 클릭 npm install -g firebase-tools 파이어베이스 명령어를 사용할 수 있게 하는 것 명령 프롬프트에서 입력하고 설치해준다. 설치 후 파이어베이스 로그인 firebase login y를 눌러주면 구글 로그인창이 뜬다. 해당되는 아이디 클릭후 권한 허용해주면 로그인 수행이 잘 된것을 확인 할 수 있다 주의사항 : 앱의 루트 디렉터리에서 수행해야한다 firebase init 이후에 질문들 더 하고 나면 콘솔로 이동 클릭후 맨 아래쪽에 여러사이트 지원 클릭 후 사이트를 추가해준다. 아까 생성된 firebase.j..
[Javascript] ES6
2022. 8. 19. 10:28
개발/Javascript
let, const // let let name = '철수'; name = '영희'; console.log(name); 화살표함수 //화살표 함수 사용 const myFunc = (name) => { return `안녕 ${name}`; } console.log(myFunc('영희')); //화살표 함수를 map과 함께 사용하기 const myArray = ['진수', '영철', '영희', 5]; let arr2 = myArray.map((item) => item); console.log(arr2); 템플릿 리터럴 `` //화살표함수, 템플릿 리터럴 사용 const myFunc1 = (name) => `안녕 ${name}`; console.log(myFunc1('철수')); 기본매개변수 //Default..
[Vue] 템플릿 프로젝트 구성
2022. 8. 18. 09:15
개발/Javascript
computed {{reversedMessage}} 문자열뒤집기 methods {{message}} 문자열뒤집기 methods 속성은 수행할 때마다 연산을 하기때문에 별도 캐싱x, 호출할때만 로직수행(수동적) computed 속성은 데이터가 변경되지 않는 한 이전의 계산 값ㅇ르 가지고 있다가 필요할 때 바로 반환 복잡한 연산을 반복수행해서 화면에 나타낼 때 : computed watch 데이터 변화를 감지하여 자동으로 특정 로직수행 computed는 내장 API를 활용한 간단 연산에 적합하고 watch 속성은 데이터호출과 같이 시간이 상대적으로 더 많이 소모되는 비동기 처리에 적합 실시간으로 바뀌는것을 확인할 수 있다 v-model 속성은 input, textarea, select 속성에만 사용가능
[Vue] HTTP 통신
2022. 8. 17. 10:27
개발/Javascript
웹 앱에서 서버에 데이터를 요청하는 HTTP통신은 필수이다. HTTP? 브라우저와 서버간 데이터를 주고받는 통신 프로토콜(HyperText Transfer Protocol) 대표적으로 제이쿼리의 ajax가 있다. ajax는 서버에서 받아온 데이터를 표시할 때 화면 전체를 갱신하지 않고도 일부분만 변경할 수 있다. 뷰에서도 ajax를 지원하기위한 라이브러리를 제공하는데 가장 대표적인게 리소스와 액시오스다. 리소스 (recource) 뷰 리소스는 초기에 코어팀에서 공식적으로 권하는 라이브러리였으나 2016년 말, 에반이 공식적인 지원을 중단하기로 결정하며 다시 기존에 관리했던 PageKit팀의 라이브러리로 돌아갔다. 프레임워크 목록 가져오기 ※ 참고로 https://github.com/pagekit/vue-..
[Javascript] keyup 이벤트
2022. 8. 17. 09:49
개발/Javascript
textarea에 keyup 이벤트속성을 사용하여 글자수를 세도록 하였다. 그러나 keyup으로 구현할 시, ㅁㅁㅁㅁㅁㅁ같이 계속 누르고 있는 글자수는 인식하지 못하는 문제가 있다. 또한 아시아권의 문자는 키보드 이벤트(keydown, keypress, keyup)로 원하는 것을 제대로 구현할 수 없는 경우가 많기때문에 트위터같은 경우 타이머를 사용해 50ms마다 입력양식내부의 글자를 확인해서 글자수를 센다. 누르는 순간에도 글자수를 인식해서 같이 올라간다