리액트 쓸 필요 없습니다.

 

리액트(REACT)

React : A JavaScript library for building user interfaces.

 

 리액트는 다음 공식사이트 정의와 같이 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리입니다.

UI는 사용자와 프로그램을 연결해주는 매개체라고 볼 수 있습니다. User와 Program의 상호작용을 위해 입력과 출력을 제어해주는 것으로 볼 수 있는데요. 웹 상에서 자주 쓰이는 버튼이나 텍스트 입력창 등이 있겠네요.

라이브러리는 실제로 도서관이라는 뜻이죠. 프로그래밍에서는 자주 사용되는 기능을 모은 것이라고 볼 수 있습니다.

 

그럼 이 라이브러리는 어떤 기능을 주로 할까요?

 

리액트의 역할은 Web-App(웹앱)을 만드는 것이라고 생각하면 됩니다. (Web-App을 Mobile-Web으로 혼돈하지 않도록 주의합시다!!)

Web-App : Mobile을 기준으로 개발하는 방식입니다. 단일 페이지 방식(SPA)을 사용하여 속도를 높이고 페이지 전환이 부드럽습니다.

Mobile-Web : 단순히 PC에서 보는 브라우저 창을 Mobile로 보도록 줄여놓은 상태. 풀 브라우저 방식입니다.

 

※ SPA : Single Page Application. 하나의 페이지만 존재하는 웹 사이트.

사용자가 특정 페이지를 요청하면 그때그때 페이지에 해당 내용을 채워줌.

 

웹앱은 모바일앱과 겉모습이 비슷하지만 구동방식을 마치 앱처럼 꾸며놓아 Web-app이라는 이름이 붙여졌습니다. 웹 개발기술로  Native-App(우리가 구글스토어나 앱스토어에서 다운받는 네이티브앱)을 흉내냈다고도 볼 수 있습니다.

 

 

리액트, 쓸 필요 없습니다.

1. Github는 쌩 자바스크립트(Vanilla JS)로 개발합니다.

: 전 세계 수많은 개발자들이 사용하는 Github 페이지는 Vanilla JavaScript를 사용합니다. 바닐라 자바스크립트란 외부 라이브러리나 프레임워크를 쓰지 않는 순수, 다시 말해서 쌩 자바스크립트라는 말이죠. 사용자 정의된 라이브러리나 프레임워크를 일절 사용하지 않기 때문에, 보다 빠르고 호환성이 높으며 좀 더 많은 기능을 개발할 수 있습니다. (리액트를 완전히 대체하진 못하지만 리액트의 JSX Component를 바닐라JS의 Web Component화 해서 사용하는 등 비슷한 기법을 사용할 순 있습니다.)

 Front-End 분야는 워낙 라이브러리, 프레임워크의 교체 시기가 빠르기 때문입니다. 주권이 언제 바뀔지 모르는 라이브러리를 사용하기보다 쌩 자바스크립트로 개발하는 게 더 위험성 없다고 생각했을 거에요.(자바스크립트가 주권을 뺏기지 않는 한...)

 

2. Kakao는 Vue.js를 좋아합니다.

: 카카오는 React도 물론 사용하지만 새로운 서비스를 런칭할 때 Vue.js 프레임워크의 선호도가 더 높습니다. 그 이유는 아주 여러가지가 있겠지만 '리액트보다 쉬워서'입니다. 문법이 리액트보다 어렵지 않고, 수학과 같이 개발 공식(Right Way)이 있기 때문입니다. 예를 들어, <HTML>을 여러 개 만들 때 리액트에서는 여러 문법이 사용될 수 있지만 Vue에서는 v-for 문법으로 통일되어 있습니다.

 

 

그럼에도 쓰는 REACT

 

  1.  사람들이 가장 많이 사용한다.
  2.  Single Page Application을 만들 수 있다.
  3.  Component로 html 재사용이 편리하다.
  4.  State로 데이터가 html에 자동 반영된다.
  5.  React-Native 같이 모바일 앱으로 발행도 쉽다.

 사실 다른 이유를 다 제쳐두고서라도, 리액트를 사용하는 이유로 활발한 개발 생태계와 커뮤니티를 꼽을 수 있습니다.

구글 검색결과 수조차 남다른 react

 라이브러리나 프레임워크가 잊혀지는 경우는 크게 두가지 입니다. 더이상 업데이트가 되지 않거나, 찾는 사람이 줄어들거나. 게다가 개발은 사람이 하는 것이다보니 같은 문제, 같은 버그가 생길 확률이 높습니다. 아니면 모르는 것도 비슷하죠.

 리액트는 메타(페이스북)라는 거대 스폰서가 있어 꾸준히 버전 업데이트가 진행중입니다. 또 엄청난 크기의 커뮤니티가 개발에 있어 막히고 더디게하는 문제를 금방 해결해줄 수 있습니다. 

 언젠가 다른 라이브러리가 대세가 될 수도 있겠지만, 앞으로의 몇 년간은 REACT의 시대라고 봐도 과언이 아닐듯 합니다. 이런 이유로 REACT 개발을 시작해보려 합니다.

저작자표시

'Front-End > REACT' 카테고리의 다른 글

#03. [REACT] state는 왜 쓰나요? (feat. Hooks이 뭘까?)  (0) 2022.12.07
#02. [REACT] JSX와 Data Binding 5분컷  (2) 2022.12.01
#01. [REACT] 설치와 개발환경  (0) 2022.11.30

 

객체 만들기 (key)

//옛날 문법
let name = "hwonda";
let age = 29;
let person ={name:name, age:age}
//ES6 문법
let name = "hwonda";
let age = 29;
let person ={name, age}

: 자동으로 변수 이름 = key 값으로 변경해줍니다.

 

객체 분해하기

//옛날 문법
let person = {
    name : "hwonda",
    age : 29
    }
let name = person.name;
let age = person.age;
//ES6 문법
let person = {
    name : "hwonda",
    age : 29
}
let {name, age} = person;

: 객체 만들기와 동일하게 변수값 = key값 일때만 가능합니다.

 

${...}

//옛날 문법
let name = "hwonda";
let age = 29;
console.log("이름은"+name+"입니다. 나이는"+age"입니다");
//ES6 문법
let name = "hwonda";
let age = 29;
console.log(`이름은 ${name}입니다. 나이는 ${age}입니다`);

: ${} 을 사용할때는 작은 따옴표(')가 아닌, 백틱(`)을 사용합니다.

 

배열

//옛날 문법
let array = [1, 2, 3];
let a = array[0];
let b = array[1];
let c = array[2];
console.log(a,b,c);

// 결과 
// 1 2 3
//ES6 문법
let array = [1, 2, 3];
let [a, b, c] = array
let [first,...rest] = array

console.log(a, b, c)
console.log(first)
console.log(rest)

// 결과
// 1 2 3
// 1
// [2, 3]

: rest가 아니더라도 주고싶은 변수 이름은 쓰면 됩니다. (others, userInfo 등등..)

 

...의 추가 기능

let person = {
    name : "hwonda",
    age : 29,
    sex : male
}

let {name,...userInfo} = person
console.log(name, userInfo)

// 결과
// hwonda { age : 29, sex : male}
// 객체 분해 및 생성 가능

 

...의 추가 기능 2

// 옛날 문법
let a = [1,2];
let b = [3,4];
let c = [5,6];

let result = a.concat(b,c)
console.log(result)

// 결과
// [1, 2, 3, 4, 5, 6]
// ES6 문법
let a = [1,2];
let b = [3,4];
let c = [5,6];

let result = [...a,...b,...c]
console.log(result)

// 결과
// [1, 2, 3, 4, 5, 6]

 

함수

// 옛날 문법
function boo(){
    console.log("hello")
}
// ES6 문법
let boo = ()=>{
    console.log("hello")
}

: 함수 선언 방식을 바꿔버렸습니다. 왜 굳이 만들었을까요?

function boo(){
    return "haha"
}

이 함수는 아래와 같이 편하게 쓸 수 있습니다. (return 생략 가능, 문장 1개의 함수를 1줄로 표현 가능)

let boo = ()=>"haha"

그러나 화살표 함수(=>)는 100% 옛날 문법을 대체할 순 없습니다. (this)

 

this 란?

let age = 19
let person = {
    name : "hwonda",
    age : 29
    getInfo:function(){
        console.log(age)
    }
}

person.getInfo()

// 결과
// 19

: 분명 getInfo의 함수를 호출했으나, 결과는 놀랍게도 전역변수를 가져옵니다.

이 때, console.log(this.age)를 하는 경우, 지역변수 값인 29를 가지고 올 수 있게 됩니다.

this는 곧 나를 불러준 객체라고 볼 수 있습니다.

let age = 19
let person = {
    name : "hwonda",
    age : 29
    getInfo:function(){
        console.log(this.age)
    }
}

person.getInfo()

// 결과
// 29

: 그러나 getInfo()=>{console.log(this.age)}로 함수를 선언할 경우, undefined 오류가 발생한다. (결국 this값을 찾다가찾다가 Window에 있는 person값을 가져와 undefinded 되는 것.)

저작자표시

'Front-End > JavaScript' 카테고리의 다른 글

#05. [JS] Object Destructuring - 객체를 분해(추출)해보자.  (0) 2023.02.21
#04. [JS] Destructuring : 파괴하다? 추출하다!  (2) 2022.12.03
#02. [JS] ES6 모듈 사용하기 (import, export)  (0) 2022.11.20
#01. [JS] 변수(Variable)와 호이스팅(Hoisting)  (0) 2022.11.19
#00. JavaScript는 인터프리터 언어?  (0) 2022.11.16

공부한 내용을 스스로 정리하는 글입니다. 불친절할 수 있습니다!

 

빈 태그 (Empty Tag)

 빈 태그 : 종료 태그만 있고, 시작 태그는 없는 태그

  • 내용을 싣지 못함
  • 이미지나 경로 등 특정값을 나타낼 때 사용

HTML1/2/3/4/5 : <tag> 

XHTML / HTML5 : <tag/>

 

일반태그

<tag 속성=‘값’> 내용 </tag>


빈 태그 ex1. <img/>

<img src=“./dog.jpg” alt=“강아지 사진” />


빈 태그 ex2. <input/>

<input type=“text”/>

 

 

글과 상자

 

글과 상자는 요소가 화면에 출력되는 특성을 이야기하며, 크게 2가지로 나눕니다.

 

1) 인라인(Inline)요소 : 글자를 만들기 위한 요소들

2) 블록(Block)요소 : 상자(레이아웃)을 만들기 위한 요소들

 

 1) Inline의 예시

<span>hello</span> 

<span>world</span>

 

# 결과

hello world

: 띄어쓰기를 한다

: 포함한 콘텐츠 크기만큼 자동으로 줄어듬!!(width, height)

: 글자는 가로세로 사이즈(px)를 지정할 수 없다!

: 위/아래 여백은 사용 불가! (좌/우 여백은 가능)

: 글자 내에 상자(div등)를 넣을 수 없다

 

2) Block의 예시

<div>hello</div>

<div>world</div>

# 결과

hello
world

: 줄을 바꾼다

: 부모 요소의 크기만큼 width자동으로 늘어남!!(height는 줄어듬)

: 가로세로 사이즈(px)를 지정할 수 있음.

: 위/아래/좌/우 여백 가능

: 상자 내 상자, 상자 내 인라인 넣을 수 있음. (제약 적음)

 

 

HTML Tags

 

태그 내용 비고
<div>  특별한 의미가 없는, 구분을 위한 요소(division)  여러 주제를 묶는다
<h>  제목을 의미하는 요소(heading)  
<p>  문장을 의미하는 요소(paragraph)  
<img>  이미지를 삽입하는 요소  
<ul>  순서가 필요없는 목록의 집합  
<ol>  순서가 필요한 목록의 집합  
<li>  목록 내 각 항목  
<a>  닻, 하이퍼링크를 지정하는 요소  
<span>  특별한 의미가 없이 구분을 위한 요소  해당 요소를 CSS로 적용하기 편하다
<br/>  줄바꿈  
<input>  사용자가 데이터를 입력하는 요소  data type에 따라 text/value/placeholder/checkbox/radio/name으로 묶음
disabled/checked/name
<label>  라벨 가능 요소(input)의 제목  
<table>  표 요소(행과 열의 집합)  <tr>: 행, <td>: 열

 

 

전역속성

 

html에서 자주 사용하는 태그의 전역속성입니다.

# 사용법.

<tag [전역속성]> 내용 </tag>

 

전역속성 내용
title  어떤 행동을 할 것인지 도와줌
style  css를 적용함
class  요소를 지칭하는 중복 가능한 이름
id  요소를 지칭하되 고유한 이름
data  요소에 데이터를 지정 (잠시 저장해서 JS, CSS에서 사용 가능)
저작자표시

'Front-End > HTML, CSS' 카테고리의 다른 글

코드를 예쁘게 만들기. (feat. Prettier, Beautify)  (0) 2022.11.04
HTML과 CSS, JavaScript 연결(선언)하기 (+비동기방식 async/defer)  (0) 2022.10.28

 

 프로젝트의 규모가 커지다보니 한 파일에 수 천만의 코드라인이 생기기도 했습니다. 이에 JS 코드를 수많은 파일/폴더에 저장하고 효율적으로 불러올 수 있는 시스템이 필요해졌고, 2015년(ES6)에 모듈 시스템이 등장하게 되었습니다.

 

 

모듈(module)


모듈 : 프로그램 구성 요소. 관련된 data, function 등을 하나로 묶은 단위

 

모듈형 주택(사진 - 영국 Yorkon)

 모듈형 주택, 모듈형 핸드폰 등 일상생활에서 '모듈'이라는 단어는 많이 들어보셨을 겁니다. 미리 지어진 방, 거실, 화장실을 이어 만든 주택이나 미리 만들어놓은 배터리, OS칩, 카메라 등을 붙여 만든 핸드폰. 짐작하셨듯이 모듈의 특성은 다음과 같습니다.

 

  1. 어떠한(웬만하면 하나의) 기능이나 정보를 가지고 있다.
  2. 그 자체로 완성된 기능이지만, 완성품의 부속물이다.
  3. 수정이 쉽다.
  4. 재활용(프로그래밍에서는 감가상각 없는 재사용)이 가능하다.

특히 JavaScript에서의 모듈은 다음과 같은 특성을 가지고 있습니다.

 

  1. import, export 구문으로 사용할 수 있습니다.
  2. 모듈 간의 같은 변수명을 써도 충돌하지 않는다. (변수명이 모듈 스코프에 한정된다.)

다음은 사진 한 장으로 import와 export를 사용한 JS modules 를 알아보겠습니다. 다음은 모듈을 사용하는 대표적인 예로, 모듈의 다른 사용법은 추후 다시 다뤄보도록 하겠습니다.

 

 

import / export

export에는 두 가지 방법이 있습니다.

1. default

 

 

 sum.js는 num1과 num2를 받아 그 합을 return하는 함수모듈입니다. 

default는 모듈 개체가 단 1개일 때 사용합니다. 예제와 같이 하나의 함수, 하나의 리턴값이 존재합니다.

이 때는 심지어 sum이라는 함수 이름도 필요 없습니다.

export default function (num1, num2){	//심지어 sum이 없어도 동일한 결과가 나온다.
    return num1 + num2;
}

import 할 때도 함수 이름을 가져올 필요가 없습니다. 제가 원하는 대로(plus처럼) 이름을 가져와도 작동합니다.

 

결과는 3으로 잘 나왔습니다.

 

 

2. named

 

 

모듈 개체가 2개 이상일 때는 default를 사용할 수 없습니다. default와 달리 변수명, 함수이름도 그대로 가져와야 합니다. (게다가 가져올 때 중괄호{}가 필요하죠.) 만약 이름을 가져오고 싶지 않고 새로 사용하고 싶다면 'as'를 사용하면 됩니다.

 

import { intro, sum as plus } from "./intro.js"		// as를 사용하면 새로 변수명을 쓸 수 있다.

console.log(intro)
console.log(plus(2,3))

 

결과

 

 

저작자표시

'Front-End > JavaScript' 카테고리의 다른 글

#05. [JS] Object Destructuring - 객체를 분해(추출)해보자.  (0) 2023.02.21
#04. [JS] Destructuring : 파괴하다? 추출하다!  (2) 2022.12.03
#03. [JS] ES6 최신문법  (0) 2022.11.26
#01. [JS] 변수(Variable)와 호이스팅(Hoisting)  (0) 2022.11.19
#00. JavaScript는 인터프리터 언어?  (0) 2022.11.16

 JavaScript의 첫 번째 시간으로는 가장 중요한 '변수(Variable)'과 '호이스팅(Hoisting)'의 개념에 대해 알아보겠습니다.

 

변수(Variable)

변수 : 하나의 값(data)을 저장할 수 있는 저장공간(memory).

 

 프로그래밍에서 '변수'는 데이터를 저장할 수 있는 메모리 공간을 의미하고, 변수의 값은 변경될 수 있습니다.

자바스크립트에서 변수의 종류는 크게 두 가지로 나뉘는데요,

 

  • 원시형 변수(Primitive Variable) : 실제값(value)을 저장하는 변수, 데이터 자체를 변수에 저장.
  • 참조형 변수(Reference Variable) : 객체의 주소(reference)를 저장하는 변수, 데이터는 다른 곳에 저장 후 변수에는 주소만 할당.

 

변수 타입 종류 예시 or 설명
원시형 number 1, 2, 3
string hwonda
boolean true or false
symbol 변경 불가한 값(프로퍼티)
undefined 정의되지 않음 or 의도치 않게 비어있음
참조형 null 의도적으로 비어있음
array []
object {}
function function <함수명>(매개변수){}

 

typeof로 데이터의 타입을 확인할 수 있습니다. 아래 예시를 보겠습니다.

 

 

 하지만 typeof에는 한계가 있습니다. 노란색 박스와 같이 null, {}, [] 을 모두 객체(object)로 보기 때문이죠.

이를 위해 function getType을 만들어줍니다. return 값에 대해서는 아직 정확하게 알 필요가 없습니다. 함수를 통해 Null, {}, [] 각각 어떤 타입인지 반환할 수 있습니다.

 

변수 선언

 자바스크립트 변수를 선언하는 방법은 총 3가지가 있습니다. ES6이 나오기 전, JS의 변수 선언방식은 var만 존재했습니다.

하지만 var는 변수명으로 이미 선언된 이름과 같은 이름을 사용하는 경우 에러가 나오지 않는 치명적인 문제가 있었습니다.

그래서 ES6 이후, var 방식을 보완한 const와 let 방식이 나왔죠.

 

const와 let의 차이로 '재할당'이 가능한가?의 문제가 있습니다.

const는 재할당이 가능하지 않으므로, 의도치 않은 재할당을 방지할 수 있겠습니다.

반면 let은 재할당이 필요한 경우 사용하는 것이 좋겠습니다. 

 

특징 var const let
선언 전 사용시 ERROR X O O
이미 선언된 이름과 같은 이름 사용시 ERROR X O O
초기값 줘야 함 X O X
다시 할당할 수 있음(재할당) O X O

 다음은 위 내용을 참고하여 실수할 수 있는 부분에 대해 직접 알아보겠습니다. (chrome 의 console 창 활용)

실수한 경우의 ERROR message의 타입을 기억해 놓는 것은, 추후 코딩할 때 내가 어디서 어떻게 틀렸는 지 알 수 있는 경로가 되므로 에러 메세지를 잘 기억해 놓는 것이 좋겠습니다.

 

 

1. var는 선언 전 사용시, undefined 에러가 뜹니다.

2. const는 초기값을 주지 않으면 missing initializer in const declaration 에러가 뜹니다.

3. let은 이미 변수명 'a'에 대해 var로 선언되었기 때문에, 이미 선언된 변수명을 다시 사용하면 에러가 뜹니다.

 

 

한 가지 덧붙이자면, const와 let은 var와 다르게 '블록' 단위로 할당되기 때문에, 하나의 블록(if문, for문 등등)에서 같은 변수명을 사용하면 에러가 뜹니다. var는 재밌게도 에러가 뜨지 않습니다.

 

 

변수 호이스팅 (Hoisting)

 

호이스팅 : 함수가 실행되기 전에, 안에 있는 변수들을 범위의 최상단으로 끌어올리는 것.

 

ES6는 let, const를 포함한 모든 선언(function, class, 특히 var도)을 호이스팅 합니다. 모든 선언들을 해당 스코프의 가장 윗쪽으로 올려버리고 읽어내는 것이죠. (진짜 코드를 올려버리는 것이 아니라, Parser에서 마치 올린 것처럼 읽어내는 것)

 

name(myName);

function name(myName){
    console.log("my name is " + myName);
}

var myName = "hwonda";
// 결과

my name is hwonda

 

이렇게 함수 선언 전에 함수를 호출하고, 변수 선언 전에 변수를 호출해도 문제 없이 원하는 결과가 나옵니다. 이렇게 기존 var는 어디서 선언하든 에러가 뜨지 않았지만, let은 다른 언어와 같이 변수 선언을 먼저 해야 변수 호출이 가능합니다.


1. let : 선언과 초기화가 분리되어 진행됨. 초기화 단계 없이 선언하면 해당 변수 참조 에러가 뜸. ( Uncaught ReferenceError: Name is not defined)
2. const : 선언과 초기화가 동시에 진행됨. 동시에 선언과 초기화가 동시에 진행되어야 하지만, 따로 진행하는 경우 같이 진행하라는 에러가 뜸. (Cannot access 'name' before initialization)

저작자표시

'Front-End > JavaScript' 카테고리의 다른 글

#05. [JS] Object Destructuring - 객체를 분해(추출)해보자.  (0) 2023.02.21
#04. [JS] Destructuring : 파괴하다? 추출하다!  (2) 2022.12.03
#03. [JS] ES6 최신문법  (0) 2022.11.26
#02. [JS] ES6 모듈 사용하기 (import, export)  (0) 2022.11.20
#00. JavaScript는 인터프리터 언어?  (0) 2022.11.16

 

결론 : JavaScript는 (해석 엔진에 따라 컴파일하기도 하는) 인터프리터 언어로 볼 수 있다.

 

Q. JavaScript는 인터프리터 언어라는데 맞나요?

A. 결론부터 말씀드리자면 인터프리터 언어로 분류되지만 해석 엔진에서 컴파일을 하기도 하는 신기한 놈입니다. 인터프리터 언어로 분류되는 이유는 console에서 스크립트를 작성해 실행하는 데에 컴파일이 필요하지 않기 때문입니다. 하지만, V8과 같이 대표적인 JS 엔진에서 컴파일이 필요한 경우, 컴파일을 진행합니다. 

 

1995년, 자바스크립트는 - 단지 HTML page를 동적으로 만들고 싶어서 - 만들어진 아주 라이트한 인터프리터 언어였습니다. 스크립트 언어인 JavaScript는 해석/동작을 위한 엔진이 요구되었고, 구글이 구글맵스(Google Maps)를 개발할 당시 JavaScript 엔진에 한계를 느꼈습니다. 웹 페이지 로드에 5초 이상 넘어가면 피로감이 들기도 했고, 개발되면 될수록 유저간의 많은 인터렉션이 필요하게 되었기 때문입니다.

 

2009년, 이에 답답함을 느낀 구글은 현재까지도 사용되는 V8 엔진(chrome, Node)을 출시했습니다.

 

 

컴파일러(Complier) vs 인터프리터(Interpreter)

컴파일러와 인터프리터 언어의 가장 큰 차이점은 컴파일(Compile)을 하느냐 안하느냐 입니다. 그럼 먼저 컴파일은 무엇일까요?

 

컴파일러(Complier)

 


컴파일(Compile) : 고급언어를 저급언어로 해석하는 것, 곧 0과 1밖에 모르는 컴퓨터에게 인간의 언어를 이해시키는 것.

 

컴파일은 쉽게 말하면 위와 같지만, 인간이 알아볼 수 있도록 프로그래밍된 소스 코드를 0, 1로 이루어진 오브젝트 코드로 변환하는 과정입니다. 컴파일의 과정은 다음과 같습니다.

 

 이와 같이, 컴파일러는 사람이 알아볼 수 있는 소스코드를 위와 같이 4단계에 걸쳐 컴퓨터가 알아보기 편한 실행코드로 변환하는 것을 말합니다. 컴파일하는 시간은 소요되지만, 런타임 환경에서는 빠르게 동작합니다. 예를 들어, 반복문(for문, while문 등) 컴파일을 한 번 하면, 입력값이 몇 개든 빠르게 실행시킵니다. 또한 컴파일을 실행하며 Error를 검출하기에 실제 동작에서의 에러가 적은 편입니다.

 컴파일러 언어의 예로는 C, C++, C#, JAVA 등이 있습니다.

 

 

인터프리터(Interpreter)

 반면, 인터프리터는 고급언어를 바로 그리고 직접 실행합니다. 소스코드를 한 줄씩 즉각적으로 실행하기 때문에 컴파일러와 달리 별도의 컴파일 과정이 없습니다. 어떻게 보면 중간과정이 없기에 참으로 편리하다고 생각이 들 수 있지만, 한줄씩 읽어 실행한다는 점에서 컴파일러보다 실제로는 비효율적입니다.

 

 반복문(for, while 등)에서 컴파일러는 컴파일 후에 굉장한 속도로 계산을 진행합니다. 하지만 인터프리터는 한줄한줄 읽어 실행하기 때문에 반복 횟수(n)만큼 반복문을 구간반복합니다. 그래서 실제로 비효율적이라고 할 수 있지요.또한 컴파일을 하지 않기 때문에 분석을 진행하다가 오류가 발생하면 분석을 멈추고 오류를 알려줍니다.

 인터프리터 언어의 예로는 JS, Python, R 등이 있습니다.

 

 

그럼 다시 본론으로 돌아가서, 자바스크립트는 인터프리터 언어인가?

 

JavaScript의 엔진

 JS의 대표적인 엔진은 다음과 같습니다.

  • V8 엔진 : 구글 개발, 크롬/노드에서 사용. Ignition(인터프리터) + TurboFan(컴파일러)
  • Rhino 엔진 : 모질라 개발. 인터프리터, 컴파일러(부분적으로 JAVA Byte Code로 컴파일)
  • Monkey 엔진 : 최초의 JS 엔진, Firefox에서 사용. 컴파일러(JIT: Just In Time) 사용

 위와 같이, 대부분 JS의 엔진에는 컴파일러가 포함되기도, 인터프리터가 아예 없기도 합니다.

 

 

Chrome V8 엔진 (Last Updated - 2017)

 

V8 엔진은 출시 이후 여러 번의 업데이트를 겪었습니다. 그 과정에서 생성되거나 사라진 컴파일러/인터프리터가 있었습니다. 우리는 2017년 최신 업데이트 된 V8에 대해 간단하게 알아보겠습니다.

 

 

1. 엔진이 실행할 JS 파일을 받습니다.

2. Parser에서 파싱(소스 코드 분석)을 진행합니다.

3. AST(Abstract Syntac Tree : 추상 구문 트리)를 구축하고 결과물을 Ignition(이그니션)에게 보내줍니다.

4-1. 인터프리터인 Ignition이 코드를 읽으며 Bytecode로 변환합니다. (실제 작동)

4-2. 컴파일러인 TurboFan이 자주 사용되는 코드 구문(반복문 등)을 최적화된 코드로 다시 컴파일됩니다.

 

 가장 대표적인 V8엔진을 포함해 최신 자바스크립트 엔진은 모두 컴파일러와 인터프리터를 포함하고 있다고 볼 수 있습니다. 컴파일러와 인터프리터의 장점을 모두 취하기 위해서죠. 아주 똑똑한 방법으로 볼 수 있습니다.

 

 

 

결론 : JavaScript는 (해석 엔진에 따라 컴파일하기도 하는) 인터프리터 언어로 볼 수 있다.

 

 

 

 

저작자표시

'Front-End > JavaScript' 카테고리의 다른 글

#05. [JS] Object Destructuring - 객체를 분해(추출)해보자.  (0) 2023.02.21
#04. [JS] Destructuring : 파괴하다? 추출하다!  (2) 2022.12.03
#03. [JS] ES6 최신문법  (0) 2022.11.26
#02. [JS] ES6 모듈 사용하기 (import, export)  (0) 2022.11.20
#01. [JS] 변수(Variable)와 호이스팅(Hoisting)  (0) 2022.11.19

로컬 서버란? 내 컴퓨터에 프로젝트의 서버환경을 구축하는 것입니다.

 

로컬에서 웹페이지 개발 시, 테스트의 목적으로 아주 알맞으며 Front-End 현업에서 많이 사용됩니다.

 

node.js를 사용해 간단하게 로컬 서버를 구현할 수 있습니다.

 

먼저 node.js와 관련된 글을 읽고, 설치 후 이 글을 읽는 것을 추천드립니다.

 

해당 글 :  2022.11.01 - [etc/node.js] - [Node.js] 개념 및 설치방법(Mac OS)

 

[Node.js] 개념 및 설치방법(Mac OS)

Chrome V8 JavaScript 엔진으로 빌드된 [JavaScript 런타임] * 런타임 : 특정언어(JavaScript 등)가 동작할 수 있는 환경입니다. * 자바스크립트는 독립적 언어가 아닌 ‘스크립트 언어’입니다. 스크립트 언

hwon-da.tistory.com

 

NVM을 사용하여 로컬 서버 만들기

1. 먼저 VScode의 터미널을 열어 npm init -y를 입력합니다. 그러면 해당 디렉토리에 package.json 파일이 생성됩니다.

 

$ npm init -y

 

2. 그 뒤 다음 명령어를 실행시키면 package-lock.json 파일이 생성됩니다.

 

$ npm i parcel -bundler -D

(이 때 i = install 의 약어, -D = 개발의존성 패키지 설치의 약어입니다.)

 

3. package.json 파일의 script 부분을 다음과 같이 수정해줍니다. 각 뜻은 각주에 넣어놓았습니다.

(이 때 dist 폴더는 sㄷrc의 typescript 코드가 nodejs에서 작동하기 위해 javascript 코드로 컴파일된 결과물입니다.)

 

 

4. 해당 디렉토리에 index.html과 main.js를 생성하고, 연결해줍니다. 연결이 잘 됐는지 확인을 위해 console.log 구문도 넣어봅니다.

 

 

5. index.html에서 터미널을 열고 다음 명령을 실행시킵니다. 그러면 http://localhost:1234 (로컬서버)가 생성되었습니다.

 

$ npm run dev

 

6. 직접 주소를 쳐서, 혹은 터미널의 링크에 마우스를 갖다대어 타고 들어갈 수 있습니다.

console.log의 내용도 잘 들어왔습니다.

 

 

 

VScode 라이브 서버 사용하기

 

1. index.html에서 마우스 우클릭을 하면, Open with Live Server 메뉴가 보입니다.

  Open with Live Server : 라이브 서버가 생성됩니다.

  Stop Live Server : 라이브 서버가 중단됩니다.

 

2. 또는 VScode 하단의 Go Live 버튼을 누르면 라이브 서버가 생성됩니다. 다시 누르면 중단됩니다.

 

VScode 라이브 서버의 포트번호는 5500으로 픽스됩니다.

 

라이브 서버는 간편하지만 현업에서 사용하지 않고, 주로 혼자 개발용으로 쓰는 경우가 많습니다.

 

 

 

 

 

저작자표시

'etc > node.js' 카테고리의 다른 글

npm은 또 뭐야? (mac에서 사용하기)  (2) 2022.11.09
[Node.js] 개념 및 설치방법(Mac OS)  (0) 2022.11.01

 git을 사용하는 이유는 버젼관리, 협업, 백업 등에 용이하기 때문입니다.

 

 한편, 공개 레파지토리에 커밋한 파일은 팀원뿐 아니라 불특정 다수에게 공개되기 마련입니다.

버전관리에 필요없는 파일이나 보안상 문제가 되는 파일, 특히 로그파일 또는 빌드 시스템이 자동으로 만들어낸 파일은 git에서 관리할 필요가 없어집니다.

 

 필요한 파일들만 git add 하면 되지 않느냐? -> 프로젝트를 진행하다보면 파일의 양이 워낙 방대해져 관리하기 힘들어집니다.

이러한 문제를 해결하기 위해 .gitignore 을 활용할 수 있습니다.

.gitignore 파일을 만들고 그 안에 무시할 파일의 패턴을 적어 파일을 untracking할 수 있습니다.

 

 

 

주의할 점 : git add 전에 .gitignore을 포함할 것.

위 그림과 같이 일단 Staged 된 파일은 무시할 수 없으므로, 해당 파일을 삭제하고 다시 올려야 한다.

 

.gitignore 적용하기

특징

  • 프로젝트의 최상위에 위치해야 적용됩니다.
  • 표준 Glob 패턴을 사용합니다. (정규표현식과 모양은 비슷하지만 다른 패턴, 추후 정리 후 링크)
  • 파일 내 # (우물정)로 시작하는 코드라인은 무시합니다.
  • 파일 내 / (슬래쉬)로 시작하면 하위 디렉터리에 적용되지 않습니다.
  • 파앨 내 / (슬래쉬)로 끝나면 해당 디렉터리를 적용합니다.
  • 파일 내 ! (느낌표)로 시작하는 패턴의 파일은 무시하지 않습니다.

 

적용 (먼저 github에 remote 된 레파지토리가 있는 환경)

NPM TEST 폴더 현재 상황

 

1. .gitignore 파일을 해당 디렉토리 내에 생성하고, 무시할 파일 목록을 작성합니다.

(현재 node_modules 폴더와 DS_STORE 파일을 무시할 예정입니다.)

 

 

2. $ git add . 로 파일들을 추가합니다.

 

 

3. $ git commit, $ git push origin master를 통해 레파지토리에 파일을 스테이징 합니다.

 

 

4. 결과물을 즐긴다. (node_modules와 DS_STORE는 트래킹하지 않는 것을 볼 수 있습니다.)

저작자표시

'etc > git' 카테고리의 다른 글

[Git] git clone과 git pull의 차이 // git fetch는 뭘까?  (0) 2023.01.27
[Git] git add / git commit / git push  (0) 2023.01.12
[Git] 원격저장소에서 로컬저장소로 clone(복제)/pull(가져오기)/remote(연결)  (0) 2023.01.04
[Git] 새 repository 만들기, 삭제하기  (0) 2022.12.29

Node Package Manager
: 프로젝트를 효율적으로 관리하고, 손쉽게 기능을 고도화한다.

 

nvm을 깔면서 npm이라는 놈이 같이 깔리는 것을 보셨을까요?

npm은 또 무슨 놈일까요? 정말 간단하게 알아보겠습니다.

 

npm은 위의 설명과 같이 Node Package Manager로, 패키지 관리인이라고 볼 수 있습니다.

전 세계의 수많은 개발자들이 만든 다양한 기능들(Packages, Modules)을 관리하는 거죠.

현재 수 백만개의 패키지들이 npm 생태계를 이루고 있습니다.

이런 유용한 패키지들을 단순한 명령어

$ npm install [패키지명]

을 통해 내 pc에서 사용할 수 있습니다. (html에서 쓰던 <link>, <script> 안녕~)

 

 

 

사용법

1. 먼저 terminal을 열어줍니다.

 

2. 아래 명령어를 입력해줍니다.

$ npm init -y

 

3. 그러면 빨간 박스와 같은 내용이 뜨면서, 해당 폴더에 package.json 파일이 생성됩니다.

4. 이 package.json파일은 내 프로젝트에 관한 내용으로, 내가 직접 프로젝트 내용에 대해 관리할 수 있습니다.

* json 파일 : 경량화된 단순 DATA Format. {"String key" : "String Value"} 의 형태를 가진다.

 

5. 내가 필요한 패키지를 다음 명령어로 가져온다.

$ npm install [패키지명] -D

패키지를 가져오면, node_modules가 생성되고, package.json에 내가 필요해서 가져온 "parcel-bundler"가 생성된다.

이제 나는 parcel-bundler가 뭔 패키지인줄은 몰라도 쨌든 사용할 수 있다!

node_modules : parcel-bundler가 포함된 모듈 전체. ("너가 뭘 좋아할지 몰라서 다 가져왔어"의 느낌)
나중에 지워지더라도 $ npm install 로 다시 불러올 수 있다.
-D : 개발용 의존성 패키지 설치 -> 내가 개발용으로만 쓰고, 나중에 브라우저에는 필요없는 경우 사용
-d : 일반 의존성 패키지 설치 -> 개발용으로도, 나중에 브라우저에도 필요한 패키지인 경우 사용
package-lock.json : 내가 부른 패키지를 잘 사용할 수 있도록 자동으로 관리해주는 파일. package.json과 함께 지워지지 않도록 유의해야 함!
저작자표시

'etc > node.js' 카테고리의 다른 글

로컬 서버, 라이브 서버 사용하기 (Local Server, Live Server)  (0) 2022.11.13
[Node.js] 개념 및 설치방법(Mac OS)  (0) 2022.11.01

 

 

코드를 모든 사람들이 보기 편하게 짜는 것은 프로그래머의 능력입니다.

컨벤션을 익혀서 코드를 짜는 시점에 예쁘게 짜는 것도 좋지만, 적절한 도구를 사용해 예쁘게 만드는 방법도 좋습니다.

 

Mac에서 코드를 짜는 데 도움이 될만한 단축키

 

Extension(확장 프로그램) Prettier

보통 Beautify라는 확장프로그램이 많이 사용됐지만 더 이상 업데이트가 되지 않아 권장되지 않습니다.

다음으로 많이 쓰이는 Prettier 확장프로그램인데요. 사용법은 다음과 같습니다.

 

확장프로그램 -> Prettier 검색 -> Install

-> cmd+shift+P

-> Format Document (전체 문서에 적용)  /  Format Selection (선택영역에만 적용)

 

 

저작자표시

'Front-End > HTML, CSS' 카테고리의 다른 글

HTML의 tag  (0) 2022.11.21
HTML과 CSS, JavaScript 연결(선언)하기 (+비동기방식 async/defer)  (0) 2022.10.28

+ Recent posts

티스토리툴바