현재 개발 중인 프로젝트는 사용자가 모바일 청첩장을 만들어 공유 가능하도록 하는 서비스이고, 사용자가 청첩장을 생성하는 페이지와 완성본이 공유되는 청첩장 페이지, 그리고 Admin 페이지 이렇게 세가지 도메인으로 이루어져 있다.

www - static 간의 공유되는 디자인 컴포넌트들이 많기도 했고, prettier와 ESLint 와 같은 설정들을 공유하면 관리 및 유지/보수하기 좋을 것 같아 모노레포로 구성하기로 했다.

🔍 MonoRepo 란 ?

한 개의 Repository 안에서 다수의 프로젝트를 관리하는 소프트웨어 개발전략.

MonoRepo 의 장점 ✨

✔️ 다수의 프로젝트 컨벤션의 일관성 유지가 용이.

✔️ 프로젝트 간 중복되는 코드를 감소시킴으로써 코드 재사용성 향상.

✔️ 다수의 프로젝트 간의 의존성을 쉽게 관리할 수 있고 유지 보수가 용이.

MonoRepo 의 단점 ❓︎

✔️ Repository 가 지나치게 무거워질 수 있다.

✔️ 빌드 및 테스트 시간이 길어질 수 있다.

✔️ 저장소 관리가 복잡해질 우려가 있다.

따라서 빌드와 테스트 시간을 단축하기 위해 CI/CD 파이프라인을 최적화시킬 필요가 있다.

🛠︎ MonoRepo 도구

NX ✨

복잡한 의존성을 가진 대규모 프로젝트에 유리.

러닝커브가 높으며 설정이 비교적 복잡한 편이다.

Lerna ✨

패키지들의 버전 동기화 및 독립적으로 관리 가능.

빌드 최적화 기능이 부족 & 상대적으로 오래된 도구.

yarn 과 조합이 좋음.

Yarn ✨

Next.js의 Vercel 배포가 Yarn Berry에서는 잘 동작하지 않는다.

TurboRepo ✨

빌드 최적화에 중점. 병렬 빌드 가능. 러닝커브가 비교적 낮음.

로컬 컴퓨팅 캐싱 및 로컬 작업 오케스트레이션 제공.

영향을 받는 패키지를 감지하는 기능 제공.

vercel에서 개발하고 있다.

🔍 TurboRepo 란 ?

Javascript / Typescript 기반의 monorepo 를 위한 고성능 빌드 시스템.

TurboRepo 의 장점 ✨

✔️ 로컬 캐싱을 통해 한번 빌드된 내용은 다시 빌드 X.

✔️ 병렬적으로 작업을 수행하여 멀티태스킹 능력을 극대화.

⚙️ TurboRepo 설치

pnpm dlx create-turbo@latest --example with-tailwind

✔️ tailwind css 설정을 포함한 monorepo 생성.

🔧 Initial Settings

📦.turbo
📦node_modules
📦apps
 ┣ 📂admin
 ┣ 📂www
 ┗ 📂invitation
📦packages
 ┣ 📂config-tailwind
 ┣ 📂config-eslint
 ┣ 📂config-typescript
 ┗ 📂shared
📜.prettierrc
📜.gitignore
📜 package.json
📜.pnpm-lock.yaml
📜.pnpm-workspace.yaml
📜turbo.json
📜.npmrc

TurboRepo로 생성 시, apps 폴더 내부에 web docs 존재.

✔️ web > admin docs > www 로 폴더명 변경.

✔️ 폴더를 복사해서 1개 더 생성 후에 invitation 으로 변경.

✔️ 각 폴더 내에 존재하는 package.json 의 name 을 폴더명으로 설정.

✔️ port 번호는 3000 으로 통일.

✔️ root에 존재하는 package.json 에서 dev 설정 변경.

// filter 된 파일만 실행.
"scripts": {
    "dev": "turbo dev --filter www",
  },

TurboRepo로 생성 시, packages 폴더 내에 ui 폴더 존재.

✔️ ui > shared 로 폴더명 변경.

→ UI 컴포넌트 외에도 types constants 파일을 공유.

✔️ shared 내부 src 폴더에 components types constants 폴더 생성.

✔️ 폴더명이 변경됨에 따라, 전체 레포 내에 있는 모든 파일들의 ui 폴더명을 shared 로 변경해주었다 😇

💥 Error 해결

// page.tsx
import { Card } from '@repo/shared/components';
// layout.tsx
import '@repo/shared/styles.css';

✔️ 각 폴더 내에 있는 page.tsx layout.tsx 에서 import 에러 발생.

✔️ Card 컴포넌트 command + I 를 통해 import 불가능.

→ 경로를 찾지 못하는 듯 했다.. 🤦🏻‍♀️

💡 Part 1 .

// packages/shared/package.json
"exports": {
    "./styles.css": "./src/styles.css",
    "./components": "./src/components/index.ts"
  },

처음에는 해당 exports 문을 삭제 후, 에러가 발생했던 import 문에 /src 를 추가.

더 이상 에러는 발생하지 않았지만,,

문제 1 ❓︎ command + I 를 통한 자동 import 불가. 문제 2❓︎ 모든 경로에 **** /src 를 추가해야했다 🤯

💡 Part 2 .

// shared/src/components/index.ts
export { Card } from './card';

✔️ shared/src/components 폴더 내에 index.ts 파일 생성.

✔️ index.ts 파일에 생성한 component 파일 export 문을 추가.

// packages/shared/package.json
"main": "./src/components/index.ts",

✔️ package.json 파일에서 해당 파일을 main으로 내보내기 !

// page.tsx
import { Card } from '@repo/shared';

✔️ command + I 를 통한 자동 import 가능 + 아주 깔끔해졌다 ✨✨

🧐 MonoRepo - Storybook

모노레포에 storybook을 도입해보기로 하면서 storybook 설치 위치에 대해서 많은 고민을 했다..

각 레포마다 storybook을 설치하는 방안도 있었지만, turborepo 공식문서에 나와있는대로 storybook 레포를 따로 구성해서 진행하기로 했다.

📦apps
 ┣ 📂admin
 ┣ 📂www
 ┣ 📂invitation
 ┗ 📂storybook

이런 방식으로 구성하면, storybook을 독립적으로 운영할 수 있고 문서화된 페이지를 배포해서 볼 수 있다는 장점이 있다.

⚙️ StoryBook 설치

// apps/storybook
pnpm dlx storybook@latest init

✔️ apps 내부에 storybook 폴더를 생성한 후, storybook 폴더 내에서 설치.

🔧 의존성 추가

// apps/storybook/package.json
"dependencies": {
    "@repo/shared": "workspace:*",
  },

✔️ 설치한 폴더 내 package.json 파일에 코드 추가.

⚙️ StoryBook 추가 설치

pnpm install @repo/shared --filter=storybook

✔️ 경험담인데 의존성 추가안하면 설치 안됩니다..😉

📁 Storybook-static 관련 설정

// turbo.json
{
  "tasks": {
    "build": {
      "outputs": [
+       "storybook-static/**"
      ]
    }
  }
}

✔️ turbo.json 파일에 build 내 outputs 에 storybook-static 을 추가.

→ 빌드를 실행할 때 파일 출력이 캐시되도록 하기 위해

// .gitignore
+ storybook-static

✔️ .gitignore 파일에 storybook-static 을 추가.

→ storybook에 대한 build 의 output을 소스 제어에 커밋되지 않게 하기 위해

📄 출처

Storybook 설정 관련 내용은 모두 turborepo 공식문서 를 참조했습니다.

🔍️ 공공 데이터 API 호출 방법

" url + queryParameter + endPoint "

query Parameter 부분에 Service Key를 key로, 발급받은 개인 Service Key 를 value 로 넣어주고 이외의 필요한 Key , Value 값도 추가.

공공 데이터 포털에서 개인 Service Key를 발급받으면, 인코딩 키 (Encoding Key) 와 디코딩 키 (Decoding Key) 두 가지 종류로 발급되고 홈페이지에서도 필요에 따라 확인해보고 사용하라고 나온다..

두 가지의 Service Key를 모두 사용해본 결과, 인코딩 여부 관계 없이 위의 Service Key is not regitered Error 이라는 에러 발생.

📌 Error 발생 이유

① Service Key 가 정말 등록이 안된 경우

심의유형이 자동승인이 경우에도 Service Key 는 발급받은 이후 30분에서 1시간 이후에 사용가능하다고 한다.

또한, 심의유형이 심의승인인 경우에는 담당자가 활용승인해야 사용할 수 있으니 확인해 볼 필요가 있다.

② Service Key의 인코딩 or 디코딩이 제대로 안된 경우

간혹 찾아보면 Service Key를 인코딩 or 디코딩을 다시해서 넣으면 제대로 작동한다는 후기를 발견할 수 있었다.

③ Service Key 에 문제있는 경우 🤬

📌 Error 해결

결론적으로, 처음Service Key 를 발급한 지 1시간이 지나고 디코딩과 인코딩을 모두 해봤지만 어느 것도 되지 않았다.

코드로 호출했을 경우에만 해당 에러가 뜬게 아니라, 공공 데이터 포털에서 제공하는 미리보기에서도 같은 에러가 발생했다.

그래서 코드 문제가 아니라 Service Key 자체에 문제가 있다고 판단했고, 마지막으로 Service Key 를 재발급 받은 후 1시간이 지난 뒤에 API를 호출해봤더니 Status: 200 ResultMsg: Normal Service 가 나왔다 ..😇

재발급 받았더니 제대로 작동해서 조금 화가 났지만 .. Service Key에 문제가 있는 경우가 있으니 재발급도 받아보세요 🙏🏻

컴포넌트 내부에서 useRouter 를 호출해서 사용하고자 하는 과정에서 NextRouter was not mounted. 라는 에러가 발생.

📌 Error 발생 원인

client component 에서 useRouter 를 Next/Router 모듈에서 import 해서 사용한 부분이 문제가 되었다.

📌 Error 해결

Next JS 13 ver. 부터는 "use client" 를 사용해서 컴포넌트를client component 로 사용하고자 한 경우, useRouter 를 Next/Navigation 모듈에서 import 해야 한다.

전에 들었던 부분인데도 불구하고 막상 사용할 때는 잊어버렸다 😮‍💨

Redux 는 중앙 state 관리소에서 state를 관리할 수 있도록 도와주는 전역 상태관리 라이브러리. 이다.

💡 성능 최적화 : 상태 변경 시 관련된 컴포넌트만 선택적으로 업데이트 가능.

💡 상태 로직의 중앙화와 일관성 : 상태 로직이 중앙에서 관리되어 일관성 있고 예측 가능한 상태 변경이 가능.

💡 강력한 미들웨어와 개발 도구 : 다양한 미들웨어를 지원하여 비동기 작업, 로깅, 상태 변경에 대한 추가 처리 등 복잡한 기능 구현 가능.

🧸 Redux Setting

➀ redux 설치

yarn : yarn add redux react-redux
npm : npm install redux react-redux

➁ 폴더 구조 setting

src 폴더 > redux 폴더 > config 폴더 > configStore.js
src 폴더 > redux 폴더 > modules 폴더 > stateName.js

✔️ modules 폴더 내부에 관리할 state 파일 생성.

③ configStore.js 파일 setting

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store;

✔️ createStore() : 리덕스의 가장 핵심이 되는 스토어를 만드는 메서드. ✔️ combineReducers() : 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 생성.

④ main.jsx 파일에 setting

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <Provider store={store}> 
        <App />
        </Provider>
    </React.StrictMode>
);

✔️ App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.

🧸 Module 생성 및 연결

➀ module 생성하기

Modules 폴더 > counter.js 파일 생성

const initialState = {
  number: 0,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

✔️ initialState : state의 초기 상태값 . ✔️ Reducer : 변화를 일으키는 함수 . ✔️ 모듈파일에서는 리듀서를 export default 한다.

➁ module 연결하기

/src/redux/config/configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter
});
const store = createStore(rootReducer);

export default store;

✔️ 생성한 module 파일 import 해주기. ✔️ combineReducers 에 생성한 module 파일의 reducer 추가해주기.

🧸 Store의 State 값 조회

/src/App.js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  // const counterStore = useSelector((state) => state);
  // { counter : {number : 0} }
  const number = useSelector((state) => state.counter.number); 
  // 0

  return <div></div>;
}

export default App;

✔️ 사용할 component 에서 useSelector 훅을 사용하여 store 조회.

🧸 State 값 변경

➀ Reducer가 state값 변경

/src/modules/counter.js

const initialState = {number: 0};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    default:
      return state;
 }};

export default counter;

✔️ dispatch 로부터 전달받은 action의 type 이 "PLUS_ONE" 일 때 state + 1 실행.

➁ dispatch 통해서 액션객체 전송

/src/App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";

const App = () => {
  const dispatch = useDispatch();

  const number = useSelector((state) => state.counter.number); 

  return (
    <div>
      {number}
      <button onClick={() => {dispatch({ type: "PLUS_ONE" });}}>
        + 1
      </button>
    </div>
  );
};

export default App;

✔️ useDispatch() 통해서 dispatch 생성한 후 dispatch 로 액션 객체 전송.

useEffect : React Component가 재렌더링 될 때마다 특정 작업 ( side effect ) 을 수행하도록 하는 React Hook으로, 컴포넌트의 최상위 또는 커스텀 훅 ( Hook ) 에서만 사용.

🔍 컴포넌트의 Life-cycle 이란 ?

💡 Mount 컴포넌트 내에서 DOM이 생성되고 웹 브라우저 상에 나타나는 것.

*💡 Update * 컴포넌트 내에서 변화가 발생하였을때 .

💡 Unmount 컴포넌트 내에서 DOM이 제거되고 웹 브라우저 상에서 사라지는 것.

📌 useEffect 를 통해 생명주기에 따라 특정 작업을 수행 가능.

🧸 useEffect

useEffect(callbackFn, dependancyArray)

✔︎ callbackFn : 실행할 로직을 작성. ✔︎ dependancyArray : 의존성 배열으로, 로직을 실행할 시기를 결정.

🧸 의존성 배열

➀ 의존성 배열이 빈 배열인 경우

import React, { useEffect } from 'react'

const App = () => {
    useEffect(()=>{
      // 실행할 로직
    },[])
  return <></>;
}

✔︎ 컴포넌트가 마운트 ( mount ) 될 때만 로직이 실행. ✔︎ 배열 내에 상태를 체크할 변수를 설정하지 않았기 때문에, useEffect는 최초 렌더링 이후 딱 한번만 실행.

➁ 의존성 배열에 값이 있는 경우

import React, { useState, useEffect } from 'react'

const App = () => {
      const [state, setState] = useState('');

    useEffect(()=>{
      // 실행할 로직
    },[state])

  return <></>;
}

✔︎ 의존성 배열에 넣어준 값인 state 에 변화가 감지될 때마다 실행. ✔︎ 같은 페이지 내부에서 setState( ) 가 실행될 때마다 설정한 로직이 실행된다는 것을 의미.

📌 Caution. 의존성 배열 자체를 설정하지 않거나 값을 잘못 설정한 경우, useEffect 내부 로직이 무한루프로 실행되니 주의.

Example.

import React, { useState, useEffect } from 'react'

const App = () => {
      const [state, setState] = useState('');

    useEffect(()=>{
      setState(state + 1)
    },[state])

  return <></>;
}

✔︎ 컴포넌트가 마운트되고 setState() 가 실행되면서 state 값 변경 → state 값의 변화를 감지하고 useEffect 내부 로직 실행 ... ~ 무한루프 ~

🔗 useEffect 무한 루프에 대한 좋은 글을 공유해주셔서 참조했습니다. 🔗 Reference : useEffect 무한루프에 관한 글

*📌 !important. * 의존성 배열을 항상 빈 배열로 세팅한 후 필요에 따라 값을 설정해주기.

🧸 Clean Up 함수

*➀ 페이지를 이동할 경우 *

import React, { useEffect } from 'react'
import { useNavigate } from "react-router-dom";

const App = () => {
  const navigate = useNavigate()

  useEffect(()=>{
        return ()=>{
          // unmount 되었을 때 실행할 로직 =cleanup
        }
    }, [])

  return <button onClick={()=>{navigate('/'}}> → </button>;
}

✔︎ 컴포넌트가 언마운트 ( unmount ) 되었을 때 로직이 실행. ✔︎ 버튼을 클릭하면 페이지가 이동되면서 즉, 브라우저 상에서 컴포넌트가 사라지면서 로직이 실행.

*➁ 타이머 함수 *

useEffect(()=>{ 
  let a = setTimeout(()=>{ alert('시간이 다됐어요 !') }, 10000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

✔︎ 기존에 있던 타이머 함수를 지우고 그 후에 타이머 함수를 새로 실행시켜 준다는 의미.

Context API : React에서 제공하는 전역적으로 데이터를 공유할 수 있게 해주는 기능.

useState 를 사용했을 때, 불필요하게 props - drilling 형태로 내려줘야하는 경우가 발생한다. 이는 코드 복잡성을 증가시켜 가독성이 떨어지고 유지 보수를 어렵게 한다.

Props - drilling : 해당 props를 사용하지 않는 컴포넌트라고 할지라도 중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것을 의미.

🧸 createContext

// src folder > context folder > NameContext.js 생성
import {createContext} from "react"

export const NameContext = createContext(기본값);

✔️ createContext 를 이용해 context 를 생성. ✔️ context 가 없을 경우 출력될 기본값 설정 가능.

🧸 Context.Provider

// 최상위 파일 - App.jsx
import React, { useState } from "react";
import { NameContext } from "../context/NameContext";

function App() {
  const [state, setState] = useState('');

  return (
    <NameContext.Provider value={{state, setState}}>
      <Router/>
    </NameContext.Provider>
  );
}

export default App;

✔️ Provider 로 context 를 하위 컴포넌트에 전달. ✔️ context 로 전달할 변수 또는 함수를 value에 객체 형태로 넣기.

🧸 useContext ( )

// context 를 사용할 파일.
import React, { useContext } from "react";
import { NameContext } from "../context/NameContext";

function Name() {
  const {state, setState} = useContext(NameContext);

  return;
}

export default Name;

✔️ useContext 를 이용해 context 를 구독하면 컴포넌트 내에서 context 로 전달된 변수 또는 함수를 사용 가능.

📌 Caution. Provider 에서 제공한 value 의 값이 달라질 경우, useContext 를 통해 context 를 구독하고 있는 모든 컴포넌트가 리렌더링된다.

🧸 state를 객체 형태로 관리해주기

import {useState} from 'react'

const [values, setValues] = useState({
  title: '',
  content: '',
  image: '',
  brand: '오리온',
  flavor: '딸기',
  type: '콘'
});

✔️ state 로 관리해주려고 했던 값들을 객체 형태 [ key - value ] 로 묶어서 관리.

🧸 input 요소에 name & value 값 지정해주기

<input type="text" name="title" value={values.title} onChange={onChangeHandler} />

✔️ name - state의 key 값 ✔️ value - state.key

🧸 name & value 값 이용하여 Handler 함수 생성

const onChangeHandler = (event) => {
  const { name, value } = event.target;
  setValues((prev) => {
  ...prev,
  [name]: value
  });
};

✔️ name & value 를 각각 구조분해할당을 이용해 변수로 받기. ✔️ setState 함수를 사용하여, 객체 내의 name이라는 key를 가진 value를 input 의 value 값으로 변경.

📌 !important. 여러 Input을 각각의 state로 관리하게 되면, 이후 가독성 저하로 인해 유지 보수하기 힘들어진다.

State 란, 컴포넌트 내부에서 바뀔 수 있는 값을 의미.

useState( ) 는 React 에서 제공하는 훅 (Hook)으로, state를 생성해주는 기능을 가지고 있다.

🧸 useState Setting

import { useState } from "react"

const [state, setState] = useState(초기값);

✔️ 구조분해할당 문법을 사용하여, 배열 안에 각각 state의 이름과 set + state의 이름으로 useState( ) 훅을 생성.

✔️ useState( ) 의 인자에는 state의 초기값을 설정.

🧸 state & setState

➀ state 란, 상태의 할당된 값이 담긴 변수로 set함수가 사용됨에 따라 값이 변경.

➁ setState 란, state의 할당된 값을 변화시키는 함수.

✔️ state의 이름은 변수에 할당할 값에 따라 유동적으로 변경 가능.

🧸 state 변경

import { useState } from "react"

const [state, setState] = useState('');
setState('Hello World !');

console.log(state); // Hello World !

✔️ setState( ) 함수로 인해, state에 'Hello World !' 가 할당되어 출력. ✔️ setState( ) 함수를 event 핸들러와 연결하는 방식으로, state에 할당시키는 시점을 조절 가능.

📌 Caution. setState() 함수로 값을 할당했더라도, 해당 값이 어딘가에 저장되어 있지 않기 때문에 브라우저를 새로고침하면 다시 초기값으로 변경.

🧸 state 에 객체를 할당할 경우 : 불변성

➀ 배열 Array

import { useState } from "react"

const [state, setState] = useState([{name: '모찌', species: '말티즈'}]);
setState((prev)=>[...prev, {name: '뭉치', species: '리트리버'}] );

console.log(state); 
// [{name: '모찌', species: '말티즈'}, {name: '뭉치', species: '리트리버'}] 

➁ 객체 Object

import { useState } from "react"

const [state, setState] = useState([{name: '모찌', species: '말티즈'}]);
setState((prev)=>{
  return {...prev, age: 8}
} );

console.log(state); 
// { name: '모찌', species: '말티즈', age:8 }

✔️ 새로운 객체를 생성하고 이전 state 값을 복사한 후, 변경된 값을 setState( )의 인수로 할당.

📌 Caution. " 불변성을 지킨다 " : 메모리 영역에서 값을 변경할 수 없게 한다.

1) 리액트의 state 변화 감지 기준은 "콜스택의 주소값"이다. : state를 빠르게 감지할 수 있게 하지만 불변성을 유지해야 하는 이유이기도 하다.

참조 타입의 값을 변경할 경우, 콜스택의 주소값은 변경이 없어 react는 state의 변경이 없다고 감지하기 때문에 변경된 state는 재랜더링되지 않는다.

2) 불변성을 지킴으로서 사이드 이펙트와 복잡한 코드를 방지할 수 있다. : 기존 메모리 영역의 값이 변경할 경우, 기존 메모리 영역의 값을 사용하는 다른 코드에서 발생할 수 있는 오류를 사전에 방지 가능.

🧷 Reference - 참조한 글 바로가기

Component란 , UI를 구성하는 재사용이 가능한 독립적인 모듈을 말한다.

Props란 , 컴포넌트끼리의 정보 교환 방식으로 , 데이터를 부모 Component -> 자식 Component 로 보내는 방법을 말한다. 여러 요소를 담은 하나의 객체 형태로 구성되어 있다.

🧸 함수형 컴포넌트

function WelcomeFunc(props){
  return <div>Hello, {props.name}</div>
}

✔️ javascript 함수 형식으로 작성한 Component.

🧸 클래스형 컴포넌트

class WelcomeClass extends React.Component {
  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

✔️ ES6 Class 를 사용하여 정의한 Component.

📌 Caution. Component 이름은 PascalCase , 폴더 이름은 camelCase 사용.

🧸 Component 보는 방법

// import : 내가 필요한 파일을 가져오는 영역
import React from "react"

function Ex() {
  // 자바스크립트 문법을 쓸 수 있는 영역
  return 
  <div>{/* JSX 를 쓸 수 있는 영역 */}</div>;
}

// 내가 만든 컴포넌트를 밖으로 내보내는 영역
export default Ex;

🧸 Props

function App() {
  return <Father />;
} // 내 이름은 류선재입니다.

function Father() {
  const lastName = "류";
  return <Child lastName={lastName} />;
}

function Child(props) {
  const name = "선재";
  return (
    <div>
      <p>{`내 이름은 ${props.lastName}${name}입니다.`}</p>
    </div> 
  );
}

✔️ 부모 Component -> 자식 Component : 단방향 ✔️ 반드시 읽기전용으로 취급하며 변경 X.

📌 Caution. 인수로 받은 props 는 하나의 객체 형태로 전달되며, props 자리의 여러 변수가 주어질 경우 에러를 반환.

🧸 Props : 구조분해할당

const App = () => {
  const title = "[선재 업고 튀어]";
  const character = { name: "류선재", age: 18, job: "수영선수" };

  return (
    <div>
      <Introduction title={title} character={character} />
    </div> 
  );// [선재 업고 튀어]
};  // 내 이름은 류선재이고, 18살이야.

const Introduction = ({ title = "드라마", character }) => {
  const { name, age, job } = character;
  return (
    <div>
      <h3>{title}</h3>
      {`내 이름은 ${name}이고, ${age}살이야.`}
    </div>
  );
};

✔️ props 객체에 값이 없을 경우, 출력할 초기값도 세팅 가능. ✔️ 객체 구조분해할당을 이용하여 props 속성을 바로 변수에 할당 가능.

🧸 Props : 함수

const App = () => {
  const title = "[Todo List]";
    const isDone = () => {
      console.log("Done!")
    }
  return (
    <div>
      <Todo title={title} isDone={isDone} />
    </div>
  );
};

const Todo = ({ title, isDone }) => {
  return (
    <div>
      <h3>{title}</h3>
        React 공부하기
        <button onClick={isDone} >Click</button>
    </div>
  );
};

✔️ props로 함수를 전달하여 자식 Component에서 사용 가능.

📌 Caution. functionName() 형태로 전달할 경우, 함수 선언부가 아닌 함수 실행한 결과를 전달하게 된다.

동혁이는 오래된 창고를 뒤지다가 낡은 체스판과 피스를 발견했다.

체스판의 먼지를 털어내고 걸레로 닦으니 그럭저럭 쓸만한 체스판이 되었다. 하지만, 검정색 피스는 모두 있었으나, 흰색 피스는 개수가 올바르지 않았다.

체스는 총 16개의 피스를 사용하며, 킹 1개, 퀸 1개, 룩 2개, 비숍 2개, 나이트 2개, 폰 8개로 구성되어 있다.

동혁이가 발견한 흰색 피스의 개수가 주어졌을 때, 몇 개를 더하거나 빼야 올바른 세트가 되는지 구하는 프로그램을 작성하시오.

입력

첫째 줄에 동혁이가 찾은 흰색 킹, 퀸, 룩, 비숍, 나이트, 폰의 개수가 주어진다. 이 값은 0보다 크거나 같고 10보다 작거나 같은 정수이다.

출력

첫째 줄에 입력에서 주어진 순서대로 몇 개의 피스를 더하거나 빼야 되는지를 출력한다. 만약 수가 양수라면 동혁이는 그 개수 만큼 피스를 더해야 하는 것이고, 음수라면 제거해야 하는 것이다.

입출력 예

문제 풀이

:: Code ::

const fs = require('fs');
const input = fs.readFileSync(0, 'utf8').toString().split(' ').map(Number);

const chess = [1, 1, 2, 2, 2, 8];
const answer = chess.map((x,index)=>x-input[index])

console.log(answer.join(' '))

✔️ Array.map() 에서 인덱스를 받아와 해당 요소와 인덱스가 일치하는 요소끼리 계산하여 반환.

📌 Array.map(n, index) : 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열을 반환. 📌 Caution. 두번째 인수는 선택적 요소로,배열에서 꺼내오는 요소의 인덱스를 받을 수 있다.

📎 Note. 처음 풀이했을 때는, input의 인덱스를 설정하여 꺼내오기 위해 for 문 안에 map을 사용한 코드를 작성하였다. 이중 반복문으로 chess 의 마지막 원소인 8이 input의 모든 원소의 값과 계산되는 결과가 도출되었다. Array.map( ) 메소드에서 index 값이 주어진다는 사실을 기억해두자.

구조분해 할당 (Destructuring assignment) 은 구조화된 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것이다. 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다.

🧸 배열의 구조분해 할당

const fruits = ['Apple','Banana','Cherry']

const [a,b,c,d] = fruits
console.log(a,b,c,d); // Apple Banana Cherry undefined

const [,b] = fruits
console.log(b) // Banana

const [, ,b] = fruits
console.log(b) // Cherry

✔️ 중간에 위치한 값만 추출하여 할당할 경우에는 쉼표 사용. ✔️ 쉼표 개수에 따라 2번째 값 or 3번째 값 등 선택하여 추출하는 것도 가능.

const fruits = ['Apple','Banana','Cherry']

let [a, b, c, d] = fruits;
console.log(d) // undefined

let [w, x, y, z = 'kiwi'] = fruits;
console.log(z) // kiwi

✔️ 기존 배열보다 변수의 개수가 많을 경우, 해당 변수는 undefined. ✔️ 초기 값이 세팅되어 있으면 초기값으로 출력되며, 할당할 값이 있으면 대체.

🧸 객체의 구조분해 할당

const user = {
    name: 'Jiyoung',
    age: 26,
    email: 'jiyoung990602@gmail.com'
}

const {name, age, email, address} = user
// E.g. user.address

console.log(`사용자의 이름은 ${name}입니다.`)
console.log(`${name}의 나이는 ${age}입니다.`)
console.log(`${name}의 이메일 주소는 ${email}입니다.`)
console.log(address) // undefined

✔️ user 내에 있는 속성을 각각의 변수로 만들어서 사용 가능. ✔️ 필요한 변수들만 선택적으로 만들어서도 사용 가능.

const user = {
    name: 'Jiyoung',
    age: 26,
    email: 'jiyoung990602@gmail.com',
    address: 'USA'
}

const {name : jiyoung, age, email, address = 'Korea'} = user 
// E.g. user.address

console.log(`사용자의 이름은 ${jiyoung}입니다.`)
console.log(`${jiyoung}의 나이는 ${age}입니다.`)
console.log(`${jiyoung}의 이메일 주소는 ${user.email}입니다.`)
console.log(address) // USA

✔️ address 값이 없는 경우, 출력될 기본값 설정 가능. ✔️ 콜론 뒤에 다른 이름으로 지정 시, 다른 이름의 변수로도 사용 가능.

어떤 자연수를 제곱했을 때 나오는 정수를 제곱수라고 합니다. 정수 n이 매개변수로 주어질 때, n이 제곱수라면 1을 아니라면 2를 return하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ n ≤ 1,000,000

입출력 예

문제 풀이

:: Code ::

function solution(n) {
    for(let i=1; i<n; i++){
        if(i**2 === n){
            return 1;
            break;
        }
    }
    return 2;   
}

:: 🧷 Code 🧷 ::

function solution(n) {
  return Number.isInteger(Math.sqrt(n)) ? 1 : 2;
}

✔️ Matj.sqrt( ) : 매개변수의 제곱근 반환. 음수일 경우에는 NaN으로 반환. ✔️ Number.isInteger( ) : 매개변수가 정수인지 판별하여 Boolean값으로 반환.

📌 Math.pow(숫자,지수) : 받아온 숫자를 지수만큼 제곱하여 반환.

정수 배열 numbers와 정수 num1, num2가 매개변수로 주어질 때, numbers의 num1번 째 인덱스부터 num2번째 인덱스까지 자른 정수 배열을 return 하도록 solution 함수를 완성해보세요.

제한사항

2 ≤ numbers의 길이 ≤ 30 0 ≤ numbers의 원소 ≤ 1,000 0 ≤ num1 < num2 < numbers 의 길이

입출력 예

문제 풀이

:: Code ::

function solution(numbers, num1, num2) {
    return numbers.slice(num1,num2+1)
}

✔️ Array.prototype.slice(startIndex, endIndex+1)

:: 🧷 Code 🧷 ::

function solution(numbers, num1, num2) {
    return numbers.splice(num1, num2-num1+1);
}

✔️ Array.prototype.splice(startIndex, 삭제할 개수)

📌** Caution.** - array.slice 와 array.splice 의 차이점

Array.prototype.slice( ) : 시작인덱스와 끝인덱스 +1 값을 받아 자른 배열을 반환한다.

Array.prototype.splice( ) : 시작인덱스와 시작인덱스부터 삭제할 개수를 받아 자른 배열을 반환한다.

두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ s1, s2의 길이 ≤ 100 1 ≤ s1, s2의 원소의 길이 ≤ 10

s1과 s2의 원소는 알파벳 소문자로만 이루어져 있습니다 s1과 s2는 각각 중복된 원소를 갖지 않습니다.

입출력 예

문제 풀이

:: Code ::

function solution(s1, s2) {
    let count = 0;
    for (let a of s1){
        for (let b of s2){
            if(a === b){count += 1;}
        }
    }
    return count;
}

✔️ 2중 for 문을 사용하여 배열의 원소를 비교.

:: 🧷 Code 🧷 ::

function solution(s1, s2) {
    const intersection = s1.filter((x) => s2.includes(x));
    return intersection.length;
}

✔️ Array.prototype.filter( ) : 설정한 조건에 부합하는 원소로 이루어진 새로운 배열을 반환.

🏷 매개변수 element : 배열에서 처리 중인 현재 요소.

index : 배열에서 처리 중인 현재 요소의 인덱스.

array : filter( )가 호출된 배열.

📌 Caution. Array.prototype.map( ) 과 달리, 반환하는 배열의 길이가 원본 배열의 길이와 다를 가능성을 가진다.

DOM (Digital Object Model) 은 HTML 문서의 계층적 구조와 저보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

🧸 ID를 이용한 요소 노드 취득

> Document.prototype.getElementById Method

<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li id="apple">Apple</li>
      <li id="banana">Banana</li>
      <li id="orange">Orange</li>
    </ul>
    <script>
      // ID 값이 banana 인 요소 노드 탐색하여 반환.
      const el = document.getElementById('banana');

      // 취득한 요소 노드의 style.color 프로퍼티 값 변경.
      el.style.color = 'red';
    </script>
  </body>
</html>

✔️ 단 하나의 요소 노드만 반환. : Html내에 중복된 id 값을 갖는 여러 요소가 존재하더라도 전달된 id 요소 값을 가진 첫번째 노드만 반환.

✔️ 만약 인수로 전달된 id 값을 갖는 Html 요소가 존재하지 않을 경우 null 반환.

🧸 Tag Name을 이용한 요소 노드 취득

> Document.prototype.getElementsByTagName Method

<html>
  <body>
    <ul>
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li class="orange">Orange</li>
    </ul>
    <script>
      // 태그 이름이 li인 요소 노드 모두 탐색하여 반환.
      const els = document.getElementsByTagName('li');

      // 취득한 모든 요소의 class 값 추가
      [...els].forEach(el =>{el.classList.add('fruits');}
    </script>
  </body>
</html>

✔️ 인수로 주어진 태그 이름과 일치하는 모든 요소를 반환. ✔️ HtmlCollection 객체로 반환. : 여러 개의 노드 객체를 갖는 DOM 컬렉션 객체.

🧸 Class를 이용한 요소 노드 취득

> Document.prototype.getElementByClassName Method

<html>
  <body>
    <ul>
      <li class="fruits apple">Apple</li>
      <li class="fruits banana">Banana</li>
      <li class="fruits orange">Orange</li>
    </ul>
    <script>
      // Class 값이 fruits 인 요소 노드 탐색하여 반환.
      const els = document.getElementsByClassName('fruits');

      // 취득한 모든 요소의 style.color 값 변경
      [...els].forEach(el=>{el.style.color('red');});
    </script>
  </body>
</html>

✔️ 인수로 전달된 class 값과 일치하는 모든 요소 노드 취득. ✔️ 인수로 전달할 class 값은 공백으로 구분하여 여러 class 값 지정 가능.

🧸 CSS 선택자를 이용한 요소 노드 취득

> Css 선택자

/* 전체 선택자 : 모든 요소를 선택 */
*{...}

/* 태그 선택자 : p 태그 요소를 선택 */
p{...}

/* ID 선택자 : id 값이 foo 인 요소 선택 */
#foo{...}

/* Class 선택자 : class 값이 foo 인 요소 선택 */
.foo{...}

/* 후손 선택자 : div의 후손 요소 중 p 요소 선택 */
div p{...}

/* 자식 선택자 : div 요소의 자식 요소 중 p 요소 선택 */
div > p{...}

> Document.prototype.querySelector Method

<html>
  <body>
    <ul>
      <li class="fruits apple">Apple</li>
      <li class="fruits banana">Banana</li>
      <li clas="fruits orange">Orange</li>
    </ul>
    <script>
      // Class 값이 banana 인 요소 노드 탐색하여 반환.
      const el = document.querySelector('.banana');

      // Html 요소에 적용할 수 있는 메소드
      // 1. 이벤트 Event : 상황
      el.addEventListner('click',2);

      // 2. 핸들러 Handler : 실행할 함수
      el.addEventListner('click',function(){
      console.log('click!')};

    </script>
  </body>
</html>

✔️ Css의 class 선택자 .를 사용해서 같은 class 값을 가진 요소 노드 반환. ✔️ 인수로 전달한 Css 선택자를 만족하는 요소가 여러 개일 경우 첫번째 요소 노드 만 반환. 존재하지 않을 경우 null 반환.

> Document.prototype.querySelectorAll Method

<html>
  <body>
    <ul>
      <li class="fruits apple">Apple</li>
      <li class="fruits banana">Banana</li>
      <li clas="fruits orange">Orange</li>
    </ul>
    <script>
      // Class 값이 banana 인 요소 노드 탐색하여 반환.
      const fruitEls = document.querySelectorAll('.banana');

      // 찾은 요소들 반복해서 함수 실행
      // 첫번째 매개변수 boxEl : 반복중인 요소 
      // 두번째 매개변수 index : 반복중인 번호
      fruitEls.forEach(function(fruitEl,index){})
    </script>
  </body>
</html>

✔️ 인수로 전달한 Css 선택자를 만족하는 모든 요소 반환. ✔️ 인수로 전달한 Css 선택자를 만족하는 요소가 존재하지 않을 경우 빈 NodeList 객체 반환.

💡 HTMl 내에 모든 요소 노드 취득

const all = document.querySelectorAll('*');
// OR
const $all = document.getElementsByTagName('*');

🧸 노드 탐색

> 자식 노드 탐색

<html>
  <body>
    <ul id ="fruits">
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li clas="orange">Orange</li>
    </ul>
    <script>
      const $fruits = document.getElementById('fruits');

      // #fruits 요소의 모든 자식 노드 탐색. 
      // Node.prototype.childNodes [요소 노드 + 텍스트 노드]
      console.log(#fruits.childNodes); 
      // NodeList(7) [text, li.apple, text, li.banana, text, li.orange, text]

      // Element.prototype.children [요소노드]
      console.log(#fruits.children);
      // HTML Collection(3) [li.apple, li.banana, li.orange]

      // #fruits 요소의 첫번째 자식노드 반환
      // Node.prototype.firstChild [요소 노드 + 텍스트 노드]
      console.log(#fruits.firstChild) 
      // #text

      // Element.prototype.firstElementChild [요소노드]
      console.log(#fruits.firstElementChild);
      // li.apple

      // #fruits 요소의 마지막 자식노드 반환
      // Node.prototype.lastChild [요소 노드 + 텍스트 노드]
      console.log(#fruits.lastChild) 
      // #text

      // Element.prototype.lastElementChild [요소노드]
      console.log(#fruits.lastElementChild);
      // li.orange

    </script>
  </body>
</html>

✔️ Node.prototype. Method : 요소노드 + 텍스트 노드 ✔️ Element.prototype. Method : 요소노드

> 부모 노드 탐색

<html>
  <body>
    <ul id ="fruits">
      <li class="apple">Apple</li>
      <li class="banana">Banana</li>
      <li clas="orange">Orange</li>
    </ul>
    <script>
      const $banana = document.querySelector('.banana');
      console.log($banana.parentNode); // ul#fruits
    </script>
  </body>
</html>

✔️ Node.prototype.parentNode

🧸 요소 노드를 통한 텍스트 조작

const boxEl = document.querySelector('.box');

// Getter 
console.log(boxEl.textContent); // Box!!

// Setter 
boxEl.textContent = 'HEROPY?!';
console.log(boxEl.textContent); // HEROPY?!

✔️ Getter : 값을 얻는 용도 ✔️ Setter : 값을 지정하는 용도

📌 *원시 데이터 * : String, Number, Boolean, undefined, null

📌 *참조형 데이터 * : Object, Array, Function

🧸 원시 데이터 : Primitive Type

원시 값 (Primitive Type) 은 변경 불가능한 값, 읽기 전용 값이다.

🏷 ** 데이터 불변성 - Immutability ** : 불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 값을 변경할 수 없다.

   |      1      |      4      |      7      |      

let a = 1;
let b = 4;
console.log(a,b, a === b) // 1 4 false

a = 7
console.log(a,b, a === b) // 7 4 false

✔️ a에 7을 할당하면서 새로운 메모리 주소를 가리킨다.

        |     1     |      4      |   

let a = 1;
let b = 4;

b = a
console.log(a,b, a === b) // 1 1 true

✔️ 원시 데이터는 내용이 일치하면 메모리 주소 또한 일치한다. 1에 대해 새로운 메모리 주소가 생성되는 것이 아닌, 기존의 1이 저장되어 있던 메모리 주소로 향한다.

🧸 참조형 데이터 : 객체 Object

참조형 데이터 는 변경 가능한 값으로, 재할당없이 프로퍼티를 동적으로 추가하거나 값을 갱신할 수 있으며 프로퍼티 자체를 삭제 가능하다.

🏷 가변성 : 참조형 데이터들은 새로운 값을 만들 때마다 새로운 메모리 주소를 할당.

        |    {k : 1}    |    {k : 1}     |   

let a = {k : 1};
let b = {k : 1};

console.log(a, b, a === b) // {k : 1} {k : 1} false

        |    {k : 7}    |    {k : 1}     |     

let a = {k : 1};
let b = {k : 1};

a.k = 7
b = a
console.log(a, b, a === b) // {k : 7} {k : 7} true

✔️ 같은 메모리 주소를 가리키게 되면 같은 값으로 나온다.

        |    {k : 2}    |    {k : 1}     |     

let a = {k : 1};
let b = {k : 1};

b = a
a.k = 2
console.log(a, b, a === b) // {k : 2} {k : 2} true

✔️ 같은 메모리 주소를 가지면 하나만 수정해도 값이 같이 변경.

🧸 얕은 복사 : Shallow Copy

const user = {
    name: 'Jiyoung',
    age: 26,
    emails: ['jiyoung990602@gmail.com']
}

const copyUser = user
console.log(copyUser === user) // true

user.age = 22

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com']}

✔️ 의도치 않은 부분이 수정될 수 있는 위험성이 존재. 같은 메모리 주소를 바라보기 때문에, user 을 변경할 경우 copyUser도 함께 변경.

🏷 Object.assign : 대상 객체에 출처 객체를 복사.

const user = {
    name: 'Jiyoung',
    age: 26,
    emails: ['jiyoung990602@gmail.com']
}
const copyUser = Object.assign({}, user)
console.log(copyUser === user)

user.age = 22
user.emails.push('neo@zillinks.com')

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com'], 'neo@zillinks.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 26, emails: ['jiyoung990602@gmail.com'], 'neo@zillinks.com']}

✔️ user 데이터만 수정 가능. 내부 참조형 데이터는 복사 X. emails 는 참조형 데이터인 Array에 해당하기 때문이다.

🏷 전개 연산자 : 객체를 새로 생성.

const user = {
    name: 'Jiyoung',
    age: 26,
    emails: ['jiyoung990602@gmail.com']
}
const copyUser = (...user)
console.log(copyUser === user)

user.age = 22
user.emails.push('neo@zillinks.com')

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com', 'neo@zillinks.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 26, emails: ['jiyoung990602@gmail.com', 'neo@zillinks.com']}

✔️ user 데이터만 수정 가능. 내부 참조형 데이터는 복사 X. emails 는 참조형 데이터인 Array에 해당하기 때문이다.

🧸 깊은 복사 : Deep Copy

🏷 cloneDeep _lodash : 재귀적으로 복사하는 메소드.

import _ from 'lodash'

const user = {
    name: 'Jiyoung',
    age: 26,
    emails: ['jiyoung990602@gmail.com']
}
const copyUser = _.cloneDeep(user)
console.log(copyUser === user)

user.age = 22
user.emails.push('neo@zillinks.com')

console.log('user',user) 
// {name: 'Jiyoung', age: 22, emails: ['jiyoung990602@gmail.com', 'neo@zillinks.com']}

console.log('copyUser',copyUser) 
// {name: 'Jiyoung', age: 26, emails: ['jiyoung990602@gmail.com']}

✔️ 내부에 있는 참조형 데이터까지 깊은 복사 가능. 참조형 데이터 내부에 또 다른 참조형 데이터가 존재할 경우, 깊은 복사하는 것을 고려할 필요가 있다.

선분 세 개로 삼각형을 만들기 위해서는 다음과 같은 조건을 만족해야 합니다.

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

제한사항

sides의 원소는 자연수입니다. sides의 길이는 3입니다.

1 ≤ sides의 원소 ≤ 1,000

입출력 예

문제 풀이

*:: Code :: *

function solution(sides) {
    sides = sides.sort((a,b)=>a-b);
    const [x,y,z] = [...sides]
    return z < x+y ? 1:2;
}

✔️ Array.sort((a,b)=>a-b) : 배열 오름차순 정렬.

📌 Caution. 구조 분해 할당 시, let 또는 const 로 변수 선언해주어야 한다.

🧸 변수의 유효범위

let x = 10;

function printX(){
    console.log(x);
}

console.log(x); 
printX(); 

✔️ 전역 변수 : 전체 영역에 영향을 미치는 변수.

function printX(){
    let x = 10;
    console.log(x);
}

// console.log(x); // Error : x is not defined...
printX(); // 10

✔️ 지역 변수 : 함수 내부에만 영향을 미치는 변수.

🧸 Var 키워드

function scope() {
    console.log(a)
    if (true) {
        var a = 123
    }
}
scope() // Undefined

✔️ 함수 레벨의 유효범위
: 함수 내라면 어디서든 사용가능. 함수 외부에서 선언할 경우, 전역 변수.

① 변수 중복선언 가능. ② 변수 재할당 가능

📌 *Caution * 의도하지 않은 범위에서 사용 가능하여 메모리 누수 발생 위험 → 사용권장 X.

🧸 const 키워드

function scope() {
    if (true) {
        const a = 123
    }
    console.log(a)
}
scope() 
// Uncaught ReferenceError : a is not defined..

✔️ 블럭 레벨의 유효범위 : 모든 코드 블럭 [ 함수 / if 문 / for 문 ... ] 을 지역 스코프로 인정 .

① 변수 중복 선언 불가 ② 변수 재할당 금지 ③ 선언과 동시에 초기화 그러나 변수에 객체를 할당한 경우, 값을 변경할 수 있다.

🧸 let 키워드

function scope() {
    if (true) {
        let a; 
        a = 123; 
    }
    console.log(a)
}
scope() 
// Uncaught ReferenceError : a is not defined..

✔️ 블럭 레벨의 유효범위 : 모든 코드 블럭 [ 함수 / if 문 / for 문 ... ] 을 지역 스코프로 인정 .

① 변수 중복 선언 불가 ② 변수 재할당 가능

📌 *Caution * 주로 재할당이 필요한 경우에만 let 키워드를 사용하며, 일반적으로는 const 키워드를 사용한다.

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

제한사항

my_string은 소문자와 공백으로 이루어져 있습니다.

1 ≤ my_string의 길이 ≤ 1,000

입출력 예

문제 풀이

:: Code ::

function solution(my_string) {
    const arr = ['a','e','i','o','u'];
    arr.forEach(el=>{
        my_string = my_string.replaceAll(el,'');
    })
    return my_string;
}

✔️ string.replace(str,'') : string에서 처음 조회되는 str을 대체. ✔️ string.replaceAll(str,'') : 조회가능한 모든 str 을 대체.

:: 🧷 Code 🧷 ::

function solution(my_string) {
    return my_string.replace(/[aeiou]/g, '');
}

✔️ 정규표현식 사용하여 문자열 검색.

📌 RegExp : 정규표현식

Pattern - [abc] : a 또는 b 또는 c
Option - g : 일치하는 모든 것을 검색. = global

함수(Function)는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 함수 내부로 입력을 전달받는 변수를 매개변수(parameter) , 인수(argument) ,반환값(return value) 이라고 부른다.

🧸 함수 정의 : function definition

💡 함수 선언문

function sum(a,b) { 
 return a + b;
}

// 함수 호출
console.log(sum(1,1)) 

// 함수 재사용
let a = sum(1,1)
console.log(a); // 2

매개변수 (parameter) > x y
반환값 > x + y 인수 (arguments) > 1

✔️ 함수 이름을 생략 불가. 함수를 다른 식별자에 할당하여 사용할 경우, 식별자로 호출.

💡 함수 표현식

let sum = function(a,b){
  return a + b;
}

console.log(sum(1,1)) // 2

✔️ 함수 이름 생략 가능. 기명(이름이 있는) 함수이더라도, 함수 이름이 아닌 식별자로 호출.

🧸 함수 호이스팅 현상

const a = 7

double() // 14

function double() {
    console.log(a * 2)
} 

✔️ 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상. 함수 선언문에만 해당.

🧸 화살표 함수 : ( ) ⇒ { }

const double = function (x) {
    return x * 2 }
console.log('double: ', double(7))

const doubleArrow = x => x * 2
console.log('doubleArrow', doubleArrow(7))

✔️ 화살표 함수를 사용하게되면 { }와 return 키워드를 생략 가능.

🧸 IIFE : 즉시실행함수

const a = 7;

(function() {
console.log(a * 2)
}());

✔️ ( ) 로 감싸줘야 정상적으로 작동. 함수 정의와 동시에 호출되는 함수로, 단 한번만 호출되며 다시 호출 불가.

🧸 타이머 함수

setTimeout() => {
    console.log('Jiyoung')
}, 3000)  // 3초 후에 콘솔 출력.

const h1El = document.querySelector('h1')
h1El.addEventListener('click',()=>{
    cleartimeout(timer);
})  // 3초 전에 클릭하면, 콘솔에 출력되지 않는다.

✔️ setTimeout (함수, 시간) : 일정 시간 후 함수 실행. ✔️ cleartimeout( ) : 설정된 timeout 함수를 종료.

const timer = setInterval(() => {
    console.log('jiyoung');
},3000);

const h1El = document.querySelector('h1');
h1El.addEventListener('click',()=>{
    clearInterval(timer);
})

✔️ setInterval (함수, 시간) : 시간 간격마다 함수 반복 실행. ✔️ clearInterval( ) : 설정된 interval 함수를 종료.

🧸 재귀 함수 : recursive function

// function countdown(n) {
//   for (let i = n; i >= 0; i--) console.log(i);
// }
// countdown(10);

function countdown(n) {
  if (n<0) return;
  console.log(n);
  countdown(n-1); // 재귀호출
}

countdown(10);

✔️ 재귀 호출 : 자기자신을 호출하는 행위. 반복되는 처리를 반복문 없이 구현 가능.

🧸 콜백 함수 : callback function

function repeat(n, f) {
  for (let i = 0; i < n; i++){
    f(i);}
}

const logAll = function(i) {
  console.log(i);
};

// 반복 호출할 함수를 인수로 전달.
repeat(5, logAll); // 0 1 2 3 4

✔️ 콜백 함수 : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수. ✔️ 고차 함수 : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수.