console.log(lapras)

WARNING in [eslint]
src\App.js
  Line 22:48:  Array.prototype.map() expects a return value from arrow function  array-callback-return

  React에서 map 함수를 사용했을 때 결과가 제대로 나오지 않으면서 "Array.prototype.map() expects a return value from arrow function"이라는 에러가 발생할 때가 있습니다. React는 JSX문법을 사용하는데, HTML 태그를 리턴해주는 경우 JavaScript에서 사용했을 때 처럼 중괄호를 이용해서 map 함수를 작성하면 위의 에러가 발생합니다.

// JavaScript
const A = [1, 2, 3, 4, 5];

A.map((data) => {
  console.log(`${data}번 째 console.log`);
  console.log(data);
});

// JSX
const Breeds = (props) => {
  return (
    <dl>
      {props.list.map(({ breed, description }) => {      // 중괄호({ })가 아닌 괄호(( ))를 써야 함
        <Fragment key={breed}>
          <dt>{breed}</dt>
          <dd>{description}</dd>
        </Fragment>;
      })}
    </dl>
  );
};

  JavaScript에서 map 함수를 이용해서 여러 줄을 반환할 때 중괄호를 써야 하지만, JSX에서는 중괄호를 괄호로 바꿔주어야 에러가 발생하지 않고 함수가 제대로 실행됩니다.

import { Fragment } from "react";

const Breeds = (props) => {
  return (
    <dl>
      {props.list.map(({ breed, description }) => (    // 코드 수정한 부분
        <Fragment key={breed}>
          <dt>{breed}</dt>
          <dd>{description}</dd>
        </Fragment>;
      ))}    // 코드 수정한 부분
    </dl>
  );
};

const lists = [
  { breed: "치와와", description: "작은 품종의 개." },
  { breed: "코기", description: "귀여운 품종의 개." },
  { breed: "컴벌랜드 시프도그", description: "멸종된 품종의 개." },
];

function App() {
  return <Breeds list={lists} />;
}

export default App;

  이렇게 코드를 수정해주면 lists의 객체들이 제대로 화면에 표시되는 것을 볼 수 있습니다. Breeds 함수의 return 부분 처럼 여러 줄의 JSX 표현식을 반환할 때는 괄호를 사용해야 하기 때문에, map 함수를 이용해서 태그를 반환해줄 때에도 중괄호가 아닌 괄호를 사용해야 합니다.

const a = "name";
const b = "Elice";

const c = { a: b };

console.log(c); // { a: 'Elice' }

  객체 외부에서 선언한 변수를 객체 안의 key 값으로 넣어주려고 할 때, 위와 같이 변수 이름을 입력하면 문자열로 인식해서 값이 제대로 들어가지 않습니다. 그럴 때는 대괄호([ ])를 이용해서 변수 이름을 넣어주면 됩니다.

const a = "name";
const b = "Elice";

const c = { [a]: b }; // a가 아니라 [a]를 넣어줌!

console.log(c); // { name: 'Elice' }

  이렇게 대괄호 안에 변수 이름을 넣어주면 위와 같이 변수의 값이 제대로 key 값으로 들어간 것을 볼 수 있습니다.

const { option, keyword } = req.query;

// 닉네임으로 검색
if (option === "nickname") {
  board = await Board.find({
    nickname: new RegExp(keyword, "i"),
  })
    .lean()
    .sort({ boardId: -1 });
}

// 제목으로 검색
if (option === "title") {
  board = await Board.find({
    title: new RegExp(keyword, "i"),
  })
    .lean()
    .sort({ boardId: -1 });
}

// 내용으로 검색
if (option === "contents") {
  board = await Board.find({
    contents: new RegExp(keyword, "i"),
  })
    .lean()
    .sort({ boardId: -1 });
}

  프로젝트를 하면서 게시판 검색 기능을 구현한 코드입니다. 검색 옵션과 내용을 query에서 option과 keyword 값으로 받아왔습니다. 만약에 닉네임으로 "lapras"를 검색했다면 option 값은 nickname, keyword 값은 "lapras"가 될 것입니다. 위의 코드를 보면 중복되는 부분이 많은데, 객체 안에 받아온 option 값을 바로 key 값으로 넣어주면 중복 없이 코드를 한 번만 작성하면 되지만 프로젝트 기간에는 그 방법을 몰라서 option 값에 따라서 상황마다 코드를 작성했었습니다. 

const { option, keyword } = req.query; // option 값은 nickname, title, contents

board = await Board.find({
  [option]: new RegExp(keyword, "i"),
})
  .lean()
  .sort({ boardId: -1 });

  이렇게 변수 값을 객체에 직접 넣어주면 불필요한 중복 없이 코드를 깔끔하게 작성할 수 있습니다. option 값으로 nickname, title, contents를 받아온 후에 key 값으로 넣어주면 if문을 작성할 필요 없이 바로 조건에 맞는 글을 찾아올 수 있습니다. 하지만 이런 방법을 쓰면 보안상 문제가 있을 수도 있으므로 option 값으로 원하는 값만 받을 수 있도록 화이트리스트를 작성하는 것이 좋습니다.

const option = 1;
const FIELD_WHITELIST = ["nickname", "title", "contents"];

if (!FIELD_WHITELIST.includes(option)) {
  throw new Error("invalid option")
}

  위와 같이 설정을 해주면 query에서 받아온 option 값이 화이트리스트에 없을 경우 에러가 발생합니다. 따라서, password와 같은 값들이 option으로 들어와도 검색이 되지 않습니다.

  JavaScript 공부를 하면서 난감한 경우 중 하나가 아래와 같이 물음표(?)와 같은 특수 문자를 마주할 때입니다.

const dogName = adventurer.dog?.name;

  구글에서 'JavaScript ?.' 으로 검색을 하면 'JavaScript' 검색 결과만 나와서 이걸 어떻게 찾아야 할지 막막했던 기억이 납니다. 그래서 이번에는 JavaScript에서 물음표를 사용하는 연산자들을 정리해 보도록 하겠습니다.

1. 조건 (삼항) 연산자 (A ? B : C) - Conditional (ternary) operator

(조건) ? (조건이 True일 때) : (조건이 False일 때)

  삼항 연산자는 if문과 비슷하지만, if문을 쓸 수 없을 때나 간결하게 쓸 수 있을 때 많이 사용합니다.

const age = 26;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Beer"
// -----------------------------------------------------
const age = 17;
const beverage = age >= 21 ? "Beer" : "Juice";
console.log(beverage); // "Juice"

  위의 예시를 보면 age가 21 이상인 경우에는 'Beer', 그 외에는 'Juice'가 beverage의 값이 됩니다. age가 26일 경우에 console.log를 찍어보면 true일 때 값인 "Beer"가, age가 17일 경우에는 false일 때의 값인 "Juice"가 표시됩니다. 

if (age >= 21) {
  return "Beer";
} else {
  return "Juice";
}

  if문으로 표현하면 여러 줄이 필요하기 때문에, if문이 복잡하지 않은 경우에는 삼항 연산자를 쓰는 편이 깔끔해 보입니다.

<main>
  <h1>Welcome to this website</h1>
  {isLoggedIn ? (
    <button onClick={logout}>Log out</button>
  ) : (
    <button onClick={login}>Log in</button>
  )}
</main>

  다음으로는 if문을 사용할 수 없는 경우입니다. React에서 사용하는 경우가 많습니다. 위의 예시에서는 로그인이 되어있으면 isLoggedIn 값을 true로 설정해 줍니다. 따라서 로그인이 되어 있는 경우에는 로그아웃 버튼이 보이고, 로그아웃이 되어있는 경우에는 isLoggedIn 값이 false이므로, 로그인 버튼이 보이게 됩니다.

<button onClick={isPlaying ? onClickPause : onClickPlay}>
  {isPlaying ? "Pause" : "Play"}
</button>

  위의 예시에서도 동영상이 재생 중인 경우에는 isPlaying 값이 true로 설정되어 있습니다. 따라서 재생 중일 때는 버튼의 이름이 "Pause"가 되고 버튼을 클릭하면 동영상을 멈추는 onClickPause 함수가 실행됩니다. 반대로 동영상이 멈춰있는 경우에 isPlaying 값이 false가 되어서, 버튼 이름은 "Play"가 되고 버튼을 클릭하면  동영상을 재생해 주는 onClickPlay 함수가 실행됩니다. 

<main>
  <h2 style={{ display: "flex", gap: "6px" }}>
    Secret password
    <button onClick={() => setExpended(false)}>-</button>
    <button onClick={() => setExpended(true)}>+</button>
  </h2>
  {isExpended && (
    <p>
      password: <code>hunter2</code>
    </p>
  )}
</main>;

  참고로 AND(&&) 연산자 사용하면 연산자 앞의 값이 True일 때, 연산자 뒤의 값을 리턴해줍니다. + 버튼을 누르면 isExpended값이 true가 되면서 <p> 태그 안에 있는 password의 값이 보이게 됩니다.

2. 널 병합 연산자 (??) - Nullish coalescing operator

a ?? b // a 값이 null, undefined면 b를 반환함

  물음표 두 개(??)는 Nullish coalescing operator입니다. ?? 앞의 값이 null 값이거나 undefined면 뒤의 값을 반환해줍니다.

const firstName = null;
const lastName = undefined;
const nickName = "Violet";

alert(firstName ?? lastName ?? nickName ?? "Cheese"); // Violet

  firstName 값이 null이고, lastName 값은 undefined이므로, 뒤에 있는 nickname 값이 반환됩니다. 만약 nickName도 null이거나 undefined였다면, 뒤에 있는 "cheese" 값을 반환해 줄 것입니다.

1. Nullish coalescing operator 
  -> 첫 번째 정의된(defined) 값을 반환
  -> null, undefined 값만 취급한다.
2. OR(||) 연산자
  -> 첫 번째 truthy 값을 반환
  -> null, undefined 외에도 0 값을 falsy 값으로 취급한다.

  앞에서 AND(&&) 연산자가 사용된 경우를 봤다면, 이번에는 OR(||) 연산자가 사용된 경우를 보겠습니다. Nullish coalescing operator는 || 연산자와 유사하지만, 차이점이 존재합니다. 전자의 경우에는 첫 번째 정의된 값을 반환하고, null과 undefined 값만 취급합니다. 후자의 경우에는 첫 번째 truthy 값을 반환하고, null과 undefined 외에도 0 값을 falsy 값으로 취급합니다. 따라서, 숫자 0이 할당될 수 있는 변수를 사용할 때는 ||보다는 ??을 사용하는 것이 좋습니다.

let height = 0;

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

  height 값을 0으로 설정하고 || 연산자를 사용하는 경우에는, 0을 falsy 값으로 취급하므로 첫 번째 truthy 값인 100을 반환합니다. ?? 연산자를 사용하는 경우에는 0은 truthy 값이 되어 null이나 undefined 값이 아니게 됩니다. 따라서 첫 번째 정의된 값인 0을 반환해 줍니다. 위의 예시처럼 0이 의미가 있는 값이라면 ?? 연산자를 사용하는 것이 적합합니다. 

3. 옵셔널 체이닝 (?.) - Optional chaining

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.

// Nullish coalescing operator를 사용할 경우
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.

  Optional Chaining은 ?. 앞의 값이 "있다.", "없다."만을 평가합니다. 만약 ?. 앞의 값이 null이나 undefined인 경우에는 평가를 멈추고 undefined를 반환합니다. 에러는 발생시키지 않습니다. Nullish coalescing operator와 유사하지만, Optional Chaning을 사용하면 코드를 더 간결하게 작성할 수 있습니다. 위의 예시에서는 user는 존재하지만, user의 address 항목이 존재하지 않기 때문에 undefined를 반환할 것입니다.

const hashedPassword = await User.findOne({ userId }, "password")
  .lean()
  .then((user) => user?.password);

  제가 프로젝트 하면서 작성했던 코드입니다. findOne함수를 이용해 DB에서 userId가 일치하는 user의 password를 가져왔습니다.

{
  _id: new ObjectId('684e4ccc91757a381b66e7ad'),
  password: '$2b$10$sXCscjG5Wn6FKBEfn.lwF.NOVyAO/6EP5HDO.OBgn9GbXXCVzjIZS'
}

  만약 user가 존재한다면 위와 같이 _id와 password 필드를 가져올 것입니다. user가 존재하지 않는다면 user?.password는 undefined 값을 반환할 것입니다. 이 예시에는 user가 존재하므로, 객체의 password 값을 아래와 같이 반환합니다.

$2b$10$sXCscjG5Wn6FKBEfn.lwF.NOVyAO/6EP5HDO.OBgn9GbXXCVzjIZS

참고 문헌

1. Conditional (ternary) operator - MDN 문서

2. Nullish coalescing operator - MDN 문서

3. Nullish coalescing operator - JAVASCRIPT.INFO

4. Optional chaining - MDN 문서

5. Optional chaining - JAVASCRIPT.INFO