9주차 개념노트

메가테라

9주차 개념노트

jiwoosmile 2022. 10. 18. 08:40

fnm

Fast Node Manager 의 약자이다.

Node.js 버전을 관리할 수 있는 도구이다.

fnm use 버전으로 사용할 Node.js버전을 쉽게 전환할 수 있게 해준다.

npm 이란

Node Package Manager의 약자이다.

Node Package들을 관리해주는 도구이다.

패키지를 쉽게 설치, 업데이트, 삭제할 수 있게 해준다.

package.json

프로젝트가 의존하는 패키지들의 목록을 확인할 수 있다.

scripts부분에 커스텀 스크립트도 등록할 수 있다.

npm scripts

자주 사용하는 명령어를 등록해서 간편하게 사용할 수 있게 해준다.

등록한 명령어는 npm run 명령어 로 실행할 수 있다.

아래 명령어들은 npm start와 npm test처럼 run 없이도 실행할 수 있다.

Usage: npm <command>

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

npx

패키지를 실행시킬 수 있는 도구이다.

패키지가 설치되어 있지 않아도 실행할 수 있게 해준다.

ESlint

JS로 작성된 코드의 품질과 스타일을 관리해주는 코드 formatter이다.

CommonJS

JS를 브라우저 말고도 범용적으로 ServerSide application이나 Desktop application등에서도 사용하기 위해 조직된 그룹이다.

범용적인 사용을 위해서는 모듈화가 중요했고, JS의 모듈화 명세를 만든 그룹 중 하나이다.

모듈을 정의할 때는 exports를 사용하고,

모듈을 사용할 때는 require를 사용한다.

YAML

YAML은 JSON의 superset이다.

데이터 표현 방식의 일종이다.

사람이 읽기 편하게 만드는 것에 중점을 둔 방식이라서 JSON에 비해 컴팩트하고 더 읽기 쉽다.

하지만 JSON에 비해 parsing은 더 복잡하다.

node modules

JS 라이브러리라고 보면 된다.

필요한 module을 require나 import로 불러와서 사용할 수 있다.

package-lock.json

생성된 의존성 트리를 그대로 묘사하는 파일이다.

따라서 npm ci 명령어를 실행하면 package-lock.json에 명시된 버전대로 그대로 설치해서

동일한 의존성을 보장할 수 있다.

vim & vim 커맨드

text editor program이다.

text editor program vi 의 improved 버전에 해당한다.

intelliJ나 VSCode에 익스텐션으로 설치해서 사용할 수 있다.

command	action
i	커서 위치에 삽입
I	줄 맨 앞에 삽입
a	커서 다음에 삽입
A	줄 맨 끝에 삽입
gg	문서 맨 앞으로 이동
G	문서 맨 끝으로 이동
^	문장 맨 앞으로 이동
$	문장 맨 끝으로 이동
/	검색
shift + v	현재 줄 선택
y	선택 영역 복사
p	붙여넣기
yy	현재 줄 복사
ctrl + r	redo
u	undo
:q	닫기
:wq	저장 후 닫기
:q!	강제 닫기

JavaScript의 문자열

JS에서는 0개 이상의 quote로 감싸진 character를 문자열로 취급한다.

‘, “로 모두 문자열을 나타낼 수 있다.

스크립트 언어

다른 응용프로그램에 삽입되어 동작하는 프로그래밍 언어로, 스크립트라고도 한다.

컴파일이 필요한 언어들은 컴파일 된 후에 독립적으로 작동할 수 있는 하나의 응용프로그램이지만,

Bash, JS, Python등의 언어는 다른 응용 프로그램 안에 삽입되어 해석되는 스크립트 언어이다.

인터프리터

인터프리터는 작성된 코드를 실행해주는 컴퓨터 프로그램이다.

REPL (Read–eval–print loop)

즉석에서 코드를 실행해 볼 수 있는 프로그래밍 환경이다.

코드를 치면 실행해서 결과를 즉석에서 돌려준다.

node가 설치되어 있다면 터미널에 node 명령어로 JS코드를 실행해 볼 수 있는 프로그래밍 환경을 만들 수 있다.

자바스크립트 타입들 - number, string, boolean, null, undefined, Symbol, object(, array)

숫자는 integer인지 float인지에 관계없이 모두 number타입이다.

문자열은 string타입이다.

true, false는 boolean타입이다.

null은 object에 값이 들어있지 않은 경우에 해당한다.

따라서 typeof null을 했을 때 object가 나온다.

존재하지 않는 것을 표현할 때 null을 사용한다.

어떤 변수가 초기화되지 않았다면 undefined타입에 해당한다.

array또한 object의 일종이다.

symbol은 Symbol 생성자로 생성된 값의 타입이다.

symbol은 변경할 수 없고, 고유하다.

따라서 객체 속성의 key로 사용될 수 있다.

let 과 const

ES6에서 추가된 변수 선언 방식에는 let과 const가 있다.

let으로 선언한 변수는 값을 재할당할 수 있다.

const로 선언한 변수는 값을 재할당할 수 없고, 선언할 때 초기화를 해주어야 한다.

다만 const로 선언한 객체, 배열의 값은 수정할 수 있다.

JavaScript 함수 선언

function functionName(parameters) {
	// content
}

와 같이 함수를 생성할 수 있다.

지역 변수와 전역 변수

지역 변수는 함수 내에서 선언된 변수를 의미한다.

지역 변수는 함수 내부에서만 접근할 수 있고, 함수가 종료될 때 메모리에서 사라진다.

전역 변수는 함수 외부에서 선언된 변수를 의미하고,

전역에서 접근할 수 있고, 웹 페이지가 닫힐 때 메모리에서 사라진다.

템플릿 문자열

템플릿 문자열은 문자열을 나타내기 위해 `을 주로 사용한다.

템플릿 문자열 안에는 ‘와 “를 모두 사용할 수 있다.

템플릿 문자열의 강점은문자열 interpolation 메소드를 이용해서 변수를 문자열 안에 쓸 수 있다는 것이다.

text ${variable} 와 같이 쓸 수 있다.

조건문 if

JS에서도 다른 프로그래밍 언어와 비슷하게 아래와 같이 조건문을 사용할 수 있다.

if (조건) {
	조건이 맞을 때 실행할 코드
}

반복문 for, while

JS에서 반복문도 다른 프로그래밍 언어와 비슷하게 아래와 같이 사용할 수 있다.

for (let i = 0; i < 반복횟수; i++) {
	수행할 코드
}

while (조건) {
	조건이 만족되는 동안 수행할 코드
}

문자열 숫자의 연산

JS에서는 자동 형 변환(coercion)이 일어난다.

+연산의 경우 문자열이 포함되지 않은 경우 모두 number type으로 변환되어 연산이 진행되고,

문자열이 포함된 경우 모두 string type으로 변환되어 concatenate(연결)된다.

-, /, *, %의 연산자들은 모두 number type으로 변환되어 연산이 진행된다.

비교 연산자 double equals(==), triple equals(===)

JS에서 double equals는 모두 number type으로 형 변환되어 비교가 진행되고,

===는 값과 타입이 모두 동일한지 확인한다.

이 때 NaN === NaN은 항상 false이다.

forEach

for 문을 대신해서 배열의 원소들 각각에 대해 함수를 실행할 수 있게 해주는 메소드이다.

아래 코드와 같이 쓸 수 있다.

배열.forEach(element => 수행할 코드);

map

배열의 각 요소를 이용해 새로운 배열을 생성할 수 있게 해주는 메소드이다.

배열 데이터를 이용해서 HTML요소에 값을 넣은 형태로 매핑을 해줄 때 자주 사용하게 된다.

아래 코드와 같이 쓸 수 있다.

배열.map(element => 수행할 코드);

arrow function

함수명 없이 함수를 선언하는 익명 함수에 해당한다.

인자 ⇒ 반환 값; 형식으로 쓸 수 있다.

화살표 함수는 this, super 바인딩이 없기 때문에 메소드로 사용하면 안된다.

javascript의 object

properties와 methods를 가질 수 있는 타입이다.

{key: value} 형태로 작성한다.

일급 객체

함수에 인자로 넣을 수 있고, 수정하거나 변수에 할당할 수 있고, 반환값이 될 수 있는 객체를 의미한다.

JS에서는 함수도 1급 객체에 해당한다.

함수를 값처럼 취급해서 다른 함수의 인자로 넣을 수 있고, 변수에 할당할 수 있다.

this

object method에서 this는 object를 가리킨다.

함수 안팎에서 사용된 this는 global object를 가리킨다.

strict mode에서 함수 안에서 this는 undefined이다.

event안에서 this는 event를 받은 요소를 가리킨다.

this는 변수가 아니기 때문에 this의 값을 바꿀 수 없다.

prototype-based OOPL

JS는 클래스 없이 프로토타입을 이용하는 객체 지향 언어이다.

Prototype은 클래스나 객체의 내용 복사 없이 상속을 가능하게 해주는 방법이다.

어떤 객체의 프로토타입을 설정해주면 객체에서 프로토타입의 속성들도 이용할 수 있게 된다.

즉, 프로토타입을 이용해서 객체들을 연결해줄 수 있게 된다.

어떤 객체의 속성을 사용할 때 객체에 정의되어 있다면 객체의 속성을 사용하게 되고, 없다면 프로토타입에 정의되어 있다면 프로토타입의 속성을 사용하게 되고, 없다면 프로토타입의 프로토타입의 속성을 사용하게 되고,… 가 반복되어 프로토타입이 null인 곳까지 없었다면 해당 속성을 사용할 수 없다.

null은 prototype이 없고, prototype chain의 end다.

MDN의 String, Array등을 검색해보면 메소드들이 String.prototype.메소드명() 등으로 적힌 것을 확인할 수 있다.

우리가 자주 사용할 수 있는 “문자열”.replaceAll() [배열].sort()등의 메소드들을 우리가 문자열이나 배열을 생성할 때 정의하지 않았음에도 사용할 수 있는 이유는 객체의 prototype에 해당 메소드들이 정의되어 있기 때문이다.

함수형 프로그래밍 언어

유효 범위 내에서 값을 바꾸지 않고 프로그래밍하는 언어이다.

같은 입력값에 대해 항상 같은 결과값이 도출되어 예측 가능하고, 메모이제이션(입력값에 대한 도출값을 이미 알고 있는 경우 연산 없이 메모해 둔 결과값을 돌려준다.)이 가능하다.

하스켈 등이 순수 함수형 프로그래밍 언어이다.

함수형 언어가 아니더라도 함수형 언어의 기능을 탑재할 수 있어서 JS로도 함수형 프로그램을 할 수 있다.

Spread Syntax

…배열 혹은 …객체 등의 표현식을 이용해 사용할 수 있고,

Spread Syntax를 이용하면 배열이나 객체의 요소들을 얻을 수 있다.

[…[1, 2, 3]] === [1, 2, 3]이다.

undefined

변수를 선언만 해두고 초기화를 하지 않았다면 undefined 타입에 해당한다.

null과 비슷해 보이지만 null과 undefined는 다르다.

null은 객체가 없음을 나타내고, object 타입에 해당한다.

destructuring

변수에 배열의 값이나 객체의 속성을 할당할 때 유용하게 사용할 수 있고, 일부만 가져올 수도 있는 방식이다.

함수를 선언할 때 인자에서 destructuring을 할 수도 있다.

const numbers = [1, 2, 3];

const [one, two] = numbers; // one === 1, two === 2

const person = {
	name: 'joo',
	age: 100
}
const {name} = person; // name = 'joo'

function sayMyName ({name}) {
	console.log(name);
}
sayMyName(person); // joo

재귀 호출

함수 안에서 자신을 또 호출하는 것을 재귀 호출이라고 부른다.

피보나치 수 등을 구할 때 재귀 호출을 쓰면 쉽게 구현할 수 있다.

RORO pattern

RORO pattern은 receive an object, return an object pattern의 줄임말이다.

RORO pattern을 destructuring과 함께 이용하면 각각의 인자가 어떤 값인지 쉽게 알 수 있다.

또한 반환값을 객체를 이용하면 primitive type일 때보다 더 많은 정보 (값의 의미를 드러내는 등)을 표현할 수 있다.

function step(size, matrix, position) {
//
}
step(2, [[0, 0], [0, 0]], {x: 0, y: 0}); // 함수에서 인자들이 무엇을 나타내는지 바로 인식하기 어렵다.
// RORO 패턴 적용
function step({size, matrix, position}) {
//
}
step({size: 2, matrix: [[0, 0], [0, 0]], position: {x: 0, y: 0}); //함수에서 각 값이 어떤 값인지 인식하기 쉽다.

삼항 연산자

삼항연산자를 이용해서

조건 ? 조건이 참일 때 실행문 : 조건이 거짓일 때 실행문;

의 식으로 if문을 간단히 나타낼 수 있다.

하지만 오히려 if문으로 작성할 때보다 가독성이 떨어지거나 이중 삼항 연산자를 사용해야 되는 경우에는

if 문을 쓰는 것이 더 좋다.

Jest

JS를 테스트할 수 있는 도구이다.

ECMAScript, ES2021(ES12)

ECMAScript는 Ecma International이라는 그룹에 의해서 제정된 ECMA-262 규격으로 정의된 범용 스크립트 언어이다.

ES2021은 2021년도에 나온 자바스크립트 버전이다.

정규 표현식

특정 문자열을 찾거나 replace하기 위해 사용하는 패턴이다.

JS에서는 /패턴/ 와 같이 슬래시로 패턴을 감싸서 나타낼 수 있다.

.는 개행을 제외한 모든 문자를 나타내고 싶을 때 사용하고,

\w는 단어 \d는 숫자 \s는 공백을 나타내고 싶을 때 사용한다.

[]안에 문자를 넣어 두면 그 중 하나를 나타내고 싶다는 의미이고,

여러 개를 한꺼번에 쓰고 싶다면 [a-e]와 같이 쓸 수 있고, a, b, c, d, e중 한 글자라는 의미이다.

?를 붙이면 optional 즉 있을 수도 있고 없을 수도 있다는 의미이다.

{min, max}를 붙이면 해당 글자가 min에서 max개 있을 수 있다는 의미이다.

export, import

모듈을 선언할 때 export를 사용하고, 모듈을 사용할 때 import를 사용한다.

swc

Speedy Web Compiler의 약자이다

컴파일과 번들링에 모두 사용될 수 있고, 매우 빠르다.

axios

Promise를 기반으로한 HTTP 요청을 보내주는 client이다.

axios를 이용하면 쉽게 서버로부터 데이터를 받아오거나 보낼 수 있다.

비동기 처리

무조건 작업을 순서대로 진행하면 한 개의 작업이 오래 걸릴 때 다른 간단한 작업을 하고 싶더라도 오래 걸리는 작업이 끝난 뒤에 간단한 작업을 하게 된다.

하지만 웹 브라우저에서 오래 걸리는 작업을 요청했다고 다른 작업을 아무것도 못한다면 매우 불편할 것이다.

작업을 순서대로 진행하는 것을 동기적 처리 방식이라고 하고,

동기적으로 처리하면 용량이 큰 파일을 다운로드했을 때 아무것도 클릭할 수도 없고 가만히 기다리고 있어야될 것이다.

따라서 오래 걸리는 작업을 요청하더라도 다른 작업을 할 수 있도록 도와주는 것이 비동기 처리이다.

다만 비동기 처리는 순서가 요청한대로 보장이되지 않기 때문에 작업 간에 순서가 보장되어야 하는 경우 .then등을 이용해서 순서를 보장해줄 수 있다.

promise

Promise는 JS 비동기 처리에 사용되는 객체이다.

Promise는 생성되어 종료될 때까지 Pending, Fulfilled, Rejected 의 세 가지 상태가 있다.

Pending은 아직 완료되지 않은 상태이고,

Fulfilled는 완료되어 Promise가 결과 값을 반환한 상태이고,

Rejected는 비동기 처리가 실패하거나 오류가 발생한 상태에 해당한다.

프로미스는 계속 연결할 수 있고, then()은 프로미스를 반환하기 때문에 .then().then()…을 계속 연결할 수 있다.

async await

비동기 처리를 조금 더 가독성있게 처리할 수 있게 도와주는 문법이다.

Promise를 반환하는 코드를 포함한 함수 앞에 async를 붙이고, 함수 내부에 Promise를 반환하는 코드 앞에 await을 붙여주고 동기식 코드를 작성하듯이 작성해주면 된다.

CRA(Create React App)

react app을 쉽게 만들 수 있도록 도와주는 라이브러리이다.

React란?

컴포넌트 단위로 UI를 만들 수 있게 도와주는 JS 라이브러리이다.

React 컴포넌트

React 컴포넌트는 HTML 요소들을 반환하는 함수이다.

React 컴포넌트들을 레고 블럭처럼 이용해서 조합하여 UI를 만들 수 있다.

JSON

parsing에 특화된 데이터 표현 방식이다.

key-value 쌍으로 나타낸다.

API 서버

API 서버는 API를 제공해주는 서버이다.

API로 받은 요청에 대해 API서버가 응답을 해준다.

CRUD (Create Read Update Delete)

소프트웨어의 기본적인 데이터 처리 기능을 묶어서 부르는 용어이다.

게시판 프로그램을 생각해보면, 게시글을 생성(Create)하고, 조회(Read)하고, 수정(Update)하고, 삭제(Delete)한다.

대부분의 프로그램들은 CRUD로 이뤄져 있다.

HTTP Method

데이터를 받아오는 GET,

엔티티를 보낼 때 사용하는 POST,

데이터의 일부를 수정하는 PATCH,

삭제를 하는 DELETE가 자주 쓰인다.

DSL

Domain specific language의 줄임말이다.

특정 분야에 최적화된 프로그래밍 언어를 의미한다.

도메인의 개념과 규칙을 사용해서 범용 언어보다 덜 복잡하고,

프로그래머와 도메인 전문가와의 소통을 매우 원활히 할 수 있게 도와준다.

Hook

hook은 함수 컴포넌트에서 상태에 접근하거나 React의 기능들을 사용할 수 있게 해주는 함수이다.

useState

상태를 관리할 수 있게 도와주는 hook이다.

const [value, setValue] = useState(initialValue);

와 같이 사용할 수 있다.

value에서 현재 상태를 얻을 수 있고,

setValue로 상태를 수정할 수 있다.

그리고 initialValue에 넣어준 값으로 value를 초기화할 수 있다.

useEffect

부가적인 일을 할 수 있게 도와주는 hook이다.

data fetching이나, DOM update, timer 등을 사용할 때 useEffect를 쓰면 된다.

useEffect(실행할 내용, dependency);

와 같이 사용할 수 있다.

dependency를 설정하지 않는다면 redering될 때마다 실행할 내용이 실행되고,

[]로 설정하면 처음 렌더됐을 때만 실행되고,

어떤 값이 변할 때마다 실행할 내용이 실행되기를 바라면 dependency에 배열 안에 값을 넣어준 형태를 사용하면 된다.

JSX

JS XML의 줄임말이다.

JS에서 HTML요소들을 작성할 수 있도록 도와준다.

JSX는 작성된 HTML태그들을 react element로 변환해준다.

API

API는 다른 프로그램들에 사용될 수 있는 기능을 이용할 수 있는 인터페이스이다.

카카오, 네이버, 등등에서 제공하는 API를 이용해서 직접 해당 기능을 내가 만들지 않고도 원하는 프로그램을 만들 수 있다.

json-server

json 파일만으로 임시 REST API를 매우 빠르게 구축할 수 있게 도와주는 라이브러리이다.

환경 변수 (env)

프로세스를 실행하는 방식에 영향을 미칠 수 있는 변수들을 의미한다.

PORT등이 환경 변수에 해당한다.

만약 수정하고 싶다면 .env파일에 PORT=원하는 값 과 같이 작성한다.

SWR

SWR은 stale-while-revalidate의 줄임말이다.

SWR방식은 요청이 왔을 때 일단 캐시를 반환하고,

request를 보낸 후에 데이터를 받았을 때 업데이트하는 방식이다.

data fetch를 쉽게 해주는 도구이다.

REST API

REST는 Representational State Transfer의 약자로, REST API는 API설계 방식이다.

REST API는 자원(URI)과 행위(Method)로 이뤄져있다.

REST API에서는 URI에서 자원을 나타내고, 행위는 HTTP Method로 표현한다.

따라서 URI에서는 동사보다 명사가 드러난다.

몇 가지 규칙이 있는데, URI 마지막에 /를 포함하지 않아야 하고,

-은 사용해도 되지만 _은 사용하지 않아야하고,

대문자는 사용하지 않는 것이 좋고,

파일 확장자를 포함하지 않아야 한다.

JavaScript event

click이나 키보드 입력 등으로 HTML요소에 발생하는 일들을 의미한다.

자주 사용되는 event에는 아래와 같은 event들이 있다.

event	설명
onchange	요소에 변경이 있을 때 발생한다.
onclick	요소를 클릭했을 때 발생한다.
onmouseover	요소 위에 마우스를 올려뒀을 때 발생한다.
onmouseout	요소에서 마우스를 다른 곳으로 옮길 때 발생한다.
onkeydown	키보드가 눌렸을 때 발생한다.

onChange

input, select, textarea요소의 value에 변경이 있을 때 실행할 함수를 지정해줄 수 있다.

useForm

form 관련 작업을 쉽게 해주는 커스텀 훅이다.

react-hook-form을 다운로드 받아서 사용할 수 있다.

register로 onChange, onBlur, ref, name을 쉽게 쓸 수 있다.

<input
onChange={onChange} // assign onChange event
onBlur={onBlur} // assign onBlur event
name='firstName' // assign name prop
ref={ref} // assign ref prop
/>
// same as above
<input {...register('firstName')} />

Spread Syntax

spread syntax를 사용하면 배열이나 객체의 원소들로 펼칠 수 있다.

배열이나 객체 앞에 …을 붙여주면 된다.

…가 배열에 붙으면 []가 사라지고, 객체에 붙으면 {}가 벗겨진다고 생각하면 된다.

[…[1, 2, 3]]은 [1,2,3]에 해당한다.

onSubmit

form이 submit됐을 때 실행할 함수를 지정해줄 수 있다.

submit버튼을 누르거나 input에서 enter를 치면 submit된다.