같은 사진 최적화 전후 / 왼쪽이 최적호 된 이미지 / 오른쪽이 최적화 전 이미지

컴포넌트 => zustand

일반 컴포넌트기준

1. Zustand authUserData를 체크
2. 데이터가 있다면 => 로그인
3. 데이터가 없다면 => 로그인 안되어 있음.

Zustand AuthUserData

1. 초기에 localStorage를 확인
2. 데이터가 존재하면 상태 업데이트
3. 데이터가 없으면 놔두면됨.

• SSOT를 준수하도록 리팩토링

As-is : 유저 정보를 관리하는 과정에서 SSOT가 지켜지지 않아서, 로그인, 유저 정보 수정 등을 통해 유저 정보가 바뀔 경우, To-be : SSOT를 준수하여 로컬 스토리지에서 관리되던 유저정보 데이터를 zustand state
 checkLogIn: () => { // 컴포넌트가 렌더링 된 후, authUserData가 비어있는지 체크 // localStorage 확인해서 업데이트 try { const { model, token } = getData('pocketbase_auth');

  if (model) {
    set({ isAuth: true, user: model, token: token });
  }
} catch (error) {
  console.log(error);
}

},

로그인하고 메인페이지로 넘어올 때 로그인한 유저 정보가 바로 넘어오지 않는 버그를 발견하였다. 그래서 코드를 뜯어보다 기존 코드의 storageData가 변하지 않아서 리렌더링이 발생하지 않아 생기는 문제라고 판단하여 버그를 해결하기 위해 생각해보았다. 그래서 생각해낸 결과는 다음과 같다. 로그인을 할 때 상태관리를 zustand를 사용하여 하고 있었는데

// zustand를 사용하여 로그인 상태관리
  signIn: async (userNameOrEmail, password) => {
    try {
      const user = await pb
        .collection('users')
        .authWithPassword(userNameOrEmail, password);
      set({ isAuth: true, user, token: user.token }); //
    } catch (error) {
      console.error(error);
      throw new Error('아이디나 비밀번호를 확인해주세요.');
    }
  },

이곳에 유저의 정보를 담기 때문에 그걸 사용하여 적용해주면 되겠다고 생각했다.

  const signInAuthData = useAuthStore((store) => store.user);

  const { storageData } = useStorage('pocketbase_auth');
  const [authModelData, setAuthModelData] = useState(storageData?.model);

  useEffect(() => {
    const pocketBaseAuthData = getData('pocketbase_auth');
    if (pocketBaseAuthData) {
      setAuthModelData(pocketBaseAuthData.model);
      return;
    }
    if (signInAuthData) {
      setAuthModelData(signInAuthData.record);
      return;
    }
  }, [signInAuthData, signInAuthData?.record]);

그래소 위와 같이 코드를 변경했다. 로컬스토리지에 pocketbase_auth정보가 있으면 그걸 가져와서 사용하고 없다면 zustand에 저장되어 있는 user 정보를 받아와서nav 바에 마이페이지 부분에 적용해주었다.

수정전

수정후

변ㄴ경후

import pb from '@/api/pocketbase';
import ProfileUpload from '@/components/ProfileUpload/ProfileUpload';
import UserProfilePicture from '@/components/UserProfilePicture/UserProfilePicture';
import useFetchData from '@/hooks/useFetchData';
import PropTypes from 'prop-types';
import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { useNavigate, useParams } from 'react-router-dom';
import style from './UserProfileEdit.module.css';
import useAuthStore from '@/store/auth';

const PB = import.meta.env.VITE_PB_URL;
const PB_USER_ENDPOINT = `${PB}/api/collections/users/records`;

function UserProfileEdit() {
  const navigate = useNavigate();
  const { userId } = useParams();
  const { data: userData, isLoading } = useFetchData(PB_USER_ENDPOINT);
  const [nickname, setNickname] = useState('');
  const [validationResult, setValidationResult] = useState('');
  const [usernameList, setUserNameList] = useState([]);
  const user = useAuthStore((store) => store.user);
  const checkLogIn = useAuthStore((store) => store.checkLogIn);

  const handleCheckDuplicate = () => {
    if (isLoading) {
      return;
    }

    if (
      nickname.length >= 5 &&
      nickname.length <= 10 &&
      /^[a-zA-Z0-9]+$/.test(nickname)
    ) {
      const isDuplicate = usernameList.includes(nickname.toLowerCase());

      if (isDuplicate) {
        setValidationResult('중복된 닉네임입니다.');
      } else {
        setValidationResult('사용가능한 닉네임입니다');
      }
    } else {
      setValidationResult('5~ 10글자의 영문 대소문자와 숫자만 입력하세요.');
    }
  };

  const handleNicknameChange = (value) => {
    if (
      value.length >= 5 &&
      value.length <= 10 &&
      /^[a-zA-Z0-9]+$/.test(value)
    ) {
      setNickname(value);
      setValidationResult('');
    } else {
      setNickname(value);
      setValidationResult('5 ~ 10글자의 영문 대소문자와 숫자만 입력하세요.');
    }
  };

  const handleButtonClick = () => {
    if (!isLoading) {
      handleCheckDuplicate();
    }
  };

  const updateUsernameOnServer = async () => {
    try {
      return await pb.collection('users').update(userId, {
        username: nickname,
      });
    } catch (error) {
      console.error('서버 요청 오류:', error);
      return false;
    }
  };

  const isNicknameValid =
    nickname.length >= 5 &&
    nickname.length <= 10 &&
    /^[a-zA-Z0-9]+$/.test(nickname);
  const isNicknameAvailable = validationResult === '사용가능한 닉네임입니다';
  const isSaveButtonDisabled = isLoading || !isNicknameAvailable;

  async function handleSaveButtonClick() {
    try {
      if (!isLoading && isNicknameAvailable) {
        const result = await updateUsernameOnServer();
        if (result) {
          toast.success('성공적으로 변경되었습니다');
          navigate(`/mypage/${userId}`);
        }
      }
    } catch (error) {
      toast.error(error.message);
    }
  }

  const username = user?.username || '사용자 이름이 없습니다';

  useEffect(() => checkLogIn(), [checkLogIn]);

  useEffect(() => {
    if (userData.items) {
      const usernameList = userData.items.map((user) =>
        user.username.toLowerCase()
      );
      setUserNameList(usernameList);
    }
  }, [userData.items]);

  if (!user) {
    return null;
  }

  return (
    <div className={style.profile}>
      <UserProfilePicture avatar={user} />
      <div className="h-[90px] flex">
        <span className="mt-5 text-xl font-semibold">{username}</span>
      </div>
      <div className={style.editwrapper} />
      <div className="flex flex-col gap-6 mt-10">
        <NicknameInputSection
          nickname={nickname}
          handleNicknameChange={handleNicknameChange}
          handleButtonClick={handleButtonClick}
          validationResult={validationResult}
          isNicknameValid={isNicknameValid}
        />
        <ProfileUpload />
      </div>
      <button
        onClick={handleSaveButtonClick}
        className={`${style.save} ${
          isSaveButtonDisabled ? 'bg-gray-300' : 'bg-primary'
        }`}
        disabled={isSaveButtonDisabled}
      >
        저장하기
      </button>
    </div>
  );
}

function NicknameInputSection({
  nickname,
  handleNicknameChange,
  handleButtonClick,
  validationResult,
  isNicknameValid,
}) {
  return (
    <div className="flex gap-4 items-end">
      <div className="flex flex-col">
        <label htmlFor="nickname" className="text-sm">
          닉네임
        </label>
        <div className="flex gap-4">
          <input
            type="text"
            id="nickname"
            name="nickname"
            placeholder="5 ~ 10문자(특수문자 사용불가)"
            className={style.nick}
            value={nickname}
            onChange={(e) => handleNicknameChange(e.target.value)}
          />
          <button
            onClick={handleButtonClick}
            className={`h-10 text-gray-900 border rounded px-2 ${
              isNicknameValid ? 'bg-primary' : 'bg-gray-300 cursor-not-allowed'
            }`}
            disabled={!isNicknameValid}
          >
            중복확인
          </button>
        </div>
        {validationResult && (
          <div
            className={
              validationResult === '중복된 닉네임입니다.'
                ? 'text-red-500 text-xs'
                : 'text-green-500 text-xs'
            }
          >
            {validationResult}
          </div>
        )}
      </div>
    </div>
  );
}

NicknameInputSection.propTypes = {
  nickname: PropTypes.string.isRequired,
  handleNicknameChange: PropTypes.func.isRequired,
  handleButtonClick: PropTypes.func.isRequired,
  validationResult: PropTypes.string,
  isNicknameValid: PropTypes.bool.isRequired,
};

export default UserProfileEdit;

중복되는 코드를 정리하고 가독성을 높이기 위해 코드를 정리했다. prop-types을 정의해서 팀원들이 컴포넌트를 사용할 떄 어떤 타입을 사용하면 되는지 명시해놧다. 닉네임이 수정되지 않는 버그를 수정하였다 입력양식이 충족되지 않을 때에 저장하기 버튼을 disable로 설정하고 사용자가 알아보기 쉽도록 색을 변경하였다. 변경 후 마이페이지로 이동하게 만들었다.

1교시

훅은 최상위 레벨에서만 훅을 호출해야 한다

컴포넌트 내에서만 사용가능

훅은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 렌더링되어야 한다

useState

초기값 설정시 무거운 계산이 동반되는 경우 콜백함수로 작성!

useEffect

1. 렌더링될 때마다 실행
2. 첫번째 렌더링 시에만 실행
3. 첫 렌더링 + 특정값이 변할 때
4. 클린업

2교시

useState 콜백 & useMemo 용도의 차이점

• 설명

  https://www.zigae.com/useState-one-initialization/ 해당 포스트가 잘 설명해주고있는 것 같습니다. 제가 이해한 바로는

  1. state는 참조 동일성을 보장(setter에 의해서만 변경)
  2. useMemo는 불필요한 재연산을 방지 에 초점을 맞춰 사용하는 게 바람직하다' 인 것 같습니다. https://careerly.co.kr/comments/87690 Hooks의 실행순서는 렌더링 과정에서 동일하지만 useMemo에서 'not as a semantic guarantee' 라고 적혀있는 반면 https://legacy.reactjs.org/docs/hooks-reference.html#lazy-initial-state State의 초기값에서는 초기 렌더링시점에 대한 언급이 존재합니다. The initialState argument is the state used during the initial render 강사님이 보여주셨던 예제에서는(무거운 연산에 한해서) 동일하게 동작하는 것 같은데 리액트에서는 순서에 대해 언급한 의도가 책임 못지니 용도에 맞게 (참조 동일성/재연산 방지) 사용해라가 핵심인 것 같습니다!

🧞‍♂️ 순서가 상관 없으면 useMemo 순서가 중요하면 useState callback

3교시

제네릭 타입을 사용하는 이유

사용자한테 권한을 주는 것

useRef

ref는 컴포넌트 전 생애주기를 통해 유지가 된다.

= 리렌더링되어도 값을 유지

1. 특정 상태값이 변할 때, 리렌더링 시키면 안되는 상태값인 경우
2. 컴포넌트 내 특정 돔 요소에 접근해야 하는 경우
3. 부모 컴포넌트가 자식 컴포넌트의 돔에 접근해야 하는 경우 (forwardRef)

• forwardRef

  https://www.daleseo.com/react-forward-ref/

  자식컴포넌트의 돔이 외부로 노출되는 것이기 때문에 가독성에 부정적인 영향을 줍니다.

  이상으로 React의 forwardRef() 함수를 사용하여 어떻게 React 컴포넌트에 ref prop을 넘길 수 있는지에 대해서 알아보았습니다.

  일반적으로 forwardRef() 함수는 HTML 엘리먼트 대신에 사용되는 최말단 컴포넌트(ex. , )를 대상으로 주로 사용되며, 그 보다 상위 컴포넌트에서는 forwardRef() 함수를 사용하는 것이 권장되지 않습니다. 왜냐하면 어떤 컴포넌트의 내부에 있는 HTML 엘리먼트의 레퍼런스를 외부에 있는 다른 컴포넌트에서 접근하도록 하는 것은 컴포넌트 간의 결합도(coupling)을 증가시켜 애플리케이션의 유지보수를 어렵게 만들기 때문입니다.

만보기 앱을 만들 때 useRef를 사용해야 하는 곳과 그 이유

시간과 걸음수가 있을 때 걸음 수에 useRef를 사용하여 값을 유지해야 한다고 생각한다.

걸음수는 하루의 전체 걸음수를 표시해주어야 하기 때문에 리렌더링이 발생한다고 값이 사라지면 안 되고 계속 누적되어 나중에 결과를 표시해주어야 하기 때문이다

4교시

useContext

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다

Redux와 Context API의 차이

• Redux가 Context API에 비해 가지는 강점

  • 리덕스는 로컬 스토리지에 상태를 영속적으로 저장하고 시작할 때 다시 불러오는데 뛰어남
  • 상태를 서버에서 미리 채워서 HTML에 담아 클라이언트로 보내고 앱을 시작할 떄 다시 불러오는데 뛰어남
  • 사용자의 액셕을 직렬화해서 상태와 함꼐 자동으로 버그리포트에 첨부할 수 있고 개발자들은 이를 통해 에러를 재현할 수 있음
  • 액션 객체를 네트워크를 통해 보내면 코드를 크게 바꾸지 않고도 협업 환경을 구현할 수 있음
  • 실행취소 내역의 관리나 낙관적인 변경 (optimistic mutations)을 코드를 크게 바꾸지 않고도 구현 가능
  • 개발할 때 상태 내역 사이를 오가고 액션 내역에서 현재 상태를 다시 계산하는 일을 TDD스타일로 할 수 있음
  • 개발자 도구에게 완전한 조사와 제어를 가능하게 해서 개발자들이 자신의 앱을 위한 도구를 직접 만들 수 있게 해줌
  • 비즈니스 로직 대부분을 재사용하면서 UI를 변경할 수 있게 해줌

• 차이점

  Redux:

  1. 예측 가능한 상태 관리: Redux는 애플리케이션 전체의 전역 상태를 중앙 집중식으로 저장하고 관리합니다.

  2. 단일 스토어: Redux는 단일 스토어를 사용하며, 앱의 상태를 여러 개의 리듀서로 분할하여 관리합니다.

  3. 불변성 유지: Redux는 불변성을 유지하며, 상태를 변경할 때 항상 새로운 상태 객체를 반환합니다.

  4. Middleware: 미들웨어를 사용하여 액션과 리듀서 사이에 추가 기능을 삽입할 수 있습니다. 예를 들어, 비동기 작업을 처리할 수 있습니다.

  5. Redux DevTools: Redux는 강력한 개발 도구를 제공하여 애플리케이션 상태의 시간 여행 및 디버깅을 용이하게 합니다.

     Context API:

  6. 로컬 상태 관리: React의 Context API는 주로 특정 컴포넌트 트리 내에서 데이터를 공유하기 위한 용도로 사용됩니다.

  7. 하위 컴포넌트에 전달: Context를 사용하여 값을 전달하면 해당 값에 접근할 수 있는 컴포넌트는 해당 Context를 구독하고 있는 컴포넌트 뿐입니다.

  8. 간편한 사용: 상대적으로 Redux보다 더 간단하게 사용됩니다. 주로 특정 컴포넌트 간의 데이터 전달이 목적입니다.

  9. 적은 양의 데이터 전달: 일반적으로 Redux보다는 소규모 애플리케이션이나 단순한 데이터 전달에 사용됩니다.

• 오직 전역 상태 관리를 위한다면 Context API를 사용하라.

• 상태 관리 외에 여러 기능이 필요하다면 Redux 를 사용하라.

• high-frequency한 어플리케이션의 경우 Context API를 사용하면 성능상 이슈가 있을 수 있다.

• Redux는 크고 복잡한 애플리케이션에서 상태를 효과적으로 관리하는 데 유용,

• 반면에 Context API는 상대적으로 작은 규모의 애플리케이션에서 로컬 상태 관리나 특정 컴포넌트 간의 데이터 전달에 활용

5교시

useMemo / useCallback을 사용하는 것이 항상 성능을 향상시키는 것이 아니다 그 이유는?(힌트: 참조 동일성)

• 설명

    const Foo = () => {
      const [count, setCount] = useState(0);
  
      // case 1
      const handleIncrement = useCallback(() => {
        setCount(count + 1);
      }, []);
  
      // case 2
      const handleIncrement = () => {
        setCount(count + 1);
      };
  
      return <Box *onClick*={handleIncrement} />;
    };

  case1과 case2 중에 비용이 적게 드는 코드는 어느쪽일까? 많은 아티클에서 inline 함수는 useCallback 으로 안에 넣는 것이 성능에 더 좋다 말하고 있기 때문에 case1을 선택할 수 있겠지만 실상은 그렇지 않다.

  모든 추상화 및 최적화 코드에는 비용이 들기 마련이다. 이때 발생하는 비용을 상쇄 시킬만한 비용절약이 있지 않으면 오히려 비용 증가가 일어난다. 최적화 관점에서 useCallback을 사용하기 위해선 전후 성능을 비교 후에 사용하는 것이 옳다.

  참조 동일성

  객체, 배열 같은 참조타입일 경우 렌더링될 때마다 객체가 새로 만들어지고 렌더링될 때마다 계속 호출되게 된다.

  이 때 useCallback이나 useMemo를 사용하여 캐싱하고 싶어도 아무의미없이 컴포넌트는 리렌더링될 때마다 실행되게 된다. 따라서 무조건 useCallback을 사용하거나 useMemo를 사용한다고 해서 무조건 비용이 절감되는 것이 아니고 코드도 더 복잡해질 수 있다

  • useCallback과 useMemo를 성능을 향상시킨다는 초점에 맞춰서 무분별하게 사용한다면??
    • 코드가 더 복잡하게 보일수도 있으며 팀원들이 이해하기에 복잡성 또한 증가할 수 있습니다.
    • dependencies 배열에 들어가는 참조 value들이 누락되거나 잘못 넣게되면서 휴먼 에러가 자주 발생합니다.
    • dependencies 배열 내부의 값들이 메모제이션되면서 가비지 컬랙터가 안되게 만들 수 있습니다.
    • 성능 개선을 위해 추가된 비용때문에 오히려 효율성이 떨어져 성능이 더 하락할 수 있습니다.
  • 즉 적절한 상황에서 useCallback과 useMemo를 사용하여 성능 개선을 통해 얻어지는 이점이 추가된 비용을 상쇄할 수 있다면 의미있게 사용할 수 있지 않을까? 생각합니다!

6교시

useReducer

useState와 비슷하지만 복잡한 상태(중첩된 객체 nested object)를 관리하는데 사용

또는 이전상태에 의존하는 상태를 관리하는데 사용

useReducer를 사용할 때, action, dispatch, reducer에 대해 설명해주세요.

• 설명

  useReducer는 React에서 제공하는 훅 중 하나로, 상태 관리를 위해 사용됩니다. 기존의 useState와 달리, 복잡한 상태 논리를 처리하고 상태를 업데이트하기 위한 더 구조화된 방법을 제공

  • Reducer: Reducer는 현재 상태와 업데이트하고자 하는 액션을 받아 새로운 상태를 반환하는 함수입니다. Reducer는 (이전 상태, 액션) => 새로운 상태의 형태를 갖습니다. 여기서 "액션"은 상태를 어떻게 변경할지에 대한 정보를 가지고 있습니다.
  • Dispatch: dispatch 함수는 Reducer에게 상태를 변경하라는 명령을 내리는 함수입니다. 액션 객체를 인자로 받아 Reducer에게 전달하고, Reducer가 이에 따라 상태를 업데이트합니다.
  • Action: 액션은 상태를 변경하는 유형을 나타내는 객체입니다. 일반적으로 "type"이라는 필드를 포함하고 있으며, Reducer에서 어떤 종류의 업데이트를 수행할지 식별하는 데 사용됩니다. 추가적인 데이터를 전달해야 할 경우, "payload" 또는 기타 필드를 포함할 수 있습니다.

useReducer에서 액션을 처리할 때 주의해야 할 점은 무엇인가요?

(Hint 순수함수)

• 이유

  useReducer에서 액션을 처리할 때 주의해야 할 점 중 하나는 순수 함수를 사용해야 한다는 것입니다.

  순수 함수란 다음과 같은 특징을 갖는 함수를 의미합니다:

  1. 부수 효과(side effects)가 없어야 합니다: 순수 함수는 함수 내부에서 외부의 상태를 변경하거나 외부에 영향을 미치는 작업을 수행해서는 안 됩니다. 외부 상태에 변경을 가하지 않아야 합니다.

  2. 동일한 입력에 대해서는 항상 동일한 출력을 반환해야 합니다: 함수는 동일한 인자(입력)에 대해 항상 같은 결과(출력)를 반환해야 합니다. 외부 상태의 변화나 무작위 요소 등이 없어야 합니다.

     액션을 처리하는 함수인 리듀서는 순수 함수여야 합니다. 외부의 상태를 변경하면 안 되며, 같은 액션에 대해 항상 같은 결과를 반환해야 합니다. 왜냐하면 useReducer는 순수 함수인 리듀서를 통해 이전 상태와 액션을 바탕으로 새로운 상태를 반환하는데, 이 규칙을 어겨버리면 예상치 못한 문제가 발생할 수 있습니다.

     순수 함수를 유지하여 예측 가능하고 안정적인 상태 업데이트를 보장하면서, 코드의 테스트 용이성도 높아집니다. 따라서 리듀서에서는 순수 함수의 원칙을 준수하여 액션을 처리해야 합니다.

초기 상태가 복잡한 계산이 필요할 때, useReducer를 사용할 때 초기 상태를 지연 초기화하는 방법은 무엇인가요?

• 방법

  useReducer를 사용할 때 초기 상태가 복잡한 계산이 필요하거나 지연 초기화해야 할 때, 보통 초기 상태를 계산하는 함수를 사용합니다.

  여기서 useReducer의 초기값으로 함수를 전달할 수 있습니다. 이 함수는 실제 초기 상태를 계산하고 반환하는 역할을 합니다. 이를 통해 초기 상태가 복잡한 계산이 필요한 경우 해당 함수를 호출하여 초기 상태를 반환하도록 할 수 있습니다

7교시

customHook

2008 구글 크롬 브라우저 - v8 자바스크립트 엔진 등장

2009 node.js 등장

2012 제이쿼리가 유행한 배경

SPA 등장 배경 - 좋아요를 구현하고 싶어서 / SPA가 가능하게 된 필요 조건

리액트의 대표적인 특징

가상 돔

리액트는 브라우저가 가진 돔을 직접 조작하지 않음

복사본 업데이트 전후의 가상돔 2개를 비교해서 차이를 알아내서

한번에 업데이트

CSR / SSR

SSR 사이트를 빠르게 표시, SEO

SSR를 보완하는 SSG 사전에정적 파일로 생성/ 배포하는 구조

선언적 UI

단방향 데이터 전달(props)

컴포넌트 지향 / 함수 컴포넌트

플럭스 아키텍처와의 연관성

리액트는 무엇인가요?

리엑트의 컴포넌트와 그 구성요소는 무엇인가요?

props, state, 렌더링, JSX를 설명해주세요.

가상돔은 무엇이고 리액트에서 어떻게 작용하나요?

리액트 컴포넌트의 생애주기를 설명해주세요. 그리고 개발자가 왜 알아야하나요? 알면 무엇을 알 수 있나요?

리액트 컴포넌트의 생명 주기는 컴포넌트가 생성되고 업데이트를 거쳐 소멸되는 과정을 설명한다.

생성 단계에선 마운팅된다고 하는데 construtor가 컴포넌트의 생성자로 초기화 작업을 수행한다. 그 다음 render가 UI를 렌더링하고 componentDidMount는 컴포넌트가 마운트된 직후에 호출되며, 초기 데이터를 가져오거나 외부 리소스 요청등의 작업을 수행한다.

업데이트 단계에선 성능 최적화를 위해 사용되는 shouldComponentUpdate가 컴포넌트를 업데이트 할지 결정을 한다

업데이트된 컴포넌트가 있으면 render가 실행되어 UI를 업데이트하고 componentUpdate에선 컴포넌트의 업데이트가 완료된 직후에 호출되며 업데이트 이후의 작업을 수행한다.

마지막으로 소멸단계에선 언마운팅된다고 하는데 componentWillUnmount에서 컴포넌트가 제거되기 전에 호출되며, 정리 작업을 수행한다.

리소스 해제나 이벤트 핸들러 제거를 수행한다.

개발자는 컴포넌트 동작에 대해 이해하고 성능 최적화와 자원관리를 필요로 하기 때문에 필요로 하는 지식들이다.

리액트 훅은 무엇이고 왜 쓰나요?

☆

함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요.

문서 탐색 단계

1. 배경파악 문제인식
2. 존재이유
3. 해결방법→이렇게 해결한다고? 이 해결방식에 내가 동의하나?
4. 튜토리얼 / useCase

일급 객체(First-class object) • 변수, 배열 엘리먼트, 다른 객체의 프로퍼티에 할당될 수 있다. • 함수의 인자로 전달될 수 있다. • 함수의 결과 값으로 반환될 수 있다. • 리터럴로 생성될 수 있다. • 동적으로 생성된 프로퍼티를 가질 수 있다.

자바스크립트의 함수(Function)는 일급 객체이다. • 함수= (호출+ 객체)

함수가 일급 객체라서 가능한 일 • 콜백 함수(Callback function) • 고차 함수(Higher order function) • 클로저(Closure)

TS

interface - 중복 선언 가능 중복된 속성 값에 두 타입이 다르면 상속 불가! ex 01-16

type - 중복선언 불가능 error

https://www.npmjs.com/package/gh-pages

npm install gh-pages --save-dev

npm run build

npx gh-pages -d dist

여기 주소를 비트에 알려준다.

useEffect를 사용하는 이유

useEffect를 사용하는 이유는 데이터를 가져오기 위해서가 아니라 리액트는 프라미스와 에러에 대응할 수 없기 때문이다.

useEffect 안에 직접 async 함수를 사용하는 것은 권장되지 않는 이유

비동기 함수와의 일관성: useEffect 는 일반적으로 부수 효과를 처리하기 위해 사용됩니다. 하지만 useEffect가 반환하는 값은 주로 정리(clean-up) 작업을 위한 함수이어야 합니다. async 함수는 항상 Promise 를 반환하기 때문에, 반환 값이 기대하는 일반적인 정리 함수 형태와는 다릅니다.

오류 처리의 어려움: useEffect 안에서 직접 async 함수를 사용하면 내부에서 발생한 오류를 캐치하거나 처리하기가 어려울 수 있습니다. try-catch 블록 안에서 await를 사용하여 오류를 처리할 수 없습니다. 이로 인해 예기치 않은 동작이 발생할 수 있습니다.

올바른 패턴은 useEffect 안에서 비동기 코드를 호출하는데 사용되는 별도의 함수를 선언하고, 그 함수 내에서 async/await 패턴을 사용하는 것입니다. 예를 들면 다음과 같습니다

useEffect(() => {
  const fetchData = async () => {
    try {
      // 비동기 작업 수행
    } catch (error) {
      // 오류 처리
    }
  };

  fetchData();
}, []);

import { useEffect, useState } from "react";
// 리액트는 자식 컴포넌트가 프로미스를 반환하거나
// 에러를 던질 때는 전혀 대응하지 못한다.
function App() {
  const [값, set값] = useState(0);
  const 비동기데이터가져오기 = async () => {
    const res = await fetch(
      "https://pokeapi.co/api/v2/pokemon?limit=5&offset=0"
    );
    const data = await res.json();
    set값(data.results.length);
  };

  // fetch를 react 컴포넌트와 격리하기 위해
  // useEffect의 부수효과를 이용한다.
  useEffect(() => {
    // useEffect 안에서 async 함수를 선언하면
    // 프로미스를 반환하므로 에러가 발생한다
    비동기데이터가져오기();
  }, []);

  return <>{값}</>;
}

export default App;

 function 메모이즈(함수) {
        // 0. 캐시라는 변수는 클로저가 된다
        const 캐시 = {};

        return function (키) {
          console.log("캐시 내부", 캐시);
          // 1.캐시 안에서 이전에 계산한 값을 꺼내 온다
          const 값 = 캐시[키];

          // 2. 이전에 계산한 값이 있으면 그 값을 반환한다
          if (값) {
            console.log("히트다 히트!");
            return 값;
          }

          // 3. 이전에 계산한 값이 없으면 새로 계산해서 캐시에 넣자
          캐시[키] = 함수(키);

          // 4. 그리고 계산한 값을 반환!
          return 캐시[키];
        };
      }

23.08.22

환경 변수 설정 & 동적 라우팅

.env.local

VITE_PB_URL = http://127.0.0.1:8090 # 환경변수 설정
VITE_PB_API = $VITE_PB_URL/api #API 엔드포인트를 저장
DB_PASSWORD = qweiuickx2@zkjw # 비트와의 약속 : 변수명에 'VITE'를 명시하지 않으면 값을 불러 올 수 없음!

.env.local에 있는 변수 불러오는 방법

src/routes

<Route path="product/edit/:productId" element={<ProductEdit />}/>
{/* :productId - url 파라미터에 따라 동적으로 라우팅 해주겠다는 뜻  */}
// productId는 동적 경로 매개변수                                 
// ProductEdit 컴포넌트에서 이 매개변수를 추출하려면 useParams 훅을 사용 

${import.meta.env.VITE_PB_API}/collections/products/records/${productId}
// http://127.0.0.1:8090/api/collections/products/records/상품ID

value vs defaultValue

defaultvalue - 폼 요소의 초기값을 설정하는 데 사용 / 리액트가 관리하지 않고 사용자에 의해서 값을 바꾸고 싶을 때 사용

 <div className="flex gap-3">
      <label htmlFor={titleId}>타이틀</label>
      <input
        type="text"
        name="title"
        id={titleId}
        // 리액트가 제공하지 않는 함수를 사용할 때는  defaultValue 사용해야 한다.
        defaultValue={formState.title} 
        onChange={handleDebounceChangeInput} // debounce 함수
      />
</div>

value - 폼요소의 현재 값을 나타냄 / 리액트가 관리할 때 사용

pocketbase SDK

PocketBase SDK NPM을 사용해 PocketBase SDK 패키지를 설치합니다.

npm i pocketbase

src/api/pocketbase.js

import PocketBase from 'pocketbase';

const pb = new PocketBase(import.meta.env.VITE_PB_URL);

// PocketBase SDK {}
export default pb;

api 문서

useParams

<Route> 설정:
이 부분은 처음에 설정되며, 브라우저의 주소창에 특정 URL 경로가 입력되었을 때 
일치하는 라우트가 있으면 해당 라우트의 컴포넌트를 렌더링합니다. 
path 속성에 있는 경로 패턴을 가지고 매칭 여부를 결정합니다.

컴포넌트 내에서 const { productId } = useParams(); 실행:
이 부분은 ProductEdit 컴포넌트 내부에서 실행됩니다. 
해당 컴포넌트가 라우트에 의해 렌더링될 때, 컴포넌트 내부의 코드가 실행됩니다. 
따라서 useParams()를 호출하여 동적 매개변수 값을 추출하는 것은 ProductEdit 컴포넌트가 렌더링될 때 일어납니다.

따라서 순서는 <Route> 설정이 먼저 이루어진 다음, ProductEdit 컴포넌트가 렌더링되면서 내부에서 useParams()를 호출하여 동적 매개변수 값을 가져오게 됩니다.

1. 사용자가 링크를 클릭하여 /product/edit/123과 같은 URL로 이동합니다.
2. Route 컴포넌트가 /product/edit/:productId 경로와 일치하는지 확인합니다.
3. 경로와 일치하므로 ProductEdit 컴포넌트가 렌더링됩니다.
4. ProductEdit 컴포넌트 내에서 const { productId } = useParams(); 코드가 실행됩니다. 이때 productId는 123과 같은 값이 됩니다.
5. 만약 item.id가 456인 링크를 클릭한 경우, to 속성이 /product/edit/456가 되며, ProductEdit 컴포넌트에서 productId는 456과 같은 값이 됩니다.

이렇게 함으로써 동적으로 변화하는 경로와 해당 경로의 매개변수 값을 활용하여 원하는 정보를 렌더링하거나 네비게이션을 처리할 수 있습니다.

23.08.23

lifting

상태와 달리, 참조 객체의 현재 값은 변경되어도 리액트가 다시 렌더링을 하지 않는다. 상태는 시간의 흐름에 따라 변하고, 상태가 변경되면 리액트는 필연적으로 반응(리액션: 렌더링)한다. 함수 내부의 변수나 포함된 함수는 다음 번 실행(리-렌더링) 시, 초기화된다. (가비지 컬렉터에 의해서) 컨텍ㄷ스트 == 영역

useContext

전 후

useReducer

23.08.24

23.08.24

Serialize(직렬화): 객체를 데이터스트림(연속적인 바이너리 형태나 텍스트 형태(예: JSON) )으로 만드는 것 즉, 객체에 저장된 데이터를 스트림에 쓰기위해 연속적인 데이터를 변환하는것. (JSON.stringify()) Deserialization(역직렬화): 반대로 스트림으로부터 데이터를 읽어 객체를 만드는 것 (JSON.parse())

useMemo / useCallback

useCallback 훅은 리액트 컴포넌트 내에서 함수를 최적화하여 생성하거나 업데이트할 때 사용됩니다. 함수 컴포넌트가 렌더링될 때마다 새로운 함수가 생성되는 경우, 불필요한 리렌더링이 발생할 수 있고, 성능 저하의 원인이 될 수 있습니다. 이러한 문제를 해결하고자 useCallback 훅을 사용하여 함수를 메모이제이션하고 최적화할 수 있습니다.

  // useCallback : 함수 값만 기억 vs. useMemo : JS 모든 값(함수 포함)을 기억
  // useMemo 훅: 모든 JS 값 유형 기억
  // const cachedUpdate = useMemo(() => 함수 값, [])

  // useCallback 훅: JS 함수 값만 기억

  const update = useCallback(
    (nextData) => {
      setData(key, nextData);
      setStorageData(nextData);
    },
    [key]
  );

  // const updateMemo = useMemo(
  //   () => (nextData) => {
  //     setData(key, nextData);
  //     setStorageData(nextData);
  //   },
  //   [key]
  // );

  const remove = useCallback(() => {
    deleteData(key);
    setStorageData();
  }, [key]);

  // const removeMemo = useMemo(
  //   () => () => { deleteData(key); },
  //   [key]
  // );

Route가 보호되는 상항에서 발생되는 에러 처리

토스트에서 문제 상황 발생 순수한 영역에서 상태를 바꾸려고 시도했기 때문에 에러가 발생한다 useEffect를 사용

const { isAuth } = useAuth();

  useEffect(() => {
    // if (!isAuth) {
      toast("로그인 된 사용자만 이용 가능한 페이지입니다.", {
        icon: "⚠️",
        ariaProps: {
          role: "alert",
          "aria-live": "polite",
        },
      });
    // }

    return () => {};
  }, [isAuth]);

  if (!isAuth) {
    return <Navigate to="/signin" />;
  }

  return children;
}

spa에서 검색 엔진 최적화를 도와주는 react-helmet-async

https://www.npmjs.com/package/react-helmet-async

명령형 프로그래밍에서 객체지향 프로그래밍 방법론은 유지보수와 코드 재사용성이 용이하다고 배운적이 있습니다! 그래서 수업 중 명령형 프로그래밍의 단점에서 코드의 재사용성과 유지보수성이 떨어진다는 부분이 잘 이해가 되지 않습니다.

선언형 프로그래밍이 객체지향 프로그래밍보다 유지보수성과 재사용성이 더 좋다고 보면 될까요?

답변

오늘 수업에서 다룬 것은 명령형 프로그래밍 코드 구문과 선언형 프로그래밍 코드 구문 비교입니다. 질문에서 처럼 객체 지향 프로그래밍 코드와 비교하지는 않았습니다. 객체 지향 프로그래밍 코드는 함수를 사용해 작성하는 프로그래밍과 비교하는 중이었죠. 내일 수업에서 이어집니다.

그럼 아래 작성된 명령형 vs. 선언형 코드 구문을 먼저 살펴본 후, 아래 작성된 글을 참고하세요. 😃

• 명령형 프로그래밍 코드

  함수 정의 및 호출 과정 없이 작성된 명령형 코드 (원본 변형함)

    const courses = [
      { 
        id: 1,
            name: ' imperative programming'
        },
      { 
        id: 2,
            name: 'declarative programming '
        },
    ];
  
    // 과정 배열을 순환하여 각 과정 이름의 좌우 공백 제거
    for (let i=0, l=courses.length; i < l; ++i) {
      courses[i].name = courses[i].name.trim();
    }
  
    // 과정 배열을 순환하여 각 과정 이름 대문자화
    for (let i=0, l=courses.length; i < l; ++i) {
      courses[i].name = courses[i].name.toUpperCase();
    }
  
    // 과정 배열을 순환하여 각 과정 이름의 공백 밑줄 변경
    for (let i=0, l=courses.length; i < l; ++i) {
      courses[i].name = courses[i].name.replace(/\s+/g, '_');
    }

• 선언형 프로그래밍 코드

  각 기능 별 함수 선언 후, 배열의 map 메서드를 사용해 함수 조립(구성)한 선언형 코드 (원본 변형 안함)

    const subjects = [
      { 
        id: 1,
            name: ' imperative programming'
        },
      { 
        id: 2,
            name: 'declarative programming '
        },
    ];
  
    // 객체 이름(name) 속성 좌우 공백 제거 기능
    function toTrim(object) {
      const o = { ...object };
      o.name = o.name.trim();
      return o;
    }
  
    // 객체 이름(name) 속성 대문자화 기능
    function toUpperCase(object) {
      const o = { ...object };
      o.name = o.name.toUpperCase();
      return o;
    }
  
    // 객체 이름(name) 속성 밑줄 변경 기능
    function toUnderscore(object) {
      const o = { ...object };
      o.name = o.name.replace(/\s+/g, '_');
      return o;
    }
  
    // 함수 조합
    **subjects
        .map(toTrim)
        .map(toUpperCase)
        .map(toUnderscore);**

자! 이제 유지보수 관점에서 생각해봅시다. 다음의 수정사항이 주어졌습니다.

1. 먼저 이름을 대문자로 변경합니다.
2. 그리고 이름에 포함된 공백을 모두 밑줄로 변경합니다.
3. 좌우 공백이 제거되도록 코드를 수정합니다.

• 명령형 프로그래밍 코드

  명령형 구문을 통째로 잘라내서 붙여넣든 하는 방식으로 코드를 옮겨야 유지보수가 되요.

    // 원래 순서: 2
    for (let i=0, l=courses.length; i < l; ++i) {
      courses[i].name = courses[i].name.toUpperCase();
    }
  
    // 원래 순서: 3
    for (let i=0, l=courses.length; i < l; ++i) {
      courses[i].name = courses[i].name.replace(/\s+/g, '_');
    }
  
    // 원래 순서: 1
    for (let i=0, l=courses.length; i < l; ++i) {
      courses[i].name = courses[i].name.trim();
    }

같은 내용의 유지보수를 선언형 프로그래밍에서 진행해봅니다.

1. 먼저 이름을 대문자로 변경합니다.
2. 그리고 이름에 포함된 공백을 모두 밑줄로 변경합니다.
3. 좌우 공백이 제거되도록 코드를 수정합니다.

• 선언형 프로그래밍 코드

  선언된 함수 조립 방식으로 설계된 코드이므로 수정 사항을 코드 라인의 순서만 바꾸면 됩니다.

    // 함수 조립(구성) 순서만 변경하면 됨
    subjects
        .map(toUpperCase) // 원래 순서: 2
        .map(toUnderscore) // 원래 순서: 3
        .map(toTrim); // 원래 순서: 1

  위 코드는 추후에 함수형 프로그래밍 방식에 따라 아래처럼 사용됩니다.

    // 함수 조립(구성)
    pipe(
        toUpperCase,
        toUnderscore,
        toTrim
    )(subjects);

  subjects 말고도 다양한 객체에 코드를 재사용하기 용이합니다.

    pipe(
        toUpperCase,
        toUnderscore,
        toTrim
    )(**courses**);

  선언된 데이터에 기능을 추가하거나, 삭제하는 것도 쉽습니다.

    pipe(
        **filterStocked(10), // 재고가 10개 이상인 제품만 걸러냄
        filterMoreExpensive(50_000), // 5만원 이상의 제품만 걸러냄
        filterMadeInKorea() // 국산 제품만 걸러냄**
    )(**products**);

명령형도 함수로 분리할 수 있지 않나 의문이 들 수도 있어요. 그럼 아래와 같이 작성되겠죠. 역시 문으로 구성되어 있다 보니 유지보수가 용이하지는 않아 보여요.

for (let i=0, l=courses.length; i < l; ++i) {
  **toUpperCase(courses[i]);**
}

for (let i=0, l=courses.length; i < l; ++i) {
  **toUnderscore(courses[i]);**
}

for (let i=0, l=courses.length; i < l; ++i) {
  **toTrim(courses[i]);**
}

그럼? 반복문을 3번 돌리지 않고 하나로 묶는 생각도 할 수 있을 거에요. 아래 처럼 말이죠. 뭐 이러면 유지 보수가 나아보일 수 있지만, 재사용은 어렵죠.

**for (let i=0, l=courses.length; i < l; ++i) {**
  const course = courses[i];
  toUpperCase(course);
    toUnderscore(course);
    toTrim(course);
**}**

그럼 더 나아가 재사용을 목적으로 함수로 만들 생각을 할 수도 있을 거에요.

**function toUpperCaseAndUpserscoreAndTrim(courses) {**
  for (let i=0, l=courses.length; i < l; ++i) {
      ****toUpperCase(courses[i]);
        toUnderscore(courses[i]);
        toTrim(courses[i]);
    }
**}**

그런데 함수로 선언해서 재사용은 가능하지만, 순서가 항상 정해져 있잖아요. 수정이 또 발생하면 함수는 재사용이 어려워져요. 1회성으로 끝나고 버려지게 되죠. 결국은 다시 아래 코드로 돌아가야 합니다.

for (let i=0, l=courses.length; i < l; ++i) {
  const course = courses[i];
  toUpperCase(courses[i]);
    toUnderscore(courses[i]);
    toTrim(courses[i]);
}

정리

어쩌면 작성된 글만으로는 여전히 의문이 남을지 몰라요. 😅

수업에서도 말했던 바를 다시 한 번 말씀드리지만, 절대 “함수형이 명령형보다 낫다” 이런 말이 아니에요. 프로그래밍 하는 방법이 다를 뿐. 패러다임은 다양합니다.

지하철을 타거나, 버스를 타거나, 자전거를 타는 것 중 “어떤게 낫다 아니다” 그런 문제가 아니라 상황에 따라 최선의 방법은 달라질 수 있어요. 어떤 경우는 지하철이 다른 경우는 버스가 나을 수 있는 거죠.

다만, 우리 수업에서 다루는 주제인 React가 채택한 프로그래밍 방식이 “함수형”이라는 겁니다.

그럼 함수형 프로그래밍에서 코드를 어떻게 관리하는가? 그 부분을 중점적으로 봐주시고, 절대적으로 함수형이 명령형 또는 객체 지향 프로그래밍 보다 낫다고 말한 것이 아니므로 오해가 없었으면 합니다. 😄

결론

객체지향 프로그래밍과 선언형 프로그래밍 중에서 유지보수성과 코드 재사용성에서 뭐가 더 나은지 비교할 순 없다. => 설계에 따라서 달라짐

🥰엘리멘탈 포스터 갤러리

엘리멘탈 포스터 갤러리는 사용자가 클릭한 영화에 해당하는 정보를 화면에 출력하는 간단한 웹 페이지입니다. 사용자가 각 캐릭터 포스터를 클릭하면 해당 캐릭터의 이름이 페이지 상단에 표시되며, 배경색도 해당 캐릭터의 대표 색상으로 변경됩니다.

🏷️주요 기능

1. 사용자가 각 캐릭터 포스터를 클릭하면 해당 캐릭터의 이름을 화면 상단에 표시합니다.
2. 클릭한 캐릭터 포스터의 배경색이 해당 영화의 색상으로 변경됩니다.
3. 메인 사진에서 캐릭터 포스터의 이미지와 대체 텍스트(alt)가 올바르게 설정됩니다.

   🏷️프로젝트 실행 방법

4. 엘리멘탈 포스터 갤러리 레포지토리를 클론 또는 다운로드합니다.
5. index.html 파일을 웹 브라우저로 엽니다.
6. 캐릭터 포스터를 클릭하여 기능을 확인합니다.

이 프로젝트는 영화 포스터 갤러리를 보여주는 간단한 예시로, 추가적인 기능과 디자인을 적용하여 더욱 풍부한 웹 페이지로 발전시킬 수 있습니다. 코드에 대한 주석과 각 함수들의 역할을 잘 이해하시고, 필요한 기능을 추가하여 웹 페이지를 더욱 완성도 있게 만들어보세요.

🏷️함수

setImage

function setImage(node, imageName, altPath) {
  if (typeof node === "string") node = getNode(node);

  if (!node) return;

  const imagePath = `./assets/${imageName.toLowerCase()}.jpeg`;

  attr(node, "src", imagePath);
  attr(node, "alt", altPath);
}

setImage 함수를 사용하면 특정 이미지 엘리먼트의 이미지 파일과 대체 텍스트를 손쉽게 설정할 수 있습니다.

setNameText

function setNameText(node, text) {
  if (!text || typeof text !== "string") {
    throw new TypeError("setNameText 함수의 인수는 문자열이어야 합니다.");
  }

  node.textContent = text;
}

setNameText 함수를 사용하면 특정 노드에 간편하게 텍스트를 설정할 수 있습니다. 이 함수를 활용하여 HTML 문서의 특정 부분에 동적인 텍스트를 적용하거나, 사용자 입력에 따라 텍스트를 변경하는 등 다양한 상황에서 유용하게 활용할 수 있습니다.

setBgColor

function setBgColor(node, value) {
  if (typeof node === "string") node = getNode(node);

  if (!value || typeof value !== "string") {
    throw new TypeError("setBgColor 함수의 인수는 문자열이어야 합니다.");
  }

  node.style.background = value;
}

setBgColor 함수를 사용하면 특정 노드의 배경색을 간편하게 변경할 수 있습니다. 이를 활용하여 JavaScript를 통해 동적으로 웹 페이지의 스타일을 조작할 수 있으며, 사용자 인터랙션에 따라 동적으로 스타일을 변경하는데 유용하게 활용할 수 있습니다.

🏷️arrayMethod

Array.isArray

기존에 사용하던 typeof는 언어가 가지는 오류 때문에 Null이나 배열의 타입을 알 수 없었다.

그래서 Array.isArray이 나왔는데 다음과 같이 사용하면 배열의 타입을 알아낼 수 있었다. 하지만 Null은 타입을 알기 어려운데 이것은 toString을 사용하면 알아낼 수 있다.

toString은 모든 타입이 가지고 있지만 찐객체가 가지고 있는 toString을 사용하면 우리가 무슨 타입을 사용하고 있는지 정확하게 알려준다. toString, toLowerCase 와 slice를 사용하여 원하는 값을 얻어낼 수 있다. 그걸 이용해 다음과 같은 유틸 함수를 만들었다.

// isArray 화살표함수.ver
const isArray = (data) =>
  Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'array';
//isArray 일반함수.ver
function nomalIsArray(data) {
  return (
    Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'array'
  );
}
//isNull 화살표 함수.ver
const isNull = (data) =>
  Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'null';
//isNull 일반함수.ver
function normalIsNull(data) {
  return (
    Object.prototype.toString.call(data).slice(8, -1).toLowerCase() === 'null'
  );
}

toSorted, toReversed, toSpliced

올해 2023년에 새롭게 나온 메소드인 toSorted, toReversed, toSpliced를 사용해 봤다. 이름만 봐도 기존의 메소드와 비슷해서 무슨 일을 하는지 알 수 있었다.

그럼 나온 이유가 무엇이나 하면 기존의 sort, reverse, splice는 원형을 파괴하는 메소드였다. 하지만 이번에 새로 나온 메소드들은 기존과 같은 일을 하되, 원형을 파괴시키지 않는다.

const arr = [10, 100, 1000, 10000];

// toSorted => 원형을 파괴하지 않음 
const toSorted = arr.toSorted((a, b) => b - a);
 console.log(toSorted);

// toReversed => 원형을 파괴하지 않음 
const toReversed = arr.toReversed();
 console.log(toReversed);

// toSpliced => 원형을 파괴하지 않음 
 console.log(arr);
const toSpliced = arr.toSpliced(2, 0, 'js', 'css', 'react')
 console.log(toSpliced);

⭐⭐map⭐⭐

const job = people.map((item) => `<div>${item.profession}</div>`); 
document.body.insertAdjacentHTML('beforeend', job);

리스트가 잘 나왔지만 화면에 , 까지 출력이 되는 걸 볼 수 있다. 🤔왜 , 까지 출력이 되는 것일까?

해결 방법

const job = people.map((item) => `<div>${item.profession}</div>`); 

// forEach문을 사용하면 원하는 결과값이 나오게 됨 
job.forEach((item) => document.body.insertAdjacentHTML('beforeend', item))

reduce

reduce를 배울 때 acc의 초기값을 설정해주지 않으면 0이 선언되는 것으로 알고 있었다.

const totalAge = people.reduce((acc, cur) => acc + cur.age);

이렇게 코드를 작성해주었는데 원하지 않는 값이 나왔다.

사실 reduce의 초기값은 배열에서 아이템으로 넘어온 대상을 초기값으로 설정한다. 숫자를 넣을 경우 숫자를 초기값으로 지정하므로 간단한 숫자를 더하거나 뺄 경우는 문제가 되지 않으나 배열안에 다른 자료구조가 있는 경우에는 이를 정확하게 인식할 수 있도록 initialValue를 설정해주는게 좋다. &ltreduce안에서 acc자체만 출력했을때는 객체 자체가 나오기 때문에 숫자만 다루는 배열이 아닌 다른 자료구조가 들어오는 경우는 초깃값을 숫자로 지정해주어야 합니다 🙂&gt

따라서 위에 코드는 다음과 같이 수정할 수 있다.

const totalAge = people.reduce((acc, cur) => acc + cur.age, 0);

console.log(totalAge);

🏷️try catch문

JS에서는 에러가 발생하면 페이지가 동작하지 않는다. 이런 문제를 해결하기 위해 try..catch문을 사용하면 된다.

try {
  let a = 5;
  a + b // try catch문을 쓰지 않으면 b가 정의되어 있지 않다는 에러메시지와 함께 에러가 발생한다.
} catch(e) {
  console.log(e.name);
  console.log(e.message);
  console.log(e.stack);
}

error 메시지는 name, message, stack 3가지로 구성되어 있다.

🏷️bom

📌23.7.18

🏷️nodeClass

/* 노드 콘텐츠 읽기/쓰기 ---------------------------------------------------- */

// - innerHTML
// * 기존 내용 삭제
// * 기존 내용과 새로운 내용을 합친 새로운 내용을 씀
first.innerHTML = '<div>helloooooooo</div>'; //html을 추가하는 것이기 때문에 위험하다

// - textContent
// * 요소 내의 텍스트에 접근
// * 태그는 제외하고 오로지 텍스트만 추출
console.log((first.textContent = 'hh'));

🏷️attribute

표준속성

attributes는 iterable 하기 때문에 for...of문을 사용할 수 있다.

비표준 속성

🏷️style

elementNode.style.porp은 getter로는 사용 불가능한 이유?

해당 요소에 직접적으로 backgroundColor 속성이 지정하면 사용할 수 있지만 그렇지 않은 경우에는 계산되기 이전 값을 가져오기 때문에 사용할 수 없다.

그럼 스타일을 가져올 수 없느냐 그건 아니다

// - getComputedStyle(element, [pseudoElement]) `읽기 전용`
console.log(getComputedStyle(first).fontSize); // 32px / 아래와 같음
console.log(getComputedStyle(first).getPropertyValue('font-size')); // 32px

getComputedStyle를 사용하면 값을 찾아올 수 있다.

수업에서 getCss(), setCss() 유틸 함수를 만들었는데 수업시간에 만든 것은 케밥 케이스로만 값을 입력해야 함수가 제대로 작동하는 것만 만들었다. 하지만 둘 중 아무거나 사용해도 제대로 작동할 수 있도록 만들고 싶어 수정해 보았다.

function getCss(node, prop) {//'font-size'.indexOf('-')
  if(typeof node === 'string') node = getNode(node)

  if(!(prop in document.body.style)) {
    throw new SyntaxError('getCss 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다')
  }

  return getComputedStyle(node).getPropertyValue(prop)
}

수업시간에 내가 작성한 코드다 여기서 무엇을 추가하면 카멜 케이스로 사용할 수 있을 까 생각해보았는데 indexOf()를 사용하면 될 것 같아 다음과 같이 수정해 보았다.

function getCss(node, prop) {//'font-size'.indexOf('-')
  if(typeof node === 'string') node = getNode(node)

  if(!(prop in document.body.style)) {
    throw new SyntaxError('getCss 함수의 두 번째 인자인 prop은 유효한 css 속성이 아닙니다')
  }

  if(prop.indexOf('-') == -1) return getComputedStyle(node)[prop] 
  return getComputedStyle(node).getPropertyValue(prop)
}

prop.indexOf('-') == -1 prop이라는 매개변수에 -이 포함되어 있지 않다면 getComputedStyle(node)[prop] 코드를 사용하여 리턴해주는 코드를 작성했다.

결과는 아주 잘 작동했다.😊

클래스 vs 객체 코드 비교

외부에서 beom.prey로 접근 불 가능하지만, 내부에서는 prey로 접근이 가능하다

 static sleep(name) {
    console.log(name + '이 잠을 잔다.');
  }

static 키워드가 붙은 메서드는 클래스 자체에 속하는 정적 메서드입니다. => 모두가 사용할 수 있게 바뀜 정적 메서드는 인스턴스 객체에서 직접 호출할 수 없으며, 클래스명을 통해 호출해야 한다.

따라서, beom.sleep()과 같이 인스턴스 객체인 beom에서 static 메서드인 sleep()을 호출하는 것은 잘못된 사용입니다. 정적 메서드는 클래스 수준에서 공유되는 기능을 제공하기 때문에, Tiger.sleep('범')과 같이 클래스명을 통해 호출해야 한다.

올바른 사용 예시는 다음과 같습니다:

📌closure

클로저란? JavaScript의 매우 강력한 특성으로 독립적인 변수를 참조하는 함수를 말합니다. ★ 즉, 클로저에 정의된 함수는 그것이 작성된 환경을 '기억'합니다. 클로저를 사용하는 이유

1. 전역의 오염을 막기 위해
2. 값을 기억하기 위해(가비지 컬렉터 수집 x)
3. 함부로 내가 설정한 값을 수정할 수 없게 하고 특정 함수를 통해서만 접근할 수 있게 하기 위해

function first() {
  let x = 10;

  function second() {
    let y = 5;
    return x + y;
  }
  // return x;
  return second // 함수를 실행하는게 아닌 본문을 내보냄
}

first() //  function second() {
        //     let y = 5;
        //    return x + y;
        //   }

//currying function
const value = first() //first()() // 15

first 내부에 있는 second를 실행시킨 값을 내보내는 게 아닌 함수 본문을 first의 return 값으로 내보냈다.

function counter(){
  let count = 0;

  count++;

  return count;
}


let result = counter();

클로저를 이용한 counter 함수

🤔 만약 호랑이가 지구에서 쫓겨난 후에 지구에 새로운 키, 밸류가 추가되면 그것도 호랑이가 수집할 수 있나요? ✅ yes 🤔 그럼 클로저를 통해 earth() 안의 정보를 가져오고 싶을 때는 내부 function에 적어줘야만 가져올 수 있는 건가요? ✅ yes 🤔그럼 water나 apple은 접근 못하는건가요?? ,그럼 보통 외부 function에는 변수를 지정하고 내부 function에는 실행 시킬내용을 지정하면되는거죠? ✅ yes

value에는 second가 담겨 있는 것 이지만 second 함수는 자신이 작성된 실행환경을 기억하고 있기 때문에 earth() 전체가 가비지 컬렉터의 수집 대상이 되지 않는 것이다.

🤔문제발생

처음엔 로직에 문제가 있는 줄 알고 콘솔창에 직접 함수를 입력하여 구동시켰더니 정상 작동을 했다. 원인을 찾기 위해 구글링을 했지만 나는 서버와 협업해서 하는 것이 아니기 때문에 검색된 결과들은 나에게 별 도움이 되지 않았다.

🧐원인발견

계속 문제가 무엇인지 찾다보니 <form action="URL" class="login-form" method="POST">에서 Http request를 시도했는데 정확한 서버도 아닌 있지도 않은 서버에게 요청을 해서 발생한 문제라는 걸 찾아냈다!!

😊문제해결

이제 문제를 찾았으니 js 함수를 수정해봤다.

//수정 전
function checkUser(checkId, checkPw) {
  if ((checkId.value === user.id) && (checkPw.value === user.pw)) {
    window.location.href = 'welcome.html';
  }else if(checkId.value.length === 0 || checkPw.value.length === 0) {
    throw new Error('아이디와 비밀번호는 필수 입력값입니다.. ')
  }
  else {
    throw new Error('찾을 수 없는 회원입니다')
  }
}
loginButton.addEventListener('click', ()=> {
  checkUser(emailInput, passwordInput);
})

로그인 버튼을 찾아와서 클릭 이벤트가 발생했을때 checkUser 함수를 실행하는 알고리즘을 작성했다.

// 수정 후
form.addEventListener('submit', (event) => {
  event.preventDefault();
  checkUser(emailInput, passwordInput);
});

기존 코드는 지운 후

1. loginButton이 아닌 form태그에 이벤트 함수를 작성해주었다.
   
2. 기존의 click이 아닌 폼의 제출을 감지하고 처리하기 위해서는 submit 이벤트를 사용해야 하기 때문에 submit으로 수정해주었다.
   
3. event.preventDefault(); 어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정

• form의 경우, 제출(submit) 버튼을 클릭하면 기본적으로 폼 데이터를 서버로 전송하고 페이지를 다시 로드하는 동작이 수행되는데, 지금 프로젝트에서는 서버가 없기 때문에 이 동작을 막아주기 위해 추가해줬다.
  

이렇게 변경한 후 다시 로그인 버튼을 눌러보면 다음 페이지로 잘 넘어가는 것을 확인할 수 있다!!

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

SayBye는 단축구문으로 정의한 함수 SayHi는 단축구문이 아닌 평범하게 정의한 함수

⭐ 단축구문은 일반함수지만 prototype: {constructor}를 내장하지 않는다. 그러나 일반함수이기에 this도 단축구문을 사용하지 않은 일반함수처럼 잘 찾아줌!! ⭐ 객체의 메소드를 정의할 때 consise method만 사용하자!

🏷️객체의 메소드를 정의할 때 화살표 함수는 안되는 이유

const navigationMenu = {// 수정 전
  name: '글로벌 내비게이션',
  items: [
    { id: 'link-g', text: 'Google', link: 'https://google.com' },
    { id: 'link-n', text: 'Naver', link: 'https://naver.com' },
  ],
  getItem(index) {
    return this.items[index]; // this는 navigationMenu
  },
     addItem: (newItem) => {
     this.items.push(newItem); //this는 navi가 아닌 window이기 때문에 에러 발생 (widow.items.push())
   },

};

navigationMenu.getItem()
navigationMenu.addItem({
  id: 'link-l',
  text: 'Lycos',
  link: 'https://lycos.co.kr'
})

다음과 같이 작성하면 콘솔창에 에러가 뜨는데

push를 할 수 없다는 에러가 발생한다. 그 이유는 화살표함수를 사용하게 되면 this는 navi~가 아닌 window를 가리키기 때문에 에러 발생한다. 따라서 정확한 this를 찾기 위해서는 일반함수를 사용해야 한다.

const navigationMenu = { //수정 후
  name: '글로벌 내비게이션',
  items: [
    { id: 'link-g', text: 'Google', link: 'https://google.com' },
    { id: 'link-n', text: 'Naver', link: 'https://naver.com' },
  ],
  getItem(index) {
    return this.items[index]; // this는 navigationMenu
  },
  addItem(newItem) {
    this.items.push(newItem); //this는 navigationMenu
  },
};

navigationMenu.getItem()
navigationMenu.addItem({
  id: 'link-l',
  text: 'Lycos',
  link: 'https://lycos.co.kr'
})

📌프로토타입(객체지향)

🏷️프로토타입 상속

설명!object에서 프로퍼티를 읽으려고 하는데 해당 프로퍼티가 없으면 자바스크립트는 자동으로 프로토타입에서 프로퍼티를 찾기 때문이죠. 프로그래밍에선 이런 동작 방식을 '프로토타입 상속’이라 부릅니다.

찐객체가 만들어낸 자식 객체 animal은 __proto__를 사용해서 찐객체에 접근할 수 있다 Object.prototype === animal.__proto__는 같다. Object.prototype - 찐객체에 바로 접근할 수 있고 객체를 생성하지 않고 사용 가능 객체.__proto__ - 양산품에서 찐객체에 접근할 일이 생길 때 사용

let animal = {
  eats: true
};
let rabbit = {
  jumps: true
};
//rabbit의 부모를 찐객체에서 animal로 바꿀 수 있음 (rabbit -> animal -> realObject)
rabbit.__proto__ = animal;

장점: rabbit.eats를 사용할 수 있음!! (상속 받았기 때문에)

this로 찾아지는 윈도우의 위치

찐객체 위의 null 찾기

🤔 프로토타입은 다른 자료형을 상속하면 그 자료형의 프로토타입 메서드도 사용할 수 있는건가요? ✅ yes __proto__를 사용하지 않는 이유 -> 비표준이라

🏷️프로토타입 체이닝

let animal = {
  eats: true,
  walk() {
    alert("동물이 걷습니다.");
  }
};

let rabbit = {
  jumps: true,
  __proto__: animal
};

let longEar = {
  earLength: 10,
  __proto__: rabbit
};

// 메서드 walk는 프로토타입 체인을 통해 상속받았습니다.
longEar.walk(); // 동물이 걷습니다.
alert(longEar.jumps); // true (rabbit에서 상속받음)

⚠️ 프로토타입 체이닝의 제약사항

1. 순환 참조(circular reference)는 허용되지 않습니다. __proto__를 이용해 닫힌 형태로 다른 객체를 참조하면 에러가 발생한다.
2. __proto__의 값은 객체나 null만 가능합니다. 다른 자료형은 무시된다. ➕ 객체엔 오직 하나의 [[Prototype]]만 있을 수 있다. 객체는 두 개의 객체를 상속받지 못한다.

🏷️enumerable(열거 가능한) 프로퍼티

enumerable 하지 못한 애들은 어두운 색으로 표시 for..in문에서 표시가 되지 않는 이유는 for..in문은 enumerable한 프로퍼티만 순회대상에 포함되기 때문이다.

🤔 우린 enumerable한 요소들만 만들 수 있는건가? ✅ Object.defineProperty()를 사용하면 enumerable 하지 않은 요소들도 만들 수 있다

🏷️함수의 프로토타입 프로퍼티

cat.hunt = function (target) {
  this.prey = target, 
  console.log(`${target}에게 슬금슬금 접근한다.`);
}

🤔 여기서의 this는 무엇일까? ✅ 정답 cat

return 값이 없기 때문에 undefined!! 화살표 함수는 함수로서의 기능만 하니까 constructor를 내장하고 있지 않기 때문에 new 키워드를 사용하여 객체를 만들 수 없다. error 발생!!!

함수의 실행 컨텍스트

함수는 전역으로 선언되고 윈도우랑 바인딩된다. 그후 함수를 실행 할 때 함수 내부에서는 또 다른 함수 실행 컨텍스트(환경)가 만들어진다.

📌Object

🏷️표기법

// 점(.) 표기법
// authUser 객체의 프로퍼티에 접근해 Console에 출력해봅니다.
 console.log( authUser.uid );
 console.log( authUser.permission );
 console.log( authUser.email );

// 대괄호([]) 표기법
// 대괄호 표기법을 사용해 접근 Console에 출력해봅니다.
console.log( authUser['uid']);
console.log( authUser['email']);
console.log( authUser['name']);

⚠️ 변하는 키를 받아야 할 땐 점 표기법말고 대괄호를 사용해야 한다.

⚒️클래스 객체 생성하기

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

const user3 = new User('동혁')

⚒️함수로 객체 생성하기

/* shorthand property (단축 프로퍼티)  */
function createUser(
  name,
  email,
  computedProp = 'phone',
  number = '010-0000-0000'   
) {
  return {
    name: name,
    email: email,
    [computedProp]: number
  }

}
const user1 = createUser(
  '진승',
  'victory',
  'tel',
  '010-1234-5678'
)

🏷️프로퍼티 나열

// 프로퍼티 나열

// key만 모아놓은 배열
let keyArray = Object.keys(authUser);
let valueArray = Object.values(authUser);

function getProp(object) {
  if(typeof object !== 'object') {
    throw new Error('getProp 함 수의 매개변수는 객체 타입이어야 합니다')
  }
  return Object.keys(object);
}
/* --------- Object.keys를 사용하지 않고 키만 배열로 담아주는 함수 만들기 -------------------- */
function getP(object) {
  let result = [];

  for(let key in object) {
    if(({}).hasOwnProperty.call(object, key)) {
      result.push(key)
    }
  }

  return result;
}

🏷️remove와 delete

function removeProperty(object, key) { 
  if(typeof object !== 'object') {
    throw new Error ('....')
  }

  if(key === 'all') {
    for(let key of Object.keys(object)) {
      object[key] = null;
    }
      return object
    }

    object[key] = null;

    return object;
  }

function deleteProperty(object, key) {

  if(isEmptyObject(object)) {
    return;
  }
  delete object[key];
  return  object;
}

// 객체가 프로퍼티를 포함하는 지 유무를 반환하는 유틸리티 함수 isEmptyObject 작성
function isEmptyObject(object) { // length를 사용하여 비었는지 확인
// 실행 시, object가 비어있다면 true를 반환하고, 그렇지 않으면 false를 반환.
  return !(Object.keys(object).length); // 1
/*--------------------------------------*/
 if(Object.keys(object).length===0) { // 2
  return true;
 }
   return false;
/*----------------------------------------------------*/
  return Object.keys(object).length === 0 ? true: false // 3
}

🏷️구조분해할당

배열의 구조분해할당 : 순서가 정해져 있음, 변수의 이름을 바꿀 수 있다. 객체의 구조분해할당 : 순서가 정해져 있지 않음, 선언은 같은 변수로 지정해야 하고 :을 사용하여 변수를 바꿀 수 있다. 기본값도 할당가능.

배열 구조분해할당

let color = ['#ff0000', '#2b00ff', '#00ff02'];

let [red, blue, green] = color // 순서 중요! let [,,g] = color => green이 담김
                               // let red = color[0];
                               // let blue = color[1];
                               // let green = color[2];

  for(let [key, value] of Object.entries(authUser)) {
     let key = keyValue[0]
     let value = keyValue[1]
     console.log(key)
  }
/*-------------------------------------------------------------------*/
 const [a,b,c,d] = document.querySelectorAll('nav li button')
 a.addEventListener('click', ()=> {})
 b.addEventListener('click', ()=> {})
 c.addEventListener('click', ()=> {})
 d.addEventListener('click', ()=> {})

객체 구조분해할당

const salaries = {
  권헤미: 50,
  이수연: 3000,
  강예나: 500,
  김태일: 700
}
const { 권혜미, 이수연, 강예나, 김태일} = salaries // const 권혜미 = salaries.권헤미
console.log(권혜미)

function setElementCss(options) {
  const {width:w, height:h = 10, overflow, color} = options;
  console.log(w, color);
}
/*--------------------------------------------------------------*/
  function setElementCss(options) { //객체를 던지면
    console.log(options.width, options.color) // 순서에 상관없이 사용가능
  }

setElementCss({
  width: 100,
  height: 200,
  overflow: false,
  color: 'orange'
})

🏷️복사(copy) vs. 참조(reference)

원시값은 복사 객체는 참조

객체 복사

// 객체 복사
// 1. for ~ in 문을 사용한 복사

// 얕은 복사
const cloneObject = {};

for (const key in messenger) {
  cloneObject[key] = messenger[key];
}

// 2. Object.assign()을 사용한 복사
const copyObject = Object.assign({}, messenger);

// 3. 전개 연산자(...)를 사용한 복사
const spreadObject = { ...messenger };

// 4. 객체를 복사해주는 유틸 함수
 function copyedObject(object) {
   return {...object} // or Object.assign({}, object)
 } //아래는 화살표 함수로 바꾼 것 

// copyedObject라는 함수는 object를 매개변수로 받고 Object.assign()을 통해서 전달받은 object를 복사해서 값을 반환하는 함수다.
const copyedObject = object => Object.assign({}, object); 

const newObject = copyedObject(messenger);
console.log(newObject)

// 객체 병합(합성)
const cssMapA = {
  color: '#4b004b',
  margin: '0 auto',
};

const cssMapB = {
  display: 'flex',
  flexFlow: 'column',
  justifyContent: 'center',
  padding: '0.4em 0.62em',
  color: '#3f9e97',
};

let combinedCssMap = {...cssMapA, ...cssMapB}; // 중복된 값이 있으면 뒤에 값으로 덮여 쓰여진다.
// ==  let combinedCssMap = Object.assign({}, cssMapA, cssMapB)

중첩 객체 복사

// 중첩된 프로퍼티에 객체를 포함하는 객체 복사
// 얕은 복사 vs. 깊은 복사
const containerStyles = {
  'min-height': '100vh',
  'max-width': {
    sm: '90%',
    md: 640,
    lg: 960,
    xl: 1120,
    xxl: 1140,
  },
};

// let copyedContainerStyles = {...containerStyles};  얕은 복사
// let copyedContainerStyles = cloneDeep(containerStyles);  깊은 복사

// 1. 깊은 복사 유틸리티 함수 (재귀함수)
function cloneDeep(object) {
  return Object.fromEntries(
    Object.entries(object).map(([key, value]) => {
      let type = typeof value;
      if (value && type === 'object') {
        value = cloneDeep(value);
      }
      return [key, value];
    })
  );
}

📌arguments

arguments는 JS 함수 내부에서 사용되는 특별한 객체이다. 이 객체에는 함수에 전달된 인수(argument)를 포함하고 있다.

arguments 객체는 배열 유사 객체(Array-like object)로서, 배열의 일부 메소드(예: length, forEach)를 사용할 수는 있지만, 진짜 배열은 아니기 때문에 배열의 다른 메소드(예: push, pop)는 사용할 수 없다. 하지만 다음과 같이 arguments 객체를 진짜 배열로 변환할 수 있다.

// slice를 빌려써서 배열로 만드는 방법 
// Array의 슬라이스라는 기능을 빌려써서 
// arguments 진짜 배열로 바꿔 realArray에 담았다. (instance method) 

   let realArray = Array.prototype.slice.call(arguments);
   realArray.forEach(function(item) {
     total += item;
   })
   Array.from() (Static method)
/* ------------------------------------------------ */

 //% Array.from() (Static method)
   let realArray = Array.from(arguments);
   realArray.forEach(function (item) {
     total += item;
   });

/* ------------------------------------------------ */

  // spread syntax    69~85 
  // 스프레드 문법을 사용하여 배열로 바꿈 
  let arr = [12, 40, 100];
   let realArray = [...arguments];

   realArray.forEach(function (item) {
     total += item;
   });
 /* ------------------------------------------------ */

  //% spread syntax + Array.reduce 
  let realArray = [...arguments];
   return realArray.reduce((acc,item) => { //acc - 누적값
    return acc + item
   }, 0) // initValue 최초값

📌즉시 실행 함수

// 즉시 실행 함수 (표현)식
// Immediately Invoked Function Expression - 변수의 보호를 위해 탄생
let IIFE;


// 변수의 보호
// 은닉화 캡슐화 

const MASTER = (function (){//선언부
  var x =10; 
   let uid = 'ajttk753!@'

   return {
    getKey() {
      return uid;
    }
   };
})()//실행부

// 장점: 선언부는 매개변수를 실행부는 인수를 가지는데 즉시실행함수에서는 뭔가를 받았을 때 인자의 이름을 변경하여 사용할 수 있다.

console.log(MASTER.getKey());// MATSTER 변수를 통해서만 접근할 수 있음

🤔함수인데 왜 객체처럼 쓰는 것이 가능할까?

🤔함수 선언문과 함수 표현식 중 어떤 것이 더 좋을 까?

✅ 어떤게 더 좋다고 말할 수는 없지만 보통 함수 선언문을 사용하고 콜백함수를 만들 때는 함수 표현식 중 화살표 함수를 많이 사용한다.

📌콜백(callback) 함수

// 콜백 함수 (표현)식 //@ 나중에 실행 시켜줄게
let callbackFunctionExpression = function(callback) {
// const callback = function() { console.log('콜백 함수 실행!)} 내부적으로 일어나는 일

  callback();
};

callbackFunctionExpression(
  function() {
    // console.log('콜백 함수 실행');
  }
)
<*--------------------------------------------------*>
const movePage = function(url,success,fail){

  if(url.match(/http.+www/) && typeof url === 'string'){ // url의 문자열이고 http.+www 값이 들어가면 실행
     success(url)
  }else{
     fail()
  }
}

movePage(
  'www.naver.com', // ==> fail
  function(url){
    console.log('성공 몇초 뒤 해당 페이지로 이동합니다.');

    setTimeout(() => {
      window.location.href = url
    }, 3000);

  },
  function(){
    console.log('올바르지 않은 주소입니다.');
  }
)

📌화살표 함수

arrow function 은 arguments를 내장하고 있지 않다!!! 생성자(constructor)를 내장하고 있지 않다.

장점: 다른 함수들 보다 속도가 빠르다. 단점: constructor를 내장하고 있지 않기 때문에 생성자 함수를 사용할 수 없다 ➡️ 함수로서의 일만 한다.

⭐this⭐

++++ 함수 표현식은 변수 선언만 호이스팅되고, 실제 함수 할당은 런타임에 이루어지므로, 할당되기 전에 호출할 수 없다. (호이스팅되지 않는게 아님!!!!)

text, comment, span 같은 것들을 노드라고 하는데 노드는 가장 작은 단위이다. 노드는 타입이 존재 하는데 그 타입은 다음과 같다.
* html태그를 엘리먼트라고 한다 / 코드의 길이를 줄이기 위해 보통 이름을 사용하기 보단 숫자를 많이 사용한다!

• ⭐ ELEMENT_NODE (1): HTML 요소(태그)를 나타내는 노드입니다. 예를 들어 <div>, <p>, <a> 등의 HTML 요소는 ELEMENT_NODE입니다.

• ⭐ ATTRIBUTE_NODE (2): HTML 요소의 속성을 나타내는 노드입니다. 예를 들어 class, id, src 등의 속성은 ATTRIBUTE_NODE입니다.
• ⭐ TEXT_NODE (3): HTML 요소의 텍스트 내용을 나타내는 노드입니다. 예를 들어 <p>Hello, World!</p>에서 "Hello, World!" 부분은 TEXT_NODE입니다.
• ⭐ COMMENT_NODE (8): HTML 주석을 나타내는 노드입니다. 예를 들어 <!-- 주석입니다 -->는 COMMENT_NODE입니다.

• DOCUMENT_NODE (9): 전체 문서(document)를 나타내는 노드입니다. 즉, 문서 전체를 포함하는 최상위 노드입니다.
• DOCUMENT_TYPE_NODE (10): 문서의 타입(DOCTYPE)을 나타내는 노드입니다.
• DOCUMENT_FRAGMENT_NODE (11): 문서의 일부분을 나타내는 노드입니다. 예를 들어 <template> 요소의 내용은 DOCUMENT_FRAGMENT_NODE입니다.

for문

 for (let i = l - 1; i >= 0; i--) {
  let value = frontEndDev[i];
  console.log(value);
} 
//^ 6~0 까지 나오길 원함 
for (let i = l; i > 0; ) {
  let value = frontEndDev[--i]; //frontEndDev에서 바로 선감소를 시키면 조건을 간단하게 할 수 있다. 
  console.log(value);
}

📌for in문

for...in 문을 사용하여 javaScript 객체가 가진 값을 조회 하려고 했지만 for in문에는 프로토타입 체이닝에 의해 조상 객체까지 찾아지는 치명적인 단점이 있다. 그래서 자신이 가진 값만 나올 수 있는 hasOwnProperty를 사용하면 된다.
⚠️ for...in은 방문 순서가 중요한 배열보다는 객체에 사용하는 것이 좋다! for...in은 순서를 보장하지 않습니다. 배열의 인덱스는 순서에 의미를 갖기 때문에, 순서를 보장하지 않는 for...in을 사용하여 배열을 순회하면 예기치 않은 결과를 얻을 수 있습니다. 대신에 for...of 루프나 배열의 forEach 메소드를 사용하여 배열을 순회하는 것이 좋습니다.

📌hasOwnProperty

하지만 eslint가 경고를 해준다. 그 이유는 위와 같이 기존의 기능을 덮어 쓰여질 가능성이있기 때문에 경고 해주는 것이다
✅ 해결방법 call을 사용하여 진짜 객체에게 능력을 빌려야 한다. call이라는 기능은 다른 타입에 있는 기능을 빌리고 싶을 때도 call을 사용하면 능력을 빌릴 수 있다. Object.prototype.hasOwnProperty.call(javaScript, key);을 사용해야 온전히 자신의 객체만 조회할 수 있다..

위의 예시와 같이 기존 기능이 오염될 일이 없는대도 사용해야 하는 이유개발자가 임의로 조상 객체에 새로운 프로퍼티를 추가하여 프로토타입을 오염 시켰을 때에 자신이 만든 객체 javaScript의 key 값을 조회하면 조상객체에 만든 프로퍼티의 값까지 모두 조회가 되기 때문에 반드시 Object.prototype.hasOwnProperty.call(javaScript, key); 사용해주는 게 좋다.

Object.prototype ➡️ {} 나 ({}) 로 대체 가능하다

📌for...of

// iterable(반복이 가능한) = String, Array, Array-like
//! for...of는 이터러블한 아이들만 사용가능
const arryLike = {
  0: 'body',
  1: 'head',
  2: 'div',
  length: 3,
}; //% 배열처럼 인덱스와 길이가 존재하지만 배열은 아님 (완전한 유사배열은 아님)/ 객체는 이터러블하지 않음

for (let value of languages) {
  const name = value.name;

  // if (name === 'Java') break;
  if (name.includes('Java') && name.length < 5) break; //! JavaScript도 Java를 포함하고 있기 때문에 출력되지 않는다.

  console.log(name);
}

📌함수

function plus(a, b){ // a, b 는 매개변수(parameter), 인자
    return a + b;
}
let result = plus(1, 2); // 1, 2 는 인수(argument)

함수 이름짓기

함수는 어떤 동작을 수행하기 위한 코드를 모아놓은 것이기 때문에 함수의 이름은 대개 동사이다.

• 간결하고 명확해야 한다.

• 함수가 어떤 동작을 하는지 설명할 수 있어야 한다.
• 코드를 읽는 사람이 함수 이름만 보고도 함수가 어떤 기능을 하는지 힌트를 얻을 수 있어야 한다.

get… : 값을 반환함 calc… : 무언가를 계산함 create… : 무언가를 생성함 check… :무언가를 확인하고 불린값을 반환함

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

독립적인 두 개의 동작은 독립된 함수 두 개에서 나눠서 수행할 수 있게 해야 합니다. 한 장소에서 두 동작을 동시에 필요로 하는 경우라도 말이죠(이 경우는 제3의 함수를 만들어 그곳에서 두 함수를 호출합니다).

😥개발자들이 빈번히 하는 실수 getAge 함수는 나이를 얻어오는 동작만 수행 해야한 다. alert 창에 나이를 출력해 주는 동작은 이 함수에 들어가지 않는 것이 좋다. createForm 함수는 form을 만들고 이를 반환하는 동작만 해야 한다. form을 문서에 추가하는 동작이 해당 함수에 들어가 있으면 좋지 않습니다.

단락 평가 OR||은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 단락 평가라고 한다.

단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일 때 명확히 볼 수 있다.

단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 사용한다.

|| - 첫 번째 true를 찾는다. && - 첫 번째 false를 찾는다.

1. 식을 평가하기 위해 alert(1)이 먼저 실행이 된다. 2. alert 메서드는 값을 반환하지 않는다. ➡️ undefined가 반환된다. 3. 첫 번째 식이 false이기 때문에 두 번째 식으로 넘어간다. 4. 2는 truthy한 값이기 때문에 값이 반환된다. 5. alert 창에 2가 출력된다. 결과: 1,2가 차례대로 출력된다. ∴ alert 메서드는 값을 반환하지 않는다. 즉, undefined를 반환

1. 식을 평가하기 위해alert(1)이 먼저 실행이 된다.
2. undefined가 반환된다.
3. alert 창에 undefined가 출력된다.

함수를 값으로 인식하기 때문에 true 하지만 함수의 리턴 값이 0이면 false

📌switch문

자료형이 중요함!!

let arg = prompt("값을 입력해주세요.");
switch (arg) {
  case '0':
  case '1':
    alert( '0이나 1을 입력하셨습니다.' );
    break;

  case '2':
    alert( '2를 입력하셨습니다.' );
    break;

  case 3:
    alert( '이 코드는 절대 실행되지 않습니다!' );
    break;
  default:
    alert( '알 수 없는 값을 입력하셨습니다.' );
}

3을 입력하더라도 입력 받은 값은 문자열이기 때문에 디폴트 값이 출력된다.

📌nullish 병합 연산자 '??'

위에서 배운 || 와 결과가 동일하다

'??'와 '||'의 차이

||는 첫 번째 truthy 값을 반환한다 ??는 첫 번째 정의된(defined) 값을 반환한다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

⚠️ 0이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 ||보다 ??가 적합하다

⭐ 정리 T ||: 먼저 나오는 truthy를 찾는다, 아니면 끝을 반환한다 F && : 먼저 나오는 falsy를 찾는다, 아니면 끝을 반환한다 정 ??: 먼저 나오는 정의한 값을 찾는다, 아니면 끝을 반환한다

📌loop

while

성능 진단 : 순환 vs. 역순환 ⭐역방향이 성능상에 더 좋다!!⭐

📌야무쌤 강의 - DOM API 문서 객체(들)에 접근하는 방법

// -------------------------------------------------------------
// DOM API
// - 문서 객체(Document Objects)를 선택하는 방법
// - 요소노드(ELEMENT_NODE) vs 노드리스트(NodeList) | HTMLCollection(유물)
// -------------------------------------------------------------

// tagName 으로 선택하는 방법
// 문서에서 tagName 값이 [    ]인 요소들을 찾아라.
// 태그이름이 피규어인 요소들을 가려와라
var figures = document.getElementsByTagName("figure");
console.log(figures); // HTMLCollection 집합객체

// id 속성 값으로 선택하는 방법
var boy = document.getElementById("boy");
boy.style.transform = 'perspective(800px) rotateY(56deg)';

var boy = '야망 ~';
// console.log(boy);

/* 
// class 속성 값으로 선택하는 방법
var paragraphs = document.getElementsByTagName('p');
var kbds = paragraphs.getElementsByTagName('kbd');
=
=
==> paragraphs는 복수형이기 때문에 getElementsByTagName 형태로 사용할 수 없다.
    paragraphs.item(0).getElementsByTagName('kbd')하면 접근 가능

console.log(kbds);
 */

var paragraphs = document.getElementsByTagName('p');
var kbds = paragraphs.item(0).getElementsByTagName('kbd');
kbds.item(0).style.color = 'blueviolet'; // or kbds[0]
// class 속성 값으로 선택하는 방법
var clouds = document.getElementsByClassName('cloud');
var kbd = document.getElementsByClassName('info')[0].getElementsByTagName('kbd')[0];

// CSS 선택자(selector)로 선택하는 방법 (중요)
var boy = document.querySelector('boy');// 단수 ELEMENT_NODE
var clouds = document.querySelectorAll('.cloud');// 복수 NodeList [] 인덱스 값을 사용해서 하나의 값을 찾을 수 있음

function solution(k, score) {
  let answer = [];
  let rank = [];

  for (let i = 0; i <score.length; i++) {
    if (rank.length < k) {
      rank.push(score[i]);
    } else if (rank[rank.length - 1] < score[i]) {
      rank.pop();
      rank.push(score[i]);
    } else {
      answer.push(rank[rank.length - 1]);
      continue;
    }
    rank.sort((a, b) => b - a);
    answer.push(rank[rank.length - 1]);
  }
  return answer;
}

어제 푼 코드를 나름 최적화..? 해봤다. 더 줄일 수 있을거 같은데 생각이 잘 안난다...

⭐ 변수명 짓기

// - 갯수 별 상품 가격 계산하기
let calcProductPriceQuantity;

// - 구매 제품 가격의 총 합
let totalProductPrice;

// - 1년 기준 일(day)자 수
// 윤년까지 생각했을 땐 let
const DAYS_PER_YEAR = 365;

// - 구매 결제 여부 (했어 안했어 / 있어 없어) 
// 여부를 물어볼 때 사용하는 네이밍 is/has
let isPayment;
let hasClassName;

// - 구매 결제 내역
let paymentHistory;

// - 브랜드 접두사
const BRAND_PREFIX = 'NIKE';

// - 오늘의 운세
let todayFortune;

// - 상품 정보
const productInfomation = 'product';

변수명은 누구라도 알아볼 수 있도록 정의한다. 줄임말은 되도록 사용하지 않는다.

⭐ Execution Context

자바스크립트를 실행하면 자동으로 글로벌 실행환경 생성된다. 렉시컬 Environment(어휘적 환경) - 말로 설명할 수 있는 실행환경 environment Record - 렉시컬 Environment에 들어온 모든 정보를 저장한다.

⭐ 오래된 var

scope 블록 스코프 - var는 블록 스코프가 없지만 let과 const는 있다. 함수 스코프 - var도 함수 스코프에서는 영향을 받는다.

let은 함수 실행이 시작될 때 처리되지만(호이스팅) 할당은 호이스팅 되지 않기 때문에 에러가 발생한다. var는 호이스팅 되자마자 undefined를 할당 받기때문에 선언하기 전에 호출되더라도 에러는 발생하지 않는다.

⭐ 데이터 타입

🤔 생성자로 생성하면 타입이 object로 나오는데 리터럴로 만드는 경우와 쓰임에 차이점? ✅아무런 차이가 없지만 함수로 가면 엄청난 차이가 있다.

23.7.5

⭐ 형변환

null은 값이 비어있는 상태 undefined는 값이 없는 상태 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면 NaN이 나온다.

숫자형의 암시적형 변환

Boolean의 암식적 형변환

⭐ 연산

🌟 자바스크립트에서 대부분의 연산자들은 값을 반환한다. spread syntax => ...배열이름 JavaScript에서 배열이나 객체를 확장하거나 병합하는 데 사용되는 문법이다. 주로 배열이나 객체의 요소를 분해하여 다른 배열이나 객체에 펼치는 역할을 한다.

야무쌤 강의