두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다

제한 조건 a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다.

접근방식

a와 b의 대소관계를 파악하고, 작은 수부터 큰 수까지 사이 수를 구하고, 그 수를 모두 더하자. 문제의 목적자체가 어렵지 않기때문에 효율적은 코드를 짜는게 관건이 될 듯

해결방법

function solution(a, b) {
    var answer = 0;
    if(a < b){
        for(let i = a ; i <= b; i++){
            answer += i
        }
    }else{
        for(let i = b ; i <= a; i++){
            answer += i
        }
    }
    return answer;
}

문제를 직독직해한 코드. 당연히 통과는 한다. 하지만 이 코드는 효율성, 코드 가독성, 간결성 측면에서 최적화가 부족하게 보인다. 또한, 작은수에서 이렇게 += 사용해 모두 더하는 것은 문제가 없지만 수가 커질 수록 비효율적일 수 있다. 그래서 검색을 해봤다. 두 숫자 사이의 합을 한번에 계산하는 공식이 있지 않을까? 이 공식을 보고 a와 b를 비교해서 먼저 큰 수를 찾아야겠구나 생각했다.

📇 출력

function solution(a, b) {
    const start = Math.min(a,b)
    const end = Math.max(a,b)

    return (start + end) * (end - start + 1) /2
}

근데 풀이를 하고 다른 사람 풀이를 보니

return (a+b) * (Math.abs(a-b)+1) / 2;

Math.abs() 메서드를 생각을 못했다..!

🗝️필요한 사전 지식

Math.min() 가장 작은 값을 찾는 메서드다. 배열에서 활용할땐 아래와 같다. 배열의 값들을 스프레드 연산자(...)로 펼쳐서 Math.min()에 전달하여 가장 작은 값을 찾을 수 있다.

const numbers = [15, 3, 8, 22, 7];
console.log(Math.min(...numbers)); // 3

Math.max(x) 가장 큰 값을 반환하는 함수다. 여러 인수를 입력받아 그중 가장 큰 숫자를 찾아줍니다. 인수를 제공하지 않으면 반환값은 -Infinity이다.

Math.abs() 내가 기억하지 못했던 바로 Math.abs()! Math.abs()는 주어진 숫자가 양수일 경우 그대로 반환되고, 음수일 경우에는 그 음수를 양수로 바꾸어 반환한다. 절대값을 구할 때는 다양한 상황에서 유용하다. 특히, 두 값의 차이를 구할 때 차이가 양수로 표현되어야 할 경우 아주 유용하게 쓸 수 있다.

링크 두 정수 사이의 합

임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요.

접근방식

n의 제곱근을 구하고, 그 제곱근이 정수인지 아닌지 확인한 후, 정수이면 (제곱근 + 1)의 제곱을 반환, 정수가 아니면 -1을 반환합니다.

📇 출력

function solution(n) {
    const sqrt = Math.sqrt(n) 
    return Number.isInteger(sqrt) ? (sqrt+1) ** 2 :  -1  
}

🗝️필요한 사전 지식

Math.sqrt() 제곱근(square root)을 구하는 메서드. 주어진 숫자의 양의 제곱근을 반환하며, 이는 그 숫자를 두 번 곱한 값이 원래 숫자가 되는 수를 의미한다.

Math.sqrt(x)

1. 문법

• 매개변수: x는 제곱근을 구할 숫자
• 반환 값: x의 양의 제곱근을 반환
  • 만약 x가 음수이면, NaN을 반환한다. (제곱근은 음수가 될 수 없기 때문입니다)
  • x가 0이나 양수라면, 그 제곱근을 반환한다.

2. 동작 방식

• 예를 들어, Math.sqrt(9)는 3을 반환한다. 이는 3을 두 번 곱하면 9가 되기 때문.
• Math.sqrt(16)은 4를 반환합니다. 4를 두 번 곱한 값이 16이므로, 제곱근은 4이다.

3. 예시

   console.log(Math.sqrt(9));    // 3
   console.log(Math.sqrt(16));   // 4
   console.log(Math.sqrt(2));    // 약 1.4142135623730951
   console.log(Math.sqrt(-1));   // NaN (음수는 제곱근을 가질 수 없음)

Number.isInteger() 주어진 값이 정수인지 판별하는 메서드. 이 메서드는 주어진 숫자가 정수이면 true를 반환하고, 그렇지 않으면 false를 반환한다.

1. 문법

   Number.isInteger(value)

• 매개변수: value는 확인할 숫자.
• 반환 값: value가 정수이면 true, 그렇지 않으면 false를 반환.

2. 동작 방식 Number.isInteger()는 주어진 값이 정수인지 확인하기 위해 두 가지 조건을 체크한다.

• 자료형: 주어진 값이 숫자여야 합니다.
• 정수 여부: 숫자 값이 소수점 아래에 숫자가 없어야 합니다.

3. 예시

   console.log(Number.isInteger(4));      // true
   console.log(Number.isInteger(4.0));    // true (정수로 표현 가능)
   console.log(Number.isInteger(4.5));    // false
   console.log(Number.isInteger(-3));     // true
   console.log(Number.isInteger("5"));    // false (문자열)
   console.log(Number.isInteger(NaN));     // false (Not-a-Number)
   console.log(Number.isInteger(undefined)); // false
   console.log(Number.isInteger(null));    // false

링크

정수 제곱근 판별

까마득한 순위. 10000안에 들어가는 그날 까지 화이팅!

2023-2024년, 성장 기록 오랜만에 벨로그를 정리했다. 그동안 회사 일에 바쁘다는 핑계로 commit과 개발 블로그에 소홀했지만, 그만큼 많은 것을 배우고 경험한 시기였다. 입사와 퇴사를 반복하는 동안 여러 도전과 성장을 경험했고, 그 과정을 기록해보려고 한다.

첫 번째 회사는 비트코인 거래소 서비스를 제공하는 곳이었다. 비록 6개월 만에 경영 악화로 서비스가 종료되었지만, 돈이 오가는 플랫폼인 만큼 보안에 중점을 둔 코딩을 경험할 수 있었다. 또한, QA팀과의 협업을 통해 테스트 과정에서 이슈를 최소화하는 방법도 배우며 개발의 품질을 높이는 노하우를 쌓았다. 이후 AI 영상 자막 서비스 회사에서는 오픈 멤버로 참여하여 11개월 동안 기획부터 개발, 오픈, 운영까지 폭넓게 경험할 수 있었다. 다양한 기술 스택을 다루며 전반적인 서비스 개발 과정을 깊이 있게 체험할 수 있었지만, 이곳 역시 경영 악화로 인해 대표님으로부터 월급을 보장하기 어려울 것 같다는 메일을 받게 되었다. 이렇게 2023년과 2024년은 입사와 퇴사를 반복하며 많은 고민과 성장을 이루어낸 시기였다.

새로 입사한 회사는 로펌 도메인을 가진 대형 기업이었다. IT 기업은 아니었지만, 안정적인 경영 구조와 회사 규모, 그리고 면접에서 느낀 긍정적인 분위기 덕분에 입사를 결정했다. 면접 당시 1대 6의 상황이었음에도 불구하고 면접관 분들이 내 경험과 역량을 높이 평가해주시는 모습을 보여주셨고, 이것이 곧 회사의 문화일 것이라는 기대감이 들었다. 내가 입사를 선택하게 된 결정적인 이유였다.

그렇게 한달 차, 나는 본사에서 분리되어 새로 꾸려진 부서에 속하게 됐다. 그 중 개발팀은 프론트엔드 1명, 백엔드 1명, 디자이너 1명으로 구성된 신설 팀으로, HTML, CSS, PHP로 작업된 18개의 센터 사이트를 유지보수하고 마이그레이션하는 작업을 맡게 됐다. 프론트엔드 마이그레이션을 주도적으로 진행할 수 있는 기회라니! 생각만 해도 설레였다. 내 첫 업무는 html, css, php 환경에서 퍼블리싱이였다. 퍼블리싱은 감히 내 특기라고 말할 수 있어 그저 출근이 재미있고 설렜다.

그렇게 두달 차, 예상치 못한 회사 내부 변화가 시작됐다. A이사님이 갑작스럽게 교체되셨고, 이사님의 '공감, 겸손, 성장'이라는 운영철칙을 애정하고 따랐던 사원들은 이런 갑작스러운 회사의 결정과 변화를 받아드리지 못했고 한 달만에 팀 4개가 없어졌다. 마이그레이션 역시 기약이 없어졌고 있었던 디자인 팀도 없어진 마당에 우리 팀의 디자이너 TO가 채워지는건 먼 일이 되었다. 인사팀도 없어졌다. 면접에서 뵀었던 네분이 퇴사하셨다. 아직 속단하긴 이른 두달이였지만 두달 동안 진행된 업무는 오직 퍼블리싱과 디자인 업무. 그마저의 일도 없는 날이 있었다. 프론트엔드 업무의 실무 감을 잃어 버릴까 불안해 시작한 평일 알고리즘 스터디와 주말 스터디. 이렇게 자바스크립트와 멀어질 수는 없었다.

그렇게 세달 차, 반복되는 면담과 여전히 기약 없는 마이그레이션으로 초조함이 생겨 팀에 업무를 제안 해보기도 했지만, 당시 상황에서 추가적인 업무를 받아들이는 것이 쉽지 않았고, 제안은 받아들여지지 않았다. 그래서 나는 주어진 상황에서 내가 할 수 있는 것을 시작했다. 기술경력서도 업데이트하고 매일 알고리즘 문제를 풀었다. 이를 기록하기 위해 벨로그를 다시 시작했고, 11월부터 시작되는 사이드 프로젝트에도 참여했다. 새롭게 다시 시작이라는 게 막막하게 느껴지기도 하지만 더 발전하기 위한 새로운 시작이라고 생각한다! 다시 가보자!

📖Study

퍼블리셔 기간 제외 웹 개발을 하면서 곧 2년차가 되어가는데 자바스크립트에 대해 아직은 모르는 부분이 많다고 느껴진다. 자바스크립트의 늪은 정말로 방대하다. 2년차가 되기 전에 Modern Javascript Deep Dive 책 완독이 목표다. 그리고 올해가 가기전 프로그래머스 Lv.2 진입이 목표다. 화이팅

💡Algorithm

알고리즘은 어렵다는 인식이 있어서 도전을 해보지 않았는데 처음 퍼블리셔를 도전했었던 것처럼 정말 갑자기 하고싶다는 생각이 들었다. 그래서 프로그래머스 Lv.0부터 시작해 지금은 Lv.1을 풀고있다. 아직은 너무 재미있다. 자꾸 생각이 나서 퇴근하자마자 다시 앉아 풀만큼. 언젠가는 공채 코딩테스트 문제도 재미있게 풀만큼 성장하고싶다.

🏋🏻‍♀️Health

처음에는 회사 출근 시간을 적응하느라 저녁도 못먹고 잠에 들었었다. 그래서 체력을 늘리기 위해 한강이나 동네를 2-3바퀴 달리고 있다. 야근도 하고 공부도 하려면 체력은 필수라고 느껴진다. 집 밖보다는 안을 좋아하는 성격이지만 노래 들으면서 하는 산책은 또 좋아하는 편이라 이사오고 나서 일주일에 3번 정도는 꾸준히 하고있다. 집 주변이 뛰기 좋은 환경이라 이사 온곳도 아주 만족하고있다.

♾️Skills

이전 회사에서는 기술스택이 Next.js, React, Typescript, TailwindCSS, Zustand다. 입사 후 새로운 프로젝트(AI 자막 솔루션)에 투입되는 팀이였기 때문에 기술채택부터 세팅까지 직접 해볼 수 있는 기회가 있어 좋았다. 기술 채택을 할 때는 주니어 개발자들이였기 때문에 다른 회사들의 기술스택을 많이 참고했다. 특히 우아한 형제들 기술팀에서 찍은 영상을 참고해 우리 프로젝트에 적합한 기술들을 도입했다. 처음에는 Styled component 방식을 선호해서 가독성이 좋지 않고 클래스명을 외워서 써야 하는 tailwind 사용에 불편함이 많았지만 익숙해 지면 반응형 작업을 할때도 편리하고 LucidIcon과 결합하여 사용하니 장점이 더 많이 느껴졌다. 2023년도에 커리어적으로 가장 도움이 많이 됐던 일은 아마 typescript와 tailwind를 배워 실무에 직접 적용해 프로젝트를 오픈한 경험이 아닐까 싶다. 9to03이라는 강도 높은 업무량을 소화해야했지만 퍼블리셔를 벗어나 웹 개발자로 완전히 진입한게 느껴졌던 1년이였다고 생각한다.

여기서 궁금증이 생겼다

1. index로 주면 왜 안되는가?

데이터가 변하지 않는 경우에는 index를 사용해도 문제가 없다! 하지만 데이터가 추가되고 삭제되는 경우, 데이터가 변경되면서 reRendering 되고 index가 0부터 다시 mapping 되면서 사이드 이펙트가 발생합니다.

2. 데이터에 고유한 id가 없는 경우는 value값으로 대체해도 되는가?

고유한 식별자라면 사용할 수 있다. 코드로 예를 들어 보자.

const extensionObjects = [
  { language: "English", type: "SRT" },
  { language: "Spanish", type: "VTT" },
];

{extensionObjects.map((ext, index) => (
  <div key={`${ext.language}-${ext.type}`}>
    {ext.language}
  </div>
))}

language와 type을 조합하여 고유한 키를 만들 수 있다면 이런식으로도 사용할 수 있다.

React Hook Form

React Hook Form은 React 애플리케이션에서 폼을 쉽게 다룰 수 있도록 도와주는 라이브러리 중 하나다. React Hooks를 사용하여 폼 상태를 관리하고 폼 제출을 처리하는데에 목적이 있다고 해석할 수 있다. 주요 특징과 사용법에 대해 간단하게 정리해 보겠다.

1. 간편한 사용: React Hook Form은 간단하게 사용할 수 있다. useForm, useFieldArray, useWatch와 같은 커스텀 훅들을 제공하여 필요한 상태나 기능을 쉽게 사용할 수 있다.

2. 효율적인 성능: 렌더링 성능을 최적화하기 위해 불필요한 리렌더링을 방지해준다고 한다.

3. 최소한의 보일러플레이트 코드: 다른 폼 라이브러리들과 비교했을 때 더 적은 양의 코드로 폼을 구현할 수 있다.

4. 리액트 훅스 사용: React Hook Form은 주로 리액트 훅스 (React Hooks)를 사용하여 폼의 상태를 관리한다. 이를 통해 함수형 컴포넌트에서도 간편하게 폼을 다룰 수 있다는 장점이 있다.

예시

import React from 'react';
import { useForm, SubmitHandler } from 'react-hook-form';

interface FormInputs {
  firstName: string;
  lastName: string;
}

const MyForm: React.FC = () => {
  const { register, handleSubmit } = useForm<FormInputs>();

  const onSubmit: SubmitHandler<FormInputs> = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('firstName')} />
      <input {...register('lastName')} />
      <button type="submit">Submit</button>
    </form>
  );
};

그렇다면 shadcn의 react hook form은 무엇일까?

예시

const form = useForm()

<FormField
  control={form.control}
  name="username"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Username</FormLabel>
      <FormControl>
        <Input placeholder="shadcn" {...field} />
      </FormControl>
      <FormDescription>This is your public display name.</FormDescription>
      <FormMessage />
    </FormItem>
  )}
/>

shadcn/ui에서 쓰는 react hookt form은 조금 형태가 다르다. react hook form보다 같은 기능이나 ui 입히기가 쉽고 기능에 특화된 것들을(focus 등등)을 설정하기 쉽다고 하는데 react hook form을 작업할때 큰 불편함을 못 느꼈어서 그런지 shadcn/ui react hook form으로 바꾼 지금 크게 차이를 느끼지 못하겠다.

HTTP에는 여러가지 메서드가 있다. 클라이언트가 서버에 요청을 전송할 때 사용된다.

• GET : 조회
  • 주로 데이터를 요청할 때 사용되며 쿼리스트링으로 보냅니다.
• POST : 생성하거나 수정
  • 요청의 본문 (body)에 데이터를 담아 전송합니다.
• PUT : 업데이트
  • 전체 리소스를 업데이트하기 위한 데이터를 전송
  • 요청의 본문 (body)에 데이터를 담아 전송합니다.
• PATCH: 리소스의 부분적인 업데이트
• DELETE: 삭제

mutation, query에 대해 정리하기

• query

  • 목적: 데이터를 읽기 위해 사용됩니다.
  • HTTP 메서드: 주로 GET 메서드를 사용하며, 데이터를 가져올 때 사용됩니다.
  • 특징:
    • 클라이언트는 필요한 데이터의 구조를 지정하여 서버로부터 해당 데이터만을 요청할 수 있습니다.
    • 여러 리소스에서 필요한 정보를 한 번에 요청할 수 있습니다.
    • 읽기 전용 작업에 사용됩니다.

• Mutation:

  • 목적: 데이터를 변경하기 위해 사용됩니다.
  • HTTP 메서드: 주로 POST 메서드를 사용하며, 서버에 데이터를 생성하거나 수정할 때 사용됩니다.
  • 특징:
    • 클라이언트가 서버에게 데이터를 변경하도록 요청할 때 사용됩니다.
    • 서버에 의해 수행되는 작업은 주로 데이터의 생성, 수정, 삭제 등이 포함됩니다.
    • 읽기와 쓰기 작업을 통합할 수 있습니다.

컴포넌트 분리를 어떤 기준으로 하면 좋은가?

프로젝트를 진행하면서 여러번의 회의를 하며 모두가 함께 고민했던 주제이기도 했다. 여러명이 함께 페이지를 나눠 작업하는 프로젝트 일 수록 컴포넌트 분리에 대한 기준은 명확해야한다. 내가 생각해본 컴포넌트 분리 기준에 대해 정리해보겠다.

1. 기능 가장 기본적으로 '컴포넌트 분리'라고 하면 떠오르는 기준이 기능적 분리이다. 페이지를 제작하기 전에 페이지 디자인(피그마)을 보면 가장 먼저 하는 일이 아마도 어떤 기능들이 있는지, 몇개의 기능이 있는 페이지 인지일 만큼 기능은 그 작업의 메인요소라고 할 수 있다. 따라서 컴포넌트 역시 특정 기능 또는 역할을 담당하도록 분리하면 나중에 있을 유지보수나 수정을 할 때에도 편리하게 작업 할 수 있을 것이다. 또한, 비슷한 기능을 가진 코드를 하나의 컴포넌트로 묶어 모듈화한다면 재사용성을 높일 수 있다.

2. 모듈화 기능에서도 잠깐 언급된 모듈화란 코드를 재사용 가능한 작은 모듈로 컴포넌트를 분리하여 재사용과 유지보수를 쉽게 만드는 것이다. 모듈 간의 의존성을 최소화하고, 각 모듈이 독립적으로 테스트 가능하도록 설계한다면 사이드 이펙트를 줄일 수 있다.

3. 변경 동일한 기능을 하거나 동일한 이유로 변경될 가능성이 있는 코드를 동일한 컴포넌트로 묶는다. 예를 들어, 동일한 로직이 여러 부분에서 사용된다면, 해당 로직을 하나의 컴포넌트로 추출해 사용 할 수 있다.

컴포넌트의 분리는 프로젝트의 특성에 따라 기준을 정해 사용할 수 있으며 주요 목표는 유지보수성, 재사용성이라는 생각이 든다.

자바스크립트의 모든 값은 타입이 있다

• 명시적 타입 변환 (타입 캐스팅) : 개발자가 의도적으로 값의 타입을 변환하는 것
• 암묵적 타입 변환(타입 강제 변환) : 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 것

🚩이 때 기존 원시 값이 직접 변경 되는 것은 아니다! 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성해 내는 것이다. (⭐원시값은 변경 불가능한 값이라 변경할 수 없다)

암묵적 타입 변환의 경우, 다른 타입의 새로운 원시 값이 재할당 되는 개념이 아니라 새롭게 생성돼서 한번만 사용되고 버려지는 개념이다.

개발자의 의도를 코드에서 예측할 수 있는 명시적 타입 변환에 비해 암묵적 타입 변환은 개발자의 의도를 예측하기 어렵다. 이런 타입 변환을 예측하지 못한다면 오류를 발생시킬 확률이 높기때문에 나와 내 코드를 볼 동료가 예측 가능한 코드를 만들어야 좋은 코드라고 할 수 있다! (때문에 타입스크립트를 선호 하는듯 하다!)

1. Truthy / Falsy 값 판별하는 함수

   //전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
   function isFalsy(num){
   return !num; 
   }
   

//전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환한다. function isTruthy(num){ return !!num; } ```

1. 리액트의 상태변화는 '단방향' 그리고 '명시적'으로 이루어진다. 때문에 상태가 변화했다면, 그 상태 변화를 명시적으로 일으키는 함수만 찾으면 된다.

2. JSX : 자바스크립트에 HTML을 살짝 가미한 수준

3. 비교적 낮은 러닝커브 : 1+2 조합으로 처음에 비교적 난이도가 쉽다. 하지만 성능 최적화하는 것부터는 어렵다는 점!

4. 강력한 커뮤니티와 메타의 디팬스(defence) : 자유도가 높은 리액트로 많은 개발자들이 꿈과 희망을 펼치기 시작했고 그로 인해 정보나 이슈해결에 도움이 되는 커뮤니티가 활성화 되었다. 또한 메타(이전의 페이스북)가 적극 지원을 해주면서 꾸준히 성장 할 수 있었다.

React의 등장

페이스북 팀은 더 나은 사용자 경험을 위해 BoltJs라는 새로운 프레임워크를 개발한다. 하지만, 돌연 삭제되고 그 이유는 공개하기에는 부족한 코드라는 판단이 아니였을까 추측된다. 그에 따라 많은 개발자들이 Functional Bolt 즉 Fbolt(함수형 boltJs)를 생각해 내는데 훗날 이것이 React가 됩니다. 모델의 데이터가 변경되면 이전 DOM을 버리고 새롭게 렌더링하자!는 아이디어가 나온 것이다. 🎉 그렇게 React 의 역사가 시작되었다. 🎉

React의 발표

JsConf US 2013 에서 공개했으나 처음에 반응은 그다지 호의적이지 않았다. "자바스크립트랑 HTML을 섞다니! It's terrible!!!😱" 하지만! 오픈소스 컨트리뷰터에게서 많은 아이디어를 얻기 시작하면서 빛을 보기 시작했다. 메타는 이 기회를 놓치지 않고 리액트 커뮤니티를 형성하는데 노력을 쏟기 시작한다.

자리잡기 시작한 React

점차 추가되는 기능과 복잡해지는 요구사항으로 고민하던 야후!메일을 시작으로 넷플릭스도 긴 최초 상호작용시간, 오래걸리는 사이트 빌드 등의 이유로 어려움을 겪다가 야후!메일의 성공을 보고 react를 적용하기로 한다. 전 세계에서 두번째로 큰 IT 회사인 넷플릭스가 React를 적용하다니! Bravo!🙌🏻 🎊 React 전성기의 시작이다! 🎊

01. 리액트 개발을 위해 꼭 알아야 하는 자바스크립트 (~53p)

1. Es6에서 새롭게 도입된 비교 문법 Object.js

• Object.js

  • === 처럼 타입이 다르면 false를 반환한다.
  • -0 === +0 => true / Object.is(-0, +0) => false
  
  

2. 부수효과를 최소화하기 위해서 useEffect를 최소한으로 사용하는 것이 좋다. useEffect 사용을 줄임으로써 함수의 역할을 좁히고, 버그를 줄이며, 컴포넌트의 안정성을 높일 수 있다.

02. 리액트 핵심요소 깊게 살펴보기

1. JSX 리액트에서 JSX를 접하다 보니 리액트의 전유물이라고 착각하기 쉬운데 JSX는 독자적인 문법이라는 사실! 하지만, 아무런 처리없이 JSX 코드를 실행하면 오류가 발생한다. 반.드.시 트랜스파일러를 거쳐야 자바스크립트 런타임이 이해할 수 있는 자바스크립트 코드로 변환된다.
   • JSXElement
     <>
   • JSXAttributes
   • JSXChildren
   • JSXStrings

1-1. JSX가 변환되는 특성을 활용

import {createElement, PropsWithChildren} from 'react';
  function Text({
     isCheck,
     children,
}: PropsWithChildren<{ isCheck : boolean}>) {
   return isCheck ? (
     <h1 className="text">{children}</h1>
   ) : (
    <span className="text"> className="text">{children}</span>
   )
}
  //이런식으로 짠다면 불필요한 코드 중복이 일어나서 비추
  //
  //
  import {createElement, PropsWithChildren} from 'react';
   function Text({
     isCheck,
     children,
}: PropsWithChildren<{ isCheck : boolean}>) {
   return createElement(
      isCheck ? 'h1' : 'span',
    { className : 'text'},
    children,
   )
}
// JSX 반환값이 결국 React.createElement로 귀결된다는 것을 알면
// 이렇게 리팩토링 삽가능!

2. 가상 DOM 하나의 페이지에서 모든 작업이 일어나는 싱글 페이지 어플리케이션의 경우 DOM의 부담도 크다. 때문에 탄생한 것이 가상 DOM이다.

가상 DOM은 말그대로 실제 브라우저의 DOM이 아닌 react에서 관리하는 가상의 DOM이다. 가상의 DOM은 실제 브라우저의 DOM을 일단 메모리에 저장하고 리액트가 실제 변경에 대한 준비가 완료됐을 때 실제 브라우저 DOM에 반영한다. 이렇게 메모리에서 계산하는 과정을 한번 거치게 된다면, 실제 DOM이 받는 부담을 덜 수 있다.

2-1 가상 DOM을 위한 아키텍처, 리액트 파이버 파이버는 가상 DOM과 실제 DOM을 비교해서 변경사항을 수집한다. 후에 파이버 기준으로 렌더링을 요청한다. 이것은 모두 비동기작업으로 이루어진다는 점! 파이버는 컴포넌트가 최초로 마운트되는 시점에 생성되어 가급적이면 재사용된다.

systemIdx: number;

타입을 지정해주었고

const systemIdx = sessionStorage.getItem("systemIdx");

아마도 아니 무조건 number여야만! 하는! 값을 세션에서 받아와서

systemIdx: systemIdx

props를 넘겨주는데!

화를 잔뜩 나게 하는 빨간줄.. 타입오류..

🚩 if (typeof systemIdx !== "number") return alert("타입에러");

이렇게 예외처리를 넣어서 해결해주었음! 캬캬캬

JavaScript가 무엇일까?

• 역사 : 지금 자바스크립트는 아주 널리, 필수로 쓰이고 있는 스크립트 언어지만 그 시작은 단 10일이였다. 1995년 넷스케이프에서 근무하던 브랜든 아이크에 의해 10일만에 탄생된 자바스크립트. 그는 그때 자바스크립트가 이렇게까지 사용될 줄 알았을까? 처음 이름은 Mocha로 시작으나 4달만에 LiveScript로 개명하고 다시 3달 후에 Java와 비슷한 JavaScript로 개명하면서 유명세를 타기시작하고 지금까지 이어지고 있다. 개명 이유를 Java와 비슷한 구문을 사용하기 때문이라고 했지만, 당시 유명했던 Java에게 묻어가기 위함이 아닌가하는 의견들이 많다. 결과적으로 그런 의도는 성공적인 결과를 끌어냈다. 나도 처음 JavaScript 공부를 시작했을때 Java와 이름이 비슷해서 비슷한 언어인가 하는 의문을 갖고 찾아봤었다. 그렇게 알게 된 둘의 관계는 햄과 햄스터 정도라는 것!

JavaScript의 특징 JavaScript는 약 28년간의 발전을 거쳐오면서 성숙한 프론트 프로그래밍의 기본언어로 자리 잡게 되었습니다. 브라우저들은 ECMA 표준사항을 따라가고 있으며 그로 인해 제이쿼리같은 라이브러리의 도움이 필요하지 않게 됩니다.

• 싱글 스레드 언어 싱글 스레드 언어이기 때문에 코드가 작성된 순서대로 작업이 처리됩니다. 이것을 동기방식이라하며 다른 작업이 불가능하도록 막습니다.(블로킹) 반대로 비동기 방식은 기다리지 않고 실행하겠다(논블로킹)는 의미입니다. (2초 setTimeout을 걸어도 기다리지않고 다음 애가 실행됨) 자바스크립트에서 어떻게 비동기 방식을 처리하는 지는 다른 글에서 다루겠습니다.
• SPA(Single page Application)는 완전한 새로운 페이지를 불러오지않고 업데이트된 필요한 데이터만 불러오는 기법으로 전체적인 트래픽 감소와 렌더링에서 좋은 효율을 낸다는 이점때문에 최근에 많이 사용되고 있는데 JavaScript만으로 구현이 가능하나, 더욱 쉽게 만들기 위해 React나 Angula, Vue 등의 프레임 워크의 도움을 받습니다.
• 객체 지향 언어 JavaScript를 구성하는 거의 모든것이 객체입니다. 원시형(단하나의 값만을 나타냄)을 제외한 모든것이 관계성있는 객체들의 집합이라고 볼 수 있습니다. 명령형, 함수형, 프로토타입 기반 객체 지향 언어입니다. JavaScript는 클래스 개념이 없고 별도의 객체 생성 방법이 존재합니다.

  //객체 리터널
  const object = {};
  object.name = 'Nia';   

  //object() 생성자 함수
  const obj = new Object();
  obj.name = 'Nia'

  //생성자함수
  function O(){}
  const obj2 = new O();
  obj2.name = 'Nia';

*JavaScript의 이점 *

• JavaScript는 *인터프리터 언어이기 때문에 Java와 같은 컴파일이 필요한 프로그래밍 언어에 비해 시간이 적게 소요됩니다.
• 인터프리터 언어란? : 프로그래밍 언어를 컴파일하여 기계언어로 바꾸지 않고 바로 실행할 수 있는 언어를 뜻한다.
• 대중화되어 있기 때문에 정보를 얻기 쉽고 소스를 접하기 쉬우며 접근하기 용이하다는 장점이 있습니다.

JavaScript를 직접써보면서 느낀 장점 & 단점 퍼블리셔로 근무를 시작했기때문에 JavaScript보다 JQuery를 먼저 접했었습니다. 그래서 JQuery와 비교를 하면서 느낄 수 있었던 점은,

• 먼저 문법에서 차이를 느낄 수 있습니다. 개인적으로 JQuery 문법이 더 쉽고 간결하게 느껴졌습니다.

  //JQuery
  $('.blackBox').css('background-color', 'black') 

  //JavaScript
  const blackBox = document.getElementById("blackBtn"); 
  blackBox.addEventListener("click", (e) => {
  document.body.style.backgroundColor = "black";
  });

  예제코드에서 볼 수 있듯이 직관적으로 보기에도 JQuery 문법이 짧고 간결함이 느껴진다. 하지만 그 처리속도에서 차이가 느낄 수 있는데 JQuery는 단계를 거쳐서 실행되기 때문에 JavaScript보다 느립니다.

공부하면서 참고했던 모든 것

1. 무료강좌

• 윤인성 혼자공부하는 자바스크립트 https://youtube.com/playlist?list=PLBXuLgInP-5kxpAKy2DNXoebCse2grHjl
• 유튜브 > 제로초 > 2021 자바스크립트 https://youtube.com/playlist?list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt
• 별코딩 https://www.youtube.com/playlist?list=PLZ5oZ2KmQEYiGLIDlsTQR_wdfCH9ZD6lx
• 코딩앙마 https://www.youtube.com/watch?v=ocGc-AmWSnQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4
  

2. 유료강좌

• 인프런 > 김영보님 강의 https://www.inflearn.com/courses?s=%EA%B9%80%EC%98%81%EB%B3%B4
• 코딩애플 https://codingapple.com/
  

3. 인사이트

• https://poiemaweb.com/
• https://ko.javascript.info/
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide

npm run build 압축된 파일을 얻을 수 있음 압축된 형태로 배포할 수 있도록 해주는 것임 build라는 폴더가 생김

npm install -g serve 파일을 배포할 수 있는 패키지 serve라는 명령어를 깔아야 배포할 수 있음

!! 배포할 준비 끝 !!

serve -s build build 파일들을 실제로 배포해보기

On Your Network 주소 : 나와 같은 공유기를 쓰는 사람들이 접속 할 수 있는 주소

!! 이때 오류가 발견되면 수정하고 1번과 3번 다시

Firebase에서 프로젝트 만들기 Firebase 호스팅 설정 :

• CLI 설치 (cmd에서) : 파이어베스에서 뜨는 명령어 복사에서 넣기
• 프로젝트 초기화 : 파이어베스에 뜨는대로 하기
  1. google 로그인 : $ firebase login
  -> 오류가 발생하면 vscode 안에서 firebase login > 메일 입력
  2. 프로젝트 시작 : firebase init
  -> 진행할 준비 됐냐? -> Hosting : Configure.. -> Use an ... 프로젝트 이미 만들었음 -> public : build -> 싱글페이지 만들거야? yes -> git 연결? -> 이미 index있어 다시써도돼?

** firebase 폴더 생성 됨 **

firebase 사이트에서 아까 만든 프로젝트 안에 사이트 추가해준 후

firebase.json 파일에서 "hosting" : {"site":"추가한 사이트주소"} npm run build firebase deploy 호스팅 주소 나옴

완료

• 목적 : '회원탈퇴'버튼을 클릭하면 정보 팝업창이 뜨고 팝업창에 있는 '취소'버튼을 클릭하면 팝업창이 닫히는 기능을 구현하고 싶었음.

• 상황 : '회원탈퇴'버튼은 Mypage.tsx파일에 있고, '취소'버튼은 Withdrawal.tsx 파일에 있어서 prop를 이동해야 하는 상황

신나는 코딩 시작 (•̀ᴗ•́) ̑̑و

//Mypage.tsx
export interface PropsType {
  popup: boolean;
}

const MypageTab = () => {
  const [popup, setPopup] = useState<PropsType['popup']>(false);

  return (
    <ContentsList>
        <p onClick={() => setPopup(true)}>회원탈퇴</p>
    </ContentsList>
    <ContentsResult>
        {popup === true && <Withdrawal togglePop={togglePop} />}
    </ContentsResult>
  );
};

//Withdrawal.tsx
import { PropsType } from './MypageTab';
const Withdrawal = ({popup,}: {popup: PropsType['popup'];}): JSX.Element | any => {
  const onPopupToggle = (popup: any) => {
    popup(!popup);
    console.log(popup);
  };
  if (popup) {
    return (
        <Popup>
            <Btn fontColor="#666" backgroundColor="#fff" padding="11px 26px">
              취소
            </Btn>
        </Popup>
    );
  }
};

오류감옥에 갇힘..

검색.. 검색... 이유... 보내는법.. interface.. props.. react ..

몇일을 고민하다가 해결법을 찾음 야호

//Mypage.tsx
const MypageTab = () => {
  const [popup, setPopup] = useState<boolean>(false);
  const togglePop = () => {
    setPopup(!popup);
  };

  return (
    <ContentsList>
        <p onClick={() => setPopup(true)}>회원탈퇴</p>
    </ContentsList>
    <ContentsResult>
        {popup === true && <Withdrawal togglePop={togglePop} />}
    </ContentsResult>
  );
};

//Withdrawal.tsx
interface Prop {
  togglePop: () => void;
}
const Withdrawal = ({ togglePop }: Prop): JSX.Element | any => {
  return (
      <Popup>
          <Btn
            fontColor="#666"
            backgroundColor="#fff"
            padding="11px 26px"
            onClick={togglePop}
          >
            취소
          </Btn>
      </Popup>
  );
};

성공!

npx create-react-app my-app --template typescript

뭔가 오류가 난다 왤까..? ㄴㅇㄱ

평소하던데로 e.target을 주었더니! 또 문제발생

const inputId = (e : {target : HTMLInputElement}) => {
  console.log(e.target.value )
}

이런식으로 target에 type지정해 주었더니 해결

useState 로 id값 저장하려고했더니 또 오류발생!

근데 이렇게 하는 경우는 number을 넣고 싶어도 string으로만 받아오는 현상이 발생한다고 한다. html 자체가 element.value를 스트링으로 꺼내오는 특징이 있다고함. 넘버를 넣어도 받아와보면 string인 현상..

참고사이트 : https://stackoverflow.com/questions/61070803/how-to-handle-number-input-in-typescript 변환하고 싶은 시점에서 number로 변환해 사용해야 한다고 한다

(코인거래소나 실시간sns같은 실시간 데이터를 계속 가져와야 하는 사이트들이 쓰면 좋음)

npm install react-query 설치 (index.js) import {QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient()

<QueryClientProvider client={queryClient}>
  ~~~
</QueryClientProvider>

useQuery('작명', ()=>{
    return axios.get('https://~~').then((a)=>{
        return a.data
    })
})

장점 ❗

1. 성공/실패/로딩 중 쉽게 파악가능

let result = useQuery('작명', ()=>{
    return axios.get('https://~~').then((a)=>{
        return a.data
    })
})

// result.data - axios 요청이 성공했을때 가져오는 데이터 들어있음
// result.isLoading - axios 요청이 로딩중일때 true 값이 됨
// result.error - axios 요청이 실패했을 때 true 값이 됨

{result.isLoading && '로딩중'}
//로딩중일때 '로딩중'띄워줘

2. 틈만나면 자동으로 재요청해줌

다른 탭으로 들어갔다와도 자동으로 refetch 해줌 실시간으로 신선한 데이터들을 보여줘야하는 사이트도 걱정하지 않아도됨! good! 간격 설정도 가능

let result = useQuery('작명', ()=>{
    return axios.get('https://~~').then((a)=>{
        return a.data
    }),
    {staleTime : 2000}
  //2초 안에는 refetch 안되게 설정할 수 있음
  //refetch를 끌 수 도있음
})

function a(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('A') //이행
        }, 1000)
    })
}

function b(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('B') //이행
        }, 2000)
    })
}

;(async () => {

    const res = await Promise.all([a(), b()])
    console.log(res)
})()

Promise.race => 선착순. 제일 먼저 온 값만 반환

function a(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('A') //이행
        }, 1000)
    })
}

function b(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('B') //이행
        }, 2000)
    })
}

function c(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('C') //이행
        }, 3000)
    })
}


;(async () => {
    const res = await Promise.race([a(), b(), c()])
    console.log(res)

})()

forEach는 비동기를 순서대로 돌릴수가 없음. 한번에 팍뜸!

function a(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('A')
        }, 1000)
    })
}

function b(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('B')
        }, 1000)
    })
}


function c(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('C')
        }, 1000)
    })
}

const arr = [a, b, c]
arr.forEach(async item => {
    console.log(await item())
})

for 반복문은 비동기를 순서대로 돌릴 수 있음

function a(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('A')
        }, 1000)
    })
}

function b(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('B')
        }, 1000)
    })
}


function c(){
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('C')
        }, 1000)
    })
}


;(async () => {
    const arr = [a, b, c]
    for( let i = 0; i< arr.length; i += 1){
        console.log(await arr[i]())
    }
})()

for => 기본 for in => 객체 for of => 배열

funcrion abc(){ return 123 }

함수가 호출되고 증발한다. 남는 것은 데이타 typeof abc // function typeof abc() //123

일스턴스에 붙이는 일반메소드다 .prototype

정적메소드 .prototype(x)

Promise를 실행해서 나온 인스턴스를 리턴하고

resolve를 매개변수로 가져옴

function a(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log('A')
            resolve()
        },1000)
    }, 1000)
}

Promise 에서는 then이라는 매소드를 쓸수있음

function a(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log('A')
            resolve()
        },1000)
    }, 1000)
}

function b(){
    console.log('b')
}

const p = a()
p.then(()=> {
    b()
})
//then(()=> { b()}) 콜백이 resolve로 들어가게되는 것임

function a(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log('A')
            resolve()
        },1000)
    })
}

function b(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log('B')
            resolve()
        },1000)
    })
}
function c(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log('C')
            resolve()
        },1000)
    })
}
function d(){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            console.log('D')
            resolve()
        },1000)
    })
}

a().then(()=> {
    b().then(()=> {
        c().then(()=> {
            d()
        })
    })
})

abcd를 순차적으로 실행할수 있음 하지만 콜백 아도겐과 다를게없어보임 ?? 이렇게 쓰지않음 밑에서 다시 적어보겠음

a().then(() => b()).then()
a().then(b).then()
//두개가 같은거임

💡🤷🏻‍ .then(b)에 .then(b())를 해야하는거 아닌가요?

❌ NO 아닙니다. 두개는 다른 것 b => 함수임 function b() => promise 인스턴스

async & await

async & await ;()() => 즉시실행함수

;(async function() {
    await a()
    await b()
    await c()
    await d()
})()
// 이런 결과물이 나옴

resolve : 해결됨 reject : 거부 reject 기다리는거 멈춰!

보통은 해결되는 상황만 써도 되긴하는데, 거부되는 상황이 나올 수도 있음 예) 인터넷이 안되는상황이면 해결될때까지 계속 기다릴 수없으니 거부되는 상황에는 그냥 멈추라고 로직을 짜주는 것임

reject쓰면 최종적으로 .catch를 쓸수 있음

function a(ok){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            if(!ok){
                reject()
                return
                //멈출꺼면 꼭 리턴을 써야함 안쓰면 x여도, A찍히고 x도 찍힘 
            }
            console.log('A')
            resolve()
        },1000)
    })
}

//a호출에 true라는 매개변수넣어주면 O뜨고 false넣어주면 X 뜸
a(false)
    .then(()=>{
        console.log('Resolved! O')
    })
    .catch(()=>{
        console.log('Rejected! X')
    })

//resolve(1234)를 넣어서 res(작명)라는 이름으로 받을 수 있음
function a(ok){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            if(!ok){
                reject()
                return
            }
            console.log('A')
            resolve(1234)
        },1000)
    })
}

a(true)
    .then((res)=>{
        console.log('Resolved! O')
        console.log(res)
    })
    .catch(()=>{
        console.log('Rejected! X')
    })

** - console 출력 (이미지참고)**

// reject('Err') 넣으면 .catch((err)=>{})에서 받을 수 있음
function a(ok){
    return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            if(!ok){
                reject('Err')
                return
                //멈출꺼면 꼭 리턴을 써야함 안쓰면 x여도 A나오고 x도나옴 
            }
            console.log('A')
            resolve(1234)
        },1000)
    })
}

//a호출에 true라는 매개변수넣어주면 O뜨고 false넣어주면 X 뜸
a(false)
    .then((res)=>{
        console.log('Resolved! O')
        console.log(res)
    })
    .catch((err)=>{
        console.log('Rejected! X')
        console.log(err)
    })

webAPI fetch() document.querySelector()

- http 상태 코드

200대는 정상 400대는 요청오류 (프론트 오류일 확률 매우 높음) 401 권한 없음 (apk key 잘못됐을 확률)

fetch('https://www.omdbapi.com/?apikey=틀린api키&s=frozen')
    .then(res => res.json())
    .then(res => console.log(res))
    .catch(err => console.log('Error:', err))

에러나도 fetch는 따로 로직을 짜주지 않는 이상 잡아내지못함 .catch()부분이 뜨지 않음. => Axios는 잘 잡아냄(설치해야함) 서버에서는 오류가 나서 에러메세지를 보내도 메세지가 보내진거니까 데이터를 정상적인 응답에 해당함

function http(url){
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(res => res.json())
            .then(res => {
                if(res.Response === 'False'){
                    reject(res.Error)
                    return //다른코드가 있다면
                }
                console.log(123) //다른코드가 있다면
                resolve(res)
            })
            .catch(err => reject(err))
    })
}

http('https://www.omdbapi.com/?apikey=틀린api키&s=frozen')
.then(res => console.log('Resolved O:' , res))
.catch(err => console.log('Resolved X:' , err))

이런식으로 로직을 추가해줘야 에러를 잡아낼수있음

async 쓸수있음

;(async () => {
    const res = await http('https://www.omdbapi.com/?apikey=7035c60c123&s=frozen')
    console.log('Resolved O:' , res) //정상코드
})()

try catch => 시도해봤는데 에러가 나면 catch로 넘어간다 +finally => 에러가 안생겨도 생겨도 finally 무조건실행 (필수는 아니고 무조건 실행해야할 코드가 있을때만 쓰임)

;(async () => {
    try{
        const res = await http('https://www.omdbapi.com/?apikey=7035c60c123&s=frozen')
        console.log('Resolved O:' , res) //정상코드
    } catch (err){
        console.log('Resolved X:' , err)
    }

})()

중간 전체코드 정리

function http(url){
    return new Promise((resolve, reject) => {
        fetch(url)
            // .then(res => res.json()) //json메소드를 통해 파싱중
            .then(res => {
                console.log(res)
                // if(!res.ok) reject() => 만약 오류가 나면 reject로 넘어가라
                return res.json()
            })
            .then(res => {
                if(res.Response === 'False'){
                    reject(res.Error)
                    return //다른코드가 있다면
                }
                console.log(123) //다른코드가 있다면
                resolve(res)
            })
            .catch(err => reject(err))
    })
}

// http('https://www.omdbapi.com/?apikey=7035c60c123&s=frozen')
// .then(res => console.log('Resolved O:' , res))
// .catch(err => console.log('Resolved X:' , err))

;(async () => {
    try{
        const res = await http('https://www.omdbapi.com/?apikey=7035c60c&s=frozen')
        console.log('Resolved O:' , res) //정상코드
    } catch (error){
        console.log('Resolved X:' , error)
    }

})()

new promise() 기다린 다음을 약속해준다고 기억하기

자바스크립트는 동기식 처리 (Synchronous)

• 한번에 코드 한줄씩 차례로 실행

비동기식처리(Asynchronous) 오래걸리는 작업이 있으면 제껴주고 다른거부터 처리하는 방식 (자바스크립트가 아니라 자바스크립트를 실행하는 브라우저 덕분에 가능한 것 = 웹브라우저의 특수성)

파이썬에서는

print(1)
time.sleep(1) // 1초 쉬어라 => 1초 멈췄다가 2실행됨(블로킹)
print(2)

자바스크립트에서는

console.log(1);
setTimeout(()=> {console.log(2)},1000); //멈추지 않고 3이 실행됨
console.log(3);

//setTimeout(()=> {console.log(2)},1000); 비동기식으로 처리 도와주는 함수

setTimeout, eventListener, ajax 코드같이 실행되는데 오래 걸리는 코드들은 Web API라는 공간(실행 대기실)으로 보내서 해결이 되길(시간이 지나길) 기다림. Web API 덕분에 오래걸리는 작업이 있으면 제껴두고(블로킹이라는 멈추는 과정없이) 다른거부터 처리하는 비동기식 처리가 가능.

자바스크립트는 오래걸리는 연산을 만나면 멈춤 ( = 동기식 처리, synchronous ) Web API와 연관된 특수한 함수들을 쓰면 작업이 오래걸릴 때 정지 없이 다른거부터 실행이 가능( = 비동기식 처리, asynchronous )

하지만, 자바스크립트를 보류했다가 순차적으로 실행하려면? = 콜백함수를 사용함

console.log(1);
setTimeout(()=> {console.log(2)},1000); //멈추지 않고 3이 실행됨

//()=> {console.log(2)} 콜백함수임

콜백함수란? 함수안에 함수가 들어간 것. 순차적으로 실행하고 싶을 때, 왼쪽에 있는거 실행하고 나서 실행해줘라는 뜻으로 씀 콜백함수 자체가 동기/비동기처리를 해주는 건 아니고, 함수 디자인 패턴일 뿐

고차함수란? 함수를 _인자(argument)_로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수

고차 함수는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 고차함수는 인자로 받은 함수를 필요한 시점에 호출하거나 _클로저_를 생성하여 반환한다. 자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다.

💡 인자(argument)란?

• 어떤 함수를 호출할때, 호출문의 ( )안에 들어가는 어떤 값이나 변수

💡 매개변수란?

• 함수를 정의하면서 그 전달된 인자를 받아들이는 변수

❗️ 인자와 매개변수 예시

function doubleNum(num) {
  let result = num * 2
  return result
}

doubleNum(2);

✅ 인자는 => 숫자 2 / 매개변수는 => num

❗️ 고차함수 예시

• 다른 함수를 인자로 받는 경우

  function back(num) {
  return num * 2;
  }
  

function doubleNum(func, num) { return func(num); }

doubleNum(back, 5);

✅ 다른 함수를 인자로 받고 있는 doubleNum은 고차함수임
✅ func는 doubleNum의 콜백함수임
✅ back은 doubleNum의 콜백함수임

<br /><br /><br />

### 콜백함수

>콜백함수란? 다른 함수의 인자로 전달되는 함수
어떤 작업이 완료되었을 때 호출하는 경우가 많아 지어진 이름

>콜백함수란? 순차적으로 함수를 실행하고 싶을 때 사용
콜백함수는 그냥 함수 디자인 패턴일 뿐
동기, 비동기와는 조금 다름

<br />

❗️ 콜백함수 예시 (1)

```javascript
function 첫째함수(구멍) {
  console.log(1);
  구멍();
}

function 둘째함수() {
  console.log(2);
}

첫째함수(둘째함수);
//console에는 1 2 가 순차적으로 찍힘

❗️ 콜백함수 예시 (2)

function 첫째함수(구멍) {
  console.log(1);
  구멍();
}

function 둘째함수() {
  console.log(2);
}

첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){

    });
  });
});

패턴의 한계때문에 콜백 지옥이 생김.

💡 가독성 떨어지는 콜백함수의 문제점 => 더 쉽게 쓰기위한 Promise 함수

"모던 자바스크립트 딥다이브" 배열(array)은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다. 자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다. 배열은 Array 생성자로 생성된 Array 타입의 객체이며 프로토타입 객체는 Array.prototype이다.

"mdn" Array는 JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

"코딩애플" Array 자료형 : [자료1, 자료2, 자료3...] 자료간 순서가 존재함 (object는 순서 개념 없음)

"코어자바스크립트" 배열 : 특수한 형태의 객체로, 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조

Array에서 자주쓰이는 함수

1. map

• 모든 array를 똑같이 변형시킬 수 있음 (판매사이트 구현할때 달러, 원화를 바꿀때 활용할 수 있음)
• 배열을 변형시키거나 요소를 재 정렬해주는 메서드

const 어레이 = [4,7,9,10,57];

어레이.map(function(a){
  return a * 2
});

console.log(어레이);

2. filter

• 자료 원하는 것만 필터함 (함수의 반환 값을 true로 만드는 단 하나의 요소만 찾음)
• 원본을 변형시키지않고 변경된 값을 그자리에 남겨주기때문에 filter()결과는 변수에 저장해서 써야함 ( .sort()는 예전문법이라 원본변형시킴 )

const 어레이 = [4,7,9,10,57];

const 새어레이 = 어레이.filter(function(a){
  return a < 4
});

console.log(어레이);

3. forEach

• 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌
• 인수로 넘겨준 함수의 반환값은 무시됨

["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
  alert(`${item} is at index ${index} in ${array}`);
});

4. find

• 특정 조건에 부합하는 객체를 배열 내에서 찾을 수 있음

let users = [
  {id: 1, name: "jeong"},
  {id: 2, name: "min"},
  {id: 3, name: "miya"}
];

let user = users.find(item => item.id == 1);

alert(user.name); // jeong