설치방법

 yarn add echarts vue-echarts

오류 발생하여 아래 내용을 추가함

yarn add @vue/composition-api

[vue.js] 서비스 포트 변경

Vue.js 를 시작하면 8080 포트로 서비스가 시작 됩니다. 8080 말고 다른 포트를 변경하고 싶을때는 package.json 파일을 아래와 같이 수정합니다.

• --port 8077 : 포트를 8077로 변경했습니다.

{
  "name": "tistory",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port 8077",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.15.4",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "element-ui": "^2.15.5",
    "vue": "^2.6.11",
    "vue-clipboard2": "^0.3.1",
    "vue-router": "^3.5.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

vue.js 기반 환경에서 폰트어썸 설정하는 방법은 아래 내용을 참고하세요.  

2021.08.19 - [Language/Vue.js] - vuejs에 폰트어썸 사용

폰트어썸은 svg vector 를 이용하므로 아이콘의 색상 및 사이즈 변경이 가능합니다.

소스코드

<template>
  <div>
    <ul>
      <li>
        아이콘을 출력해 봅니다. <i class="fa fa-bus"></i>
      </li>
      <li>
        아이콘의 색상을 변경해 봅니다. <i class="fa fa-bus" style="color:blue"></i>
      </li>
      <li>
        아이콘의 크기를 변경해 봅니다.
        <i class="fa fa-bus"></i>
        <i class="fa fa-bus fa-lg"></i>
        <i class="fa fa-bus fa-2x"></i>
        <i class="fa fa-bus fa-3x"></i>
        <i class="fa fa-bus fa-4x"></i>
        <i class="fa fa-bus fa-5x"></i>
        <i class="fa fa-bus fa-6x"></i>
      </li>
      <li>
        아이콘의 테두리를 적용합니다. <i class="fa fa-bus fa-border"></i>
      </li>
      <li>
        아이콘의 방향을 변경합니다.
        <i class="fa fa-bus"></i>
        <i class="fa fa-bus fa-rotate-90"></i>
        <i class="fa fa-bus fa-rotate-90"></i>
        <i class="fa fa-bus fa-rotate-180"></i>
        <i class="fa fa-bus fa-rotate-270"></i>
        <i class="fa fa-bus fa-flip-horizontal"></i>
        <i class="fa fa-bus fa-flip-vertical"></i>
      </li>
      <li>
        아이콘을 회전합니다.
        <i class="fa fa-bus fa-spin fa-lg"></i>
      </li>
      <li>
        아이콘을 중첩합니다.
        <span class="fa-stack fa-lg">
        <i class="fa fa-circle fa-stack-2x"></i>
        <i class="fa fa-bus fa-stack-1x fa-inverse"></i>
        </span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  name: "FontAwesome2"
}
</script>
 
<style>
li {
  text-align: left;
}
</style>

실행결과

소개

Axios는 브라우저 및 node.js를 위한 간단한 비동기 통신 HTTP 클라이언트입니다. Axios는 매우 확장 가능한 인터페이스를 가진 작은 패키지로 사용하기 쉬운 라이브러리를 제공합니다.

브라우저에 내장되어 있는 fetch 와 비교한 표입니다.

axios vs fetch 

axios가 좀더 많은 기능을 제공해 줍니다. 그래서 인지 가장 많이 사용합니다.

설치

yarn add axios

main.js  파일 수정

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import axios from "axios";
import App from './App.vue'
 
Vue.prototype.$axios = axios;
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

예제 (행정코드)

법정 행정 코드를 다운로드 받아서 csv 파일을 만들고 이를 axios로 불러와서 행정동을 선택하는 예제를 만들어 보겠습니다. 

components/LawCode.vue 파일을  생성하고 아래와 같이 코딩합니다.

<template>
  <div>
    <el-row style="width:800px">
      <el-col :span="6">
        <el-select v-model="cate1" @change="chgCate1" placeholder="시/도">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cate2" @change="chgCate2" placeholder="시/군/구">
          <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cate3" @change="chgCate3" placeholder="읍/면/동">
          <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <el-select v-model="cate4" @change="chgCate4" placeholder="리">
          <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
const URL = "https://onehit9.github.io/";
 
export default {
  name: "LawCode",
  created() {
    this.getData();
  },
  data() {
    return {
      rows: [],
      options: [],
      options2: [],
      options3: [],
      options4: [],
      cate1: "",
      cate2: "",
      cate3: "",
      cate4: "",
      lastCate: "",
    }
  },
  methods: {
    resetCate(level) {
      if (level < 3) {
        this.cate2 = "";
        this.options2 = [];
      }
      if (level < 4) {
        this.cate3 = "";
        this.options3 = [];
      }
      if (level < 5) {
        this.cate4 = "";
        this.options4 = [];
      }
    },
 
    chgCate(cateNm,idx) {
      this.resetCate(idx - 1);
      let options = [];
      let cate = this.rows.filter(
          row => row.split(",")[idx] == "" &&
              (cateNm == "" ? true : row.split(",")[idx-1] != "" && row.split(",")[idx-2] == cateNm)
      );
      cate.map(cate => options.push({
        value: cate.split(",")[0],
        label: cate.split(",")[idx - 1]
      }))
      return options;
    },
 
    getData() {
      this.$axios.get(URL + 'apt/' + 'law_code.csv', {params: {}})
          .then((response) => {
            this.rows = response.data.replace(/["]+/g, "").split("\n");
            this.options = this.chgCate("",2);
          });
    },
    chgCate1() {
      this.lastCate = this.cate1;
      let cateNm = this.options[this.options.findIndex(e => e.value === this.cate1)].label;
      this.options2 = this.chgCate(cateNm,3);
    },
    chgCate2() {
      this.lastCate = this.cate2;
      let cateNm = this.options2[this.options2.findIndex(e => e.value === this.cate2)].label;
      this.options3 = this.chgCate(cateNm,4);
    },
    chgCate3() {
      this.lastCate = this.cate3;
      let cateNm = this.options3[this.options3.findIndex(e => e.value === this.cate3)].label;
      this.options4 = this.chgCate(cateNm,5);
    },
    chgCate4() {
      this.lastCate = this.cate4;
    },
  }
}
</script>
<style scoped></style>

위코드에서 중요한 부부은 104~110라인의 getData() 부분으로 axios를 이용해서 law_code.csv를 가져오는 부분입니다.

실행결과

https://fontawesome.com/cheatsheet에 접속하시면 무료로 사용할수 있는 아이콘들을 확인할수 있습니다. 

조금더 쉽게 아이콘 검색을 위한 app을 만들어 보았습니다.

먼저 클립보드 복사 붙여 넣기를 쉽게 하기 위해 vue-clipboard2 를 설치합니다.

yarn add vue-clipboard2

main.js 파일을 아래와 같이 수정합니다. (클립보드를 사용할수 있게 변경합니다.)

import Vue from 'vue'
import locale from 'element-ui/lib/locale/lang/ko'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import axios from "axios";
import VueClipboard from 'vue-clipboard2'
import App from './App.vue'
 
Vue.prototype.$axios = axios;
Vue.config.productionTip = false
Vue.use(Element, {locale},{ size: 'small', zIndex: 3000 });
Vue.use(VueClipboard);
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

components/IconSearch.vue 파일을 아래와 같이 작성합니다.

<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col :span="24">
          <h3>아이콘 검색</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input placeholder="아이콘 이름을 입력하세요 ex) hotel" v-model="searchStr" @input="iconSearch"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22">
          <ul v-if="searchIcon.length > 0">
            <li v-for="item in searchIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer">
              <i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b>
              <span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span>
            </li>
          </ul>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>아이콘 색인</h3>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="2">
          <ul v-if="alphabet.length > 0">
            <li v-for="item in alphabet" :key="item">
              <button @click="iconIndex(item)">{{item}}</button>
            </li>
          </ul>
        </el-col>
        <el-col :span="22">
          <ul v-if="indexIcon.length > 0">
            <li v-for="item in indexIcon" :key="item" v-on:click="copyClipboard(item)" style="cursor:pointer">
              <i :class="'fas fa-' + item"></i> <b style="color:black">{{item}}</b>
              <span style="color: #848d95">&lt;i class="fas fa-{{item}}"&gt;&lt;/i&gt;</span>
            </li>
          </ul>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
 
<script>
const URL = "https://onehit9.github.io/";
export default {
  name: "IconSearch",
  created() {
    this.alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
    this.$axios.get(URL + 'apt/' + 'font.csv', {params: {}})
        .then((response) => {
          this.icons = response.data.split(",");
          this.iconIndex('a');
        });
  },
  data() {
    return {
      searchStr: '',
      message: '',
      alphabet : [],
      indexIcon: [],
      searchIcon: [],
      icons: [],
    }
  },
  methods: {
    iconIndex(idx) {
      this.indexIcon = this.icons.filter(item => item.charAt(0) === idx);
    },
    iconSearch(str) {
      if(str.length <2 ) {
        this.searchIcon = [];
        return;
      }
      this.searchIcon = this.icons.filter(item => item.indexOf(str) > -1);
    },
    copyClipboard(item) {
      const text = '<i class="fas fa-' + item+'"></i>';
      this.$copyText(text);
      this.$message(text + ' 클립보드에 복사되었습니다. 붙여넣기(ctrl + v) 하여 사용하실수 있습니다.');
    },
  }
}
</script>

코드설명

1. font.csv 파일을 만들어서 사용할수 있는 아이콘의 문자열을 , 로 분리시켜 저장합니다.

2.axios로 csv 파일을 불러와서 icons array에 추가합니다.

3. 해당 검색어 및 인덱스에 맞는 아이콘만 필터하여 보여 줍니다.

4. 클릭시 클립보드에 복사되도록 copyText 를 실행합니다.

실행결과

화면 개발할때 아이콘을 자주 사용합니다. 아이콘을 사용하면 사용자가 해당 기능에 대한 이해가 수월해 지고 만든 화면의 완성도도 높아진다는 장점이 있습니다. 하지만 아이콘이 필요할때 마다 디자이너에게 요청하면 상당히 눈치가 보일것 같네요. 그렇다고 포토샵을 열어서 아이콘을 만들수도 없고 이때 사용할수 있는 유용한 웹 아이콘 폰트 라이브러리가 있습니다. Font Awesome 이라는 라이브러리 인데요 웹 아이콘 폰트 시장에서 가장 인기있는 라이브러리 입니다. 이번 시간에는 Vue.js 에서 Font Awesome 을 사용하는 방법에 대해서 알아 보겠습니다.

설치

Vue.js 프로젝트를 생성했다고 가정하고 font awesome 을 추가 설치 하는 방법입니다. yarn 또는 npm 둘중 하나의 방법을 이용해 라이브러리를 추가해 주세요

yarn을 이용한 설치

yarn 을 이용한 설치 방법입니다.

yarn add @fortawesome/fontawesome-free

npm 설치 방법

npm을 이용한 설치 방법 입니다.

npm install --save @fortawesome/fontawesome-free

main.js 수정

main.js 에  import '@fortawesome/fontawesome-free/js/all.js' 코드를 추가합니다.

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import '@fortawesome/fontawesome-free/js/all.js'
import App from './App.vue'
 
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

사용법

vue.js template 부분에 아래와 같이 코드를 작성하시면 아이콘이 출력됩니다.

<i class="fa fa-bus"></i>
<i class="fas fa-ambulance"></i>
<i class="fas fa-hotel"></i>

실습

componets 에 FontAwesome.vue파일을 생성하고 아래와 같이 입력합니다.

<template>
  <div style="margin-top:40px">
    <i class="fa fa-bus fa-lg"></i>
    <i class="fas fa-ambulance fa-2x"></i>
    <i class="fas fa-hotel fa-4x"></i>
  </div>
</template>
 
<script>
export default {
  name: "FontAwesome"
}
</script>
 
<style scoped>
 
</style>

router/basic.js 파일에 추가한 컴포넌트의 path를 지정합니다. (page2 라고 지정함)

import HelloWorld from "@/components/HelloWorld";
import Page1 from "@/components/Page1";
import FontAwesome from "@/components/FontAwesome";
 
const basic = [
    {path: '/', name: 'index', component: HelloWorld},
    {path: '/hello-world', name: 'HelloWorld', component: HelloWorld},
    {path: '/page1', name: 'Page1', component: Page1},
    {path: '/page2', name: 'FontAwesome', component: FontAwesome},
];
 
export default basic;

App.vue에 추가한 페이지 page2에 대한 라우터 링크를 추가합니다.

<template>
  <div id="app">
    <router-link to="/hello-world">hello</router-link> |
    <router-link to="/page1">page1</router-link> |
    <router-link to="/page2">page2</router-link> |
    <router-view></router-view>
  </div>
</template>
 
<script>
export default {
  name: 'App'
}
</script>
 
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 10px;
}
</style>

실행결과

vue-router 설치 및 활용방법 입니다.

설치하기

npm install vue-router

package.json 파일 14라인에 vue-router가 추가 되었습니다.

{
  "name": "vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.3",
    "vue": "^2.6.11",
    "vue-router": "^3.5.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

아래와 같이 디렉토리 (src/router)를 구성하고 basic.js , index.js 파일을 생성합니다.

├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   ├── HelloWorld.vue
│   │   └── Page1.vue
│   ├── main.js
│   └── router
│       ├── basic.js
│       └── index.js

router/index.js : 여러개의 router를  import 하는 역할을 담당합니다.

/* eslint-disable */
import Vue from 'vue'
import Router from 'vue-router'
import basic from "@/router/basic";
Vue.use(Router)
 
export default new Router({
    mode: 'hash',
    routes: [
        ...basic
    ]
})

router/basic.js : 기본 router 입니다. 내용이 추가될때 마다 이곳에 컴포넌트를 추가하여 path에 사용하는 컴포넌트를 정의합니다.

import HelloWorld from "@/components/HelloWorld";
import Page1 from "@/components/Page1";
 
const basic = [
    {path: '/', name: 'index', component: HelloWorld},
    {path: '/hello-world', name: 'HelloWorld', component: HelloWorld},
    {path: '/page1', name: 'Page1', component: Page1},
];
 
export default basic;

Page1.vue 파일을 생성합니다.

<template>
  <div id="app">
    {{ page1 }}
  </div>
</template>
 
<script>
export default {
  name: 'Page1',
  data() {
    return {
      page1 : "test router",
    }
  }
}
</script>
 
<style scoped></style>

main.js 파일을 아래와 같이 수정합니다.

import Vue from 'vue'
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router'
import App from './App.vue'
 
Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });
 
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

그리고 나서 build 하여 실행해보면 아래와 같은 페이지를 확인할수 있습니다.

hello-world

page1

vue.js  BASE_URL public_path 변경하기

BASE_URL public_path 변경하는 방법입니다.

package.json 파일이 있는 위치에 "vue.config.js" 파일을 생성합니다.

vue.config.js 파일에 아래와 같이 입력합니다.

module.exports = {
    publicPath: '/dist/',
}

npm run deploy 합니다.

그럼 아래와 같이 base_url이 변경되었음을 확인할수 있습니다.

기존 

... 중략 ...
<link href="/css/app.dba1af84.css">
... 중략 ...

변경후

... 중략 ...

<link href="/dist/css/app.dba1af84.css">


... 중략 ...

vue용 대표 ui 컴포넌트인  element-ui 설치 방법 입니다.

vue project 에서 아래 명령어를 실행합니다.

npm i element-ui -S

실행이 끝나고 나서 package.json 파일을 확인하면 11 라인 처럼 "element-ui": "^2.15.3" 가 추가된걸 확인할수

있습니다.

{
  "name": "vue2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "element-ui": "^2.15.3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

진입점 파일 main.js 파일에 3,4 라인과 같이 element-ui 관련 내용을 추가합니다.

그리고 나서 8번 라인에  element ui 사용하겠다고 선언합니다.

Vue.use(Element, { size: 'small', zIndex: 3000 });

import Vue from 'vue'

import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(Element, { size: 'small', zIndex: 3000 });

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vue 파일을 아래와 같이 수정합니다.

<template>
  <div id="app">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>

  </div>

</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

실행결과

아나콘다(Anaconda)를 사용하는 이유

파이썬은 인기가 많은 언어입니다. 저와는 인연이 없어서 사용할 일이 없었는데 요즘 인공지능에 대한 관심이 많아지고 회사에서도 파이썬을 이용하는 개발자분들이 증가하고 있어 저도 준비를 해야겠다는 생각에 파이썬 개발환경을 구축해 보고자 합니다. 인터넷 시용이 제한 되는 환경이라면 파이썬 패키지를 다운로드 받거나 업데이트는 진행할수 있습니다. 이때 사용할수 있는 방법이 인터넷이 되는 환경에서 아나콘다 의 conda 시스템을 통해서 패키지를 업데이트한후 전체를 압축한후 사용하면 인터넷 사용 제한에 따른 문제를 해결할수 있습니다. 이에 저는 아나콘다를 사용합니다.

아나콘다 설치

https://www.anaconda.com/products/individual#windows 에서 다운로드 버튼을 클릭하여 다운로드를 실행합니다.

다운로드 받은 파일을 실행하여 Next > Next 하여 설치를 진행합니다.

설치 완료후 Anaconda Navigator 아이콘을 클릭하여 아나콘다를 실행합니다.

실행화면에서 쥬피터 노트북을 선택합니다.

New 콤보박스를 선택하여 Python3을 실행합니다.

1+1 을 실행하여 결과를 확인합니다. 여기까지 하시면 아나콘다 설치 및 쥬피터 노트북 테스트가 완료되었습니다.