2023년 2월 6일 월요일
@ 쉬고 온 만큼 다시 화이팅을 해야 하는 월요일이다,
여기저기 사람들을 만나면서 느낀 것은, 내가 참 큰 도전을
한 것 같다는 생각이 든다, 내 스스로만 인식할 때는
잘 느끼지 못했는데, 주변을 조금만 둘러봐도 그렇지 않기에
자부심을 느끼기도 하면서, 그만큼 쉽지 않은 선택이었기에
긴장감이 더 해지기도 한다, 동료에게 전해들은 말로는
vue.js로 다시 과제를 진행한다고 하는데,
뭐든 당연히 어렵게 느껴지겠지만, 지금껏 해왔던대로
끝까지 놓지 않고, 처량해보여도 버타면 결국은 될 것이다,
오늘도 힘내고, 앞으로도 힘내자, 추후에는 이 분야마저도
내가 다른 사람들을 이끌고, 리드할 수 있도록 만들 것이다.
[업무 내용]
- vue.js 정리
[vue.js 란?]
- 자바스크립트 프레임워크이다.
- React의 가상 돔, Angular의 데이터 바인딩이라는 강점을 모두 지녔다.
- 기존 HTML 템플릿을 그대로 활용이 가능하다.
[VS CODE 설치][링크텍스트](https://code.visualstudio.com/)
[node.js 설치][링크텍스트](https://nodejs.org/ko/)
[뷰 클리(vue/cli)를 이용한 vue.js 설치]
1) Windows PowerShell 을 연다. (맥OS는 iterm2로 할 것, 터미널을 열기. )
2) node -v 라고 작성하여 버전을 확인한다.
3) npm -v 라고 작성하여 버전을 확인한다.
4) npm install -g @vue/cli 라고 작성하여 설치한다.
5) vue -V 라고 작성하여 버전을 확인한다.(대문자 V, 버전은 4.5이상으로 해야함.)
[뷰 생성]
1) vue create vue-project 라고 작성한다. (vue-project 이 부분은 예시이니, 자유롭게 변경 가능함.)
2) Default ([Vue 3] babel, eslint) 를 선택 후 엔터를 누른다.
3) 그리고 VS CODE에서 생성된 폴더를 연다.
[화면 뷰]
1) 우선 위에 이미지처럼 vetur를 설치 해준다.
2) 그리고 아래 이미지처럼 jsconfig.json 파일을 만들어서 코드를 작성한다.
3) 그리고 터미널을 켠 뒤, npm run serve 라고 작성하면
http://localhost:8080/ 이렇게 나온다.
4) 그대로 복붙하여 웹에 화면을 띄운다.
5) 그러면 vue.js의 공식 첫 화면이 띄워질 것이고, 다시 VS CODE로 돌아가서
src 폴더 안에 App.vue 라는 파일을 아래 이미지와 같이 수정한 뒤,
변화된 화면을 확인해본다.
※ vue.js 에 대해서 처음 알아간 날인 것 치고는
뭔가 감이 살짝 오는 것 같았다,
정말 익숙해지는 시간만 주어진다면
해낼 수 있다는 자신감 또한 생기는 것 같다,
틀이나 로직을 점점 알아갈 수록, 새로운 공부를 하는 것에
두려움이 줄어들기 때문에, 나의 앞으로가 더욱 기대된다,
특히 vue.js 는 다른 사람들에게도 새로운 공부이기에
조금더 내가 따라잡기 수월해서 그런지, 의욕이 더 나기도 한다,
당장의 과제 해결에만 기준을 두지 말고, 내 것으로 만들자.
