고지은고

깃허브 저장소에 있는 Vue 프로젝트를 클론 해서 가져가면 node modules가 존재하지 않는다 그래서 이를 제대로 사용하기 위해선, 클론을 받은 후 package.json이 존재할 수 있도록 npm install을 통해 설치해줘야 한다 오늘 배운 내용은 axios! axios는 Vue의 기본 기능은 아니다 하지만 리액트, 뷰 같은 프레임워크와 사용하기에 좋다 위처럼 npm install axios를 입력하고 package.json을 확인해보면 axios가 설치되어있다 axios를 함수로 보고 then을 보면 프로미스로 리턴하는 걸 알 수 있다 res 타입은 오브젝트이다 여기에 data라는 방이 존재하는데 이 방은 오브젝트 또는 배열이 될 수 있다 이것이 우리가 사용하는 백엔드의 멤버 컨트롤러 det..

앞의 포스팅에서도 언급했지만 다시 정리하기 위해 작성해본다! vue를 사용하기에 앞서, 먼저 node.js를 설치해야 한다. node.js란? 자바스크립트 해석기! 텍스트로 프로그래밍하지만 결국은 C언어로 프로그래밍하는 거나 마찬가지이다 노드제이에스를 설치하면 자바스크립트를 사용하지만 C언어로 프로그래밍하는 효과를 준다 노드제이에스 설치하면 서버에서 자바스크립트를 해석할 기능이 생긴다! 그리고 npm이라는 응용프로그램이 같이 설치되는데 (= node package manager) 라이브러리 관련 다운로드는 npm js 사이트에서 다운로드가 가능하다 vue도 node.js 응용프로그램이다 결국은 자바스크립트를 얻어내는 것 소스코드의 품질을 높이기 위해 타입 스크립트 사용하기도 한다 타입 스크립트는 tsc라..

뷰 개발환경은 node js server이다 그리고 node js를 설치하면 npm이 같이 설치되는데 이는 node package manager의 줄임말이다 웹브라우저에서 ajax 요청은? 우리는 자바 기반의 서버를 배웠는데 뷰를 node.js 서버 기반에서 개발해야 하는데 그럼 ajax 요청을 어디로 해야 하나? 결국 서버를 두 개 돌려야 한다. 개발환경에서 계속 개발하기 쉽지 않은데 뷰는 이렇게도 가능하지만 리액트 같은 경우엔 cli 개발환경에서만 가능하다 dist 최종적으로 심어놓으면 그 밑에 꺼는 다 필요 없다 (개발과정일 뿐) 새로운 프로젝트를 생성하고 폴더를 확인해보면 다양한 폴더와 파일들이 존재한다 새로 만든 프로젝트 파일 안에서 npm run serve를 입력해보자 사용할 서버 주소가 나온..

v-if 첫 번째가 false면 그 밑에 있는 v-else가 실행된다 자바에서는 이런 for문이 가능하지만 vue는 안된다 (오직 배열에서 빼내는 거만 가능하다) 배열의 아이템 빼내는 것만 가능한데 그렇다면 아이템 배열이 1 - 5면 12345, 6-10이면 678910 이렇게 되도록 만들 수 있을까? 1~5번까지 이 5개의 값은 관리가 되어야 한다 pageNum 초기값은 1로 설정되야하고 각 링크 누를 때 다른 값들을 서버로부터 지속적으로 받아와야 한다 v-bind 줄이면 콜론: 만 사용해도 되며 여러 단어를 조합할 땐 언더바 사용이 제일 마음 편하다 (카멜 케이스 신경 써야 하기 때문) href=""로 비워 놨기 때문에 클릭하면 현재 페이지로 새로 로딩되는데, 다른 페이지 혹은 원래 페이지에서 새로 ..

members에는 오브젝트가 들어있고 item에 순서대로 들어간다 최종적으로 리턴되는 건 number 타입 indexOf는 찾는 문자열이 몇 번째에 있는지 알려주는데 만약 없는 문자를 찾는 경우 -1을 리턴한다 위에를 이렇게 줄일 수 있다 검색 여러 번 하게 하려면? 원본 배열과 현재 배열, 이렇게 두 개로 관리해줘야 한다 원본은 members, 현재는 currentMembers로 관리해보자 여기서 렌더링 되는 건 반복문을 통해서 렌더링 된 게 화면에 나오는 것이기 때문에 currentMembers가 되어야 한다 ajax promise는 fetch 사용하는데 문제는 최신 웹브라우저에서만 동작하여 크롬, 에지는 가능한데 ie는 안된다. 이럴 땐 axios를 사용하면 해결이 가능하다 https://githu..

제이슨 데이터를 Vue에서 받아와서 모델로 사용해보자 ajax promise를 사용하려 했지만 동작하지 않고 콘솔 창을 확인해보니 에러가 생겼다 CORS정책에 위반된다 특정 웹서버로부터 콘텐츠를 응답을 받고 특정 시점에 ajax 요청을 동일한 서버에 하면 응답이 잘 온다 하지만 다른 웹서버에 ajax 요청이 가능하냐? 이건 원칙적으로 불가능하다 응답은 a서버로 받아놓고, 요청은 b같은 다른 서버로 보내버리는 게 원칙적으로 막아져 있다 이럴 때 CORS 오류가 뜨는데 이는 교차 출처 리스소 공유라고 한다 이건 톰캣 서버로부터 출력받은 내용이 아닌데 ajax요청을 톰캣으로 하고 있기 때문에 CORS 오류가 뜬 것이다 해결하는 방법은? VSC에 있는 이 페이지를 복사해서 톰캣으로 옮기는 방법이 있다 톰캣으로 ..