안녕하세요, 오늘은 프론트엔드 개발환경 셋팅을 진행해보도록 하겠습니다. NVM 설치 -> Node.js 설치 -> Vue.js 설치 순으로 진행됩니다. Mac 개발자 환경셋팅을 모두 하신상태에서 진행해주시면 됩니다.아직 mac 기본 셋팅을 하지 않으셨다면 아래글을 참고해주세요 개발자 Mac Book 7가지 초기셋팅 가이드북(2024년 버전) 개발자 Mac Book 7가지 초기셋팅 가이드북(2024년 버전)MacBook을 구입하고나서 개발자를 위한 맥북 셋팅 가이드입니다. 본 가이드북 작성을 위해 제 소중한 mac book air m1을 초기화 시켰습니다. 혹시라도 개발자 셋팅을 하시다가 좀 꼬인것 같다고 생각yellongs.com Vue.js가 뭔지는 알고 계시겠죠? Vue.js를 설치하려면 Node.j..

NPM = Node Package Manager 노드의 패키지들을 관리해주는 매니저이다. 패키지를 관리해요?? 특정 라이브러리와 라이브러리와의 의존관계를 다 파악해서 설치하기가 어렵다. 라이브러리끼리 호환되는 버전이 있는데, 그런 버전들을 NPM 이 관리해준다. npm 초기화 하기 ! NPM 은 먼저 프로젝트 폴더에서 npm 을 쓸거라고 하는 초기화 단계를 수행한다. npm init -y -y는 왜 붙어있나요? npm init 을 수행하면 package.json 이라는 파일이 프로젝트에 만들어 진다. 이때 여러가지 라이브러리와 관련된 것들을 작성하는데, -y를 넣지 않으면 질문지가 10개 정도 나오고 그거에 일일이 작성을 해주어야 한다. -y을 붙여서 일단 빈 껍데기의 package.json을 만든다고 ..

ES6 정리 Const & let 새로운 선언 방식 기존의 var로 선언한 변수를 const 와 let으로 선언 블록단위인 {} 으로 변수의 범위가 제한 됨 const : 한번 선언한 값에 대해 변경할 수 없음 let: 변경할 수 있는 변수를 선언할 때 사용 *const와 let 모두 선언은 1번만 할 수 있음. 값을 재정의하는 것은 let 만 가능 ES5의 특징 - Hoisting Hoisting 이란? 바닥에서 천장으로 끌어올린다는 의미로 선언한 var a=10; 의 변수를 맨위로 끌어올림 function 과 var 를 최상단으로 끌어올린다. function sum(){ return 10+ 20; } var a = sum(); function sum() { return 20 + 30; } 여기서 a ..

Axios 를 통해서 Vue.js에서 API를 호출할 수 있다. 먼저 설치는 아래와 같이 진행한다. npm install axios --save 설치를 하고나서 src > api 폴더를 만들어주고, 그 아래에 index.js 를 만든다. 이후 아래와 같이 임포트를 먼저 해주고, baseUrl 를 설정해준다. 이후 함수에 따라서 원하는 Axios 리턴 함수를 작성하여 준다. 마지막으로 export 를 하여 함수를 리턴해주면, 다른 컴포넌트에서 사용할 수 있다. import axios from 'axios'; //자동으로 노드모듈에서 가져오는거임 // 1. HTTP Request & Response와 관련된 기본 설정 const config = { baseUrl: 'https://api.hnpwa.com/v..

Vue.js 프로젝트 실행 중 Parsing error: No Babel config file detected for 에러가 뜨면, 오류로 계속 잡혀있는게 불편하므로 없애고 시작해야한다. 워킹디렉토리가 잘 안잡혀서 그런걸 수 있는데, 해당 프로젝트 폴더만 열어서 실행하면 해결되겠으나, 여러 프로젝트 왔다갔다 하는경우엔 아래에 설정을 추가하여 Auto로 Detect하게 만들어준다. Ctrl+Shift+P (Command + Shift + P) -> Open Workspace Settings(JSON) 선택하면 settings.json이 열리는데, 아래의 코드를 넣으면 해결된다. "eslint.workingDirectories": [ {"mode": "auto"} ]

vue --version 을 쳤을 때 다음과 같이 버전이 잘~ 나온다면 프로젝트를 생성할 준비가 완료 된 것이다. 이제 그러면 프로젝트를 만들어보자 vue create vue-project01 뷰 플젝만들기 프로젝트이름 그럼 위와 같이 나올텐데 여기서 vue3로 선택해준다. (화살표로 내려서 엔터) 그럼 열심히 뷰 프로젝트를 만들고 있다. 생각해보니 비쥬얼 스튜디오 코드로 해야된다는걸 설명안했는데, 비쥬얼 스튜디오 코드 깔아서 터미널 켜서 하면된다. (0번챕터로 기본프로그램 셋팅 써야겠다 ㅠㅠ) 다 만들면 아래처럼 뜬다 여기서 npm run serve 를 입력해서 페이지를 실행시켜보자. npm run serve를 하게 되면 node.js가 돌면서 로컬에서 웹페이지를 띄워준다. 이렇게 나오면 주소 커맨드 ..