FrontEnd 25

Chapter 06. 데이터 타입(data type)

데이터 타입 자바스크립트의 모든 값은 데이터 타입을 갖는다. 원시 타입과 객체 타입으로 구분한다. 원시 타입 숫자(number) 문자열(string) 불리언(boolean) undefined: 선언되었으나 값이 할당되지 않았다. null: 변수에 값이 없다는 것을 의도적으로 명시하기 위해 사용한다. 변수가 이전에 참조하던 값을 더 이상 참조하지 않는다는 의미다. 심벌(symbol) 타입: 변경 불가능한 원시 타입의 값이다., ES6에서 추가된 타입이다. 객체 타입: 객체, 함수, 배열 등 숫자(number) 타입 C, Java의 경우에는 소수점 이하가 있는 숫자(실수), 소수점 이하가 없는 숫자(정수)를 구분해서 double, float 같은 숫자타입을 제공한다. 이와 다르게 JavaScript에서는 숫..

Chapter 04. 변수

메모리와 변수 메모리(memory)는 메모리 셀의 집합체다. 메모리 셀 하나는 1바이트(8비트)이며 컴퓨터는 메모리 셀의 크기, 즉 1바이트 단위로 데이터를 저장하거나 읽는다. 각 셀은 고유하게 메모리 주소(memory address)를 갖는다. ex) 4GB 는 0 ~ 4,294,967,295 (0x00000000 ~ 0xFFFFFFFF) 까지의 메모리 주소가 있다. 컴퓨터는 모든 데이터를 2진수로 처리한다. 따라서 데이터가 숫자, 텍스트, 이미지, 동영상인지에 상관없이 모두 2진수로 저장된다. 메모리에 저장되는 값은 모두 2진수로 저장된다. Ex) 10 + 20 이라는 식을 컴퓨터는 어떻게 처리할까? 사람은 계산, 기억을 두뇌에서 하지만 컴퓨터는 연산과 기억을 수행하는 부품이 나눠져있다. 피연산자인 ..

Chapter 03. 자바스크립트 개발 환경과 실행 방법

3.1 자바스크립트 실행 환경 모든 브라우저는 자바스크립트를 해석하고 실행할 수 있는 자바스크립트 엔진을 내장하고 있다. Node.js도 자바스크립트 엔진을 내장한다. 브라우저와 Node.js의 용도가 다르다. 브라우저는 HTML, CSS, 자바스크립트를 실행해서 화면에 렌더링하는 것이 목적이다. Node.js는 브라우저 외부에서 자바스크립트 실행 환경을 제공하는 게 목적이다. 웹 크롤링(Web Crawling) 서버에서 웹 사이트의 콘텐츠를 수집하기 위해서 HTML 문서를 가져와서 필요한 데이터만 추출하는 것을 말한다. 3.2 웹 브라우저 개발자 도구 개발자 도구는 웹 브라우저에 기본적으로 내장되어 있다. Elements: 로딩된 웹 페이지의 DOM, CSS 를 편집해서 렌더링된 뷰를 확인할 수 있다...

Chapter 01. 프로그래밍 Chapter 02.자바스크립트란?

1장 프로그래밍이란? 프로그래밍이란 0과 1 밖에 모르는 기계가 실행할 수 있도록 정확하고 상세하게 요구사항을 설명하는 작업이다. 그 작업의 결과물이 코드에 해당하다. 컴퓨터가 명령어를 수행하도록 하려면 컴퓨터가 이해할 수 있는 언어(기계어, machine code)로 컴퓨터에 명령어를 전달해야 한다. 개발자가 프로그래밍 언어를 사용해서 프로그램을 작성한 다음, 그걸 컴퓨터가 이해할 수 있는 기계어로 변환하는 번역기를 이용하는 방법이 있다. 이 번역기를 컴파일러(compiler) 또는 인터프리터(interpreter)라고 한다. 2장 자바스크립트란? 자바스크립트의 탄생 1995년 넷스케이프 커뮤니케이션즈가 웹 브라우저 시장을 90% 점유했다. 웹 브라우저에서 동작하는 경량 프로그래밍 언어 도입을 결정하다..

Chapter 04. 반응 속도 체크 게임

반응 속도 체크와 webpack watch 자바스크립트가 아닌 무언가가 추가될 때마다 config 파일의 rules에 loader를 추가한다. 그러면 웹팩이 알아서 자바스크립트로 바꿔준다. ex) .vue로 끝나는 파일은 자바스크립트가 아니지만 vue-loader가 자바스크립트 파일로 바꿔준다. 따라서 한 번에 자바스크립트 파일로 합칠 수 있다. 앞으로도 css, 이미지, html 같은 파일도 마찬가지이다. 그 때도 각각 맞는 로더를 사용하면 하나의 자바스크립트 파일로 합칠 수 있다는 것이 웹팩의 장점이다. entry, module, plugins, output 은 꼭 알아두기 Ex) 반응 속도 체크 게임 비동기 작업(set timeout?)과 뷰를 같이 쓰는 연습하려고 한다. 다음과 같이 새로운 폴더에..

Chapter 03. 웹팩 적용하기와 숫자 야구

초기 설정 웹팩을 쓰기 위해서는 먼저 node를 깔아야한다. node를 설치하면 npm이 같이 따라온다. npm은 다른 사람이 작성해둔 javascript 코드를 끌어다 쓸 수 있다. 결국 Vue도 남이 만들어둔 소스라고 볼 수 있다. node를 제대로 설치하면 다음과 같이 버전 확인이 가능하다. node -v npm -v npm init 터미널로 들어와서 npm init 입력하고 나면 다음과 같이 버전 및 여러 가지가 나오는데 package name만 다음과 같이 입력하고 나머지는 모두 넘긴다. 입력하고나면 다음과 같이 json 파일이 하나 생성된다. 내가 쓸 수 있는 다른 사람의 소스 코드가 정리된 파일이다. 정리하는 이유: 각 소스코드마다 버전이 있다. 내가 어떤 버전을 쓰고 있는지 버전관리하고 몇..

Chapter 02. 컴포넌트와 웹팩을 쓰는 이유

컴포넌트의 필요성 같은 코드의 중복을 없애고 간편하고 효율적으로 개발하기 위해 컴포넌트가 필요하다. 컴포넌트의 활용은 여러 번 사용하는 것을 전제로 한다. 지난 포스팅에서 살펴본 것과 다르게 여러 개의 끝말잇기를 한 페이지에 여러 개 진행하려면? Ex) 컴포넌트를 적용하지 않은 끝말잇기 게임 복사해서 여러 개의 submit 메서드를 만든다. {{word}} 입력! {{result}} {{word1}} 입력! {{result1}} {{word2}} 입력! {{result2}} Note) 실행 결과 아래와 같이 세 개의 끝말잇기를 만들었으나 중복되는 부분이 너무 많다. 이런 비효율성을 해결할 수 있는 것이 "컴포넌트"이다. 최소 단위를 재사용한다. 컴포넌트 적용하기 component() 안에는 파스칼, 케밥..

Chapter 01. Vue 환경 설정, 끝말잇기 게임

순수 html로 Vue 만들어보자 웹팩, 바벨(Babel)이 없어도 html 만으로도 가능하다. Vue 환경 설정 링크에서 node를 다운 받는다. https://nodejs.org/ko/download VS code를 다운받고 작업하려는 폴더에서 VS code 터미널을 연다. npm install -g@vue/cli 입력 다운 완료 입력해서 로컬에서 실행해준다. npm run local 로컬에서 실행이 되면 다음과 같이 뜬다. 웹 페이지가 뜨면 실행 완료! vue 라이브러리를 사용하기 위한 source를 넣는다. 이 소스를 넣어주면 좋아요 페이지의 내용을 뷰의 컴포넌트 또는 템플릿으로 전환한다. html 좋아요 el 에다가 통제할 대상의 속성 이름인 root를 넣어준다. Vue가 root 영역을 통제할..

Chapter 05. Vue.js 3

Vue.js 2 에서 Vue.js 3로 바꾸기 CDN 라이브러리가 달라진다. https://vuejs.org/guide/quick-start.html#using-vue-from-cdn Note) 실행 결과 라이브러리만 바꿨는데 다음과 같이 오류가 난다. Vue는 더이상 생성자가 아니라는 오류가 난다. 기존 Vue 2 Vue 3 createApp() 안에 기존 옵션들을 집어 넣는다. mount()를 이용해서 view의 ele를 넣어준다. methods{}는 동일하게 작성하지만 data{}를 넣었던 부분이 다음과 같이 바뀐다. Ex) 변경하기 new Vue => createApp() ele 는 맨 뒷부분으로 빠진다. data 가 메서드로 바뀐다. 반환값을 넣어준다. 적용하고난 코드 Vue.createApp(..

FrontEnd/Vue.js 3 2023.03.29

Chapter 04. Vue 시작하기

Vue 코드의 기본 구조 Model을 심어준다. section을 "calc-app"이라는 이름으로 범위를 설정한다. 위 사진의 왼쪽은 new Vue()는 Vue 2에 해당한다. 중괄호 안에 객체(Options API)를 담아서 전달한다. 이러한 형식이 약속된 방식이므로 인터페이스와도 같다. Ex) Vue 2를 이용한 계산기 프로그래밍 지난 포스팅에서 Vue 없이 페이지를 만든것과 다르게 이번에는 뷰를 적용하려고 한다. HTML 페이지는 동일하며 JavaScript 코드만 바뀐다. Vue 사이트에서 라이브러리를 가져온다. https://v2.vuejs.org/v2/guide/ html 페이지 만들기 기존 자바스크립트 파일의 내용을 아래와 같이 모두 지운다. 그리고 기존에 있던 new Vue({ el: "#..

FrontEnd/Vue.js 3 2023.03.29