반응형

(Original)
Good morning! Here's your coding interview problem for today.

This problem was recently asked by Google.

Given a list of numbers and a number k, return whether any two numbers from the list add up to k.

For example, given [10, 15, 3, 7] and k of 17, return true since 10 + 7 is 17.

Bonus: Can you do this in one pass?

 


(Google번역)
숫자 목록과 숫자 k가 주어지면 목록에서 두 숫자의 합이 k가 되는지 여부를 반환합니다.
예를 들어 [10, 15, 3, 7] 및 17의 k가 주어지면 10 + 7은 17이므로 true를 반환합니다.
보너스: 이 작업을 한 번에 수행할 수 있습니까?

 


매일 문제을 받고 싶다면 아래 링크에서 구독해보세요.

(단, 문제 풀이는 프리미엄 구독자만 받을 수 있음)

https://www.dailycodingproblem.com/

 

Daily Coding Problem

There's a staircase with N steps, and you can climb 1 or 2 steps at a time. Given N, write a function that returns the number of unique ways you can climb the staircase. The order of the steps matters. For example, if N is 4, then there are 5 unique ways:

www.dailycodingproblem.com

 


// example
const array = [10, 15, 3, 7]
const k = 17
let result;
let i = 0;
let j = i + 1;

for (; i < array.length; i++) {
  for (; j < array.length; j++) {
    if (array[i] + array[j] === k) {
      result = true;
      break;
    }
  }
  if (result) break;
}
console.log(result);

숫자 배열안에 N개의 숫자가 있을 때,

for 2번 사용하여 최대 N * (N-1) 으로 O(N2) 복잡도를 생각할 수 있다.

그런데 한 번에 수행한다는 의미가... O(N) or O(1) 이 가능하다는 말인지..

 

'2023' 카테고리의 다른 글

sql,nosql,앱개발,정처기,,,230616  (0) 2023.06.18
2023.01.16. Daily Coding Problem: Problem #3 [Medium]  (0) 2023.01.16
2023.01.13.vue build  (0) 2023.01.13
2023.01.12.  (0) 2023.01.12
2023.01.11.vue  (0) 2023.01.11
반응형

vue cil 사용하여 빌 드 후 배포시 참고 자료

https://cli.vuejs.org/guide/deployment.html

 

Deployment | Vue CLI

Deployment General Guidelines If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is make sure Vue CLI generates the built files in the correct location, and then follow the deplo

cli.vuejs.org

 


일단 배포는 미루고 빌드하며 문제가 생겼던 부분 해결한 방법에 대해서 적는다.

 

##  *.ico, *.jfif 이미지 파일에 대한 오류 ...

img1 [ ico, jfif 파일 에러 ]

webpack을 설치하려다가 기존 vue 프로젝트에 적용하는 것은 단순히 여러 글을 참고해서

설정 파일을 따라서 작성하는 것만으로는 적용할 수 없겠구나 라는 것을 깨달았다.

 

그래서 다시 package.json > scripts > build 부분을

webpack 에서 다시 기본값인 vue-cli-service build 로 수정하였다.

 

그리고 터미널에서

npm run build 실행하였으나 위 img1 과 같은에러가 발생하였다.

ico, jfif 파일을 로더에서 처리할 수 없어서 발생한다고 한다.

로더 설정을 수정하거나 추가하여 ico, jfif 파일도 변환 가능하도록 해야 한다.

 

또한 기본 vue cli 에 포함된 webpack을 확인하여 vue.config.js에 추가하거나 수정 가능한 것을 알게 되었다.

vue inspect 명령어를 사용해서 현재 프로젝트에 설정된 웹팩 옵션들을 확인 할 수 있었다.

터미널에 위 명령어 사용 시 내용이 많으므로, 아래와 같이 다른 파일에 저장하여 확인 하도록 한다.

vue inspect > options.js

options.js 파일에서 내용을 검색하여 아래와 같은 image 부분을 확인 할 수 있었다.

img2 [ vue inspect - config.module.rule('images') ]

해당 부분을 참고해서 vue.config.js 내부에 추가하였으나 type 관련 에러가 발생하여

최종적으로 추가한 설정은 아래와 같다.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,

  configureWebpack: {
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.(ico|jfif|png|jpe?g|gif|webp|avif|svg)(\?.*)?$/,
          type: 'asset/resource',
          use: [
            {
              loader: 'file-loader',
            },
          ],
          generator: {
            filename: 'img/[name].[hash:8][ext]',
          },
        },
      ],
    },
  },
});

(최대한 빠른 시일내에 해당 에디터를 좀 고치거나 css를 손보거나,,,영 불편하다)

 

vue.config.js 설정 수정한 후 다시 빌드 시 정상적으로 완료되는 것을 확인 가능하다.

 

 

참고 링크

https://cli.vuejs.org/config/#vue-config-js

 

Configuration Reference | Vue CLI

Configuration Reference Global CLI Config Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. You can edit this file directly with yo

cli.vuejs.org

https://joshua1988.github.io/vue-camp/webpack/project-setup.html

 

Project Setup | Cracking Vue.js

Vue CLI로 생성한 프로젝트의 웹팩 설정 방법 Vue CLI로 생성한 프로젝트에 웹팩 설정을 변경하려면 어떻게 해야 할까요? 웹팩 설정 확인 & 변경 방법에 대해 알아봅니다. Vue CLI로 생성한 프로젝트와

joshua1988.github.io

https://cli.vuejs.org/config

 

Configuration Reference | Vue CLI

Configuration Reference Global CLI Config Some global configurations for @vue/cli, such as your preferred package manager and your locally saved presets, are stored in a JSON file named .vuerc in your home directory. You can edit this file directly with yo

cli.vuejs.org

 

'2023' 카테고리의 다른 글

2023.01.16. Daily Coding Problem: Problem #3 [Medium]  (0) 2023.01.16
2023.01.14. Daily Coding Problem: Problem #1 [Easy]  (0) 2023.01.16
2023.01.12.  (0) 2023.01.12
2023.01.11.vue  (0) 2023.01.11
클린 코드  (0) 2023.01.10
반응형

자바스크립트 사용해서 이미지 위 클릭한 위차에 동그라미를 출력할 일이 필요했다.

div, svg, circle element 생성하고 appendChild 이용해서

circle을 svg 하위에, svg를 div 하위에 추가한 후

최종적으로 특정 div 내에 출력하려는 생각이었다.

현재는 잘 사용되도록 해결된 상태이지만,

잠깐 appendChild를 사용할 수 없는 노드라는 에러를 발견하고

구글에서 appendChild에 대해서 검색을 했더랬다...

 

크롬 탭에 또 그렇게 검색중인 내용들이 쌓였는데

해결되고 닫지 않은듯하다 아마도?

// example
const div = document.createElement("div");
document.body.appendChild(div);

 

참고 : https://developer.mozilla.org/ko/docs/Web/API/Node/appendChild

 

Node.appendChild() - Web API | MDN

Node.appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다. 만약 주어진 노드가 이미 문서에 존재하는 노드를 참조하고 있다면 appendChild() 메소드는 노

developer.mozilla.org


티스토리에는 글 작성 시 여러 동작하는 소스를 넣는 것이 불편하다.

이전에 여러 블로그 글들에서 본 적 있지만 딱히 관심 주지 않던 codepen에 대해서 오늘 생각나서 링크 남긴다.

https://codepen.io/

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

img1 [codepen.io]

위와 같이 코드 내용과 함께 결과를 확인 가능하게 도와준다.

티스토리에서는 스키편집 > 파일첨부에서 ei.js를 첨부한 이후에

HTML 편집에서 head 부분에 script 추가해 주는 것으로 준비는 완료된다.

그 후 codepen에서 코드 작성 하고 우측 하단에 embed를 클릭하면 다른 곳에 첨부할 수 있도록 도와준다.


VUE 컴포넌트 만들때 참고

https://developer.mozilla.org/ko/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component#in_this_module

 

첫 번째 Vue 컴포넌트 만들기 - Web 개발 학습하기 | MDN

이제 Vue에 대해 더 자세히 알아보고 직접 커스텀 컴포넌트를 만들어 볼 시간입니다. 먼저, Todo 리스트의 각 항목을 표현하는 컴포넌트를 만들어 보면서 몇 가지 중요한 개념을 배우겠습니다. 컴

developer.mozilla.org


정규식 검사

https://regexr.com/

 

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

regexr.com

img2 [regexr.com]

단계별 설명도 어느정도 있어서 도움이 더 된다.

그래도 정규식은 직접 여러번 겪어보지 않으면 눈에 한번에 안들어오는듯,,,

 

여기도 도움이 된다.

https://regex101.com/

 

regex101: build, test, and debug regex

Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET.

regex101.com

img3 [regx101.com]

 


vue router - child component, redirect

https://any-ting.tistory.com/47

 

[Vue] Vue Router 라우트 중첩 및 리다이렉트

- 지난 시간 안녕하세요. 지난 시간에는 Vue Router를 활용해서 데이터를 전달하는 방법에 대해 알아봤습니다. 놓치고 오신 분들은 아래 링크를 통해 학습하고 오시는 걸 추천드리겠습니다. any-ting.

any-ting.tistory.com

 

'2023' 카테고리의 다른 글

2023.01.14. Daily Coding Problem: Problem #1 [Easy]  (0) 2023.01.16
2023.01.13.vue build  (0) 2023.01.13
2023.01.11.vue  (0) 2023.01.11
클린 코드  (0) 2023.01.10
정보처리기사  (0) 2023.01.10
반응형

프론트엔드 개발 중 webpack을 사용하기도 한다.

웹 어플리케이션 해석 시 js 외 리소스들을 변환 가능하도록 loader를 사용한다.

 

Webpack 관련 참고 링크

https://seogeurim.tistory.com/13

 

우리는 Webpack이 왜 필요할까?

본 글은 2020년에 작성된 글입니다. 프론트엔드 개발 중이라면 Webpack이라는 기술에 대해 필수적으로 마주치게 된다. 이번 포스팅은 Webpack이 무엇인지, 왜 필요한지에 대해 찬찬히 알아보려한다. W

seogeurim.tistory.com

https://devraphy.tistory.com/194

 

2. Vue - webpack을 이용한 프로젝트 생성

0. 시작하기 전에 - webpack 포스팅에서 생성한 프로젝트를 기반으로 Vue 프로젝트를 만들 예정입니다. - 필요하신 분은 아래에 있는 제 github 주소를 사용하여 해당 프로젝트를 사용하셔도 됩니다. g

devraphy.tistory.com

https://joshua1988.github.io/webpack-guide/concepts/loader.html#loader

 

Loader | 웹팩 핸드북

Loader 로더(Loader)는 웹팩이 웹 애플리케이션을 해석할 때 자바스크립트 파일이 아닌 웹 자원(HTML, CSS, Images, 폰트 등)들을 변환할 수 있도록 도와주는 속성입니다. 엔트리나 아웃풋 속성과는 다르

joshua1988.github.io


vue 공부 겸 테스트 중이었다.

일부 이미지(*.jfif)나 ico 파일에서 에러가 발생하여 알게 되었다.

img1 [ 이거 때문에 검색해보느라 시간을 ... ]

css파일으 style 태그안에 import 가능하다.

// example
<style>
@import "@/assets/css/common.css";
@import "@/assets/css/content.css";
</style>

그리고 vue 기본 적인 레이아웃 관련 링크

https://ospace.tistory.com/788

 

[vue.js] 레이아웃 구성

웹페이지는 여러 화면으로 구성되어 있다. 일반적으로 상단에 로고와 메뉴, 가운데에 컨텐츠, 하단에 사이트정보 등 형태로 되는 경우가 많다. 이런 화면을 모든 페이지에 반복적으로 나타나는

ospace.tistory.com


Vue 이미지 파일 연결 및 경로 별칭 설정

https://devraphy.tistory.com/195

 

3. Vue - 이미지 파일 연결 및 경로 별칭 설정

1. 파일 확장자 생략을 위한 설정 webpack.config.js 파일에서 위의 사진과 같이 resolve 속성에 extensions를 설정한다. js와 vue 파일을 import하거나 링크하는 경우, 확장자를 따로 명시하지 않아도 동작하

devraphy.tistory.com


 

'2023' 카테고리의 다른 글

2023.01.13.vue build  (0) 2023.01.13
2023.01.12.  (0) 2023.01.12
클린 코드  (0) 2023.01.10
정보처리기사  (0) 2023.01.10
2023.01.10. 공부 참고  (0) 2023.01.10
반응형

참조 : https://ardodeardo.medium.com/clean-code-4de6b19e84e2

 

Clean Code

A better way to produce readable, understandable and maintainable code — Part 1

ardodeardo.medium.com

 

순수하게 유지보수를 위한 개발이면 기존 스타일을 따라서 작성하겠지만,

그렇지 않은 경우 코드 작성에 따라 그 개발자의 평가가 달라질 수 있다.

아무리 남들보다 개발 속도가 빠르고 당장 기능이 정상 동작 한다고 하더라도,

알 수 없는 / 오해를 줄 수 있는 변수명, 코드 작성 방식이 더럽다면,

차후 해당 코드를 참고/수정 해야하는 다른 개발자들은 몇배의 리소스를 소모하게 될지 모른다.

 

medium 에서 여러 글들을 보다가 그냥 몇줄 작성한다.

참조 글과 동일하게 모든 번호를 작성하지는 않았다.

 

## 변수명은 의미 있는 이름들로 지어라.

1. 변수의 의도가 드러나는 이름을 지어라

2. 오해의 소지가 있는 이름을 피해라

3. 검색에 용이한 이름을 지어라

4. Avoid Mental Mapping

  아래는 예시인데,,,어떻게 변수명 지으라는 건지는 알겠는데 한글 번역이 애매해서 그냥 그대로 작성한다.

// bad
for (let x = 0; x < 10; x++) {
  // ...
}
items.forEach(i => {
  // ...
});

// good
for (let index = 0; index < 10; index++) {
  // ...
}
items.forEach(index => {
  // ...
});

5. 쓸데 없이 귀여운 척 이름 짓지 마라..ㅋㅋㅋ (아래 예시 참고)

// bad
thanosSnapHisFingers(id);

// good
deleteItem(id);

 

## 함수들(메소드들)

1. 함수 하나에는 하나의 기능을 담당하도록 작성하자.

한줄만 작성하라는 것이 아니라 같은 추상화 단계에 있는 기능들을 묶어서 사용할 수 있도록 구성하자.

아래 예시 참고..

// bad
function popup() {
  const parentElement = document.querySelector('.c-popup');
  
  const showButton = parentElement.querySelector('.c-popup__btn--show');
  showButton.addEventListener('click', () => {
    parentElement.classList.remove('d-none');
  });
    
  const hideButton = parentElement.querySelector('.c-popup__btn--hide');
  closeButton.addEventListener('click', () => {
    parentElement.classList.add('d-none');
  });

  // ... 
}


// good
function Popup() {
  const parentElement = document.querySelector('.c-popup');

  const show = () => {
    const showButton = parentElement.querySelector('.c-popup__btn--show');
    showButton.addEventListener('click', () => {
      parentElement.classList.remove('d-none');
    });
  }
    
  const hide = () => {
    const hideButton = parentElement.querySelector('.c-popup__btn--hide');
    closeButton.addEventListener('click', () => {
      parentElement.classList.add('d-none');
        });
  }
    
  init = () => {
    show();
    hide();
  }

  init();
}

2. 함수의 기능을 이름에 표현해라.

3. 함수의 인수들(arguments)은 적절하게 사용해라.

  0 개 = 이상적임

  1 ~ 2 개 = 가능하면 이정도

  3 개 = 안돼 (?!)

  - 하나의 함수에서 두 가지 기능을 위해서 인수를 굳이 사용하지 말고 두개의 함수로 나누자

  - 여러 인수를 다 넘기지 말고 하나의 객체로 넘기자

4. 반복해서 사용하지 말아라.

 

## 주석

1. 주석으로 모든 것을 설명하려 하기보다는 함수명,변수명 등을 잘 작성하여 주석을 줄여라

2. 좋은 주석들 : 법적인내용, 정보/의도 전달

3. 별로인 주석들 : 코드보다 긴 불필요하게 긴 내용, 수정 이력 같은 내용, 굳이 작성할 필요 없는 뻔한 내용, 위치를 나타내는 주석들

 

### 서식

1. 비교 연산자 & 등호 : ==, != 대신에 ===, !== 사용하자

2. 블록들

  - 여러 줄에 적절하게 괄호 사용하자

  - if 닫는 괄호와 else는 같은 줄에 작성하자

3. 주석들

  - 여러 줄에는 /** ... */ 을 사용하자

  - 같은 줄 끝에 작성하지 말고 위에 작성하되 다른 줄과 윗줄과 분리되도록 한줄 띄어서 작성하자

  - 주석은 한 칸 띄고 작성하자 (읽기 편하도록)

4. 공백들

  - 1탭 = 2스페이스(2칸)로 작성하자

  - 시작하는 괄호 앞에 한칸 (함수와 인수들 사이에는 X)

  - 연산자 앞뒤에 한칸

5. 콤마들(쉼표들) (,)

  - 줄 분리할 때 맨 앞에 콤마 사용하지 말고, 이전 줄 맨뒤에 콤마를 사용하자

6. 세미콜론 : 써라. (안쓰는 사람들도 많다는데 ,,, 왜 그러는지 잘 모르겠음)

7. 이름 짓는 규칙

  - 객체, 함수, 인스턴스는 카멜 케이스를 사용하자

  - 생성자,클래스에는 파스칼케이스 사용하자

 

 

*********************

그 이후로 내용이 더 있는데 그냥 이거 한글로 작성하는 것보다 직접 링크 들어가서 보는게 나을듯하여 줄입니다.

medium에 있는 윗글도 책 '클린코드'와 Airbnb의 JS 스타일 가이드를 참조 했다고 한다.

'2023' 카테고리의 다른 글

2023.01.12.  (0) 2023.01.12
2023.01.11.vue  (0) 2023.01.11
정보처리기사  (0) 2023.01.10
2023.01.10. 공부 참고  (0) 2023.01.10
2023.01.09. 참고용  (0) 2023.01.09
반응형

잊고 있던 정보처리기사

올해에는 마무리 지어야한다.

 

# 올해 시험 일정

오늘부터 1회 필기접수 가능하다.

그리고 한달 후 시험.

 

 

그나마 수수료가 해외 자격 시험들에 비하면 저렴한 편이라 일단 신청한다.

한달간 틈내서 공부하면 통과는 할 것 같다.

 

자세한 내용 확인 : https://www.q-net.or.kr/crf005.do?id=crf00505&jmCd=1320 

 

국가자격 종목별 상세정보 | Q-net

 

www.q-net.or.kr

 

미루지 말고 접수하고 공부하러 가자.

 

 

***** 2023.01.10.13:30

필기 원서 접수 첫날은 수도권(서울,인천,경기) 시험장은 14시부터 오픈된다고 하네...

이게 뭔 소린가 싶었는데

지역 선택에 수도권이 안보인다,,

이딴걸 어디 구석에 쳐넣어놔서 기다렸다가 나중에 다시 작성하게 만드네

앱도 구식으로 그지같이 만들어 놔가지고는,,,

'2023' 카테고리의 다른 글

2023.01.11.vue  (0) 2023.01.11
클린 코드  (0) 2023.01.10
2023.01.10. 공부 참고  (0) 2023.01.10
2023.01.09. 참고용  (0) 2023.01.09
[npm] install 옵션 --save, --save-dev  (0) 2023.01.06
반응형

https://gist.github.com/shoark7/38bcff39588b528d37313a669fdfd75d

 

개인적으로 사용했던 알고리즘 사이트들을 추천드립니다.

개인적으로 사용했던 알고리즘 사이트들을 추천드립니다. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

 

 

https://developer.mozilla.org/ko/docs/Learn

 

Web 개발 학습하기 | MDN

MDN 학습지에 오신 것을 환영합니다! 여기는 웹 개발을 처음 접하는 초보자가 웹 사이트 개발을 시작하기 위해 필요한 모든 것을 제공하는 글을 모아놓은 곳입니다.

developer.mozilla.org

 

https://www.typescriptlang.org/

 

JavaScript With Syntax For Types.

TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.

www.typescriptlang.org

 

https://babeljs.io/

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

 

 

'2023' 카테고리의 다른 글

클린 코드  (0) 2023.01.10
정보처리기사  (0) 2023.01.10
2023.01.09. 참고용  (0) 2023.01.09
[npm] install 옵션 --save, --save-dev  (0) 2023.01.06
[vue] 시작 (vscode_npm_node.js)  (1) 2023.01.06
반응형

https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

 

Vue.js 입문서 - 프론트엔드 개발자를 위한

Vue.js를 시작하기 위한 소개, 구성요소, 구조, Vue Router, HTTP 통신 라이브러리 등

joshua1988.github.io

 

https://lieadaon.tistory.com/382

 

[Vue.js] 유저 입력 연결하기 : v-model

입력폼을 데이터와 연결하기 : v-model ex) - 텍스트 입력받는 input 태그와 Vue의 데이터 연결 이름 : 입력한 이름 : {{myname}} - textarea 태그와 Vue의 데이터 연결 입력한 문장 : 문장 : {{mytext}}, {{mytext.lengt

lieadaon.tistory.com

 

https://medium.com/@hozacho/v-on-%ED%85%9C%ED%94%8C%EB%A6%BF%EC%97%90-%EC%A7%81%EC%A0%91-javascript-%EC%BD%94%EB%93%9C-%EB%84%A3%EA%B8%B0-%EB%A7%A8%EB%95%85%EC%97%90-vuejs-f0609a7756b7

 

[맨땅에VueJS] 템플릿에 직접 JavaScript 코드 넣기

이전 글에서 우리는 methods 객체에 선언된 함수를 v-on 디렉티브를 이용해서 실행해보았습니다.

medium.com

 

https://m.blog.naver.com/1126pc/221528701181

 

[Vue.js] html과 vue 연결하기

최초에 create vue로 환경을 만들면 App.vue에 코드를 작성하면 index.html의 <div id="app...

blog.naver.com

 

 

'2023' 카테고리의 다른 글

정보처리기사  (0) 2023.01.10
2023.01.10. 공부 참고  (0) 2023.01.10
[npm] install 옵션 --save, --save-dev  (0) 2023.01.06
[vue] 시작 (vscode_npm_node.js)  (1) 2023.01.06
2023.01.06. 나중에 확인할 링크들  (0) 2023.01.06
반응형

# 참조

https://cocoon1787.tistory.com/830

 

[Npm] npm install --save와 --save-dev의 차이점

🚀 안녕하세요. 구글에서 필요한 정보를 찾다가 npm install --save 많이 써봤지만 --save-dev 옵션은 처음 봐서 무슨 옵션인지 알아보고 정리하고자 합니다. ✔️ npm JavaScript용 Package Manager ✔️ npm init

cocoon1787.tistory.com

https://docs.npmjs.com/cli/v9/commands/npm-install

 

npm-install | npm Docs

Install a package

docs.npmjs.com

 

# --save

node_modules 디렉토리에 설치됨

package.json > dependencies 항목에 정보 추가됨

--production 빌드 시 해당 패키지가 포함됨

 

# --save-dev (or --save-D)

node_modules 디렉토리에 설치됨

package.json > devDependencies 항목에 정보 추가됨

--production 빌드 시 해당 패키지가 포함되지 않음

 

**** 그외 ****

# --global (or -g)

프로젝트가 아닌 시스템의 node_modules에 추가

 

프로젝트 별로 필요한 스펙이 다른데 멍청하게 그냥 -g 달고 설치해가지고 귀찮아짐 조금

좀 날리고 다시 설치할 게 필요할듯

 

# dependencies 만 설치

npm install -only=prod (or production)

 

# devDependencies 만 설치

npm install --only=dev (or development)

'2023' 카테고리의 다른 글

2023.01.10. 공부 참고  (0) 2023.01.10
2023.01.09. 참고용  (0) 2023.01.09
[vue] 시작 (vscode_npm_node.js)  (1) 2023.01.06
2023.01.06. 나중에 확인할 링크들  (0) 2023.01.06
jsconfig.json  (0) 2023.01.05
반응형

# vscode 사용한다

 

# terminal 연다

 

# node.js, npm 버전 확인한다 (없다면 설치)

node -v
npm -v

img1 [ node/npm 버전 확인]

 

# vue 설치한다

npm install -g @vue/cli

# vue 버전을 확인한다

vue -v

img2 [ vue 버전 확인 ]

 

* 2023.01.06.FRI

  node v18.12.1

  npm v9.2.0

  vue/cli v5.0.8

 

# 프론트(vue) 프로젝트를 생성한다.

목적이 있고 잘아는 상태가 아니라면 선택지에서 첫번에 있는  Default ([Vue 3] babel, eslint) 를 선택하고 진행한다.

vue create demo_vue

img3 [ Vue 설치 시 첫번째 선택지 ]
img4 [ Vue 프로젝트 생성 완료 ]

기본 프로젝트 생성 완료 시 {img4} 와 같은 결과가 출력되는 것을 확인 할 수 있다.

 

# 서버를 실행해보자.

cd demo_vue
npm run serve

img5 [ 실행 ]

 

# 로컬 (포트8080) 웹 접속 시 아래와 같이 기본 화면이 출력된다.

다음 내용은 다음 기회에,,너무 바빠짐

img6 [ 테스트 페이지 확인 ]

 

+ Recent posts