이후 웹 개발을 위해선 MS 사에서 만든 Typesctipt를 배워야 한다는 말에 '요즘 자바스크립트가 개발자들이 좋아하는 언어 중 상위권이던데 여기도 인기 편승을 위해 이름을 비슷하게 만들었나'라고 생각이 들었는데 다행히 이 녀석(?)은 자바스크립트에서 변형된 언어가 맞았다. 그러면 자바스크립트를 변형에서 만든(?) 게 타입 스크립트라면 그냥 타입 스크립트만 쓰면 되지, 왜 두 개다 쓰는 걸까? 결론만 말하면 웹브라우저가 읽을 수 있는 건 3가지가 전부이다. html, CSS 그리고 Javascript 그렇기에 타입 스크립트가 넘사벽으로 좋은 언어라고 할지라도 (실제론 비슷하지만) 웹브라우저가 읽을 수 없기 때문에 개발할 땐 타입 스크립트를 써도 실제로 웹에서 구현될 땐 자바스크립트로 컴파일된다.

쉽게말하면 타입스크립트는 자바스크립트를 변형해서 만든

About 'Javascript'

About 'Typescript'

공식문서를 찾아봐도, 정리되어있는 글을 보아도 타입 스크립트는 이름 그대로 타입을 지정해야 작성할 수 있는데, 장점은 코드 작성 시에 타입을 체크해 오류를 확인할 수 있고, 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 점이다. 런타임 언어인 자바스크립트에 비해 안전성이 높다는 큰 장점이 있지만 코드 작성 시에 매번 타입을 결정해야 하기 때문에, 코드량이 증가하고 컴파일 시간이 오래 걸린다는 단점이 있다.

또한, 타입 스크립트는 자바스크립의 슈퍼셋(Superset- 특정한 언어의 모든기능을 포함하면서, 다른기능까지 포함하도록 향상 또는 확장된것) 즉 자바스크립트 기본 문법에 타입 스크립트 문법을 추가한 언어이므로 자바스크립트의 단점을 보완하여 나온 언어이다. 그래서 유효한 자바스크립트로 작성한 코드의 확장자를 js -> ts로 변경하면 컴파일해 변환할 수 있다.

다만, js에서 ts로 바꿀 순 있지만 jsx로 작성된 문서는 ts로 바꿀 수 없어서 tsx로 저장해야 한다. (자바스크립트는 통합이 되어서 js 나 jsx나 상관없이 js로 작성이 가능하다 )

또한, ES6(ECMAScript6)에서 새롭게 사용된 문법을 포함하고 있어 클래스, 인터페이스,상속,모듈과 같은 객체지향 프로그래밍 패턴을 제공한다고 한다.

ES6(ECMAScript6)가 뭔지 모르는 사람을 위하여
도입부에 기재했듯 자바스크립트는 자바의 인기를 편승하기위해 이름만 '자바'를 붙인거지 실제로 자바와는 다른언어이다.

자바스크립트가 나온이후 MS사는 IE3.0에서 동작하는 'JSrcript'라는 언어를 만들었고, 이에 넷스케이프사(자바스크립트 만든회사-)는 자바스크립트를 표준화하기위해 표준화 기구에 표준화 요청을 하였지만 당시 sun사가 'JAVA'라는 단어를 상표등록했기때문에 JAVAscript라는 이름을 사용할수없었다.

이에 표준언어는 ECMAScript로 썻고 대외적으로 알리기위해 자바스크립트 라고 불렀다. 현재는 표준이나 구현모두 Javascript라고 부르지만 혹시라도 ES6라고 적힌다면 어 저게 뭐지 보다는 자바스크립트('E'cma'S')버전(6)이구나 라고 생각하면 된다.

const

기존에 자바스크립트에서 선언을 하기 위해서는 var를 사용하였는데 이 var는 한번 선언하더라도 이후에 재선언을 하면 재할당이 가능했다.

이게 뭔말이냐면 하단을 봐보자

var a = "당근";
var b = "케이크";
var a = "버섯";
var b = "향수";

console.log("당신은 "+ a +b+"를 좋아합니다.")

라고 할때 a와 b는 무엇으로 나올까? 눈치 챘겠지만, "당신은 버섯(a) 향수(b)를 좋아합니다." 라고 나온다. (끔찍해!)

자바스크립트는 위에서 아래로 실행되는 언어인데, 위에서 a를 당근이라고 선언해도 아래에서 a = "버섯"이라고 재할당을 했기 때문에 당신은 당근 향수가 아닌 버섯 향수를 좋아하게 된 것이다.
이게 왜 문제가 되냐면 지금 같은 예제는 오류가 발생되어도 찾기 쉽겠지만, 만약 몇백줄 몇천줄의 코드 속에서 변수를 재선언했고, 그로인해서 발생한 이슈를 해결하기위해 수많은 코드를 쳐다보며 어디서 실수했는지 찾아보려면 정말 끔찍할 것이다.

그것을 보완하고자 ES6에서는 const 와 *let *이 새로 추가되었는데, 각각의 특징을 보자면

cosnt 일단 사용되면 변수를 다시 할당할 수가 없다. 즉, 객체와 함께 사용할 때를 제외하고는 변경 불가능하다.

그래서 위에 var처럼

const a = "오렌지";

const a =  "사과"; 

재선언을 하려고 하면 이미 a에 변수선언이 되었다고 오류나온다. <SyntaxError: Identifier 'a' has already been declared>

그럼 어떤상황에서 쓰게되는가 하면 이벤트를 실행하는 단일 버튼이거나 Javascript에서 html요소를 지정할때 const 를 사용하는게 좋다. html은 웹을 구성하는 틀,뼈대 이다. 만약 뼈대가 막 변한다? 큰일날 일이다.

Let

그렇다면 let은 const와 무엇이 다를까 ? 심플하다 재선언이 가능하다는 점! 그것이 다르다.

let은 var처럼 한번 선언하더라도 하단에 재할당이 가능하다. 그렇기에** 변함없이 유일무이한것을 사용해야할땐 const를 사용하고 이후에 수정이 되어도 상관없는 것들은 let**을 사용하면 된다.

정리하면 Id,password 등등 변경되면 큰일날때 사용하는건 → *const * 성별(?!),주소,취미 등 변경될수 있는것엔 → *let *

을 사용 하면 된다 정리끝!

ECMAScript6(ECMAScript 2015)는 가장 최근에 나온 버전이며, ES5이후로 언어기능에 대한 첫 업데이트라고 한다. 새로운 언어기능이 포함되어있다고 하는데 어떤건지 알아보자

• let and const
• Arrow functions(화살표 함수)
• Template Literals (템플릿 리터럴)
• Default parameters(기본 매개변수)
• Array and object destruchiong (배열 및 객체 비구조화)
• Import and export (가져오기 및 내보내기)
• Promise (프로미스)
• Rest parameter and spread operator ( 나머지 매개 변수 및 확산 연산자)
• Classes(클래스)

추가된 걸 보니 몇몇개는 내가 글로 정리했던 것들도 있는데 그게 최신업데이트에 추가된거라니 이럴수가 이걸 알아보면서 알게되었다 어쩐지 옛날엔 var 를 사용했었는데 var 가 선언이후에도 재선언이 가능하여 문제가 될수있다는 이야기를 들은적이 있었는데, 언젠가부터 let 과 const *라는것도 있는데 *let은 재선언이 가능하지만 const 는 재선언이 불가능 하다는 걸 알고 있어라며 var와 잘 구분해서 쓰라고 조언해주시는 분이 있었다.
하하! let 과 cosnt 로 잘 쓸수 있는데 왜 var를 쓰라는거람 ? 재선언되서 나중에 이슈터지면 어쩔려구 ........ 지만 아직도 var를 사용하는곳이 있다고 하니 알아두는것도 나쁘지 않다.
(var사용은 점점 줄어드고 있다고 하지만 아직도 쓰는곳이 있다고 카더라..)

블로그 글 뭐쓸까 소재가 생각이 안났는데 각 부분마다 설명하는걸로 해야겠다.

참조및 출처 :

자바스크립트 ES6정리 - 영어 주의

프런트엔드가 통신과 API를 왜 알아야 하지? 백엔드의 영역 아닌가?라는 생각이 들지도 모른다. 나도 같은 생각이었고, 큰 관심 없던 분야였으니까

하지만 생각해 보라 아주 멋지고 세련된 웹사이트(혹은 앱)을 만들고 배포도 했는데 가입 정보를 넣어도 가입이 안 된다면? 등록된 게시글을 등록하거나 수정하려고 버튼을 아무리 눌러도 반응이 없다면? 정말 아찔하지 않겠는가

물론 저런 상황일 때 100% 통신 관련 문제 일 거라곤 장담 못 하지만 그중 이유가 될 수 있다면 알아두는 게 좋지 않을까?

월드 와이드 웹(www: World Wide Web * 통칭 웹)은 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공유를 뜻한다. 인터넷과 같은 의미로 사용되고 있지만 정확히는 웹은 인터넷 서비스 중 하나이다.

우리가 자주 사용하는 네이버나 구글이 대표적인 웹이며 웹주소 제일 앞에 적혀있는 http는 두 컴퓨터 간에 텍스트/하이퍼텍스트 데이터를 주고받는 통로이다. 파일을 주고받는 경로는 FTP라고 하고, 간단한 메일류는 SMTP이라 한다.

하이퍼텍스트:

일반 텍스트와 달리 문장이나 단어 등이 링크를 통해서 서로 연결된 네트워크처럼 구성된 문서를 말한다. 대표적인 하이퍼텍스트에는 html 문서가 있다. 하이퍼텍스트가 어떤건지 잘 보여주는 BSS 무려 1991년부터 현재까지 운영하는 장수 BBS이다.

근데 위의 이미지를 보니 우리가 알던 웹사이트와는 다르지 않은가?

API란

API(Application Programming Interface 애플리케이션 프로그래밍 인터페이스, 응용 프로그램 프로그래밍 인터페이스)는 컴퓨터나 컴퓨터 프로그램 사이의 연결이다. 일종의 소프트웨어 인터페이스이며 다른 종류의 소프트웨어에 서비스를 제공한다. 출처 - 위키백과 / 22년 01월 13일 기준

컴퓨터와 사람을 연결하는 유저인터페이스(UI)와는 반대로 API는 컴퓨터와 소프트웨어를 연결시킨다.

정의만 보았을 땐 소프트웨어와 컴퓨터를 연결한다는 게 무슨 말인가 싶은데, 쉽게 말하면 Front-end에서 데이터를 Back-end에게 보냈을 때 실행되는 Back-end 기능이다. 프로그램은 생각보다 훨씬 단순해서 title: 제목입니다라고 적어도 양식에 맞춰 작성해도 작성한 데이터를 저장하는 api,작성한 데이터를 서버로 보내는 api 등 기능이 담겨있는 api가 없으면 그냥 데이터에 불과하다.

front-end에서 작성한 데이터를 Back-end의 컴퓨터로 보내고(요청) back-end는 보내준 데이터를 받았다는 답을 주어야 한다(응답) 그런 다음 받은 데이터를 데이터베이스(DB)에 저장하고 (DB는 엑셀과 같은 표로 저장된다) 그런 다음 back-end는 필요한 정보를 꺼내서 front-end가 요청한 데이터를 다시 보내준다. 단순, 데이터를 저장하는 것뿐만 아니라 DB가 수정되는 모든 작업을 할 때마다 같은 방식으로 작동하며 모든 작업엔 요청과 응답으로 이루어진다.

그런데 API의 정의와 설명을 보니 보이는 부분을 담당하는 프런트엔드 개발자보다는 데이터를 담당하는 백엔드 개발자들이 알아야 할 것 같은데 왜 프런트엔드 개발자도 알고 있어야 한다는 걸까?

그 이유는 프런트엔드 개발자는 백엔드 개발자와 함께 일을 하기 때문이다. 장난으로 하는 말이 아니라 정말이다. 각자 맡은 업무는 다르지만 함께 일을 하는 직업 특성상 원활한 커뮤니케이션과 더 나은 업무를 위해 프런트엔드 개발자들이 알고 있으면 좋을 것 같아서 복습 겸 기록을 남긴다.

그럼 api가 뭔지도 알았고 왜 알고 있어야 하는지도 알겠는데 그래서 어떻게 쓰라는 거지? 라는 생각을 하는 나와 같은 생각을 하며 이 글을 읽는 사람들을 위해서 실무에서 많이 쓴다는 rest api와 GraphQl api를 이야기하려고 한다.

1.Rest API 의 특징

REST는 Reresentational State Transfer라는 용어의 약자로 로이 필딩(Roy Fielding)의 박사학위 논문에서 최초로 소개되었는데, HTTP 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다고 한다.

검사하기 - Uniform (유니폼 인터페이스) Uniform Interface는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일을 말한다.

REST는 무상태성의 성격을 가지고 있는데 작업을 위한 상태정보를 따로 저장하고 있지 않는다. 세션 정보 등 별도로 저장하고 관리하지 않기 때문에 API서버는 들어오는 요청만을 단순히 처리하면 되며, 서버의 확장성이 높은 장점이 있다. 또한 서버에서 불필요한 정보를 관리하지 않으면서 구현이 단순해지는 특징이 있다.

- Cashable (캐시 가능) REST의 가장 큰 특징 중 하나는 http라는 기존 웹 표준을 그대로 사용하기 때문에 웹에서 사용하는 기존 인프라를 그대로 활용이 가능하다. 따라서 http가 가진 캐싱 기능이 적용 가능하며, http 프로토콜 표준에서 사용하는 last-modified 태그나 E-Tag를 이용하면 캐싱 구현이 가능해진다.

- Self-descriptveness(자체 표현 구조)** REST의 또 다른 큰 특징 중 하나는** REST API 메시지만 보고도 이를 쉽게 이해할 수 있는 자체 표현 구조**로 되어있다는 것이다.

- Client-Server 구조 REST 서버는 API 제공, 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보) 등을 직접 관리하는 구조로 각각의 역할이 확실히 구분되기 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로 간 의존성이 줄어들게 된다.

- 계층형 구조 REST 서버는 다중 계층으로 구성될 수 있으며, 보안, 로드밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간 매체를 사용할 수 있게 한다.

2. GraphQL API의 특징

GraphQl은 페이스북에서 만든 쿼리 언어이며, gql의 문장을 클라이언트 시스템에서 작성하며 호출한다. 같은 쿼리언어인 Structed Query Language (이하 sql)과는 다르게 GraphQl은 웹클라이언트가 서버로부터 효율적으로 가져오는것을 목표로 하고있다.

예시

import { gql, useMutation, useQuery } from "@apollo/client"
import styled from "@emotion/styled"
const FETCH_BOARDS = gql`
  query fetchBoards {
    fetchBoards {
                  number
                  writer
                  title
                  createAt
    }
  }
` next.js안에서 gql을 통해 boards를 불러왔다.

[GraphQl 파이프라인 -출처 kakao Tech]

3. Rest API vs GraphQL API

참고 및 출처:2022.01기준

• rest api:https://meetup.toast.com/posts/92
• graphql :https://tech.kakao.com/2019/08/01/graphql-basic/

If/else 구문을 사용하여 조건문을 사용하면 되지않을까 생각이 들겠지만, 모든 에러를 예측할수 없을뿐더러 예상치 못한 오류가 생길수도 있고, 수십, 수백 혹은 수억개의 오류를 다 기재할수 없고 안정적이지도 않기때문에 적합하지 않다.

그렇기에 Try/Catch문을 이용해 코드가 중단되는것을 방지하고 조금더 안정적인 코드를 작성할수있다.

Try/Catch 구문은 함수내에서 오류는 개발자에 의해서 수정되었다고 판단하여, 에러를 발생시키지 않기때문에 오류가 발생하여도 무시할필요가 있을경우에만 사용이 된다.

try{
    // 실행될 코드 
} catch(error){
     //에러 발생시 실행할코드
} finally {
    // try 블럭또는 catch 블럭 실행 후 무조건 실행
}

로 구성이 되어있으며, 오류가 없을경우 try의 끝까지 실행된후 catch에 대한부분은 건너뛰며, 만약 에러가 있다면 try내의 코드는 중단되고 catch부분으로 넘어간뒤 error에 어떤오류가 있었는지에 대해 담긴다. 그래서 어떤 오류인지 확인하고 싶다면 console.log(error) 를 사용하여 error에 대한 내용을 확인할수있다.

혹시라도 에러에 대한 정보가 필요하지 않을경우에는 생략할수있다.

try{
    // 실행될 코드 
} catch{
     //에러 발생시 실행할코드

finally는 무언가를 실행하고, 결과에 상관없이 실행하고 싶을때 사용한다.

순서를 보면

1. try안의 코드가 실행된다.

• 에러가 없다면 → try코드 실행후 finally 블록이 실행된다.
• 에러가 있다면 → try안의 코드는 중단이되고 catch안의 코드가 실행된 후 finally로 넘어간다.

꼭 *Try - catch - finally * 순으로 쓸필요는 없고, try/finally코드를 사용해도 되며, 에러를 처리하지 않고 작업을 확실하게 마무리할때 사용하면 된다.

Git은 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들간에 해당 파일들의 작업을 조욜하기 위한 분산 버전 관리 시스템이다. 또는 이러한 명령어를 가리킨다. 주로 소프트웨어 개발에서 소스관리 코드를 위해 사용하지만, 파일의 변경사항을 지속적으로 추적하기 위해 사용하기도 한다. 출처 - 위키백과/ Git (소프트웨어)

처음 git이라는걸 꼭 알아야한다고 해서 옛날에 사용하던 알집 FTP같은 프로그램(UI가 불편했다)을 생각했었다. 별거 아닑거라 생각했는데...

git은 버전관리시스템은 git이 하는 일이었고, 이 시스템을 사용하기위해선 ux가 잘 꾸며져있는 응용프로그램이 아니라 명령어를 넣어서 사용해야한다.

깃(Git)을 사용하기위해 필수로 알아야할 명령어

$ git init

• git 저장소 초기화,명령어를 입력하기 전까지는 일반 디렉토리였지만, 초기화를 시키면 해당 디렉토리를 로컬 깃저장소로 등록해주며, 해당명령어를 입력후에 추가적인 git 명령어를 줄수있다.

  $ git clone

• 원격저장소(대표적으로 git hub)로 부터 프로젝트를 복제하는것을 말하며 저장소를 clone하면 'origin'이라는 리모트 저장소가 자동으로 등록된다. ex- git

$ git remote

• 현재 프로젝트에 등록된 리모트 저장소를 확인할수있으며 -v 옵션을 주면 단축이름과 URL을 함께볼수있다.

  $ git status

• 파일들의 가능한 상태를 확인할수 있으며 작업디렉토리 (Working directory)와 스테이징 영역(staging area)의 상태를 확인하기 위해 사용한다.

  ◆ 작업디렉토리( Working directory): 작업하고 있는 프로젝트의 디렉토리 ◆ 스테이징 영역 (staging area) : 커밋(commit)을 하기위해 $ git add명령어로 추가한 파일들이 모여있는 공간을 말한다. ◆ Repository : 커밋들이 모여있는 저장소

  작업디렉토리를 스테이징영역에 보내고 스테이징영역이 저장되는곳이 레포지토리 이다.

  스테이징영역에 저장되는 이유는 바로 레포지토리로 보내게 되면 잘못올렸거나 도중에 취소해야하는 경우엔 취소를 할수없게되어 스테이징영역에 임시로 업로드 한후 최종으로 업로드 할때 레포지토리로 보내는 것이다.

$ git add

• 작업 디렉토리 상의 변경내용을 스테이징 영역에 추가하기 위해 사용 하는 명령어

  $ git add <파일/디렉토리 경로> 변경내용의 일부만 스테이징 영역에 넘기고 싶을떄 디렉토리의 경로를 인자로 넘긴다.

   $ git add . 

  현재 디렉토리의 모든 변경내용을 스테이징영역으로 넘기고싶을떄, 인자로 넘긴다.(상위 데리

넣으면 넣을수록 늘어나는 코드는 주석을 달지 않으면 뭐가 뭔지 헷갈리는 순간이 왔고, 기능을 추가하는 시간보다 수정을 하기 위해 코드 더미를 뒤지는 시간이 더 걸렸다. 무엇보다도 기능이나 콘텐츠들이 쌓일수록 이미지를 불러오는 시간이 길어지는 게 가장 골치가 아픈 일이었다.

문제를 해결할 방법이 없을까 하다가 ** Import** 와 Export를 이용하여 모듈을 불러오는 방식으로 만들면 나처럼 무식하게 <div class>를 남발하는 게 아닌 적은 수고로 훨씬 더 프로페셔널한 결과물을 만들 수 있다는 걸 알게 되었다.

근데, Import 와 Export는 뭐고 모듈은 무엇을 말하는 걸까?

모듈 이란?

모듈이란 결과물을 만들기위해 작성했던 모든 파일을 말한다.

이안에 있는 모든 파일이 모듈이다!

- Import & Export 이란?

• Import : 외부모듈안의 기능을 갖고오기위한 코드 (모듈 가져오기)
• Export : 변수나 함수앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할수 있는 코드 (모듈 내보내기)

근데 기존에도 CSS와 Javascript라는 모듈을 불러왔고 그 모듈 안의 기능을 잘 썼었는데 기존 방식과 뭐가 다르고 뭐가 좋다는 걸까?

위에 작성한 코드는 next.js를 이용하여 만든 모듈이며, 실행시켜보면 하단처럼 출력된다.

코드를 살펴보면

styles폴더의 emotion 이라는 모듈 에서 {MyTitle}이라는 기능을 불러온다(Import) 라는 내용이고 하단은 import가 가져온 emotion 모듈이다.

import styled from '@emotion/styled'는 @emotion/styled에서 styled를 불러왔다는(import) 코드이다.

EmotionPage에 기능을 내보낸다(Export) 는 코드이다.

Import 와 Export는 한 세트이며 둘 중 하나라도 없으면 내보낼 수도 가져올 수도 없다. 두 코드는 바닐라 자바스크립트에 들어있는 기본 기능이기 때문에 사용하기 위해선 js로 해야 하며 html이나 CSS 확장자를 따로 만들지 않고 자바스크립트 안에 기재를 한다.

기재하는 방법은 return을 기준으로 상단은 자바스크립트를 기재하고 하단은 html 코드를 기재한다. CSS는 상단에 기재되어 있는 emotion에 기재해 주면 된다. emotion 또한 확장자가 js이며, 별도로 설치해야 사용 가능하다. 설치는 emotion 홈페이지(https://emotion.sh/)를 참고하면 된다.

다시 본론으로 돌아가서 그럼 Import 와 Export는 주로 어떻게 사용 가능할까?

리액트(React JS)의 핵심요소인 컴포넌트(Component) 를 위해 주로 사용한다. 그러면 리액트를 사용하기 위한 것이 아닌가라고 생각이 들 수 있지만 놀랍게도 자바스크립트에 기본적으로 포함되어 있는 기능이기에 굳이 리액트를 사용하지 않더라도 사용 가능하다. 그렇다면 컴포넌트란 무엇일까?

*컴포넌트(Component)란 * UI나 기능을 외부에 만들어놓고 필요할 때마다 불러오는걸 말한다.

설명을 보았을 땐 어떤 것인지 전혀 감을 잡을 수가 없는데 레고를 생각하면 쉽다. 레고를 완성하기 위해 정사각형의 파츠, 직사각형 파츠를 모아 자동차나 비행기를 만드는 것처럼 이미지를 표시하는 부분, 메인 글을 작성하는 부분, 저장하는 부분 등 여러 기능을 만든 후 하나의 페이지로 만드는 걸 말한다.

컴포넌트의 특징은 외부 파일에 만들어놓고 필요할 때마다 연결만 해주면 언제든 재사용이 가능하다는 점이고 또 하나는 기존엔 같은(혹은 비슷한) 콘텐츠를 여러 개를 만들기 위해선 동일한 코드를 여러 번 작성해야 했고, 수정하게 될 경우엔 동일하게 기재되어있는 코드들을 전부 수기로 수정해야 하는 불편함이 있다 하지만 컴포넌트를 할 경우엔 원본이 되는 파일만을 수정하면 연동된 모든 파일이 수정이 가능하다는 장점이 있다.

정리하자면 각 모듈 (ex: 이미지를 업로드하는 기능, 양식폼에 기재되어 있는 데이터를 저장하는 기능 혹은 파일)들이 모아서 만든 것을 컴포넌트라고 생각하면 된다.

JavaScript에 XML을 추가 확장한 문법으로 공식적인 바닐라 자바스크립트는 아니지만 자바스크립트의 모든 기능이 포함되어있는 문법이다.

리액트(React)는 웹프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기위해 사용된다.

출처: [리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전]
(https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_(%EC%9B%B9_%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC))) 22.01기준

HTML과 비슷해 렌더링 로직 (* 표현할 데이터를 받아오는 로직 ) 과 UI 로직(*받아온 데이터를 UI로 만드는 로직)

Markup Language (* 간단히 문서나 데이터 구조를 표현하는 언어의 한가지이다)이므로 UI로직(*받아온 데이터를 UI로 만드는 로직)을 시작적으로 이해하기 쉽게 표현을 할수있다.

작성하는방법은 자바스크립트 문법과 동일하게 작성하면된다

* JSX 문법규칙

1. 요소를 감싼다.

Component 에 여러요소가 있다면 반드시 부모요소로 감싸야하며, return을 기준으로 위로는 Javascript 문법을 아래는 HTML 태그를 작성하면 된다.

export default function Page() {

    return (
        <div>
            <title> Hello World!</title>
       </div>
    )
}

2. 자바스크립트 표현이 가능하다.

자바스크립트식은 중괄호 {}를 사용하여 JSX안에 쓸수있다.

<h1>{1+2}</h1>

//위의 예시는 다음과 같이 렌더링된다.

<h1>3</h1>