넓은 타입에서 좁은 타입으로 타입을 좁히는 과정에 대해 알아보자

타입 좁히기

function func1 (value: string | number) {
  value.toFixed();
  value.toUpperCase();
}

위와 같은 함수가 있고 value의 타입은 string, number 로 되어있기에 해당 타입에 대한 메서드를 실행을 하면 오류를 발생한다.

• value는 string, number가 합쳐진 타입을 기대하는 반면 해당 메서드는 각각의 타입에서만 독립적으로 쓸 수 있는 메서드이기 때문이다 그렇기에 다음과 같이 조건문을 통해 타입을 좁혀서 사용을 할 수 있다.

function func1 (value: string | number) {
    if(typeof value == "string") {
        value.toUpperCase();
    } else if (typeof value == "number") {
        value.toFixed
    }
}

• 위와 같이 조건문을 이용해 조건문 내부에서 변수가 특정 타입임을 보장해주기에 이를 통해 타입이 좁혀질 수 있다.

instanceof

instanceof를 통해 내장 클래스 타입에 대한 타입 좁히기가 가능하다.

function func2(value: Date | null) {
    if(typeof value == "object") {
        value.getTime();
    }
}

위 코드는 오류를 발생을 한다 왜일까? 전 처럼 타입을 조건문을 통해 좁혔는데,, value값을 보게 되면 null일 수 있기때문이다 그럼 이러한 내장 클래스에 대해선 어떻게 타입을 좁힐 수 있을까?

function func2(value: Date | null) {
    if (value instanceof Date) {
        value.getTime();
  }
}

• instanceof 를 사용하면 내장 클래스의 타입을 보장할 수 있게 된다.
• instanceof 를 우리가 직접 만든 클래스에는 사용할 수 없다.

in type guard

우리가 직접 만든 클래스에 타입을 보장 하려면 in을 사용하여 좁힐 수 있다.

type Glass = {
    name: string;
      color: string;
}

function func3(value: Glass | null) {
    if (value && "color" in value) {
        console.log(value.name)
    }
}

• 위와 같이 value의 타입을 우리가 만든 타입에 대해 적용을 하고 싶다면 value값이 존재하고 && value값이 우리가 만든 타입안의 값이 있는지에 대한 여부를 검사한다.

타입 단언?

빈 객체에 어떠한 타입이라고 단언해주기

어떠한 타입이 정의되어 있는 객체에서 그 객체를 초기화 한 상태는 빈 객체로 저장하고 싶을때 타입 스크립트는 다음과 같은 코드를 보고 오류를 발생시킨다.

type Korea = {
    name: string;
      city: string;
}

let korea:Korea = {};

korea.name = "대한민국";
korea.city = "서울";

• 빈 객체로 타입이 추론 되기에 name, city에 접근을 할 수 없다. 그럼 어떻게 해야할까?
• 타입 단언 을 통해 오류를 개선해보자

type Korea = {
    name: string;
      city: string;
}

let korea:Korea = {} as Korea;

korea.name = "대한민국";
korea.city = "서울";

위와 같이 값 as 타입 을 통해 원하는 타입으로 단언을 할 수 있게 된다.

타입 단언시 조건

A as B로 타입을 단언 했을 때 다음 조건을 만족해야한다.

• A가 B의 슈퍼타입
• A가 B의 서브타입

말이 뭔가 어려운데 그냥 이러한 타입일 것이다 라고 말하는 것이고, 즉 서로 관계가 없는 타입에 대한 단언만 하지 않게 되면 문제는 발생하지 않을 것이다.

const 단언

특정 값을 const 타입으로 단언하게 되면 변수를 const로 선언한 것과 빅슷하게 타입이 변경된다.

let apt = {
    name: "자이",
      place: "방배동",
} as const;
// 모든 프로퍼티가 readonly를 갖게 되며 그렇기에 값을 수정, 할당하는 행위는 불가하다.

Non Null 단언

어떠한 값이 있을수도 있고 없을수도 있는 상황에서 이 값은 undefined, null이 아닐것이라고 단언할 수 있다.

type Person = {
    name: string,
      gf?: string,
};

let person: Person = {
    name: "현",
      gf: "있을수도있고 없을수도있고",
};

const len: number = person.gf?.length; // 오류를 발생시킨다.

const len: number = person.gf!.length;

• !를 통해 이 값이 undefined, null 아니라고 단언하기

어떤 객체타입을 다른 객체타입으로 취급해도 괜찮은가에 대해

type Korea = {
    이름: string;
      코드: number;
}

type Dokdo = {
    이름: string;
      코드: number;
      소속: string;
}

let korea: Korea = {
    이름: "대한민국",
      코드: 82,
}

let dokdo: Dokdo = {
    이름: "독도",
      코드: 82,
      소속: "대한민국",
}

위와 같이 korea와 dokdo라는 객체가 존재한다 이떄 객체간의 호환성을 알아보자

dokdo = korea

• 위의 코드는 오류를 발생한다 왜 일까?

나는 처음에 이것을 보고 프로퍼티가 더 있기에 이것이 더 큰 포함이라 생각을 했었지만, dokdo객체는 korea객체가 가지는 프로퍼티를 포함하고 추가적인 프로퍼티가 있기에 korea객체가 더 큰 집합이라고 볼 수 있다 따라서 korea = dokdo 가 맞는 코드인 것이다.

프로퍼티가 적은(조건이 더 적은) 타입이 슈퍼타입인 것이다.

대수 타입

여러개의 타입을 합성해서 새롭게 만들어낸 타입 이 타입에는 합집합, 교집합이 존재한다.

합집합(Union) 타입

| 를 이용하여 유니온 타입을 정의할 수 있다.

let union :string | number | boolean;
let number: number = 10;

union = "이렇게 문자도 쓸 수 있고";
union = 1234;
union = "이렇게 숫자도 쓸 수 있고";
union = true;
union = "이렇게 참 거짓도 쓸 수 있다";

교집합(Intersection) 타입

&를 이용하여 인터렉션 타입을 정의할 수 있다.

let value: number & string;

숫자타입과 문자타입의 공통적인 요소가 있을까? -> 존재하지 않는다. 그렇기에 never 타입으로 추론이 된다. 대체적으로 기본 타입들에는 서로 공통적인 요소가 없기에 인터렉션 타입은 보통 객체 다팁들에 자주 사용된다.

그럼 이제 객체에서의 인터렉션 타입을 알아보자

type Dog = {
    name: string;
    old: number;
};

type Person = {
    name: string;
    birth: string;
};

type Intersection = Dog & Person;

let intersection1: Intersection = {
    name: '',
    old: 1,
    birth: '',
};

• 서로의 공통된 집합만을 타입으로 가질 수 있다.

타입 추론

타입스크립트는 정의가 되어있지 않은 변수의 타입을 자동으로 추론한다. 변수의 초기값을 통해 추론을 할 수 있다.

타입 추론이 가능한 상황들에 대해 알아보자

1. 변수선언

변수 선언의 경우 초기값을 통해 타입을 추론한다.

let num = 10;
// number 타입으로 추론

let str = "string";
// string 타입으로 추론

let book = {
      name: 'Deep Dive',
      price: 20000,
      lang: 'JavaScript',
}
// 각각의 name, price, lang은 초기값을 통해 각각의 타입을 가지는 객체로 추론

2. 구조 분해 할당

let {name, price, lagn} = book;

let [one, two, three] = [1, true, "string];

• 위와 같이 객체, 배열을 구조 분해 할당을 하여도 타입이 추론이 가능하다.

3. 함수의 반환값, 함수에서의 매개변수

function func() {
    return "TS Study";
}

• 위와 같은 함수 반환값의 타입은 return 문을 기준으로 추론이 된다.

function func(ts = "TS Study") {
    return "TS Study";
}

• 기본값이 설정이 된 매개변수의 타입은 기본값을 기준으로 추론이 되지만, 기본 값이 설정이 되지 않으면 오류를 발생시킨다.

암시적 any Type

let any;

• 위와 같은 코드가 있다고 생각을 해보자 이는 초기값이 없기에 any 타입으로 추론이 된다.
• 여기서 변수를 추가 할당해보자

let anyValue;

anyValue = 9;
Math.sqrt(anyValue);
anyValue.toFixed();

anyValue = anyValue.toString();
anyValue.toUpperCase();
anyValue.toFixed(); // 오류 발생 

• 왜 toFixed 가 위에선 오류가 없고 밑에선 오류가 생길까?
• 이는 암시적으로 any 타입으로 추론을 하기 때문이다.
• 두번째 줄에서 anyValue 에 넘버타입의 값을 넘겨줘서 그 이후부터는 anyValue 를 number 타입으로 추론을 하기 시작
• anyValue 를 문자열로 바꾸게 되면 문자 타입으로 추론 그렇기에 number타입에 사용하는 메서드인 toFixed 가 오류를 발생 시키는 것이다.

user의 정보를 담고 있는 객체를 한 번 만들어 보자

let user:object = {
    id: 1,
      name:'현',
}

이렇게 만들어 버리면 문제가 발생해버린다

'object'형식에 'id'속성이 없다

• 타입을 object로 정의를 하면 이 요소는 객체인것만 알려주고 더이상의 정보는 주어지지 않기 떄문이다.

let user: {
    id:number;
      name:string;
} = {
    id:1,
      name:'김동현',
}

위와 같은 방식을 객체리터럴 방식이라고 하며 이렇게 했을 시 객체에 요소에 접근할 수 있고 요소가 어떠한 타입을 가지는지 알 수가 있다.

선택적 프로퍼티(Optional)

만약 객체를 생성했고 어떠한 값을 받게 되는데 이 값이 있어도 되고 없어도 되는 상황이라면 어떻게 해야할까?

let user: {
    id?: number;
      name: string;
} = {
    id:1,
      name:'김동현',
}

• 이 말은 id는 있어도 되고 없어도 되지만, 만약 있게 된다면 number의 타입을 갖는 값이여야한다는 점이다.

읽기 전용 프로퍼티(readonly)

이 객체의 값에서 수정이 되면 안되는 값이 있다면??

let config = {
    readonly apiKey = string;
} = {
    apiKey: "MY API KEY",
}

• 이렇게 객체의 프로퍼티 값을 readonly 를 하게 되면 읽기 전용 속성이므로 어떠한 값을 할당 할 수 없다.

타입 별칭

유저의 정보에 대한 객체의 타입을 지정함에 있어서

let user1: {
  id: number;
  name: string;
  nickname: string;
} = {
  id: 1,
  name: '김동현',
  nickname: 'ddd',
};

let user2: {
  id: number;
  name: string;
  nickname: string;
} = {
  id: 2,
  name: '동현',
  nickname: 'hhh',
};

이렇게 되어버리면 중복되는 유저의 타입이 거슬릴 수 밖에 없다 이럴때엔 타입을 변수처럼 사용하여 중복된 타입을 줄일 수 있다.

type User = {
  id: number;
  name: string;
  nickname: string;
};

이 값을 마치 변수 처럼 타입 지정할 수 있게끔 할 수 있다.

인덱스 시그니처

객체의 타입을 지정하는데 그 객체의 value와 key값의 타입의 규칙을 통해 쉽게 타입을 정할 수 있다.

let 대한민국 = {
    서울: "특별시",
      대전: "광역시",
      부산: "광역시",
      대구: "광역시",
      독도: "우리땅",
}

위 대한민국 객체를 보면 value,key값 또한 string이기에 다음과 같이 타입을 정의할 수 있다.

type Korea = {
    [key: string] : string,
};

let 대한민국:Korea = {
    서울: "특별시",
      대전: "광역시",
      부산: "광역시",
      대구: "광역시",
      독도: "우리땅",
}

배열에 들어가는 요소들의 타입이 같을 경우

let numArr:number[] = [1, 2, 3];
let strArr:string[] = ["hello", "world"];
let boolArr:Array<boolean> = [true, false, true];

• 배열타입을 명시하는데에는 두가지 방법이 있다
  • 요소의 타입 + []를 사용한 가장 기본적인 방법
  • Array<배열의 요소 타입> - 제네릭 방법

이 두가지 방법이 존재하지만, 기본적인 방법이 간단하기에 주로 쓰인다.

배열에 들어가는 요소들의 타입이 다양할 경우

let nultiArr:(number | string) = [1, "Hello"];
let doubleArr: number[][] = [[1,2,3],[4,5]];

튜플

길이와 타입이 고정된 배열

let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, "str", true];

• 튜플로 정의된 배열은 타입 또는 길이가 벗어나면 오류를 발생한다.
• 자리 또한 지켜지기에 순서를 지키는게 중요할 때 튜플타입을 통해 값을 잘못 넣지 않도록 방지할 수 있다.

ROUTING의 사전적 의미는 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정이다. ROUTER의 사전적 의미는 데이터의 경로를 실시간으로 지정해주는 역하을 해주는 무언가

즉 라우팅이란 데이터의 경로를 정해주는 행위

MPA(멀티페이지어플리케이션)에서의 페이지 라우팅

웹사이트에 접속한다는 것은 브라우저를 통해서 웹서버에 경로를 요청하고, 해당 웹 문서를 받아보는 과정이라고 할 수 있다.

SPA(싱글페이지어플리케이션)에서의 페이지 라우팅

어떠한 페이지를 요청하더라도 index.html을 내보내준다. 또한 서버와 통신 없이 브라우적 알아서 렌더링을 해준다. -> 페이지 전환이 빠르다 데이터가 필요한 페이지일 경우 해당 필요한 데이터만 서버와 통신해서 렌더링 하게 해준다.

Reacr Router Dom의 유용한 기능에 대해 알아보자

React에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리이다.

Path Variable (feat. useParams)

URL의 일부를 동적으로 처리하기 위해 사용된다.

// 라우팅하는 상위 컴포넌트 파일

<Route path="동적으로원하는경로/:동적인 값"/>

// 해당 동적인 값을 설정하는 컴포넌트 파일

import { useParams } from "react-router"

const 컴포넌트이름 =() => {
    const { 동적인값 } = useParams();
      console.log(동적인값);
};

위와 같이 코드를 구성하게 되면 해당 프로젝트의 url에서 /해당폴더이름/동적인값 에 들어가게되면 콘솔 창에 해당 동적인 값을 들고 올 수 있게 된다.

--> 매개변수를 기반으로 서로 다른 컴포넌트를 렌더링할 수 있게 된다.

Query String (feat. useSearchParams)

페이지에 데이터를 전달하는 가장 간단한 방법이다.

ex) www.아무페이지이름.com/?id=10&~ 이렇게 되어져 있는데 path variable과 다른점은 라우팅이 자동으로 래핑이 되어져있다는 점이다. ? 뒤에 있는 경로들은 페이지 라우팅에 영향을 주지 않는다는 점

해당 데이터를 수정하는 페이지를 만든다고 했을 때 그 특정 동적인 값을 끌고 와야하는 상황에서 query string을 통해 라우팅을 설정해보자

ex-url)www.페이지이름.com/페이지이름?id=10

import { useSearchParams } from 'react-router-dom';

const 컴포넌트이름 = () => {
    const [searchParams, setSearchParams] = useSearchParams();

      const id = searchParams.get("id");
      console.log("id"); // 10
};

이렇게 사용을 해서 페이지에 어떠한 값을 전달할 수 있게끔 도와준다.

그럼 이제 이 동적인 값을 변경을 해보자

useState()와 같이 생긴 useSearchParams()를 통해 동적인 값 변경하기

<button onClick={setSearchParams({ 이걸로: '바굽니다' })}>QS</button>

그럼 이제 url이 ?이걸로=바꿉니다로 변경되는것을 볼 수 있다.

Page Moving (feat. useNavigate)

useNavigate() => 로케이션을 변경하는 값을 반환한다

const navigate = useNavigate();

if(userID == '') {
    navigate('/로그인이 없는 경우 보내줄 페이지 경로')
}

Link컴포넌트와 달리 특정 상황에서 이런식으로 페이지를 강제로 보낼 수 있게금 할 수 있을 것 같다

기존 사용 방법

import { IconName } from 'react-icons/IconCategories'

위와 같이 아이콘 이름 + 아이콘의 카테고리를 정해서 import를 하는데 뭔가 불편했고, 아이콘이 한두개면 괜찮지만 아이콘이 많아질수록 쌓여가는 아이콘 관련 import가 너무 불편했다.

다른 사람들은 어떻게 사용할까 하면서 찾아봤는데 원하는 답을 얻지는 못하였다

넵!

내가 개선한 방법 + 사용 방법

1. 가장 먼저 react-icons를 사용하기 위해 설치를 해보자

$ npm install react-icons

2. 내가 프로젝트에서 사용할 아이콘의 카테고리 및 아이콘 리스트를 정리를 한다.

나는 Font Awesome6를 사용하기로 했고, 아이콘들의 리스트를 정했다.

3. icon 스타일 + 리스트를 기본적으로 사용할 파일을 생성한다.

프로젝트마다 폴더 구조도 다르겠지만 나의 구조는 각각의 컴포넌트들의 기본 스타일 + 전체적으로 쓸 컬러 + 각각의 규칙을 정하여 theme 폴더에서 관리를 했고, 여기에 iocn를 추가하여 작성하였다

4. 내가 쓸 아이콘의 스타일을 정해보자

// themes/default/components/icon.js

import { FaAngleLeft, FaAngleRight, FaAngleUp, FaAngleDown, FaXmark, FaRegCircleXmark, FaPlus, FaMagnifyingGlass, FaBars, FaEye, FaEyeSlash, FaRotateRight, FaGear } from 'react-icons/fa6';

const baseStyle = {
  display: 'inline-flex',
  justifyContent: 'center',
  alignItems: 'center',
};

const iconTypes = {
  arrowLeft: FaAngleLeft,
  arrowRight: FaAngleRight,
  arrowUp: FaAngleUp,
  arrowDown: FaAngleDown,
  close: FaXmark,
  closeFill: FaRegCircleXmark,
  plus: FaPlus,
  search: FaMagnifyingGlass,
  hamburger: FaBars,
  visible: FaEye,
  unvisible: FaEyeSlash,
  refresh: FaRotateRight,
  system: FaGear,
};

const iconSizes = {
  lg: {
    width: '24px',
    height: '24px',
  },
  md: {
    width: '20px',
    height: '20px',
  },
  sm: {
    width: '16px',
    height: '16px',
  },
};

export default { baseStyle, iconTypes, iconSizes };

• 아이콘의 기본 스타일, 사이즈, 타입을 정의한다.

5. 전역으로 쓸 준비 + 폴더 구조 설명

// themes/default/index.js

import components from './components';
import tokens from './tokens';

export default {
  ...tokens,
  components,
};

• 내가 쓸 컴포넌트들의 기본 스타일 + 규칙들이 정해져있는 파일들을 export해준다

// themes/index.js

export { default as defaultTheme } from './default';

• 마지막으로 다시 이거를 deafultTheme로 묶어 export를 해준다.

import { createContext, useContext } from 'react';
import { defaultTheme } from '../themes';
import PropTypes from 'prop-types';

const ThemeContext = createContext();

// eslint-disable-next-line react-refresh/only-export-components
export const useTheme = () => {
  return useContext(ThemeContext);
};

export const ThemeProvider = ({ children }) => {
  return <ThemeContext.Provider value={defaultTheme}>{children}</ThemeContext.Provider>;
};

ThemeProvider.propTypes = {
  children: PropTypes.node, 
};

• 전역으로 쓰기 위해서 useContext를 사용하였고 해당 defaultTheme를 다른 컴포넌트에서 useTheme를 사용하여 쓸 수 있게 된다.

// App.js

import { ThemeProvider } from './theme/ThemeContext';

function App() {
  return (
    <ThemeProvider>
        {/* 각각의 프로젝트에 맞는 구성 */}
    </ThemeProvider>
  );
}

export default App;

• 프로젝트마다 상이할테니 생략된 점 최상위에서 ThemeProvider를 통해 전역 설정을 해준다.

6. Icon 컴포넌트를 내 입맛대로 설정해보자

가장 먼저 내가 고려한 것은 아이콘을 유동적으로 사용하기 위함이고 그게 아니였다면 그냥 주먹구구식 import를 사용해서 썼을 것이다. 컴포넌트를 사용하는게 편하게 사용하기 위함인데 너무 불편했었다.

나만의 Icon컴포넌트 emotion과 함께 응용하여 만들어보자

// components/Icon/Icon.jsx

import styled from '@emotion/styled'
import { useTheme } from '../../../theme/ThemeContext';

const StyledIcon = styled.span`
  ${(props) => props.theme.components.icon.baseStyle}

  .Icon {
    ${(props) => props.theme.components.icon.iconSizes[props.size]}
    color:${(props) => props.theme.colors[props.color]};
  }
`;

• react-icons를 통해 컴포넌트를 사용하면 svg 태그를 단독으로 렌더링 해주는데, 이거는 조금 별로 안 좋은 방법이고 입맛대로 수정하기 위해선 감싸는 태그가 하나 필요하기에 span를 통해 스타일을 해준다.

• 아이콘들에 따라 import를 하기 싫기에 name + size + color를 통해 나만의 컴포넌트로 설정해보았다.

• 해당 프로젝트에서 하나하나 width=""를 지정하기엔 너무 번거로우니 프로젝트의 일관성을 위해 정해진 size, color를 props를 받을 수 있게 한다.

// components/Icon/Icon.jsx

const Icon = ({ name, size, color }) => {
  const PREFIX = 'Icon';
  const theme = useTheme();
  const SelectedIcon = theme.components.icon.iconTypes[name];

  return (
    <StyledIcon size={size} theme={theme} color={color}>
      <SelectedIcon className={PREFIX} />
    </StyledIcon>
  );
};

Icon.defaultProps = {
  size: 'md',
  color: 'black',
};

Icon.propTypes = {
  name: PropTypes.string.isRequired,
  size: PropTypes.oneOf(['lg', 'md', 'sm']),
  color: PropTypes.string,
};

export default Icon;

• 기본 size, color를 정해두고 필요시마다 size, color를 조정한다

다르게 생각하는 사람도 있을것이다.

물론 이것보다 폴더구조를 간단하게 해서 iocn파일을 만들고 거기에서 icon 리스틀 정하고 Icon컴포넌트에 icon 리스트를 import를 해도 된다

하지만 정답은 없고 이러한 방법도 해보고 저러한 방법도 해봐야 어떤게 좋고 나쁨을 구분할 수 있기에 나는 전체적인 기본 스타일을 관리하는 파일이 있었으면 하는 생각에 이러한 구조를 선택하게 되었다.

7. Icon컴포넌트를 통해 이제 사용해보자

기본 스타일을 위한 다른 코드들은 생략을 한 점은 양해를 구한다.

// pages/components

import Icon from '../../components/hds/Icon/Icon';

const TestPages = () => {
  const theme = useTheme();

  return (
    <div>
      <StyledPreview theme={theme}>
        {Object.keys(iconMap).map((name, idx) => (
          <IconPreview key={idx} className="IconPreview">
            <Icon name={name} color={randomColor} />
            <p>{name}</p>
          </IconPreview>
        ))}
      </StyledPreview>
    </div>
  );
};
export default TestPages;

아주 잘 나옵니다 구우우욷

정답은 아니지만 확실히 import줄이 한줄로 끝이 났고 필요할 때 마다 유동적으로 쓸 수 있게되었다.

모든 질문 의견 환영합니다.

TypeScript 배워 보기 전에 왜 생겼는지에 대해 알아보자

JS를 쓰는 100명의 개발자 중 TS를 안쓰는 개발자는 10명밖에 안된다 즉 100명 중 90명이 TS를 사용하고있다.

JS는 원래 간단한 상호작용 정도로(웹브라우저에서만 실행) 처리하기 위해 개발 되었고 그렇기에 유연한 문법 + 자유로움이 있었다

Node.js가 생기고 나서 웹브라우저에서만 실행되던 JS가 이제 어디서든 구동기 가능해졌고 이로 인해 웹서버, 모바일 앱, 데스크탑 앱으로까지 개발이 가능해졌다 그러나 JS의 본질적 성질때문에 버그 가능성이 높아지면서 장점이 단점이 되어버렸고 이 단점을 극복하기 위해 생긴 것이 TS이다.

타입스크립트 = 자바스크립트의 확장판

자바스크립트를 더 안전하게 사용할 수 있도록 type관련 기능들을 추가한 언어

JS는 전세계적으로 가장 인기있는 프로그래밍 언어이다.

인기 많은 JS만으로 충분하지 않을까? TS 굳이 배워야하나?

응

타입(Type) 시스템

값들을 어떤 기준으로 묶어 타입을 규정할 것인가? 언어의 타입 관련된 문법 체계

• Number - 0.1, 1, 100
• Boolean - true, false
• String - "안녕", "그래"

정적 타입 시스템

코드 실행 이전 모든 변수의 타입을 고정적으로 결정 즉 엄격하고 고정적이다 ex) C,Java

동적 타입 시스템

코드를 실행하고 나서 그때 그때 마다 유동적으로 변수의 타입을 결정 즉 자유롭고 유연하다 ex) Python, JavaScript

TS의 타입 시스템

// index.js

let num = 1;
num.toUpperCase();

JS 에서는 위 코드가 코드 실행 전 아무런 표시가 뜨지 않는다.

TS는 어떠할까?

// index.ts

let num: number = 1;
num.toUpperCase();

toUpperCase부분에 빨간줄이 뜬다. 그렇지만 항상 매번 변수에 타입을 지정하는거는 너무 번거로운 일이지 않냐?

그렇지 않다.

// index.ts

let num = 1;
num.toUpperCase();

모든 변수에 타입을 일일이 지정할 필요가 없음

초기 값을 통해 타입을 추론

TS 동작 원리

TS 동작 원리를 알아보기 전 JS의 동작 원리에 대해 알아보자

JS 컴파일 과정

컴파일 - 우리가 쓰는 프로그래밍 언어를 컴퓨터가 이해하기 쉬운 형태(바이트 코드)로 변환하는 작업

1. JS코드를 AST(추상 문법 트리)로 변환
2. AST -> 바이트 코드로 변환 컴파일 종료

AST - 코드에 필요한 것을 제외(공백, 주석 등)

TS 컴파일 과정

1. TS코드를 AST(추상 문법 트리)로 변환
2. 변환된 AST에 대해 타입 검사 2-1. 타입에 오류가 있을 시 컴파일이 종료
3. 타입 오류가 없다면 AST를 JS로 변환 후 컴파일 종료

-> 타입 검사가 된 JS는 안전한 코드이기에 버그 발생 확률이 현저히 낮다

TS 컴파일러 옵션 설정

TS를 시작하기 앞서 이제 컴파일러 옵션에 대해 알아보자

해당 프로젝트에서 다음과 같은 명령어를 사용

tsc --init

이렇게 하게되면 tsconfig.json 파일이 생성되고 그 안을 열어보면 뭐가 많은데 그냥 다 삭제해버리자

컴파일러 옵션이기에 프로젝트에 따라 다르게 설정할 수 있으니 입맛대로 설정해보면서 어떠한 옵션이 있는지 알아보자

{
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "outDir": "dist",
        "strict": false,
        "moduleDetection": "force"
    },
    "include": ["src"]
}

하나하나 알아보자

target - 컴파일된 JS코드를 어떤 ECMAScript 버전으로 타겟팅할 지에 대한 설정 module - 컴파일된 JS 모듈 형식을 설정 outDir - 컴파일된 JS 파일이 생성될 디렉토리 설정 strict - TS의 엄격한 타입 체크 설정 include - TS컴파일러에게 컴파일 할 파일이나 디렉토리 지정 moduleDetection - 모듈 감지 방법

// file1.ts
const message = "Hello from file1";

// file2.ts
const message = "Hello from file2";

위와 같은 파일이 존재하고 같은 변수가 존재한다고 하자 그럼 TS는 오류가 발생했다고 알려준다.

TS는 변수 충돌을 방지를 하기때문이다 그래서 moduleDetection 이 옵션을 force로 바꾸게 되면 조금 더 자유로운 변수를 공유할 수 있게 된다.

DataItem.jsx

const DataItem = ({ id, name, content, score }) => {
  return (
    <div clssName="DataItem">
      <h2>
        {id}. {name}
      </h2>
      <div>{content}</div>
      <div>점수 : {score}</div>
      <div>
        <button onClick={handleRemove}>삭제 하기</button>
      </div>
    </div>
  );
};

현재 DataItem 컨포넌트는 데이터를 삭제하는 기능만 있다 이제 수정 할 수 있기 위해선 다음과 같이 진행해보자

1. 해당 컴포넌트에서 수정을 하는지 안하는지에 대한 상택값이 필요하다.

• 수정을 한다면 false 수정을 하지 않는다면 true로 상태값을 업데이트한다.

2. 수정 여부에 따라 렌더링 되는 내용이 바뀌어야한다.

• 상태값을 이용하여 렌더링 되는 것을 조절한다.

3. 수정을 하고 최종 데이터를 최상위 컴포넌트에 전달해준다.

• 이러한 순서를 통해 수정한 값을 화면에 렌더링 해보자

1. 컴포넌트의 상태값을 추가해보자

DataItem.jsx

const DataItem = () => {
  const [isEdit, setIsEdit] = useState(false);
};

수정 버튼을 눌렀을 때 해당 useState값을 true로 바꿔주면 해당 사용자가 수정을 하구나, 하지 않구나를 알 수 있다.

2. 상태에 따른 렌더링 업데이트

상태에 따른 렌더링을 하기 위해선 해당 버튼을 눌렀을 때 상태를 바꿔야하고 바꼈다면 업데이트를 해줘야한다.

DataItem.jsx

const DataItem = () => {
  const [isEdit, setIsEdit] = useState(false);

  const toggleEdit = () => setIsEdit(!isEdit);

  const handleQuitEdit = () => {
    setIsEdit(false);
  };

  return (
    <div className="DataItem">
      <div className="SubjectContent">
        {isEdit ? (
          <>
            <textarea />
          </>
        ) : (
          <>{content}</>
        )}
      </div>
      <div className="BtnArea">
        {isEdit ? (
          <>
            <button onClick={handleQuitEdit}>수정 취소</button>
            <button>수정 완료</button>
          </>
        ) : (
          <>
            <button onClick={toggleEdit}>수정 하기</button>
            <button onClick={handleRemove}>삭제 하기</button>
          </>
        )}
      </div>
    </div>
  );
};
export default DataItem;

이제 해당 상태에 따라 버튼 + 수정할 수 있는 textarea까지 렌더링 되는걸 볼 수 있다.

3. 수정이 완료된 데이터를 화면에 렌더링 해보자

DataItem.jsx

const DataItem = ({ onEdit }) => {
  const [localContent, setLocalContent] = useState(content);

  const handleChangeContent = (e) => {
    setLocalContent(e.target.value);
  };

  const handleEdit = () => {
    onEdit(id, localContent);
    toggleIsEdit();
  };

  return (
    // ...
    <button onClick={handleEdit}>수정 완료</button>
    // ...
  );
};

DataItem에서 현재 content의 내용 바뀐 content의 내용을 [localContent, setLocalContent]로 관리를 하고, onEdit를 통하여 해당 id, content내용을 전달해준다.

App.jsx

function App() {
  const OnEdit = (targetId, newContent) => {
    setData(
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it
      )
    );
  };
}

수정을 원하는 데이터의 아이디와, 수정된 내용을 매게변수로 받아 수정하고자하는 데이터의 아이디와 일치하면 기존의 데이터에 수정된 데이터를 추가해준다.

처음에 무작정 하다보니까 어려웠었는데 계속 콘솔창 찍어보면서 하다보니까 이제 좀 이해가 되는 듯 하다

데이터 관리는 최상위 컴포넌트에서 관리하고 이벤트는 하위 컴포넌트에서 관리하는 방식

가장 먼저 정규 표헌식이 무엇일까부터 알아보자

정규 표현식이란?

문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능 - 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능

내가 문제를 풀면서 해당 문자열에서 특정 문자를 다른 문자로 치환하는 문제를 반복문과 조건문을 통해서 풀었는데 정규 표현식으로 풀면 되게 쉽고 알면 좋을 것 같다는 생각이 들었다.

정규 표현식을 만들어보자

정규 표현식은 패턴과 플래그를 가지고 있다. /패턴(pattern)/플래그(flag)

예제로 알아보자

const target = "Is this yours?";

const regexp = /is/i;

regexp.test(target) // true

test메서드는 target 문자열에 대하여 정규 표헌식 regexp의 패턴을 검색하여 불리언 값으로 반환

그럼 메서드와 플래그에 대해서 알아보자

정규 표현식에서의 메서드

1. 패턴 검사 test()

패턴 검사에서는 크게 두가지로 나뉜다.

• 단일 패턴

const regExp = new RegExp("a");
console.log(regExp.test("abc")); // true

test 메서드를 통하여 해당 문자열에서 "a"가 포함되어 있는지에 대해 검사한다.

• 복합 패턴

const regExp = new RegExp("ab | cd");
console.log(regExp.test("abc")); // true
console.log(regExp.test("cde")); // true

const regExp = /ab.*cd/;
console.log(regExp.test("abc")); // false
console.log(regExp.test("abcd")); // true
console.log(regExp.test("cde")); // false

정규 표현식에서 |는 or을 나타내고, .*는 and를 나타낸다.

2. 문자열 검색 exec()

const regExp = new RegExp("a");
const str = "abc";
const result = regExp.exec(str);
console.log(result); // ["a", 0, 1]

str 문자열에서 "a"가 포함되어 있는지 있으면 다음과 같은 결과를 반환한다.

• "a" - 정규 표현식 /a/와 일치한다.
• 0 - 문자열 "a"가 idx 0 에서 시작한다.
• 1 - 문자열 "a"가 idx 1 에서 끝이난다.

str에서 idx 0에서 1까지 일치한다는 것

3. 문자열 치환 replace()

const regExp = new RegExp("a", "b");
const str = "abc";
const result = regExp.replace(str, "b");
console.log(result); // "bbc"

• "a"는 찾을 대상 문자열
• "b"는 대체할 문자열
• str 문자열에서 "a"가 포함되어 있으면 "a" -> "b"로 대체되어 반환한다.

4. 문자열 분할 split()

const regExp = new RegExp(",");
const str = "a,b,c";
const result = regExp.split(str);
console.log(result); // ["a", "b", "c"]

• 정규 표현식으로 해당 문자열에서 ,를 찾는다.
• ,를 기준으로 분할을 한다.
• split 을 통하여 배열로 반환 된다.

정규 표현식에서의 플래그

정규 표현식을 통한 문제 풀이

1. 알파벳으로 이루어진 문자열 myString과 pat이 주어집니다. myString의 연속된 부분 문자열 중 pat이 존재하면 1을 그렇지 않으면 0을 return 하는 solution 함수를 완성해 주세요.

function solution(myString, pat) {
    const regExp = new RegExp(pat, 'i');
    return regExp.test(myString) ? 1 : 0;
}

2. 문자열 myString이 주어집니다. "x"를 기준으로 해당 문자열을 잘라내 배열을 만든 후 사전순으로 정렬한 배열을 return 하는 solution 함수를 완성해 주세요. 단, 빈 문자열은 반환할 배열에 넣지 않습니다.

function solution(myString) {
    let answer = [];
      answer = myString.split('x').filter(Boolean);
      return answer.sort();
}

filter(Boolean)을 사용하면 해당 분자가 빈 문자이면 포함하지 않는다.

3. 문자열 배열 strArr가 주어집니다. 배열 내의 문자열 중 "ad"라는 부분 문자열을 포함하고 있는 모든 문자열을 제거하고 남은 문자열을 순서를 유지하여 배열로 return 하는 solution 함수를 완성해 주세요.

function solution(strArr) {
    var answer = [];
    const regExp = /.*ad.*/;
    for (let i = 0; i < strArr.length; i++) {
        if (!regExp.test(strArr[i])) {
            answer.push(strArr[i]);
        }
    }

    return answer;
}

/.*STR.*/ 을 사용하게 되면 해당 문자열에서 STR이 포함되어 있는지에 대한 검사를 한다.

가장 상위의 App 그 하위에 리스트를 보여주는 DataList, DataList를 추가 삭제할 수 있는 DataEditor 이렇게 트리 형태로 구조가 형성 되어있다.

그러나 리액트에서는 같은 레벨에 있는 컴포넌트끼리는 데이터를 주고 받지 못한다.

🔎 단방향의 리액트

같은 레벨끼리는 데이터를 주고 받을 수 없다! 그럼 어떻게 데이터를 주고 받고 추가 삭제 할 수 있어?

글로 이해를 하려고 하니 어려운 부분이 있어 그림으로 알아보자

App

DataEditor와 DataList의 공통 부모인 App가 State로 관리를 한다. 이게 무슨 말이지?

DataList

DataList 에서는 부모인 App 에게 Data를 받아 화면에 렌더링을 해주는 역할

DataEditor

DataEditor 에서는 Data라는 State를 변경할 수 있는 setData 를 통해 변경 해주는 역할

정리를 해보자면

1. State는 배열이며, [item1] 을 가지고 있다고 가정하자
2. DataList는 Data에서 받은 item1을 prop로 받아 화면에 렌더링 하고 있는 상태
3. DataEditor에서 [item2]를 추가를 하면 setData를 통해 Data 의 값을 바꾸게 된다.
4. 그렇게 되면 State에는 [item1, item2]가 생기게 된다.
5. DataList에는 새로운 데이터가 prop 되고 두개의 아이템이 화면에 렌더링되게 된다.

데이터를 수정하는 EVENT는 밑에서 위로, 수정된 데이터를 전달받는 DATA는 위에서 밑으로

그럼 이제 코드를 작성해보러 가자

🔥 데이터를 추가하여 화면에 렌더링 하기

• App.jsx

import { useState } from 'react';

function App () {
    const [data,setData] = useState([])

    return(
        <div className="App">
          <DataEditor/>
        <DataList dataList={data}/>
      </div>
    )
}

data를 받아 화면에 렌더링 될 준비가 된 DataList 위의 코드에서 data를 변경 시켜줄 setData 함수를 추가해보자

import { useState, useRef } from 'react';
import './App.css';

import DataEditor from './DataEditor';
import DataList from './DataList';

function App() {
  const subject = ['국어', '수학', '영어', '과학탐구', '사회탐구'];

  const [data, setData] = useState([]);

  const dataId = useRef(0);

  const onCreate = (name, content, score) => {
    const newItem = {
      name,
      content,
      score,
      id: dataId.current,
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };
  return (
    <div className="App">
      <div className="TitleArea">
        <h2>커리큘럼</h2>
        <ul className="SubjectLuist">
          {subject.map((it, idx) => (
            <li key={idx}>{it}</li>
          ))}
        </ul>
      </div>
      <DataEditor onCreate={onCreate} />
      <DataList dataList={data} />
    </div>
  );
}
export default App;

• dataId - 0값을 참조하는데 newItem을 만들 때 마다 +1씩 증가
• onCreate - DataEditor에서 호출한 함수 + 상위 컴포넌트에 새로운 데이터 전달

리액트에서는 상위 컴포넌트에서 데이터를 관리, 하위 컴포넌트에 필요한 데이터를 prop로 전달하는 패턴을 가진다.

• DataEditor.jsx

전 장에서는 버튼을 눌렀을 때 조건을 걸고 맞지 않으면 focus되고 맞으면 state를 콘솔에 저장까지 해보았다.

const DataEditor = () => {
  const handleSubmit = () => {
    onCreate(state.name, state.content, state.score);
  };
};

handleSubmit함수를 통해 state.name, state.content, state.score을 onCreate의 전달 하게 끔 하는 역할을 한다.

• DataList.jsx

const DataList = ({ dataList }) => {
  return (
    <div className="DataList">
      <div>
        {dataList.map((it) => (
          <DataItem key={it.id} {...it} />
        ))}
      </div>
    </div>
  );
};

dataList를 prop으로 받아 key 값은 it.id ...it을 통해 해당 요소의 속성을 DataItem에 전달

• DataItem.jsx

const DataItem = ({id, name, content, score}) => {
    return (
        <div className="DataItem">
        <h2>{id}. {name}</h2>
        <p>{content}</p>
        <p>{score}</p>
      </div>
    )
}
export default DataItem;

🔥 추가한 데이터, 기존 데이터 삭제 해보기

데이터를 삭제하기 위해선 해당 데이터가 고유한 값을 가지고 있어야 해당 데이터에 접근을 해서 삭제, 수정이 가능하다. 그렇기에 ID에 접근해 해당 데이터를 삭제해보자

• App.jsx

각각의 ID에 접근하여 Data를 수정하여 setData에 반영을 해보기 위해 onDelete 함수를 prop해준다.

const onDelete = (targetId) => {
  const newDataList = data.filter((it) => it.id !== targetId);
  setData(newDataList);
};
{/* 생략 */}

<DataList onDelete={onDelete}/>

현재 상태의 data 는 추가된 Item을 모두 보여주는 상태이기에 해당 ID를 가진 Item을 제외한 상태를 다시 setData를 통해 상태를 업데이트 시켜준다.

• DataList.jsx

const DataList = ({ dataList, onDelete }) => {
    <DataItem onDelete={onDelete}/>
}

DataItem은 DataList에 포함이 되어 있기에 DataList가 받은 onDelete를 다시 DataItem에게 prop

• DataItem.jsx

const DataItem = ({ id, name, content, score, onDelete }) => {
  <button
    onClick={() => {
      console.log(id); // id가 잘 출력이 되기에
      onDelete(id); // 해당 id 삭제
    }}
  >
    삭제하기
  </button>;
};

이렇게 추가, 삭제하는 것을 알아 보았는데 아직 갈길이 멉니다 다음에는 해당 데이터를 수정해보는 것을 배워오겠습니다.

🗺️ map() 지도아님

map()함수를 알아보기 전 간단하게 문법과 예제를 알아보고 가자

arr.map(callbak, [thisArg])

• callback에 해당하는 새로운 배열을 만들기 위한 파라미터는 3가지가 있다.
  • currentValue - 현재 처리하고 있는 요소
  • index - 현재 처리하고 있는 요소의 index 값
  • array - 현재 처리하고 있는 원본 배열
• thisArg - callback 함수 내부에서 사용할 this 레퍼런스

항상 느끼는건데 기본이 제일 어려운 법인 것 같다

그래서 예제를 통해 조금 더 알아보자

map() 함수의 예제

let arr = [1, 2, 3, 4, 5];

let multipled = arr.map((num) => {
  return num * 2;
});

console.log(multipled); // [2, 4, 6, 8, 10]

위의 코드는 파라미터를 뒤에 2개를 생략했기에 currentValue만으로 새로운 배열을 만들고 있다. 이를 통해서 알 수 있는 것 currentValue - > 1, 2, 3, 4, 5

• index(idx) - 0, 1, 2, 3, 4
• array - [1, 2, 3, 4, 5]

🔥 그럼 이제 렌더링을 하러 가보자

기본이 가장 중요하기에 위의 코드를 바꿔서 코드를 작성해보자

1. 데이터 배열을 생성해보자

• 하위 컴포넌트

  const ChildrenComponent = () => {
  const weathers = ['봄', '여름', '가을', '겨울', '핵겨울'];
  
  return (
    <div className="ChildrenComponent">
      <div>
        {weathers.map((weather) => (
          <div>{weather}</div>
        ))}
      </div>
    </div>
  );
  };
  export default ChildrenComponent;
  

> 위의 코드는 한가지 문제점이 있다. 무엇일까? 
-> ` Missing "key" prop for element in iterator  `
반복 되는 컴포넌트에 고유한 key 속성을 추가해줘야 한다는 말이다. 

그럼 추가해보자 

```jsx
const ChildrenComponent = () => {
  const weathers = ['봄', '여름', '가을', '겨울', '핵겨울'];

  return (
    <div className="ChildrenComponent">
      <div>
        {weathers.map((weather,idx) => (
          <div key={idx}>{weather}</div>
        ))}
      </div>
    </div>
  );
};
export default ChildrenComponent;

여기서도 느낄 수 있는 건 기본이 중요하다. 현재 배열은 딱히 키라고 부를 수 있는 것이 없다. 그렇기에 map함수의 idx 값을 고유의 키 값으로 전달해 주니 문제가 해결 된 것을 볼 수 있다.

2. 화면에 렌더링 하기

• 상위 컴포넌트

import ChildrenComponent from './ChildrenComponent';

const ParentComponent = () => {
  return (
    <div className="ParentComponent">
      <ChildrenComponent />
    </div>
  );
};

사실 이거는 정말 간단한 예제였고 이를 통해 데이터를 추가, 제거를 할 수 있는 응용력을 길러보자

🔥 데이터를 전달 받고 전달 받은 데이터를 렌더링 해보자

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달해주고 전달 받은 데이터를 통해 화면에 렌더링 하는것에 대해 알아보자

1. 객체를 포함한 배열을 dummyList로 생성 + 하위 컴포넌트로 prop을 해준다.

• 상위 컴포넌트

import BottomComponent from './BottomComponent';

const TopComponent = () => {
  const dummyList = [
    { id: 1, 이름: '김동현', 나이: 22, 생월: 8 },
    { id: 2, 이름: '박동현', 나이: 21, 생월: 8 },
    { id: 3, 이름: '최동현', 나이: 29, 생월: 8 },
    { id: 4, 이름: '강동현', 나이: 27, 생월: 8 },
  ];
  return (
    <div className="TopComponent">
      <BottomComponent dummyList={dummyList} />
    </div>
  );
};

export default TopComponent;

2. prop한 데이터를 받아 map() 함수를 통해 렌더링을 한다.

• 하위 컴포넌트

const BottomComponent = ({ dummyList }) => {
  return (
    <div>
      {dummyList.map((it) => (
        <div key={it.id}>
          <p>안녕하세요 {it.이름} 입니다.</p>
          <p>나이는 {it.나이}입니다.</p>
          <p>태어난 달은 {it.생월}입니다.</p>
        </div>
      ))}
    </div>
  );
};

export default BottomComponent;

잘 렌더링 되는 것을 볼 수 있다.

다음 장에서는 데이터를 추가 또는 제거를 할 수 있는 방법에 대해 알아보자

useRef

const refContainer = useRef(initialValue);

공식문서를 찾아보면 "useRef는 .current 프로퍼티로 전달된 인자 initialValue로 초기화된 변경 가능한 객체를 반환한다" 이게 무슨 말일까? 코드를 작성해보면서 알아보자

useRef 사용하기

일단 가장 먼저 useRef는 React에서 사용되는 훅 그렇기에 import를 해준다.

import {useRef, useState} from 'react';

전 장에서는 유저가 버튼을 클릭 했을 때 console.log에 입력한 값을 출력을 해보았다. 편의를 위해 전 장에 있는 코드는 생략이 되었음에 양해를 구한다.

const userInput = useRef();
const userTextarea = useRef();
const userSelect = useRef();
...

<input ref={userInput}> ... </input>
<textarea ref={userTextarea}> ... </textarea>
<select ref={userSelect}> ... </select>

이렇게 유저가 입력한 input, textarea, select에 useRef를 할당해준다. -> userInput, userTextarea, userSelect ref 객체가 각각 input, textarea, select 요소에 연결이 된다.

그럼 조건을 걸어서 focust를 시켜보자 handleSubmit함수에 조건에 따라 focus 기능 추가해보자

const handleSubmit = () => {
  console.log(state);
  if (state.input.length < 5) {
    userInput.current.focus();
    return;
  }
  if (state.textarea.length < 10) {
    userTextarea.current.focus();
    return;
  }
  if (state.select === "default") {
    userSelect.current.focus();
    return;
  }
  alert("저장 성공");
};

여기서 알아 두면 좋은 점은 select의 option 중 하나는 default로 값이 설정이 되어 있어야한다는 점 + state에서 초기 값은 default로 설정 해야한다는 것이다.

처음엔 되게 어려워 보였는데 간단한거 하나씩 하다 보니까 조금씩 익숙해져서 그런가 재밌네요 12월 달 부터는 사이드 프로젝트 하나 시작하는 것이 목표이고, 그렇게 하기 위해선 퇴근 하고도 꾸준히 공부 하는 것이 중요할 것 같다

해당 단계에서는 한 개의 폼이 아닌 두개, 세개 그 이상의 폼을 다루는 방법에 대해 알아본다.

유저가 입력할 수 있는 input, 여러 줄을 적을 수 있는 textarea, 옵션을 정할 수 있는 select에 대해서 알아보자

🙉 onChange - 입력값을 제어하자

여기서 추가로 알아야 할 것은 폼(Form)을 다루기 위해선 onChange를 사용한다는 것이다.

입력값을 제어하기 위해 onChange에 대해서 알아보자.

편의를 위해 생략되는 코드가 있음을 양해를 구한다.

const [input, setInput] = useState('');

<input value={input} onChange={(e) => {
    console.log(e);}}/>

console.log(e)에 무엇이 출력될까?

일단 해당 콘솔창을 보게되면 여러가지가 뜨는데 가장 보이는 것은 InputEvent + Object라는 것

e.target은 input을 가르킨다.

그럼이 input에서의 입력값을 알기 위해선 e.target.value 값에 접근을 해야한다.

<input value={input} onChange={(e) => {
    console.log(e.target.value);}}/>

으로 변경을 하게되면 입력을 했을 때 한 글자씩만 콘솔에 뜨는것을 볼 수 있다.

내가 원하는 것은 전체 입력값인데,,,,

내가 입력한 값을 받기 위해 setInput을 통해 얻어보자

폼에서 onChange 이벤트가 일어나면 해당 e.target.value 를 통해 input 값을 읽을 수 있지만 그 순간의 변화만 읽어주기에 setInput함수에 e.tartget.value를 넘겨주어 전체 입력 값을 얻을 수 있다.

<input value={input} onChange={(e) => {
    console.log(e.target.value);
    setInput(e.target.value);}}/>

여기서 드는 생각

만약 해당 페이지가 회원가입 페이지, 비밀번호 찾기 등 입력폼이 많으면?

const [a,setA] = useState('');
...
...
...
const [z,setZ] = useState('');

.... 또 다시 만난 무한굴레 🥵

State를 관리해보자

const [state, setState] = useState({
    input: '',
      textarea: '',
      select: 1,
});

return (
<div>
  <h2>입력 폼 공부하기</h2>
  <div>
    <input
      value={state.input}
      onChange={(e)=>{
          setState({
            input: e.target.value,
            textarea: state.textarea,
              select: state.select
        })
      }}
      />
  </div>
  <div>
    <textarea 
      value={state.textarea}
      onChnage={(e)=>{
          setState({
            input: state.input,
              textarea: e.target.value,
              select: state.select
        })
      }}
      />
  </div>
  <div>
        <select
          value={state.select}
          name="select"
          onChange={(e) => {
            setState({
                input: state.input,
                  textarea: state.textarea,
                  select: e.target.value
            });
          }}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
</div>
)

1. 둘다 입력 폼의 입력값의 State를 관리하는 역할이니 state로 묶어준다
2. setState에서 input값이 변하는데 textarea값도 같이 변경되면 안된다.
3. 그렇기에 input에 입력을 할 때엔 textarea의 값은 ''가지게 된다.

⚙️ 여기서 코드를 조금 더 수정해보자 - 1

어떤 점이 아쉬운가? -> 전 보다는 조금 관리가 쉬워진 것은 맞지만, setState에서 하지 않는것에 대한 값을 계속 불러야 한다는 점이다.

...스프레드 연산자를 사용하여 해당코드 수정하기

import { useState } from 'react';

const UserForm = () => {
  const [state, setState] = useState({
    input: '',
    textarea: '',
    select: 1,
  });

  return (
    <div className="UserForm">
      <div>
        <input
          value={state.input}
          onChange={(e) => {
            setState({
              ...state,
              input: e.target.value,
            });
            console.log(e.target.value);
          }}
        />
      </div>
      <div>
        <textarea
          value={state.textarea}
          onChange={(e) => {
            setState({
              ...state,
              textarea: e.target.value,
            });
            console.log(e.target.value);
          }}
        ></textarea>
      </div>
      <div>
        <select
          value={state.select}
          name="select"
          onChange={(e) => {
            setState({
              ...state,
              select: e.target.value,
            });
            console.log(e.target.value);
          }}
        >
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
    </div>
  );
};

export default UserForm;

여기서 조금 주의해야할 점은 (...)스프레드 연산자를 사용해서 기존 state를 불러오는데 이게 순서가 뒤집어 지면 바뀐 state를 기존 state로 덮게 된다. 그렇게 되면 아무리 값을 입력해도 바뀐 값에 대해서 알지 못할 것이다.

⚙️ 여기서 코드를 조금 더 수정해보자 - 2

위의 코드는 지금 태그 안에서 onChnage를 통해 state를 관리하고 있는데 이렇게 되면 코드가 너무 길어지기에 state를 관리하는 함수를 만들어서 코드를 줄여보자

state의 변화를 관리하는 handleChnageState 함수를 만든다.

const handleChnageState = (e)=>{
    setState({
        ...state,
          "변경 되는 값":e.target.value;
    })
}

위의 코드를 보면 변경되는 값의 변화를 체크하면 되기에 해당 이벤트가 일어나는 폼의 이름만 알면 되기에 "변경 되는 값" -> e.target.name으로 변경하여 코드를 수정해보자

import { useState } from 'react';

const UserForm = () => {
  const [state, setState] = useState({
    input: '',
    textarea: '',
    select: 1,
  });

  const handleChnageState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
    console.log(e.target.value);
  };

  return (
    <div className="UserForm">
      <div>
        <input name="input" value={state.input} onChange={handleChnageState} />
      </div>
      <div>
        <textarea name="textarea" value={state.textarea} onChange={handleChnageState}></textarea>
      </div>
      <div>
        <select name="select" value={state.select} onChange={handleChnageState}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
    </div>
  );
};

export default UserForm;

확실히 한 눈에 onChnage를 했을때 어떠한 행동을 하는지 보여서 깔끔해 진 것 같다

그럼 최종적으로 유저가 입력한 값을 얻어보자

const handleSubmit = () => {
    console.log(state)
}

<button onClick={handleSubmit}></button> 

해당 버튼을 누르게 되면 이제 다음과 같은 결과를 얻을 수 있다.

다음 장에서는 useRef 를 통하여 해당 입력값에 조건을 걸어 입력하지 않으면 포커스를 해주는 기능에 대해 알아보자

오늘 회사에서 이메일 폼 관련 작업을 하면서 얻게 된 정보를 정리해보려고 한다.

❗️이메일 폼 작업 전 유의사항

먼저 이미엘 작업을 하기 위해 몇 가지 알아야 할 사실을 체크해보자

1. 인라인 스타일(inline style)로 작성하자

<head>태그 안 <style>태그가 아닌 <div style="padding:0">이와 같이 inline style로 작성을 해야한다.

지원하지 않는 style 태그

• 국내 대부분의 메일 플랫폼들은 <style>태그를 지원하지 않는다.

그렇다면 왜 지원을 하지 않을까?

• 내가 찾아본 결과로는 보안 문제가 큰 문제로 보인다.
  • 이메일은 스팸, 악의적인 코드로 보안문제가 있을 수 있기에 js, 스타일 시트의 사용을 제한하는 경우가 많다.

2. 크로스 브라우징을 고려하자

여러 브라우저에서 문제 없는 버전이 낮은 CSS의 스타일을 사용해야 한다.

메일은 브라우저를 통해 열린다.

• 메일을 읽기 위해선 브라우저를 통해 이메일폼을 확인 하는 경우가 대다수이기에 이말은 브라우저를 고려하여 작성해야 한다는 점이다.

3. Table 태그를 지향하자

일부 태그의 CSS의 속성이 무시, 다르게 적용이 될 수 있다. 따라서 이메일에 최적화된 테이블 레이아웃을 사용하자

table 태그 안 table태그의 무한 굴레

• 레이아웃을 위하여 <table>안 <table>태그를 반복할 텐데 이때문에 이메일 폼 작성이 어렵고 힘든 일이 될 수 있다.

💻 이메일 폼 작업

작업을 하기 전 반드시 알아야 할 사실은 네이버, 다음(국내 이메일 플랫폼) 메일 폼에서는 <html>태그 내에 <body>가 없어지기에 가장 상단 <div> > table를 통해 가장 먼저 레이아웃을 잡아 주는것이 좋다.

자 그럼 유의사항, 알아야 할 내용에 대해 알아봤으니 이메일 폼을 만들어보자

1. 전체 크기를 먼저 잡아보자.

이메일 폼은 width를 800px 이하로 가져가는 것이 좋다.

위에서 <body>태그가 없어진다고 <div> > table이렇게 설명하였는데 어떻게 전체 크기를 잡았는지?

<body style="margin: 0; padding: 0">
  <!-- 이메일 본문 -->
  <div style="width: 100%; margin: 0; padding: 0">
    <table style="max-width: 560px; width: 100%"></table>
  </div>
  <!-- //이메일 본문 -->
</body>

고정적인 width보다는 유동적으로 가져가자

• 저자는 width 값을 고정보다는 max-width를 잡되 레이아웃의 형태를 위하여 width:100%를 통해 크기가 적을 시에도 화면에 꽉 찰 수 있게끔 크기를 조절하였다.

2. 어떠한 영역을 잡기 위해서 빈 태그 사용하는 것을 지향하기

content와 content사이에 빈 공간은 빈 태그를 사용하고 height를 사용해보자

<tr>
  <td style="height: 400px"></td>
</tr>

셀의 높이를 고정함으로 일관된 디자인을 가져가자

• 이는 어떠한 영역의 크기를 정확하게 제어 할 수 있기에 정확성, 일관성을 높일 수 있다.

3. 마진(Margin Property) 지양하기

아직은 Margin Property를 지원하지 않는 곳이 존재한다.

padding, height를 통하여 여백을 잡기

• 또한 Padding Property를 사용할 때 인자를 모두 넣는것을 지향해자
  • padding: 0 10px 0 10px

4. 이미지 alt 태그 반드시 사용하기

이메일폼에 이미지가 포함된다면, alt 태그는 중요한 내용이다.

내부 이미지 사용하기

• 폼 안에 이미지가 있기에 메일의 크기가 증가하고, 이로 인해 전송 시간이 늘어날 수 있다는 점 + 🥵스팸 필터링

외부 이미지 사용하기

• 웹 서버, 호스팅 서버에서 가져오는 방식
• 이메일의 크기가 줄어들고, 이미지 업데이트시 메일을 수정하지 않아도 된다는 점

그렇지만 결국은 사용자의 옵션이 중요하다

아무리 사진을 내부, 외부 이미지로 보낸다고 해도 받는 사용자가 이미지 디스플레이 옵션을 제한 해둔다면 외부, 내부 이미지는 소용이 없는 셈💧이다.

5. hex를 통한 색상 이용하기

RGB, RGBA는 지원하지 않는 경우가 많다.

hex 코드를 줄이지말자

• hex 코드는 #000000을 #000으로 단축시킬 수 있지만, #000000괕이 전체를 다 적어주는 것이 좋다.

6. 작업이 끝난 후 페이지 검사하기

저자가 검사를 하면서 참고한 사이트를 추천

https://htmlemail.io/inline/ UI를 미리 볼 수 있는 사이트

https://validator.w3.org/ 이메일 폼 검사를 할 수 있는 사이트

😅 이렇게 끝이난 것 같지만 아직 한 단계가 더 남았다...

7. 검사가 끝난 메일 여러 플랫폼에서 확인하기

플랫폼마다 다를 수 있다는 점을 인지하자

정식 테스트 전 내 계정으로 여러 플랫폼으로 보내서 자체 검사해보기

저자가 검수할 때 체크한 플랫폼

• Naver
• Daum
• Nate
• Gmail
• Outlook

위의 플랫폼들을 맥 + 윈도우환경에서 검수를 진행했고, 아웃룩에서 레이아웃이 깨지지 않고, 네이버에서 정확하게 나오면 거의 다 나온다고 생각하면 될 것이다.

다음은 완성 된 결과물

여러 플랫폼에 보내면서 영역이 정상적으로 나오는지에 대해 확인을 했다

오늘 인라인 스타일을 거의 처음 접하다 보니 생각보다 손이 정말 많이 가는 듯했다. 그렇지만 이 또한 안 해본 것보다는 해보는 것이 경험이기에 좋은 경험이라 생각한다 😀

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만을 신경 쓰는 라이브러리이다.

1. 리액트를 공부하기 위해 작업 환경을 설정 해보자

Node.js가 설치 되었다는 전제로 시작한다. 저자는 npm을 통하여 설치를 진행한다.

• npx create-react-app <프로젝트 이름>
• npm create-react-app <프로젝트 이름>

두개의 명령어가 있는데 무엇이 다를까?

설치가 완료 되었으면, 해당 폴더로 이동 cd 프로젝트 이름 -> npm start

오케이 시작이 반이라고 했으니 반정도 왔다.

2. React 프로젝트의 기본 폴더 구조를 파악해보자

2-1. Package.json

가장 먼저 package.json 파일에 대해 알아보자

Node.js 프로젝트의 구성 및 의존성 정보를 저장하는 .json 파일

• 프로젝트 구성 정보 - 프로젝트의 이름, 버전, 설명 등이 포함 name, version, private, ....
• 의존성 목록(dependencies) - 해당 프로젝트를 실행,개발하는 데 필요한 모든 외부 라이브러리 및 모듈을 포함
• 스크립트(scripts) - 해당 프로젝트를 빌드, 실행, 배포 하기 위한 명령어가 포함 start, build, test, ....

스크립트 부분에서 start 부분이 react-scripts start인 것을 보아 왜 npm start를 했을 때 리액트 프로젝트가 실행이 되는 것을 알 수 있다.

2-2. App.js, index.js 파일 파헤쳐보기

import React from 'react';

CSS에서 어떠한 파일을 불러와 사용하는 문법이랑 똑같이 생겼다.

위 코드는 내가 생각한 것 처럼 리앤트를 불러와 사용할 수 있게 해주는데 프로젝트 생성 과정에서 node_modules 폴더에 react 모듈이 설치 되고, 이를 통해 import문을 통하여 리액트를 불러와 사용할 수 있는 것이다.

import logo from './logo.svg';
import './App.css';

import 문을 사용하여 다른 파일에서 정의한 내용을 현재 파일로 불러와 사용할 수 있으며, 이를 통해 코드를 모듈화하고 다른 파일에서 정의한 내용을 현재 파일에서 재사용할 수 있다.

function App() {
  return (
    <div className="App">
        ...
    </div>
  )
};

App이라는 컴포넌트를 function 키워드를 사용하여 컴포넌트를 만들게 되는데 이를 함수형 컴포넌트라 부른다. 이러한 코드를 JSX라고 부르는데 JSX가 무엇인지 알아보자

3. What is JSX

JSX(JavaScript XML) 자바스크립트의 확장 문법으로, JS코드 내에서 HTML과 유사한 구문을 사용하여 UI 컴포넌트를 만들고 렌더링하는 데 도움을 준다.

function App() {
    return(
        <div>
            Hello! <b>React</b>
          </div>
    )
};

이러한 코드는 다음과 같이 변환이 된다.

    function App() {
        return React.createElement("div", null, "Hello!", React.createElement("b", null, "React"));
    }

JSX 문법을 사용하는 것이 아니라 항상 createElement를 쓰게 되면 불편할 것이다 그렇기에 JSX를 사용하면 편하게 렌더링을 할 수 있다.

3-1. JSX의 문법

JSX를 올바르게 사용하기 위해 규칙에 대하여 알아보자

1. 여러 요소를 감싸는 부모 요소가 반드시 하나가 필요하다.

import React from 'react';

function App () {
  return (
    <h1>리액트의 JSX 문법 공부</h1>
    <p>1. 감싸인 요소를 꼭 포함한다.</p>
  )
}

export default App;

이렇게 되게 되면 제대로 작동하지 않을 것이다.

"JSX 식에는 부모 요소가 하나 있어야 합니다" 라고 에러가 발생하는 것을 볼 수 있다. 위의 식을 에러 없이 제대로 작동하게끔 코드를 수정해보자

1. div 태그 사용하기

   import React from 'react';
   

function App () { return (

export default App;

2. `Fragment` 태그 사용하기

```jsx
import React from 'react';

function App () {
  return (
    <React.Fragment>
      <h1>리액트의 JSX 문법 공부</h1>
      <p>2. 최상위 요소를 두기 싫을 때 Fragment 사용하기</p>
    </React.Fragment>
  )
}

export default App;

3. 빈 태그 사용하기

import React from 'react';

function App () {
  return (
    <>
      <h1>리액트의 JSX 문법 공부</h1>
      <p>3. 빈 태그 사용하기</p>
    </>
  )
}

export default App;

2. 자바스크립트 표현식을 사용하는 방법

jsx내부에서 js 표현식 사용하기

import React from 'react';

function App () {
  const name = "리액트";
  return (
    <div>
        <h1>{name}의 JSX 문법 공부</h1>
    </div>
  )
}

export default App;

{}를 사용하여 jsx 내부에서 렌더링 하기

3. if 문 대신 조건부 연산자를 사용하자

JSX 내부의 자바스크립트 표현식에서 if문을 사용 할 수 없다.

import React from 'react';

function App() {
    const name = '리액트';
    return <div>{name === '리액트' ? <h1>리액트 입니다.</h1> : <h1>리액트가 아닙니다</h1>}</div>;
}

export default App;

JSX내부에선 삼항 연산자를 사용하자

4. AND 연산자(&&)를 사용한 조건부 연산자

아무것도 렌더링을 하고 싶지 않을 때 AND연산자를 사용하자

위의 3번에서 배운 조건부 연산자를 사용하여 null값을 사용하여 아무것도 렌더링 하지 않을 수 있지만 AND 연산자(&&)를 사용하면 더 간결하게 사용할 수 있다.

import React from 'react';

function App() {
    const name = '리액트';
    return <div>{name === '리액트' && <h1>리액트 입니다.</h1>}</div>;
}

export default App;

name이 "리액트"일 경우 화면에 표시가 되지만 아닐 경우 아무것도 표시가 되지 않는걸 볼 수 있다.

5. 인라인 스타일링

카멜표기법으로 작성하자

import React from 'react';
function App() {
    const name = '리액트';
    const style = {
        backgroundColor: 'black',
        fontSize: '50px',
        textAlign: 'center',
        color: 'aqua',
    };
    return <div style={style}>{name}</div>;
}

export default App;

• 위와 같이 스타일을 적용할 때에는 문자열이 아닌 객체 형태로 넣어준다.
• background-color가 아닌 backgroundColor와 같이 카멜 표기법을 사용한다.

6. 태그는 꼭 닫아야 한다.

import React from 'react';

function App() {
    return (
        <div>
            <h2>리액트를 배워보자</h2>
            <input>
        </div>
    );
}

export default App;

해당 코드는 Parsing error : Unterminated JSX contents 즉 모든 태그는 닫는 태그를 사용해야한다.

<input />, <br /> ....

7. 주석을 사용할 때 이렇게 사용하자

JS나 HTML에서 사용하는 주석을 사용하게 되면 화면에 표시되게 된다 그렇기에 {/* ... */}의 형태로 사용하자!

import React from 'react';
function App() {
    return (
        <>
            <h1>리액트의 JSX 문법 공부</h1>
              {/* 주석은 이렇게 사용합니다 */}
              // 이렇게 사용하면 화면에 보여지게 됩니다.
              /* 이렇게 사용해도 화면에 보여지게 됩니다.*/
        </>
    );
}

export default App;

4. State(상태)

컴포넌트 내부에서 바뀔 수 있는 값

React에서 사용하는 State를 알아보기 위해 기본적으로 버튼을 눌렀을 때 1씩 증가, 1씩 감소 그 값을 화면에 렌더링 하는것을 구현해보자

1. 먼저 리액트의 State를 사용하기 위해서는 React를 import 하고 상태변화에 사용되는 useState를 추가적으로 적어야 한다.

import React, { useState } from 'react';

Returns a stateful value, and a function to update it -> "현재 상태 값을 나타내는 변수 + 상태 값을 업데이트하는 함수를 반환한다" 라고 알려준다.

2. useState를 사용하여 상태 값을 초기화, 업데이트 함수를 선언

const [count, setCount] = useState(0);

배열의 비구조화 할당을 이용하여 다음과 같은 값을 가지게 한다. count - 상태 값 setCount - 상태 값을 업데이트하는 함수

3. 상태 값을 업데이트 하는 함수를 만들기

const onIncrease = () => {
    setCount(count + 1);
};
const onDecrease = () => {
    setCount(count - 1);
};

증가,감소 함수를 사용하여 현재 상태 값인 count를 +1, -1씩 하는 함수를 만들어 봤다.

4. 전체 코드를 작성해보자

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>증가 버튼</button>
      <button onClick={onDecrease}>감소 버튼</button>
    </div>
  );
};

처음 보는 문법이라 아직 익숙하진 않은데 확실한건 js로만 했을 때보다는 더 간결하다는 점

• useState(0) - 초기 값 0 그렇기에 count가 0으로 출력 되는 걸 볼 수 있다.

5. Prop(Properties)

컴포넌트에 데이터 전달하기

부모 컴포넌트인 App.js 파일이 있고 자식 컴포넌트인 Counter.js가 있다 위에서 버튼을 눌렀을 때 증감이 되는 함수가 포함된 파일 즉 자식 컴포넌트가 Counter.js

5-1. 부모 컴포넌트에서 데이터 내려주기

App.js

import React from 'react';
import Counter from './Counter';

function App() {
    return(
        <>
            <Counter initialNumber={5}/>
        </>
    ) 
}

5-2. 자식 컴포넌트에서 데이터 받기

Counter.js

import React, { useState } from 'react';

const Counter = (props) => {
  console.log(props);
  const [count, setCount] = useState(0);

  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>증가 버튼</button>
      <button onClick={onDecrease}>감소 버튼</button>
    </div>
  );
};

export default Counter;

부모 컴포넌트에서 데이터를 적기만 한다고 자식 컴포넌트에 전달이 되는것이 아닌 데이터를 받고자 하는 자식 컴포넌트에서 props를 매개변수로 받는다. 이를 console.log에 찍어보면 object 즉 객체로 받는것을 볼 수 있다.

그럼 받은 데이터를 사용해보자

편의를 위해 코드를 생략하고 작성하겠다

// App.js
function App() {
  return (
    <>
      <Counter initialNumber={5} />
    </>
  );
}


// Counter.js
const Counter = (props) => {
  const [count, setCount] = useState(props.initialNumber); // 화면에 초기 값이 5로 경 된 것을 볼 수 있다.
};

props가 console 창에서 객체로 나오기에 그 값에 접근 하기 위해서 props.키값 으로 접근을 하였고 화면에 받은 데이터

주고자 하는 데이터가 많을 경우 스프레드 연산자를 활용하자

// App.js

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    f: 5,
  };

  return (
    <>
      <Counter {...counterProps} />
    </>
  );
}

넘겨주고자 하는 데이터가 많을 경우 태그 안에 나열 보다는 새로운 객체를 생성해서 스프레드 연산자로 받는것을 지향하자

넘겨준 값을 정의 하지 않은 경우 초기 설정 값을 해두자

// App.js

import React from 'react';
import Counter from './Counter';

function App() {
  const counterProps = {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    f: 5,
  };
  return (
    <>
      <Counter {...counterProps} />
    </>
  );
}

export default App;


// Counter.js

import React, { useState } from 'react';

const Counter = (props) => {
  const [count, setCount] = useState(props.initialNumber);

  const onIncrease = () => {
    setCount(count + 1);
  };
  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>증가 버튼</button>
      <button onClick={onDecrease}>감소 버튼</button>
    </div>
  );
};

export default Counter;

이렇게 되면 initialNumber이 undefined가 되기에 여기에 연산을 하게 되면 NaN이 렌더링 된다. 이는 오류이기에 해당 코드를 초기 설정값을 통해 이러한 문제를 해결해보자

Counter.defaultProps = {
  initialNumber: 0,
};

App.js에 해당 코드를 넣음으로써 NaN이 렌더링 되는것을 방지할 수 있다.

또한 신기한 사실은 부모 컴포넌트의 State의 변경에 따른 자식 요소 컴포넌트도 리렌더링 된다.

1. 동기 처리와 비동기 처리

• 동기적으로 작업이란?

• 순서가 보장 된 처리 방식, 다른 작업을 완료 전 까지 다른 작업을 블로킹(작업 중단) 하는 처리 방식

• 비동기적으로 작업이란?

• 순서가 보장 되지 않은 처리 방식, 다른 작업이 완료 되기 전에도 블로킹(작업 중단) 하지 않고 다음 작업을 실행하는 처리 방식

1-1. 동기적 처리 방식

간단한 예시로 동기적 처리 방식에 대해 알아보자

function foo () {
    console.log("foo");
}
function bar () {
    console.log("bar");
}
foo(); // foo
bar(); // bar

위와 같이 어떠한 작업이 끝이 나고 나서 그 다음 작업을 실행 순차적 실행

1-2. 비동기적 처리 방식

간단한 예시로 비동기적 처리 방식에 대해 알아보자

// 위와 같이 실행을 하되 setTimeout으로 바꾸어 실행 해보자
function foo () {
    console.log("비동기에서 foo");
}
function bar () {
    console.log("비동기에서 bar");
}

setTimeout(foo, 0);
bar();

실행을 해보면 비동기에서 bar ,비동기에서 foo 이렇게 나오게 된다. 왜 foo가 먼저 실행이 되지 않고 bar가 먼저 실행이 될까?

비동기 코드의 실행 순서와 동기 코드의 실행 순서의 차이때문이다.

1. setTimeout(foo, 0)가 foo를 비동기적으로 실행 되도록 예약
2. 그에 비해 bar는 동기적으로 실행
3. 스택(Stack)에서 bar 함수가 실행 후 출력
4. bar 함수가 실행이 완료 되었기에 스택(Stack)이 비어진 상태
5. foo 함수가 비어 있는 스택(Stack)으로 이동
6. foo 함수가 실행 후 출력

이러한 과정을 거치기에 setTimeout 이 0초라고 하더라도 바로 실행 되지 않는 현상이다.

콜 스택(Call Stack)

함수를 호출할 때, 해당 함수의 정보(변수, 매개 변수 등) 스택에 푸쉬(push), 함수가 실행이 완료 되면 해당 정보를 스택에서 팝(pop)되어 제거 -> 스택이 비어짐

2. Promise(약속 아님)

Escape Callback Hell🔥 연속적으로 발생하는 비동기 함수를 처리할 때, 비동기 함수의 결과를 사용하기 위해 콜백 함수가 중첩되어 복잡해지는 현상을 해결해보자

비동기 작업이 가질 수 있는 3가지 상태를 먼저 알아보자

• Pending(대기 상태) - 현재 비동기 작업이 진행중, 비동기 작업이 실행될 수 없는 문제가 발생한 상태
• Fulfilled(성공) - 비동기 작업이 정상적으로 완료된 상태 resolve
• Rejected(실패) - 비동기 작업이 어떠한 이유로 실패한 상태(서버의 응답X, 지연 시간) reject

2-1. Promise가 없는 비동기 처리

a, b의 값을 더하고 그 값을 콜백함수에 전달해서 X2를 하고, 또 다시 -X2를 하는 함수를 콜백함수로 나타냈다.

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 1000);
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -2;
    cb(res);
  }, 1000);
}

taskA(4, 4, (a_res) => {
  console.log("taskA : ", a_res); // taskA : 8
  taskB(a_res, (b_res) => {
    console.log("taskB : ", b_res); // taskB : 16
    taskC(b_res, (c_res) => {
      console.log("taskC : ", c_res); // taskC : -32
    });
  });
});

흠 보기만 해도 조금 복잡하기도 하고 이게 줄이 더 길어지면 더 복잡해 질 것이다. 위의 코드를 promise를 통해 코드를 고쳐보자

2-2. Promise로 코드 개선하기

new Promise((resolve, reject) => {})

• 비동기 작업이 성공 했을 때 (...resolve) 호출
• 비동기 작업이 실패 했을 때 (...reject) 호출

그럼 아까 코드를 수정 해보자

function taskA(a, b) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a + b;
      resolve(res);
    }, 1000);
  });
}

function taskB(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * 2;
      resolve(res);
    }, 1000);
  });
}

function taskC(a) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const res = a * -2;
      resolve(res);
    }, 1000);
  });
}

taskA(4, 4)
  .then((a_res) => {
    console.log("taskA : ", a_res);
    return taskB(a_res);
  })
  .then((b_res) => {
    console.log("taskB : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("taskC : ", c_res);
  });

promise를 통해 코드를 개선하였는데 어떠한 점이 이점인지에 대해 알아보자

1. promise를 사용함으로 콜백 함수를 직접 전달하지 않아도 된다는 점
2. then체이닝의 사용 : then을 사용함으로 코드의 가독성이 올라갔다는 점
3. 구문이 구분 되다 보니 어떤 작업인지에 대한 파악이 쉽다는 점
4. 위의 코드는 실패에 대한 코드는 다루지 않았지만, 에러 핸들링이 보다 쉬울 것 같다는 점

const 코드끊기 = taskA(4, 4).then((a_res) => {
  console.log("taskA : ", a_res);
  return taskB(a_res);
});

console.log("a")

코드끊기
  .then((b_res) => {
    console.log("taskB : ", b_res);
    return taskC(b_res);
  })
  .then((c_res) => {
    console.log("taskC : ", c_res);
  });

또한 콜백함수와 달리 중간에 코드를 나눠 어떠한 작업을 추가 할 수 있다는 점이 있다. 그렇지만 아직 복잡한 경향이 있다 그렇기에 이번에는 async, await를 통해 코드를 개선해보자

3. async / await

Escape CallbackHell🔥, Escape thenHell🔥

3-1. async

async function makeAsync() {
    return "Make Async";
}

console.log(makeAsync()); // Promise {<pending>}

async를 붙인 함수makeAsync의 결과값이 promise로 나오는 것을 볼 수 있다 -> then을 사용 가능한 비동기 처리 함수가 된다

async function makeAsync() {
  return "Make Async";
}

makeAsync().then((res) => {
  console.log(res); // Make Async
});

return한 값인 "Make Async"가 resolve값으로 쓰이는 것을 알 수 있다.

3-2. await

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function makeAsync() {
  await delay(3000);
  return "Make Async";
}

makeAsync().then((res) => {
  console.log(res); // 3초 뒤Make Async
});

• await 비동기 함수 앞에 붙이게 되면 비동기 함수를 마치 동기 함수로 사용 할 수 있게 된다.
• await 함수가 끝나고 나서 뒤에 함수가 실행이 된다.
• await 함수는 async가 붙은 함수 내에서만 사용 가능하다.

3-3. async, await으로 코드 개선하기

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function taskA(a, b) {
  await delay(1000);
  const res = a + b;
  return res;
}

async function taskB(a) {
  await delay(1000);
  const res = a * 2;
  return res;
}

async function taskC(a) {
  await delay(1000);
  const res = a * -2;
  return res;
}

async function main() {
  try {
    const a_res = await taskA(4, 4);
    console.log("taskA : ", a_res);

    const b_res = await taskB(a_res);
    console.log("taskB : ", b_res);

    const c_res = await taskC(b_res);
    console.log("taskC : ", c_res);
  } catch (error) {
    console.log("Error : ", error);
  }
}

main();

• async, await를 사용하여 코드를 수정 했는데 확실히 어떠한 작업인지 구분이 간다
• await을 통하여 비동기 처리 방식 내에서 그 결과를 기다리는 방식으로 작동이 된다.
• main함수를 통하여 작업이 순서대로 수행되고, 에러핸들링이 된다.

객체는 관련된 데이터와 함수의 집합 (프로퍼티와 메소드)

다음은 객체를 생성하는 두 가지 방법이다.

객체 생성자

let user = new Obejct(); 

객체 리터럴

let user = {}; // 객체 리터럴을 사용한 빈 객체 만들기

객체 리터럴을 사용하는 방법이 일반적이고 더 간단하여 자주 사용된다.

• 객체에는 여러가지 값들을 넣을 수 있지만, 키와 값 쌍을 넣어야 된다.
• 키와 값을 쌍으로 가지는 것을 프로퍼티, 객체의 프로퍼티를 통해 데이터를 구조화하고 관리 할 수 있다.
• 객체의 메서드는 객체가 가지고 있는 함수, 객체 내의 동작 또는 객체와 관련된 동작을 수행한다.

1-1. 프로퍼티(Property)와 메소드(Method)

let user = {
  name: "Hyun",
  age: 27,
  greet: function() {
      console.log("Hello, I'm " + this.name + " and I'm " + this.age + " years old.");
  },
};

user.greet(); // Hello, I'm Hyun and I'm 27 years old.

• 콜론 :을 사용하여 키와 값을 구분한다.
• 키에는 문자형, 값에는 모든 type이 사용된다.
• 객체의 동작을 수행하는 메소드

1-2. 객체의 값 추가, 삭제, 변경

const user = {
    name: "Hyun",
      age : 26,
      blood : "B",
}

user.birth = ("97/08/22"); // 객체의 birth 값 추가하기

console.log(user.birth); // 97/08/22
console.log(user["birth"]); // 97/08/22

user.age = 27; // 객체의 age 값 변경하기

console.log(user.age); // 27
console.log(user["age"]); // 27

delete user.blood; // delete를 이용하여 객체의 blood 값 삭제하기

console.log(user.blood); // undefined
console.log(user["blood"]); // undefined

// delete를 사용하게 되면 메모리에서 지워지지 않는다. 그렇기에 다음과 같은 방법 지향

user.age = null; // null 을 이용하여 객체의 age 값 삭제하기

console.log(user.age); // null

왜 상수로 선언된 user 객체를 수정해도 에러가 발생하지 않을까? -> 객체 내의 프로퍼티 값을 변경하는 것은 상수 객체를 변경하는 것이 아니기 때문이다.

1-3. 메소드와 This

let user = {
    name: "Hyun",
      age : 27,
      greet() {
        console.log(this.name); // this -> 현재 객체를 나타낸다.
    }
};

user.greet(); // Hyun

this의 동작 방식을 알아보자

let user1 = { name: "Dong" };
let user2 = { name: "Hyun" };

function greet() {
    console.log( this.name );    
}

user1.func = greet;
user2.func = greet;

user1.func(); // Dong
user2.func(); // Hyun

이와 같이 this는 . 앞의 객체를 참조하기에 this의 값이 서로 달리즈는 것을 알 수 있다.

2. 배열(Array)

여러 개의 값을 순서대로 저장하는 데이터 구조

2-1. 배열 선언하기

const arr1 = new Array();
const arr2 = [];

대부분 두번째 방법으로 배열을 선언한다.

2-2. 배열에 접근, 수정하기

let oddNumbers = [1,3,5,7,9];
console.log( oddNumbers[0] ); // oddNumbers[N] 을 통해 N번째 요소에 접근을 할 수 있다.

oddNumbers[4] = 11;
console.log( oddNumbers[4] ); // N번째의 요소 수정하기

console.log( oddNumbers.length ); // 5 length를 통해 배열의 담긴 요소위 갯수 파악하기

console.log( oddNumbers ); // 요소 전체를 출력하기

oddNumbers.push(15);
console.log( oddNumbers[5] ); // push를 통해 배열에 새로운 요소 추가하기

2-3. 배열의 내장함수 알아보기

forEach

반복문 for문을 대체 할 수 있다.

const korea = ["서울", "대구", "부산", "경기도"];

for (let i = 0; i < korea.length; i++) {
    console.log(korea[i]);
}

위와 같은 반복문을 forEach 문으로 변경해보자

const korea = ["서울", "대구", "부산", "경기도"];

korea.forEach(city => {
    console.log(city);
});

forEach 함수의 파라미터 city는 각 원소를 가르키게 된다.

map

새로운 배열을 만들때 유용하다.

const array = [1,2,3,4,5,6,7,8,9,10];

const array2 = [];

array.forEach(el => {
    array2.push(el * 2);
})

console.log(array2);

새로운 배열을 map을 이용하여 만들어보자

const array = [1,2,3,4,5,6,7,9,10];

const array2 = array.map(n => n * 2);

console.log(array2);

변화를 주는 함수를 전달하여 새로운 배열 생성

indexOf

원하는 원소의 순서 찾기

const korea = ["서울", "대구", "부산", "경기도"];
const index = korea.indexOf("대구");

console.log(index); // 1

index의 값은 0 부터 시작하여 원소의 순서를 반환 -1이 반환 되는 경우 해당 배열에 없다는 뜻

findIndex

배열 안에 있는 값이 객체, 배열일 경우 indexOf를 사용 할 수 없어서 findIndex를 사용한다.

const korea = [
  {
    id: 1,
    city: "Seoul"
  },
  {
    id: 2,
    city: "Daegu"
  },
  {
    id: 1,
    city: "Busan"
  },
  {
    id: 1,
    city: "Ulsan"
  }
];

다음과 같이 배열에 있는 값이 객체일 경우 findIndex 를 통해 원하는 조건을 찾을 수 있다.

const korea = [
  {
    id: 1,
    city: "Seoul"
  },
  {
    id: 2,
    city: "Daegu"
  },
  {
    id: 1,
    city: "Busan"
  },
  {
    id: 1,
    city: "Ulsan"
  }
];

const index = korea.findIndex(el => el.city === "Seoul");
console.log(index); // 0

find

findIndex에서 순서가 아닌 값 자체를 반환해준다.

const korea = [
  {
    id: 1,
    city: "Seoul"
  },
  {
    id: 2,
    city: "Daegu"
  },
  {
    id: 1,
    city: "Busan"
  },
  {
    id: 1,
    city: "Ulsan"
  }
];

const index = korea.find(el => el.city === "Seoul");
console.log(index); // {id: 1, city: "Seoul"}

filter

배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열 만들기

const korea = [
  {
    id: 1,
    city: "Seoul",
    visit: true,
  },
  {
    id: 2,
    city: "Daegu",
    visit: false,
  },
  {
    id: 1,
    city: "Busan",
    visit: true,
  },
  {
    id: 1,
    city: "Ulsan",
    visit: false,
  }
];

const visitNoCity = korea.filter(el => el.visit === false);

console.log(visitNoCity); 

splice

특정 항목 제거하기

const array = [10,20,30,40,50];
const index = numbers.indexOf(30);
array.splice(index,1);
console.log(array);

• splice(n,m) 일 때 n에서부터 m개 제거라 생각 하면 쉽고,
• splice(n)일 때는 n번째 이후로 제거가 된다라 생각 하면 쉽다.

slice

splice랑 비슷하지만 기존 배열은 건들지 않는다.

const array = [1,2,3,4,5];
const array2 = array.slice(0,2) // 0~2 까지

console.log(array2); // [1,2]
console.log(array); // [1,2,3,4,5]

shift와 pop

배열에서 원소를 추출하기

// shift
const array = [1,2,3,4,5];
const number = array.shift();

console.log(array); // [2,3,4,5]
console.log(number); // 1

// pop
const array = [1,2,3,4,5];
const number = array.pop();

console.log(array); // [1,2,3,4]
console.log(number); // 5

shift는 배열의 첫번째 원소, pop은 배열의 마지막 원소 추출

unshift

배열의 맨 앞에 새 원소 추가하기

const array = [1,2,3,4,5];
array.unshift(0);

console.log(array);

concat

여러개의 배열을 하나의 배열로 합치기

const arr1 = [1,2,3];
const arr2 = [4,5,6];

const arr3 = arr1.concat(arr2);
console.log(arr3); // [1,2,3,4,5,6]

합쳐진 배열의 순서는 A.concat(B) 라고 하면 [A,B] 순으로 반환된다.

join

배열 안의 값들을 문자열 형태로 합치기

const array = [1,2,3,4,5];
console.log(array.join()); // 1,2,3,4,5
console.log(array.join(' ')); // 1 2 3 4 5
console.log(array.join(', ')); // 1, 2, 3, 4, 5

reduce

해당 배열의 총합을 구할 때 사용한다.

const array = [1,2,3,4,5];

let sum = 0;
array.forEach(n => {
    sum += n;
});
console.log(sum);

해당 코드를 reduce 를 이용하여 변경해보자

const array = [1,2,3,4,5];
let sum = array.reduce((cal, current) => cal + current, 0);

console.log(sum);

3. 비 구조화 할당

객체나 배열을 변수에 할당하는 것

3-1. 배열에서의 비 구조화 할당

let arr = ["one", "two", "three", "four"];

다음과 같은 배열이 있다고 생각을 해보자 배열에서의 값을 다 얻을려면 다음과 같이 값을 얻어야 한다.

console.log(arr[0]); // one
console.log(arr[1]); // two
console.log(arr[2]); // three
console.log(arr[3]); // four

하나씩 다 호출을 해야하고, 반복적인 부분이 있기에 번거로울 수 있다

let arr = ["one", "two", "three", "four"];
let [one, two, three, four] = arr;

console.log(one); // one
console.log(two); // two
console.log(three); // three
console.log(four); // four

// 위의 코드를 더 간단하게 수정해보자

let [one, two, three, four] = ["one", "two", "three", "four"];
console.log(one); // one
console.log(two); // two
console.log(three); // three
console.log(four); // four

arr 배열에서 0번째 인덱스는 one, arr 배열에서 1번째 인덱스는 two ... 이렇게 one, two, three, four에 index 0, 1, 2, 3번을 할당 한다 배열의 값을 순서대로 할당 받아 사용할 수 있다.

let [one, two, three, four, five] = ["one", "two", "three", "four"];
console.log(five) // undefined

여기서 만약 선언 되지 않는 값에 대해서 값을 넣게 되면 undefinde가 나오게 되는데 undefined가 나오면 안되는 상황이라 하면 배열에서 새로운 값에 기본 값을 설정 하면 된다.

let [one, two, three, four, five = "five"] = ["one", "two", "three", "four"];
console.log(five) // five

3-2. 배열에서 값들의 스왑(Swap)

배열 내에서 두 값을 서로 교환 하는 것

let arr = [1, 2, 3, 4];

배열 arr에서 첫번째 요소와 마지막 요소의 위치를 바꾸어 보자

let arr = [1, 2, 3, 4];

let tmp = arr[0];
arr[0] = arr[3];
arr[3] = tmp;

console.log(arr) // 4, 2, 3, 1

어떠한 방식으로 값들이 바꼈는지?

1. tmp라는 임시 변수에 arr[0]의 값을 저장
2. arr[0]에 arr[3]값을 넣고, arr[3]에 tmp값을 넣는다
3. 결론 적으로는 arr[0]에 arr[3] 값을 넣고, arr[3]에 arr[0] 값을 넣는 개념

let arr = [1, 2, 3, 4];
[arr[0], arr[3]] = [arr[3], arr[0]];
console.log(arr); // 4, 2, 3, 1

3-3. 객체에서의 비 구조화 할당

let object = {one: "one", two: "two", three: "three", four: "four"};

다음과 같은 객체가 있다고 생각을 해보자 객체에서의 값을 새로운 변수에 할당하려면 다음과 같이 해야한다.

let one = object.one;
let two = object.two;
let three = object.three;
let four = object.four;

console.log(one, two, three, four); // one two three four

하나씩 다 호출을 해야하고, 반복적인 부분이 있기에 번거로울 수 있다 비 구조화 할당으로 코드를 조금 더 단순하게 만들어보자

let object = {one: "one", two: "two", three: "three", four: "four"};

let {one, two, three, four} = object;
console.log(one, two, three, four);

object의 키 값을 기준으로 one이라는 키를 갖는 값을 변수 one에 저장 ... object의 키 값을 기준으로 four이라는 키를 갖는 값을 변수 four에 저장하는 방식이다.

객체에서의 비 구조화 할당은 순서가 아닌 key값을 기준으로 할당하게 된다.

객체에서의 비 구조화 할당은 키 값으로 할당을 하기에 변수가 키 값으로 강제되는 경향이 있다. 다음은 키 값으로 얻은 변수의 네이밍을 바꾸는 과정이다

let object = {korea: "서울", japan: "도쿄", usa: "워싱턴"};

let {usa, korea, japan} = object; // 배열과는 다르게 순서와 상관이 없다는 것을 볼 수 있다.
console.log(korea, japan, usa);

// 그럼 이제 키와 동일한 변수의 네이밍을 바꾸어 보자

let object = {korea: "서울", japan: "도쿄", usa: "워싱턴"};
let {usa: 미국, korea: 한국, japan: 일본} = object; // 새로운 변수에 할당하기
console.log(한국, 일본, 미국);

4. 정리하는 문제

1. 정수 n이 매개변수로 주어질 때 n의 각 자리 숫자의 합을 return하도록 solution 함수를 완성해주세요

function solution(n) {
    var answer = 0;
    const str = n.toString();

    for( let i = 0; i < str.length; i++) {
        answer += parseInt(str[i])
    }

    return answer;
}

처음에 join해서 구간을 나눠야 했나 했는데 그게 아니였다 숫자를 문자로 변경 후 그 길이를 체크해서 각각 숫자열로 다시 변환

문자열의 길이를 이용하여 반복문을 통해 자리수 자르기

2. 문자열 배열 strlist가 매개변수로 주어집니다. strlist 각 원소의 길이를 담은 배열을 retrun하도록 solution 함수를 완성해주세요.

function solution(strlist) {
    const answer = [];
    for(let str of strlist) {
        answer.push(str.length);
    }
    return answer;
}

이걸 풀고나면 다른 사람은 어떻게 풀었는지 볼 수 있는데 같은 문제여도 정말 다 다르다 이렇게도 풀 수 있구나라는 생각도 들더라

배열로 새로운 배열을 만들 때 map함수가 유용하게 쓰이는 것 같다 다음엔 그렇게 풀어보자

3. 정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요.

function solution(array, n) {
    let answer = 0;
    const array2 = array.filter(el => el === n)

    answer = array2.length;

    return answer;
}

고민 하다가 이거 filter로 하면 되겠는데? 라고 해서 했는데 처음에 error가 뜨길래 아 아닌가 했는데 fillter로 써버림,,,, 오타 잘 체크하자 그래도 공부한걸 써보니 조금 더 도움이 되었던 것 같다

4. 영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 my_string이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요.

function solution(my_string) {
    const vowels = 'aeiouAEIOU';
    let answer = '';

    for(let i = 0; i < my_string.length; i++) {
        const str = my_string[i];
        if(vowels.indexOf(str) === -1) {
            answer += str
        }
    }

    return answer
}

나름 진지하게 푼 문제인데 어떻게 풀지 하다가 indexOf를 이용해서 포함이 아니면 -1 반환 하는걸 이용해서 풀었다

5. 선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다. 가장 긴 변의 길이는 다른 두 변의 길이의 합보다 작아야 합니다. 삼각형의 세 변의 길이가 담긴 배열 sides이 매개변수로 주어집니다. 세 변으로 삼각형을 만들 수 있다면 1, 만들 수 없다면 2를 return하도록 solution 함수를 완성해주세요.

function solution(sides) {
    sides.sort((a, b) => a - b);
    console.log(sides);
    let [a, b, c] = sides;

    return a + b > c ? 1 : 2
}

이거 보자마자 비 구조화 할당 해서 변수 값 합쳐서 비교 하면 될 것 같은데 라고 생각 들어서 했는데 정답이여서 기분 좋았음 + sort() + 비교 함수 사용하기

특정 코드를 하나의 명령으로 실핼 할 수 있게 해주는 기능, 어떤 일의 단위 이 장에서는 함수를 알아보자

함수는 기본적으로 다음과 같은 형식이다.

function 함수이름 (매개변수) {
    함수가 할 일;
    return 반환
}

• 매개변수 - 함수에 전달해야되는 내용이 있을 때, 이 함수가 실행될 때 알아야되는 내용이 있을 때 매개변수를 통해 전달한다.
• retrun - 반환값, 함수 완료 후, 반환되어야 하는 값이 있을 때 사용한다.

1-1. 함수의 기본

함수를 선언하고, 지역 변수와 외부 변수를 알아보자

함수 선언, 지역 변수

function showMessage() { // 함수 선언
    let message = "안녕하세요"; // 지역 변수
      console.log( message ); // 안녕하세요가 출력 된다
};

showMessage(); // 안녕하세요가 출력 된다

console.log( message ); // ReferenceError: message is not defined

왜 이런 결과가 나올까?

• message는 showMessage 함수의 지역 변수 이기에 외부에서는 호출이 되지 않는 성질을 가지기 떄문이다. 그럼 외부에서 호출이 가능한 변수도 있을까? 그게 외부 변수이다.

외부 변수

함수에선 외부 변수에 접근, 수정이 가능하다.

let userName = "John";

function showMessage() {
    userName = "Bob"; // (1)
      let message = "hello" + userName;
      console.log(message);
};

console.log( uesrName ); // (2) John이 출력된다.

showMessage(); // (3)

console.log( userName ); // (4) Bob이 출력된다.

(1) - 외부 변수 userName을 함수 내부에서 수정함 (2) - 수정한 함수를 호출하지 않기에 John이 출력된다. (3) - 수정한 함수를 호출 (4) - 외부 변수를 수정한 함수에 의해 Bob으로 출력이 된다.

1-2. 함수 이름 짓기

동작을 수행하기 위한 코드

• show - showMessage() 무언가를 보여주는 함수
• get - getAge() 값을 반환
• calc - calcSum() 무언가를 계산
• create - createForm() 무언가를 생성
• check - checkPermission() 무언가를 확인하고 불린값을 반환

함수는 동작 하나만 담당해야 한다.

• getAge - 함수는 나이를 얻어오는 동작만 해야한다.
• createForm - 함수는 form을 만들고 이를 반환하는 동작을 해야 한다.
• checkPermission - 함수는 승인 여부를 확인하고 그 결과를 반환하는 동작만 해야한다.

2. 함수 표현식(Function Expression)

2-1. 함수 표현식, 함수 선언문의 다른점 - 문법

// 함수 선언문
function sum(a,b) {
    return a + b;
}

// 함수 표현식
let sum = function(a,b) {
    retrun a+ b;
};

2-2. 함수 표현식, 함수 선언문의 다른점 - 함수의 생성 시점

// 함수 선언문
greet("Hyun"); // 안녕하세요! Hyun님 출력

function greet(name) {
    console.log(`안녕하세요! ${name}님`);
}

• 함수 선언문 - 코드 실행전 호이스팅되어 함수가 정의된 위치에 상관없이 코드 어디서든 호출이 가능

// 함수 표현식
greet("Hyun"); // TypeError: greet is not a function

const greet = function(name) {
    console.log(`안녕하세요! ${name}님`);
};

• 함수 표현식 - 함수를 변수에 할당하기에 변수가 할당된 이후에 호출이 가능하다 변수에 값이 할당되기에 변수에 대한 스코프 규칙을 따른다.

3. 콜백함수(Callback Function)

• 어떠한 함수가 실행이 끝난 뒤 호출되는 함수

• 함수가 어떤 이벤트가 발생, 특정 시점에서 호출 되게끔 하는 함수
• 주로 비동기 작업에서 사용이된다.

function fetchData(url, callback) {
    console.log(`데이터를 ${url}에서 가져오는 중..`);
      setTimeout(function() {
    const data = "가져온 데이터";
       callback(data); // 콜백 함수 호출
    }, 2000);
}

fetchData("https://example.com/data", function(result){
    cosnole.log(`데이터를 가져오는데 성공했습니다 ${result}`);
})

1. fetchData 함수가 호출되면서 데이터를 가져오는 중.. 메시지 호출
2. 2초 후 setTimeout 내부의 콜백 함수가 실행되고, 가져온 데이터가 callback을 통해 전달
3. fetchData 함수 완료 후 데이터를 가져오는데 성공했다는 메시지 출력

-> 콜백 함수는 주로 비동기 작업의 완료를 처리하거나 특정 이벤트가 발생할 떄 실행되어야 하는 작업을 할 때 사용한다.

4. 화살표 함수(Arrow Function)

함수 표현식보다 단순하고 간결하게 함수를 만들기

let func = (arg1, arg2, ... argN) => experssion

• arg1, ..argN을 인자로 받는 함수 func 생성
• func 함수는 => 우측의 표현식(expression)을 평가하고 결과를 반환

함수 표현식을 화살표 함수로 변경하기

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "동의하십니까?",
  function() { alert("동의하셨습니다."); },
  function() { alert("취소 버튼을 누르셨습니다."); }
);

let ask = (question, yes, no) => confirm(question) ? yes() : no();

ask(
  "동의하십니까?",
  () => alert("동의하셨습니다."),
  () => alert("취소 버튼을 누르셨습니다.")
);

5. 함수 내용 정리하는 문제

1. 이름 매개변수로 전달받아 다양한 이름 프린트하는 함수 만들기

   const greet = function (name) {
   console.log(`안녕하세요 저는 ${name}입니다.`);
   };
   

greet("동현");

2. 다음 조건에 맞는 `meetAt` 함수 만들기 
* 인자를 세개 받는다
* 첫번째 인자는 년도에 해당하는 숫자
* 두번째 인자는 월에 해당하는 숫자
* 세번째 인자는 일에 해당하는 숫자
* 년도 인자만 받았을 경우 -> "1111년"과 같은 형식의 문자열을 리턴
* 년도,월 인자 받았을 경우 -> 년도와 월을 조합 "1111년 1월" 같은 형식의 문자열 리턴
* 년도,월,일 인자 받았을 경우 -> "년도/월/일"과 같은 형식의 문자열 리턴

```js
const meetAt = function (year, month, date) {
  let todayYear = year;
  let todayMonth = month;
  let todayDate = date;

  if (todayDate) {
    return `${year}/${month}/${date}`;
  }
  if (todayMonth) {
    return `${year}년 ${month}월 입니다.`;
  }
  if (todayYear) {
    return `${year}년 입니다.`;
  }
};

console.log(meetAt(1997, 08,22));

• 처음에 todayYear를 가장 위로 올리고 todayDate를 가장 밑에 했더니 계속 년도만 표시 되었다 return은 첫 번째 조건이 만족되면 함수가 즉시 반환되는 특성을 몰랐기에 발생한 문제였다.

3. findSmallestElement 함수 구현하기

• 위 함수의 arr 인자는 숫자 값으로만 이루어진 배열입니다.
• arr의 값들 중 가장 작은 값을 리턴해주세요.
• 만약 arr 비어있다면 0을 리턴 해주세요.
• ex) 다음과 같은 배열이 인자(input)으로 들어왔다면 0이 리턴 되어야 한다 [100, 200, 3, 0, 2, 1]

function findSmallestNumber(arr) {
  let result = arr[0];
  if (arr.length === 0) {
    return 0;
  }
  for (let i = 1; arr.length > i; i++) {
    if (result > arr[i]) {
      result = arr[i];
    }
  }
  return result;
}

let smallestNumber = findSmallestNumber([1, 2, 3, 4, 5, 5, 6, 7, 8, 9, 10]);

console.log(smallestNumber);

for문을 forEach문으로 바꿔보자

function findSmallestNumber(arr) {
  let result = arr[0];
  if (arr.length === 0) {
    return 0;
  }

  arr.forEach(function (num) {
    if (result > num) {
      result = num;
    }
  });
  return result;
}

let smallestNumber = findSmallestNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);

console.log(smallestNumber);

• 이 문제의 포인트는 비교를 해서 작은 값이 나오면 다음값과 비교를 하는 것 그러고 끝이 되었을 때 작은 값을 return하는 것이다.

4. 돈을 바꿔주는 함수 만들기

• 매개변수로 돈의 금액이 들어간다
• 금액이 들어가면 몇 개의 지폐와 동전이 필요한지 최소 개수를 계산해준다.
• 지폐의 기준은 한국으로 한다. (5만원, 1만원, 5천원, 1천원, 500원, 100원)
• ex) 12500인 경우 10000 X 1, 1000 X 2, 500 X 1

let unit = [50000, 10000, 5000, 1000, 500, 100];

function calcChages(money) {
  let result = "";
  for (let i = 0; i < unit.length; i++) {
    let count = Math.floor(money / unit[i]);
    if (count > 0) {
      result += `가장 최소 지폐는 ${unit[i]} X ${count}장 입니다.\n`;
    }

    money = money - unit[i] * count;
  }
  return result;
}

const chageDetails = calcChages(234500);
console.log(chageDetails);

• 기준이 되는 배열을 만든다

• 나머지는 버린다. Math.floor
• 해당 결과값을 변수에 저장하고 반환한다.

조건문을 사용하면 특정 조건이 만족했을 때 특정 코드를 실행 할 수 있는 구문

1-1. if문

if(...)문은 괄호 안에 들어가는 조건을 평가, 그 결과가 true이면 해당 코드 블럭이 실행 -> 괄호 안의 표현식을 평가 -> 불린 값으로 변환

• 숫자 0, 빈 문자열 "", null, undefined, Nan 모두 불린형으로 변환 시 false

const number = 1;
if(a + 1 === 2) {
    console.log("정답입니다."); // ()안의 조건이 true이니 정답입니다가 출력이 된다.
};

그럼 a 의 값을 바꾼다면?

const number = 9;
if(a + 1 === 2) {
    console.log("정답입니다."); // ()안의 조건이 false이니 아무것도 출력이 되지 않는다.
};

1-2. if-else문

if(...)문의 괄호 안에 들어가는 조건을 평가하고 그 결과가 false일 때 실행되게 끔 하는 코드 블럭

const number = 9;
if(a + 1 === 2) {
    console.log("정답입니다."); 
} else {
    console.log("오답입니다/"); // ()안의 조건이 false이니 else문의 코드 블럭이 실행된다. 오답입니다가 출력이 된다.
}; 

특정 조건이 만족할 때와 만족하지 않을 때 서로 다른 코드를 실행해야 된다면 if-else문을 사용 할 수 있다.

1-3. if-else if문

여러 조건에 따라 다른 코드 블럭을 실행해야할 때 사용한다.

const rank = 60;

if (rank >= 90) {
    console.log("A+");
} else if (rank >= 65) {
    console.log("B+");
} else {
    console.log("F"); // 위 두개의 조건이 모두 충족이 되지 않았기에 F가 출력
}

위의 조건식을 보면 지금은 위의 두 조건이 충족이 되지 않아 F가 출력 되었지만, 값이 올라가면 B+, A+이 출력 될 수 있다. 그렇기에 if-else if문은 여러 조건이 있을 때 사용하면 유용하다.

1-4. switch/case 문

switch/case 문은 특정 값이 무엇이냐에 따라 다른 코드 블럭을 실핼 할 때 사용한다.

const device = 'iphone13';

switch (device) {
  case 'iphone13':
    console.log('아이폰 15로 바꾸고 싶어요');
    breack;
  case 'iphone14' : 
    console.log('아이폰 15로 바꾸고 싶어요');
      breack;
  case 'iphone15' : 
    console.log('아이폰 15 pro로 바꾸고 싶어요');
    break;
  default:
    console.log('아이폰 15가 최고입니다.');
}

device 값을 'iphone13', 'iphone14', 'iphone15' 에 따라 다른 코드 블럭이 실행이 된다. 가장 밑의 default는 case로 준비하지 않는 값일 경우 실행 되는 코드 블럭이다.

2. 반복문

특정 작업을 반복적으로 할 때 사용할 수 있는 구문

2-1. for

가장 기본적인 반복문 우리가 정한 조건이 만족 -> 반복

for( let i = 0; i  < 10; i ++) {
    console.log(i); // 0 부터 9 까지 출력
}

2-2. while

특정 조건이 참 -> 반복, 언젠간 false가 되도록 해야함

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

조건문 내부에서 변화를 직접 주어야 성립

2-3. for of

배열을 위한 반복문

let numbers = [1, 2, 3, 4, 5, 6];
for (let number of numbers ) {
    console.log(number); // 1 부터 6 까지 출력
}

2-4. for...in

객체를 위한 반복문

const user = {
    name : "Hyun",
      height : "200",
      age : 27, 
};

console.log(Object.entries( user ));
console.log(Object.keys( user ));
console.log(Object.values( user ));

• Object.entries - [[키, 값], [키, 값]] 형태의 배열로 변환
• Object.keys - [키, 키, 키] 형태의 배열로 변환
• Object.values - [값, 값, 값] 형태의 배열로 변환

위의 코드를 for ... in으로 전환해보자

const user = {
    name : "Hyun",
      height : "200",
      age : 27, 
};

for (let key in user) {
    console.log(key, user[key]);
};

둘 중 상황에 맞게끔 사용하면 될 듯 하다

3. 정리하는 문제

1. 유저가 입력하는 숫자가 0인지 음성인지 양성인지 판단하는 로직 짜기

const score = 1;

if (score < 0){
    console.log("음수입니다.");
} else if (score > 0) {
    console.log("양수입니다.")
} else {
    console.log("0입니다.")
}

2. 레포트 점수에 따른 등급을 메기는 로직 짜기

const score = 100;
let grade = ''

if (score >=90 && score <= 100) {
    grade = 'A';
} else if (score >= 80 && score <= 89) { 
    grade = 'B';
} else if (score >= 70 && score <= 79) {
    grade = "C";
} else if (score >= 60 && score <= 69) {
    grade = "D";
} else if (score >= 0 && score <= 59) {
    grade = "F";
} else {
    cosnole.log("점수를 다시 입력해주세요");
}

3. 지원자의 스택이 ["HTML", "CSS", "JavaScript", "React"] 가 있다 이 중 JS, React 둘다 가능하면 "합격", 둘 중 하나만 할 줄 알면 "예비", 두 스킬이 없으면 "탈락"하는 로직 짜기

let userSkills = ["HTML", "CSS", "JavaScript", "React"];

if (userSkills.includes("JavaScript") && userSkills.includes("React")) {
    console.log("합격");
} else if (userSkills.includes("JavaScript") || userSkills.includes("React")) {
    console.log("예비");
} else {
    cosnole.log("탈락");
}

4. 프로그래머스 코테 연습 문제 1 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소의 평균값을 return하도록 solution 함수를 완성해주세요.

function solution(numbers) {
    var answer = 0;
    var sum = 0;
    for (let i = 0; i < numbers.length; i++) {
        sum += numbers[i];
        answer = sum / numbers.length;
    }

    return answer;
}

5. 프로그래머스 코테 연습 문제 2 정수 n이 주어질 때, n이하의 짝수를 모두 더한 값을 return 하도록 solution 함수를 작성해주세요.

function solution(n) {
    var answer = 0;
    for (var i = 0; i <= n; i += 2) {
        answer += i;
    }
    return answer;
}

범위가 작은 것 부터 하나씩 해결 하기 조건에 대한 생각을 천천히 해보면 될 듯 하다 아직은 익숙하지 않아서 그런 느낌인데 하다 보면 많이 늘 것이다.