오답노트

Vue에 css 추가Vue 파일에 이렇게 추가하고 실행시켰는데아래 같은 에러가 발생했다.  너는 추가적인 로더가 필요하다.. 검색을 해봤더니 css loader를 설정하지 않았다 style-loader  css-loader다음 명령어로 loader를 설치해주자 npm install style-loader css-loader --save-dev 웹팩 설정파일에 위처럼 설정하고 다시 실행 시켜보면 성공적으로 뷰가 실행된다.

Concepts | 웹팩웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다.webpack.kr 이 포스팅은 내가 이해하기 편하게 작성되었고, 정확한 정보는 Document 문서를 확인하는 것이 좋다. (거짓을 적겠다는 것은 아님..) Webpack웹팩은 JS 애플리케이션을 위한 정적 모듈 번들러이다.웹팩이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 Dependency Graph를 만든다.정적 모듈 번들러js는 웹페이지를 호출할 때 모듈들을 url을 통해 가져올 수 있다.하지만 그렇게 되면 우리는 페이지를 불러올 때..

Node.js 설치Vue를 설치하기 위해서 는 Node.js 설치가 필요하다.아래 페이지로 가서 자신의 상황에 맞는 버전을 다운받자. 나는 우선 메인페이지에 있는 버전으로 설치했다.설치 과정은 게임 설치하듯이 하면 된다. PATH를 설정하겠냐는 설정이 있을 경우 체크 해주자 (별도 설정없이 CLI로 바로 실행 가능하다) 설치가 완료되면 정말 설치가 됐는지(??) 다음 명령어로 확인해보자noed -vnpm -vnode는 내가 Node.js 설치한 버전이고npm은 node package manager 버전이다.npm으로 Vue 설치를 진행해보자. Vue 설치npm으로 Vue 개발환경 구축을 위해 Vue CLI를 설치하자Vue CLI 는 Vue 개발환경을 설정해주는 도구로서 기본적인 프로젝트 세팅을 도와준다...

함수의 호출 과정 함수 실행 영역 (Execute Context Stack) 생성 매개변수, argments 변수 생성 및 초기화 선언적 함수 var this 코드 실행 var msg = 'global' function outer() { var msg = 'outter' console.log(msg) inner() function inner(){ var msg = 'inner' console.log(msg) } outer() //outter //inner 스코프와 스코프 체인 스코프는 유효 범위로 우선적으로 자기 자신의 컨텍스트에서 먼저 변수를 찾는다. 만약 변수가 존재하지 않으면 상위 컨텍스트에서 변수를 찾아 사용한다. 스코프 체인은 해당 코드의 스코프 안에 있는 변수를 정의하는 객체의 체인이다. va..

함수 정의하는 법 함수는 생성자 함수 방법, 선언적 함수 방법, 리터럴 함수 방법이 있다. var f1 = new Function("x","y","return x+y") // 생성자 함수 방법 console.log(f1(7,5)) function f2(x,y){ // 선언적 함수 방법 return x+y } console.log(f2(7,5)) var f3 = function(x,y){ // 리터럴 함수 방법 return x+y } console.log(f3(7,5)) 호이스팅 (Hoisting) 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화한다. 반면 let과 const로 선언한 변수의 경우 ..

JavaScript 자바스크립트는 동적인 웹페이지를 만들기 위해 사용하는 프로그래밍 언어이다. 데이터 타입 기본타입 number : 실수, 정수 모두 number다 string boolean undefined : 변수에 아무것도 할당되지 않으면 undefined이다. 참조타입 Array Function Date RegExp var a = 100 var b = 1.1 var c = 'c' var d = True var e console.log(typeof(a)) // number console.log(typeof(b)) // number console.log(typeof(c)) // string console.log(typeof(d)) // boolean console.log(typeof(e)) // un..

CSS : Cascading style sheets HTML을 꾸며주는 언어 html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인하는 역할 CSS 문법 h1 { color: yellow; font-size:2em; } 선택자(selector) 속성(property) 값(value) 선언(declaration) 선언부(declaration block) 규칙(rule set) CSS 주석 /* 주석입니다 */ /* 주석입니다 */ CSS 적용방식 Inline코드의 재활용이 쉽지 않아 잘 사용되지 않음 내용 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법 Internal 태그는 태그를 사용하여 규칙들을 선언 External스타일 규칙들을 별도의 외부 파일로 만들어 ht..

콘텐츠 모델 콘텐츠 모델의 7 분류 Metadata Content : 콘텐츠의 style, script를 설정 하거나 다른 문서와의 관계 등의 정보를 포함하는 요소 Flow Content : 문서에 사용되는 대부분의 요소 Sectioning Content : 헤딩과 푸터의 범위를 결정하는 요소, 아웃라인이 있음 Heading Content : 섹션의 헤더를 정의하는 요소 Phrasing Content : 문서의 텍스트이며 문단 내부 레벨로 마크업하는 요소 Embedded Content : 외부 컨텐츠를 표현하는 모델 Interacitve Content : 사용자와 상호작용하는 요소 시멘틱 마크업 컴퓨터(브라우저)가 잘 이해할 수 있는 코드 의미에 맞는 요소를 사용 문서의 구조화 인간과 기계가 모두 이해할..

HTML 태그 소개 버전에 따라서 새로 추가되도 삭제하기도 한다. 제목과 단락요소 제목(Heading) 태그 ~ 숫자가 작아질 수록 큰 수준의 제목 단락(paragraph)과 개행(linebreak) 단락 단락 별로 개행한다. 단락 안에서 다시 태그를 사용해도 개행되지 않는다. 개행 단락 태그 내에서 개행을 할려면 개행 태그를 사용해야함 텍스트를 꾸며주는 요소 : 글자를 굵게 표현한다. : 글자를 이탤릭체로 표현한다. : 글자에 밑줄을 표시한다. : 글자에 중간선을 넣는다. 앵커 요소 앵커 태그 다른 문서로 이동할 수 있는 링크를 생성한다. href(하이퍼 레퍼런스) 속성을 무조건 가지고 있다 href 속성 내에 #id 속성을 사용하면 내부 링크로 사용할 수 있다. 회사 소개로 이동하기 ... 중략. 회..

HTML 소개 HTML 이란? 웹페이지를 만들 때 사용하는 언어 HTML 문법 태그 무언가를 표기하기 위한 꼬리표, 또는 이름표 태그 = 요소 같은 의미라고 생각할 것 Hello,HTML 📋 h1 : 태그 이름 : 시작태그 : 종료 태그 Hello, HTML : 내용 속성(Attribute) 이름과 값으로 이루어져 있고 시작 태그 안에 선언한다. 태그 이름과 띄어쓰기로 구분하며, 속성은 띄어쓰기로 구분하지 않는다. 이름=값의 형태로 쓰이며 값은 쌍따옴표 또는 홀따옴표로 감싸준다. 모든 태그에서 사용가능한 속성 존재 특정 태그에서 무조건 사용해야하는 속성 존재 Hello,HTML Hello,HTML 태그 중첩(Nesting Tags) 올바른 예 부모태그 내에 자식태그가 종료되어있음 Hello, HTML 잘..