nvm is a version manager for node.js https://github.com/nvm-sh/nvm

node 버전 지정해서 설치하기

$ nvm install 10.16.3 $ nvm install 10 // 10.x 의 마지막 버전

node 최신버전 설치

$ nvm install node $ nvm install --lts // lts 최신버전

설치된 node.js 목록 확인하기

$ nvm ls

설치할 수 있는 모든 node 버전 조회

$ nvm ls-remote

특정 버전의 node 사용하기

$ nvm use $ nvm current // 현재 사용중인 버전 확인하기 $ nvm uninstall // 필요없는 node 버전 삭제하기

설치되어 있는 가장 최신버전의 node를 디폴트로 사용하기

$ nvm alias default node $ nvm alias default 10.16.3

node.js 설치 경로 확인하기

$ which node

Linter

Formatting rules, Code quality rules https://eslint.org/

Prettier

An opinionated code formatter https://prettier.io/

setup

vscode 마켓 플레이스에서 eslint, prettier 플러그인 설치 npm install --save-dev eslint-config-prettier eslint-plugin-prettier

root 폴더에 .eslintrc.js 생성

  module.exports = {
  parserOptions: {
    ecmaVersion: "latest",
  },
  env: {
    browser: true,
    node: true,
  },
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
};

root 폴더에 .prettierrc 생성

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true, 
  "singleQuote": true, 
  "trailingComma": "all", 
  "bracketSpacing": true, 
  "arrowParens": "avoid", 
  "proseWrap": "never", 
  "endOfLine": "auto"
}

입력

console.log(this)

출력

Window 객체

this값은 기본적으로는 window 객체입니다. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역객체이다.

2. 함수 This

입력

function main() {
  console.log(this);
}

main();

출력

this값은 함수를 호출한 객체이기에 전역에서와 마찬가지로 Window를 출력한다.

strict mode

"use strict";

function main() {
  console.log(this);
}

main();

출력

strict mode는 자바스크립트 코드를 실행할 때 발생하는 일부 문제를 잡고 오류를 줄이기 위한 특별한 모드이다.

정상 출력을 원하면 window.main()을 사용해야 한다.

3. 객체 메소드 This

입력

const object = {
  name: '객체',
  main: function () {
    console.log(this);
  },
};

object.main()

출력

this값은 함수를 호출한 객체이기에 main함수를 호출한 object객체를 출력한다.

입력2

function main() {
    console.log(this);
}

const object = {
  name: '객체',
  subObject: {
    name: '하위객체',
    main,
  }
};

object.subObject.main();

출력

4. 이벤트 핸들러 This

입력

const btn = document.querySelector("#btn");
btn.addEventListener("click", function () {
  console.log(this);
});

출력

이벤트 핸들러에서 this는 이벤트를 받는 HTML 요소를 가리킨다.

5. 화살표함수 This

입력

const object = {
  name: '객체',
  showTime(s) {
   setTimeout(()=>{
    console.log(this.name);
   }, s);
  }
};

object.showTime(10);

출력

객체

화살표함수에서의 this는 상위 실행컨텍스트의 this를 가리킨다. setTimeout의 상위 실행컨텍스트는 showTime이다. showTime은 객체 메소드 에서 사용되었기에 this는 object를 가리킨다.

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

스토리북은 UI 구성 컴포넌트와 페이지를 개별적으로 구축하기 위한 프론트엔드 개발도구이다.

advantage

1. 독립적인 환경에서 컴포넌트를 다룰 수 있다.
2. 컴포넌트 문서화, 테스트가 가능하다
3. figma 연동이 가능해 디자이너와 커뮤니케이션에 효율적이다.

1. Setup and Start

• npx storybook@latest init

• npm run storybook

2. Guide

1. main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

2.preview.ts

import type { Preview } from "@storybook/react";

// global하게 적용되는 포맷을 설정할 수 있다.
const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

3.example.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';

import { YourComponent } from './YourComponent';

//👇 This default export determines where your story goes in the story list
const meta: Meta<typeof YourComponent> = {
  component: YourComponent,
  title: "Title"
};

export default meta;
type Story = StoryObj<typeof YourComponent>;

export const FirstStory: Story = {
  args: {
    color:" black"
    size: "small"
  },
};

공식문서 https://storybook.js.org/docs/get-started/why-storybook 리액트번역 문서 https://storybook.js.org/tutorials/design-systems-for-developers/react/ko/introduction/

로딩

프론트 단에서 중요한건 Load, Proccesing Event 최적화 HTML -> CSS -> Javascript 순으로 parsing (Dom Tree + CSSOM Tree) + Render Tree

*브라우저 기준 최적화 *

방법 1 스크립트 head태그 -> body태그 or async+head태그

방법 2 css 외부 스타일 -> inline 스타일

사용자 기준 최적화

방법 1 SSR 고려

방법 2 PWA 고려

렌더링

방법 1 강제 동기 레이아웃 (레이아웃 과정이 끝나기 전에 자바크스립트 파일에서 DOM 요소의 위치나 크기값을 변경 후 바로 가져오려 하면 강제로 레이아웃을 발생시킴)

강제동기 레이아웃 유발 코드는 한번만 사용 후 캐싱

방법 2 Dom 변경을 최소화(virtual Dom 사용)

방법 3 worker-loader 사용 (wep pack)

[출처] https://www.youtube.com/watch?v=G1IWq2blu8c&t=2093s

리액트 쿼리란? it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. 현재 TanStack Query라는 명칭으로 변경되었으며 v5버젼까지 업데이트 되었다. 매번 업데이트마다 자주 변경되니 공식문서를 자주 참고하면 좋다.

Install

$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query

QueryClient

QueryClientProvider

QueryClient가 인스턴스를 생성, QueryClientProvider를 통해 앱 전체에서 생성한 QueryClient에 접근 가능하도록 해준다.

import {
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { getTodos, postTodo } from '../my-api'

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

UseQuery

데이터 fetching시 사용

queryKey v4 이후로는 배열로 선언, 쿼리의 고유 키 애플리케이션 전체에서 쿼리를 다시 가져오고, 캐싱하고, 공유하는 데 내부적으로 사용됩니다.

queryFn data fetching 하는 함수

status isPending: 쿼리에 아직 데이터가 없습니다. isError: 쿼리에 오류가 발생했습니다. isSuccess: 쿼리가 성공했고 데이터를 사용할 수 있습니다.

import { useQuery } from '@tanstack/react-query'

function Todos() {
  const { isPending, isError, data, error } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodoList,
  })

  if (isPending) {
    return <span>Loading...</span>
  }

  if (isError) {
    return <span>Error: {error.message}</span>
  }

  // We can assume by this point that `isSuccess === true`
  return (
    <ul>
      {data.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  )
}

UseMutation

서버의 데이터를 변경할 때 사용 HTTP POST, PUT, DELETE 요청 가능.

import { useMutation } from '@tanstack/react-query'

 const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
        console.log('Success')
        onError: () => { console.error('Error') },
          onSettled: () => { console.log('Settled') } //결과와 상관없이 실행
    },
  })

DevTools

Install

$ npm i @tanstack/react-query-devtools
# or
$ pnpm add @tanstack/react-query-devtools
# or
$ yarn add @tanstack/react-query-devtools

Setup

import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      {/* The rest of your application */}
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}

React Query Guide

https://tanstack.com/query/latest https://github.com/ssi02014/react-query-tutorial

개발자들은 문제 해결을 하는 직업이라 많이 표현한다. 그렇다면 문제라는 것은 무엇인가?

"문제란 바라는 것과 인식한 것의 차이. 문제를 해결한다는 것은 바라는 것과 인식한 것을 일치시키는 것."

그렇다면 문제를 해결할려면?

다양한 문제를 많이 풀어봐야 한다.

문제)

9L의 물통과 4L의 물통이 있을 때, 6L의 물을 정확히 만들려면 어떻게 해야하는가? (물의 양은 무제한이라 가정한다.)

한번 해결을 해보고 내려주세요 !

풀이)

1. 먼저 요구하고 있는 것으로부터 시작해서 그것을 이미 찾은 것 처럼 가정하자L의 물이 차있다고 생각해보자.

2. 원하는 결과는 어떤 전제로부터 이끌어 낼 수 있는지 질문한다. 즉 4L의 물통에 1L만 물을 덜어낸다면 3L의 물을 뺀 6L의 물을 남길 수 있을것이다.

3. 9-4-4를 하면 1L의 물이 남는다 1L의 물만남는다면 앞서 생각 한 것처럼 3L는 만들수 있게 된다.

이러한 해결방법을 "거꾸로 연구하기" 라고 칭한다.

거꾸로 연구하기

1. 요구하고 있는 것으로부터 시작해서 그것을 이미 찾은 것처럼 가정한다.
2. 원하는 결과는 어떤 전제로부터 이끌어 낼 수 있는지 질문한다.

이 방법을 테스트 코드 작성에 적용하면,

1. 실패하는 테스트를 작성한다. (요구하고 있는 것)
2. 테스트를 통과시킨다. (이미 찾은것 처럼 가정)
3. 리펙토링 한다. (어떤 전제로부터 이끌어 낼 수 있는지 질문)

TDD 첫 테스트 작성에 막막하다면, 이 단계를 따르면 도움이 될 것 같다.

내가 강의를보고 느낀점은 TDD가 단순 프로젝트에서의 에러 해결뿐 아니라 프로젝트의 진행방향, 코드의 가독성 및 퍼포먼스, 코드작성의 아이디어 등에서 도움이 된다고 많이 느꼈다. 다음 프로젝트에선 TDD를 고려해봐야지..

[출저] 인프콘2023 안타깝게도 오늘의 TDD는 실패한 것 같군요. 내일은 가능할지도...? (한윤석)

자바스크립트 = 논블로킹, 싱글스레드 언어

Call Stack: 자바스크립트 엔진이 코드실행을 위해 사용하는 스택 메모리 구조

(LIFO, Last In First Out)을 따른다.
Memory Heap: 동적으로 할당된 변수, 함수 등이 저장되는 공간
Wep Apis: 브라우저에서 제공하는 API들, 비동기적으로 실행되는 작업 관리

자바스크립트 엔진이 아닌 브라우저에서 제공해준다.
Callback Queue: 비동기적으로 실행된 함수들이 대기하는 공간

Task(Macro) Queue : setTimeout, setInterval, fetch, addEventListener 와 같이 비동기로 처리되는 함수들의 콜백 함수가 들어가는 큐

Microtask Queue : promise.then, process.nextTick, MutationObserver 와 같이 우선적으로 비동기로 처리되는 함수들의 콜백 함수가 들어가는 큐 (처리 우선순위가 높음)
Event Loop: 브라우저의 동작 타이밍을 관리해주는 관리자 역할

Call Stack이 비면 Callback Queue의 첫번째 콜백을 Call stack에 넣는다.

DOM + CSSOM => Render Tree

CSR(Clien Side Rendering)

클라이언트에서 HTML파일 렌더링을 진행한다.

장점

• 첫 페이지 이후 로딩속도가 빠르다.
• 페이지 이동시 화면이 깜빡임이 없어 좋은 사용자 경험을 제공한다.

단점

• 첫 페이지 로딩 속도가 느리다.
• SEO에서 단점을 가진다.

SSR(Sever Side Rendering)

*서버에서 HTML파일을 렌더링을 진행한다. * 장점

• 첫 페이지 로딩 속도가 빠르다.
• SEO에서 이점을 가진다.

단점

• 서버 부하가 높아진다.
• 페이지 이동시 화면이 깜빡여 사용자 경험이 저하된다.

SSG(Static Side Genetation)

*빌드하는 순간 기점으로 서버에서 HTML 렌더링 된 정적 페이지 * 장점

• SSR는 빌드시 HTML이 생성되고 요청마다 재사용한다.
• CDN 캐시, SEO, 페이지 로딩 등의 이점

단점

• 정적 페이지기에 동적 데이터가 제한 된다.
• 사용자별로 달라지는 정보 제공이 어렵다. (ex: mypage)

ISR(Incremental Static Regenetation)

** SSG와 비슷하지만 서버에서 정적 페이지를 정기적으로 다시 빌드한다. ** 장점

• 개인페이지, 블로그등의 자주 변경되지 않는 동적 페이지에 효율적
• CDN 캐시, SEO, 페이지 로딩 등의 이점

단점

• 정기적으로 빌드를 하지만 여전히 최신 데이터를 로드하지 못한다.
• 여전히 사용자별로 달라지는 정보 제공이 어렵다. (ex: mypage)

-사용자 경험이 중요하며 클라이언트의 상태 변경이 잦은 경우 CSR -첫 페이지 로딩 속도, SEO가 중요한 경우 SSR -컨텐츠 내용이 변하지 않고, 빠른 HTML가 필요한 경우 SSG -컨텐츠가 동적이지만 자주 변경되지 않는 경우 ISR

var today = new Date();
console.log(today);
// 결과 : Thu May 16 2019 17:22:10 GMT+0900 (한국 표준시)

Date 객체는 생성자 함수이다. Date 생성자 함수는 날짜와 시간을 가지는 인스턴스를 생성한다. 생성된 인스턴스는 기본적으로 현재 날짜와 시간을 나타내는 값을 가진다. 현재 날짜와 시간이 아닌 다른 날짜와 시간을 다루고 싶은 경우, Date 생성자 함수에 명시적으로 해당 날짜와 시간 정보를 인수로 지정한다.

현재 날짜 출력

var today = new Date();

var year = today.getFullYear();
var month = ("0" + (today.getMonth() + 1)).slice(-2);
var day = ("0" + today.getDate()).slice(-2);

var dateString = year + "-" + month + "-" + day;

console.log(dateString);
// 결과 : 2023-12-28

getMonth()함수는 0~11월을 출력하기에 +1을 해줘야함. 0을 붙이고 slice(-2)를 해줌으로서 뒤에서 2개만 필터링 되기에, 6월이 아닌 06월이 출력된다.

현재 시간 출력

var today = new Date();   

var hours = ('0' + today.getHours()).slice(-2); 
var minutes = ('0' + today.getMinutes()).slice(-2);
var seconds = ('0' + today.getSeconds()).slice(-2); 

var timeString = hours + ':' + minutes  + ':' + seconds;

console.log(timeString);
// 결과 : 16:37:51

시간 또한 마찬가지로 0을 붙이고 slice(-2)를 해줌으로서 뒤에서 2개만 필터링 되기에, 앞에 0을 붙여줄 수 있다.

cookie

웹에 접속할 때 생성되는 정보를 담고 있는 임시 파일이다. 서버를 대신해 사용자의 웹 브라우저에 정보를 저장한다.

sesion

쿠키와 반대로 웹 브라우저가 아닌 서버의 메모리에 세션 ID를 저장한다.

JWT

Json format으로 사용자에 대한 정보를 저장할 수 있는 웹토큰. 서버에서 클라이언트에게 인증이 되면 토큰을 부여한다.

Cookie & Session vs JWT

Cookie & Session

1. 사용자가 서버에 로그인을 요청한다.

2. 서버에서 사용자를 확인한 후 사용자의 고유한 Id를 부여하여 세션 저장소에 저장한 후 이와 연결된 세션Id를 발급한다.

3. 사용자는 서버에서 해당 세션Id를 받아 쿠키에 저장한 후, 인증이 필요한 요청마다 쿠키를 헤더에 실어 보낸다.

4. 서버는 쿠키를 받아 세션 저장소에서 대조 후 대응되는 정보를 가져온다.

5. 인증이 완료되면 서버는 사용자에 맞는 데이터를 보내준다.

장점

• 서버쪽에서 Session 통제가 가능하다.
• 네트워크 부하가 낮다.

단점

• 서버에서 세션 저장소를 사용하기에 요청이 많아지는 경우 서버에 부하가 심해진다.

JWT

1. 사용자가 서버에 로그인을 요청한다.

2. 서버측에서 사용자에게 유일한 토큰을 발급한다.

3. 클라이언트는 서버측에서 전달받은 토큰을 쿠키나 스토리지에 저장해두고, 서버에 요청을 할 때마다 해당 토큰을 HTTP요청 헤더에 포함시켜 전달한다.

4. 서버는 전달받은 토큰을 검증하고 요청에 응답한다. 토큰에는 요청한 사람의 정보가 담겨있어서 서버는 DB를 조회하지않고 누가 요청했는지 알 수 있다.

장점

• hearder와 payload를 지니기에 데이터 위변조 막을수있다.
• 별도의 저장소가 필요하지 않다.

단점

• 요청이 많아지면 토큰의 길이가 길기에 네트워크 부하가 심해진다.
• 토큰 탈취시 대응이 어렵다.

let isCamelCase;

두번째 단어부터 대문자로 시작하여 구분

2. Snake Case(스네이크 케이스)

let is_my_name;

단어와 단어 사이를 _를 이용하여 구분

3. Pascal Case(파스칼 케이스)

let IsPascalCase;

모든 단어의 시작을 대문자로 작성하여 구분

파일 확장자

• 소문자로 작성한다.

  helloword.png
  busan.pdf

  변수 및 함수

  • 변수 및 함수는 CamelCase를 사용한다.

let helloNumber;
function isButton()

상수

• 상수는 PascalCase, SnakeCase를 사용한다.

const MY_ROLE;

클래스

• 클래스 및 생성자는 PascalCase를 사용한다.

class User {
  constructor(options) {
    this.name = options.name;
  }
}

const good = new User({
  name: 'yup',
});

** 에어비엔비 자바스크립트 스타일 가이드** https://github.com/airbnb/javascript

변수나 함수의 호출 코드가 선언 코드보다 아래쪽에 있음에도 불구하고 에러가 발생하지 않고, 마치 선언 코드가 호출 코드보다 더 위에 선언된 것과 같이 동작하는 특성을 호이스팅(Hoisting) 이라고 한다.

자바스크립트에서 변수(variable)는 3가지 단계를 걸쳐 생성된다.

선언 단계

변수를 실행 컨텍스트의 변수 객체에 등록하는 단계이다. 이 변수 객체는 스코프가 참고하는 대상이 된다.

초기화 단계

실행 컨텍스트에 존재하는 변수 객체에 선언 단계에서 생성된 변수를 위한 메모리를 만드는 단계이다. 이 단계에서 할당된 메모리에 undefined 를 할당한다.

할당 단계

초기화 단계에서 undefined로 초기화된 메모리에 다른 값을 할당하는 단계이다.

console.log(a); // undefined
var a = 3;

var를 이용하여 선언한 변수는 선언과 동시에 초기화 단계가 진행된다. 그러므로 자바스크립트 내부적으로 실행 콘텍스트의 변수 객채에 변수를 등록하는 동시에 메모리를 undefined로 만들어버린다. 그렇기 때문에 변수에 값이 할당되기 전에 호출해도 Reference 에러가 발생하지 않고, undefined가 리턴된다.

console.log(a); // ReferenceError: Cannot access 'greeting' before initialization
let a = 3;

console.log(a); // ReferenceError: Cannot access 'greeting' before initialization=
const a = 3;

반면 let, const를 이용하여 선언한 변수는 var와 다르게 선언 단계와 초기화 단계가 분리되어 진행된다. 실행 컨텍스트의 변수 객체에 변수를 등록했지만, 메모리에 할당되지 않아 접근할 수 없다. 그래서 Reference Error: Cannot access before initialization 에러 문구가 나오는 것이다. 즉, 호이스팅 되지 않는 것이 아니라, 호이스팅은 되었으나 메모리가 할당되지 않아 접근할 수 없는 것이다. 이때 등장하는 개념이 TDZ 이다.

TDZ

한글로 직역하자면 일시적인 사각지대이다. 스코프 시작 지점 에서 초기화 시작 지점 까지를 TDZ(Temporal Dead Zone) 라고 한다.

dx = [-1,1,0,0]
dy = [0,0,-1,1]
for i in range(4):
    nx = x + dx[i]
    ny = y + dy[i]

       if (0<= nx < w and 0<= ny < h):
           dfs(nx, ny)

자바스크립트로 graph를 처음 풀어봐 파이썬과 동일하도록 이렇게 구현했었다.

const dx = [-1,1,0,0]
const dy = [0,0,-1,1]

for(let i =0; i<4; i++){
    nx = x + dx[i]
    ny = y + dy[i]
}

if (0<= nx < w && 0<= ny < h){
      dfs(nx, ny)
}

(0<= nx < w && 0<= ny < h)

이부분에서 파이썬과 동일하게 동작하지 않아 이유를 찾아보니..

자바스크립트에서는 비교 연산자인 "<"를 연속해서 사용하여 여러 개의 비교식을 연결할 수 없다고 한다.

결국 "0 <= nx < w && 0 <= ny < h"와 같은 표현은 자바스크립트에서 예상한 대로 동작하지 않는다.

if (0<= nx && nx < w && 0<= ny && ny < h){
      dfs(nx, ny)
}

따라서 다음과 같이 사용해야 한다.