JavaScript Syntax Extension
의 줄임말으로써,React
에서 사용하는 자바스크립트 확장 문법입니다.JSX
로 작성한 코드는 브라우저에서 동작하는 과정에서바벨
을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
React
는 페이스북에서 개발하고 관리하는사용자 인터페이스(UI)
를 만들기 위한JavaScript 라이브러리
입니다.
React
와 같은프론트엔드 라이브러리
혹은프레임워크
를 사용하는 가장 큰 이유 중 하나는UI를 자동으로 업데이트
해 준다는 점입니다.React
는가상 돔(Virtual Dom)
을 통해UI
를 빠르게 업데이트합니다. 가상 돔은 이전UI
상태를 메모리에 유지해서, 변경될UI
의 최소 집합을 계산하는 기술이며, 이 기술 덕분에 불필요한UI
업데이트는 줄고, 성능이 향상됩니다.
Create-React-App
의 약자이며,리액트 프로젝트
를 시작하는데 필요한 개발 환경을 세팅 해주는도구(toolchain)
입니다.CRA
는리액트
로웹 애플리케이션
을 만들기 위한 환경을 제공해주며,CRA
를 이용하면 하나의 명령어로리액트 개발환경
을 구축할 수 있습니다.
- 컴포넌트 : 재활용 가능한
UI 구성 단위
를 의미합니다.- 컴포넌트의 특징
- 재활용하여 사용할 수 있다.
- 코드 유지보수에 좋다.
- 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)
CSS 전(예비)처리기
CSS Preprocessor
의 일종으로써, CSS의 확장판이라고 볼 수 있습니다.
CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS가 동작하지만 CSS의 불편함을 이러한 확장 기능으로 상쇄할 수 있으며, 주 기능으로Nesting
과MIXIN
이 있습니다.
라우팅(Routing)
이란다른 경로(url 주소)
에 따라 다른View(화면)
를 보여주는 기능으로,리액트
자체에는 이러한 기능이 내장되있지 않습니다. 즉 이러한 부분을 보완해주기 위해Routing
기능을 보완해주며 가장 많이 사용되는라이브러리
가React Router
입니다.
-
프레임 워크
:프레임워크
는 뼈대나 기반구조를 뜻합니다. 프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등과 같이 어느 정도의 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발합니다. 프레임워크는 완성된 제품이 아닌 완성된 제품을 만들기 위해서 개발자를 도와주는 또는 기반이 되는 역할을 합니다. 이를 소프트웨어적으로 다시 정의하면 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는클래스
와인터페이스
의 집합입니다.
-라이브러리
: 라이브러리는 특정 기능에 대한 도구 또는 함수들의 집합입니다. 프로그래머가 어떠한 기능을 수행하기 위해서 도움을 주는 또는 필요한 것을 제공해주는 역할을 해줍니다. 간단히 정리를 하자면 프로그램 기능 수행을 위해 활용 가능한 도구의 집합입니다.
⭐️ 라이브러리와 프레임 워크의 차이점 :
프레임워크
와라이브러리
의 차이점은 흐름을 누가 지니고 있냐의 차이입니다.프레임워크
는 전체적인 흐름을 자체적으로 가지고 있어 프로그래머는 그 안에서 필요한 코드를 작성합니다. 반면에라이브러리
는 프로그래머가 전체적인 흐름을 가지고 있어라이브러리
마다의 자신이 원하는 기능을 구현하고 싶을 때 가져다 사용할 수 있습니다.
즉,프레임워크
는프레임워크
라는 특정 공간에 들어가서 사용한다는 느낌이 더 강하다고 말할 수 있으며 라이브러리는라이브러리
자체를 가져가 사용하고 호출하는 용도로 사용된다고 말할 수 있습니다.
프론트엔드 개발
을 진행하려하는데 필요한백엔드 API
가 완성이 안되었을수도 있습니다.- 이러한 경우에 백엔드에서
API
가 완성될때까지 무작정 기다리는 게 아니라,mock data
를 만들어 데이터가 들어오는 상황을 미리 대비하고 데이터에 맞게UI
가 의도한대로 구현되는지 먼저 확인해야 합니다.- 특히나 프로젝트를 진행하는 경우
백엔드 API
유무에 상관없이 화면에 데이터를 예쁘게 보여주는 것이 프론트엔드 개발자로서 가져야 할 책임감 입니다.- 또한
mock data
를 만드는 과정에서 백엔드 API에서 보내주는response
가 어떤 형태인지,key-value
값을 확인하고 미리mock data
와백엔드 response
의 형태를 맞춰보면서 개발을 진행한다면 추후 실제 API를 훨씬 수월하게 연결 할 수 있습니다.
Single Page Application (싱글 페이지 어플리케이션)
의 약자로써, 말 그대로, 페이지가 1개인 어플리케이션을 의미합니다.
SPA
는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만Ajax
를 통해 데이터를 바인딩하는 방식이며, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다.
주로React-router
에서Routing
시에 필수적으로 사용되는 기능입니다.
useEffect
란,React Component
가렌더링
될 때마다 특정 작업을 실행할 수 있도록 하는hook
의 일종입니다.useEffect
는컴포넌트
가mount
,unmount
,update
됐을 때, 특정 작업을 처리할 수 있으며,클래스형 컴포넌트
에서 사용할 수 있었던생명주기 메소드
를함수형 컴포넌트
에서도 사용할 수 있도록 해준다는 장점이 있습니다.
Side effect
란, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말합니다. 예시로 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있습니다.
React
에선Side-Effect
처리를 위해useEffect()
함수를 사용하는데, 함수가 매개변수를 받아 결과를 생성하는 것과 무관한 외부의 상태를 변경하거나 외부와 상호작용해야 하는 코드는useEffect()
함수를 통해 분리해야하기 때문에side effect
를 사용합니다.
두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다.
props
는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면state
는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.
- 컴포넌트 기반의 라이브러리
: 헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 헤더 컴포넌트, 사이드바 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜 준다.
- 단방향 데이터 바인딩(One Way Data Flow)
: 리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기떄문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다.
- Props and State :
- Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터이다. 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
- State: 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용한다.
각각의 state는 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능하다. 그러나 자신보다 상위에 있는 state는 변경이 가능하지만 state를 변경해주는 함수를 props로 받는다면 state의 변경이 가능하다.- Virtual DOM
: 가상의 Document Object Mode.로 실제 DOM을 조작하는게 아닌, DOM을 추상화 한 자바스크립트 객체를 구상해 사용한다.
※ DOM(Documnet Object Model)?
: JavaScript Node 개체의 계층화된 트리로, HTML, XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.
- 장점 :
- 배우기가 간단하고, 애플리케이션을 만들 때 복잡함이 적다.
- Controller, directive, template, model 처럼 분리를 하지 않고 Component 단 하나로 관리한다.
- 뛰어난 Garbage Collection, 메모리 관리, 성능을 가지고 있다.
- 서버 사이드 렌더링과 클라이언트 렌더링을 둘 다 지원한다.
- 간편한 UI 수정과 재사용이 용이하다.
- 다른 프레임워크나 라이브러리와 혼용하여 사용할 수 있다. 즉, 개발이 완료된 서비스에도 적응이 가능하다.
- 단점
- 보여지는 부분에만 관여하기때문에 데이터 모델링, Routing, Ajax 등등의 기능을 제공하지 않는다.
- view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 JavaScript 배경지식이 부족할 경우애는 사용이 힘들다.
- IE8 이하 버전들을 지원하지 않는다.
state를 선언하기 위해 사용하는 훅은
useState()
입니다. 사용 방법은 아주 간단하며 useState()를 사용해 선언합니다. 이때 배열을 사용하며 첫 번째는 state가 저장될 이름을 두 번째는 값을 업데이트 할 메소드가 위치하게 됩니다.
const [ name, setName ] = useState("Changmo"); // 사용 예시
=>
map()
메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해줍니다.
const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, 32] // 사용 예시
=> 아래의 코드 예시와 같이,
onClick method
를 통해 구현할 수 있으며, 이외에도useState()
훅을 활용해 구현할 수 있습니다. 또한alert
에 관한 함수를 상단에 지정해주어onClick
이벤트 발생시에 추가시에 구현이 가능합니다.
<button onClick={alert("버튼을 누르셨습니다.")}>alert</button>
DOM
을 추상화한 가상의 객체, 즉 가상의 DOM을 의미합니다.
Virtual Dom(이하 가상 DOM)
은 수정사항이 여러 가지 있더라도,가상 DOM
은 한 번만 렌더링을 일으킵니다.
단방향 데이터 흐름
이란 부모로부터 자식으로만 데이터가 전달이 가능함을 의미합니다. 이는 유지보수를 좀 더 편리하게 만들어줍니다.
단방향 데이터 흐름
은 관리하기가 쉬우며,버추얼 돔(Virtual DOM)
과 궁합이 잘 맞습니다. 뷰를 통째로 바꾸어주는 역할을 하기 때문에 단방향 데이터 방식은DOM
을 갱신할 때 큰 장점이 있습니다. 이러한 단순한 데이터 흐름은 이해하기 쉽고 관리하기에 좋은 장점이 있습니다.
1.
HTTP 요청 전송 기능
을 제공하는Web API
이다. (자바스크립트 내장 라이브러리)
2.Server
와의 비동기 요청 방식을 기능한다.
3. 백앤드로부터 데이터를 받아오려면api
를 호출하고 데이터를 응답 받는다. 이 때 자바스크립트Web API fetch()
함수를 쓰거나axios
라이브러리를 사용할 수 있다.
코드 리뷰를 통해서 얻을 수 있는 것은 매우 많습니다. 더 나은 퀄리티의 코드로 거듭나는 것 뿐 아니라, 새로운 기술적인 지식을 얻을 수도 있고 혹은 내가 해결해야 하는 문제에 대해 새로운 관점을 습득 할 수도 있습니다. 그렇기 때문에, 대부분의 기업에서는 필수적으로 코드 리뷰 문화가 존재합니다.
JavaScript Object Notation
라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식Javascript
에서 객체를 만들 때 사용하는 표현식을 의미한다.JSON 표현식
은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.JSON
은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
JS Object
는 JS Engine 메모리 안에 있는 데이터 구조이고,JSON
은 객체의 내용을 기술하기 위한 text 파일이라는 점이 다릅니다.JSON
은 "파일"이므로 확장자 명이.JSON
인 파일이 존재합니다.
즉,JS Object
로 HTTP 통신을 하는 것이 아니라,JSON
으로 서버와 클라이언트가 데이터를 주고 받는다는 것입니다.
인증(Authentication)
인증(Authentication)은 유저의 identification을 확인하는 절차입니다. (유저의 아이디와 비밀번호를 확인하는 절차)
:: 인증(로그인) 절차
- 유저 아이디와 비밀번호 생성
- 유저 비밀번호를 암호화 해서 DB에 저장 (회원가입)
- 유저 로그인 -> 아이디와 비밀번호 입력
- 유저가 입력한 비밀번호 암호화 한후 암호화되서 DB에 저정된 유저 비밀번호와 비교.
- 일치하면 로그인 성공
- 로그인 성공하면
access token
을 클라이언트에게 전송.- 유저는 로그인 성공후 다음부터는
access token
을 첨부해서 request를 서버에 전송함으로서 매번 로그인 해도 되지 않도록 한다.
인가(Authorization)
인가(Authorization)은 유저가 요청하는 request를 실행할 수 있는 권한이 있는 유저인가를 확인하는 절차입니다 예를 들어, 해당 유저는 고객 정보를 볼 수 있는 있지만 수정 할 수는 없다 와 같이 사용자가 할 수 있는 행동을 제한하는 역할을 하기도 합니다.
:: 인가(Authorization) 절차
- Authentication 절차를 통해
access token
을 생성한다.access token
에는 유저 정보를 확인할 수 있는 정보가 들어가 있어야 한다 (예를 들어 user id).- 유저가 request를 보낼때
access token
을 첨부해서 보낸다.- 서버에서는 유저가 보낸
access token
을 복호화 한다.- 복호화된 데이터를 통해 user id를 얻는다.
- user id를 사용해서 database에서 해당 유저의 권한(permission)을 확인하다.
- 유저가 충분한 권한을 가지고 있으면 해당 요청을 처리한다.
- 유저가 권한을 가지고 있지 않으면 Unauthorized Response(401) 혹은 다른 에러 코드를 보낸다.