AI Platform / Web

0. 들어가면서 Vue 프로젝트를 진행하다보면 bable.config.js파일이 있는 것을 알 수있다. 1. babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] } 들어가보면 위와 같은 코드가 적혀져 있다. 바벨이라는 것은 무엇일까? 2. babel babel이란 무엇일까? 그리고 왜 babel을 사용하는 것일까? 구글에 babel을 쳐보면 홈페이지는 아래와 같이 나온다. babeljs.io/ Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 쉽게 말해서 Babel은 최신버전의..

0. 들어가면서 Vue CLI에 대한 기초를 시작하려 한다. 그냥 글을 천천히 읽으면서 따라 해 보자. 그러면 자연스럽게 체득될 것이다. 시작하기 전에 먼저 nodejs를 설치하는 것이다. 코드는 text 뭉치에 불가한다. 그러한 텍스트를 컴퓨터가 이해할 수 있도록 만드는 것이 프로그램 언어인데, 자바스크립트는 언어가 아니다. 따라서 자바스크립트를 웹이 아니라 우리 컴퓨터에서 해석할 수 있도록 만들어주는 환경이 nodejs이다. 구글에 치면 쉽게 설치가 가능하다. 설치 확인을 위해서는 터미널에 node -v를 쳤을 때 버전이 나온다면 설치가 된 것이다. 파일 이름을 hanpy.js라고 하면 hanpy라는 nodejs 파일이 생성된 것이고 $ node hanpy.js라고 하면 파일이 실행이 된다. 파이썬을..

0. 들어가면서 우리가 왜 computed를 배우는 가에 대한 이야기부터 해볼까 한다. 우리가 프로그래밍을 하는 목적이 있고, 그 목적에 따라 다양한 데이터가 들어갈 것이다. 그리고 데이터를 가공하기 위해서 구조화를 해야 하는데 이때 필요한 것이 computed라고 할 수 있다. methods에 함수가 들어가는 것과 비슷하게 computed에도 함수가 들어간다. 그렇다면 어떤 목적의 함수인지에 따라 computed와 methods에 나눠서 들어가는지를 중점으로 파악해 보자. 공식문서에 보면 computed와 watch에 대해 나오고 캐싱이라는 이야기도 나오지만, 초보자 수준에서는 위에서 이야기 한 부분만 이해하고 넘어가자. 왜냐하면 이 글을 읽는고 있다는 건 다른 어려운 용어들도 이해가 안 돼서 들어왔을..

0. 들어가면서 지금까지 뷰에 대한 기초와 axios에 대해 실습을 해보고 lifecycle hook에 대해서도 적용을 해보았다. 이제 우리가 버튼을 누르면 5개씩 사진과 설명을 가져오는 형태에서, 페이스북처럼 무한 스크롤을 적용시켜보자. 이전 코드에서 추가를 시킬 예정이기 때문에 이전 코드를 아래의 url을 타고 보고 오자. han-py.tistory.com/280 [Vue.js] 3. lifecycle hook 적용하기 0. 들어가면서 우리는 앞에서 버튼을 누르면 get요청으로 데이터를 불러와서 보여는 방식을 구현해 보았다. 가능하면 아래의 링크를 보고 오는 것을 추천한다. han-py.tistory.com/273 [Vue.js] 2. 데이터 han-py.tistory.com 이번에 우리가 사용할 것..

0. 들어가면서 우리는 앞에서 버튼을 누르면 get요청으로 데이터를 불러와서 보여는 방식을 구현해 보았다. 가능하면 아래의 링크를 보고 오는 것을 추천한다. han-py.tistory.com/273 [Vue.js] 2. 데이터 받기(get) 0. 들어가면서 우리는 앞에서 Vue를 설치하고 실행하는 방법과 Vue에 사용되는 문법에 대해 알아보았다. 궁금하면 아래의 주소를 따라가면 된다. 이제 배운내용을 바탕으로 적용을 해보자. han-py.ti han-py.tistory.com 1. lifecycle hook 지금까지 Vue에 관한 코드를 작성하였다면 지금부터는 개념 이해를 해보자. 앞에서 구현한 것은 첫 페이지에는 아무것도 없고 버튼을 눌러야 data가 생긴다. 그렇다면, 누르지 않고 처음 페이지를 들어..

0. 들어가면서 우리는 앞에서 Vue를 설치하고 실행하는 방법과 Vue에 사용되는 문법에 대해 알아보았다. 궁금하면 아래의 주소를 따라가면 된다. 이제 배운 내용을 바탕으로 적용을 해보자. han-py.tistory.com/66 [Vue.js] 1. 시작하기 0. 들어가면서 Vue를 처음 배우는 사람이라면 바로 이곳에서 시작해 보길 바란다. 전반적인 개념과 시작하는 방법이 적혀있다. 자바스크립트를 모르더라도 어느정도 구현할 수 있도록 노력했다. han-py.tistory.com Vue는 frontend다. 따라서 frontend인 뷰를 사용하기위해, 서버를 만들어서 데이터를 보내고 하기에는 시간이 너무 많이 든다. 그래서 일단 더미 데이터를 get방식으로 받아서 실습을 해볼까 한다. 더미 데이터(=가짜 ..

0. 들어가면서 Vue를 처음 배우는 사람이라면 바로 이곳에서 시작해 보길 바란다. 전반적인 개념과 시작하는 방법이 적혀있다. 자바스크립트를 모르더라도 어느정도 구현할 수 있도록 노력했다. 일단 frontend와 backend의 차이를 모르는 사람도 있을 것이다. 매우 쉽게 설명을 하자면, frontend는 컴퓨터의 모니터 부분이라고 생각을 하고, backend부분은 컴퓨터의 본채라고 생각하면 된다. 즉, frontend부분은 사용자가 실제로 볼 수 있는 부분이고, 다른 DB처리라던가 복잡한 알고리즘은 backend에서 한다고 생각하면 된다. 우리가 배울 Vue는 바로 frontend 부분이라고 생각하면 된다. 여기서는 Vue의 기초를 다룬다. Vue Cli로 바로 알고 싶다면 아래의 링크를 클릭하자. ..

RESTful API 0. 들어가면서 아래의 공식문서를 짧게 정리했다. docs.microsoft.com/ko-kr/azure/architecture/best-practices/api-design API 디자인 지침 - Best practices for cloud applications 웹 응용 프로그램은 클라이언트가 응용 프로그램과 상호 작용할 수 있도록 Api를 노출할 수 있습니다. 잘 설계 된 웹 Api는 플랫폼 독립성 및 서비스 발전을 지원 해야 합니다. docs.microsoft.com 잘 디자인된 웹 API 플랫폼이 독립적이어야 한다. 모든 사용자는 내부 API 방법과 상관없이 API를 호출할 수 있어야한다. 그러기 위해서는 표준 프로토콜을 사용해야한다. 그리고 웹 API는 사용자 애플리케이션..