[TIL] Array.map() 중독 | axios 단축 메소드(GET, POST 차이)

map 중독자..? 오히려 독이 될 수 있다

• map map... map을 하도 쓰다보니 레이아웃 그릴 때부터 뭔가 비슷한 게 반복된다! 싶으면 map을 돌려버리고 싶은 충동에 사로 잡힘
• 하지만 그러다 map안에 map을 사용하는 사태 발생 🫢

//옵션 선택 박스 레이아웃
{OPTION_DATA.map(({ id, title, name, option }) => {
            return (
              <OptionBox key={id}>
                <StepNum>Step.{id}</StepNum>
                <div>
                  <Title>{title}</Title>
                  <OptionWrap>
                    {option.map((choice, idx) => {
                      return (
                        <RadioInputWrap key={idx}>
                          {choice !== '기타' ? (
                            <>
                              <RadioInput
                                type="radio"
                                name={name}
                                value={choice}
                                onChange={handleInput}
                              />
                              <label>{choice}</label>
                            </>
                          ) : (
                            <>
                              <RadioInput type="radio" name={name} value="" />
                              <label>{choice}</label>
                              <EtcInput
                                type="text"
                                name="occupation"
                                placeholder="직접 입력해주세요"
                                onChange={handleInput}
                              />
                            </>
                          )}
                        </RadioInputWrap>
                      );
                    })}
                  </OptionWrap>
                </div>
                {Object.keys(inputValue).includes(name) && (
                  <Complete>
                    <AiOutlineCheck />
                    완료
                  </Complete>
                )}
              </OptionBox>
            );
          })}

• 코드는 깔끔해 보일 수 있어도 이중 반복문이니까 로딩도 오래 걸리고 효율적이지 못하다.

💡 사수님 advice
: 코드가 과도하게 길어지지 않는 한 간단한 레이아웃은 그냥 수동으로 적는 게 나을수도 있다.
괜히 map 돌리다 로직만 복잡해질 수 있음!!

• 안의 map은 input이니까 서버에 전송할 데이터이므로 map을 쓰는 게 나은데, 겉의 map은 그냥 같은 모양의 Box일 뿐이므로 이럴 땐 오히려 컴포넌트로 분리하는 게 맞다!
  → 왜 이 생각을 못했을까....ㅠㅠ

axios GET / POST 등 그외

axios 단축 메소드를 사용하다가 삽질한 기록....
카카오 로그인을 구현하면서 백엔드에 access token을 보내주어야 했다.
토큰 전송은 GET, POST 방식 모두 가능한데 백엔드에서 POST로 보내달라고 해서 POST로 보냄!
근데 자꾸 토큰이 안 온다는 것이다 ㅠ___ㅠ 난 분명 토큰을 잘 받아왔고, 잘 찍히고, headers에 담아서 잘 보낸 것 같은데!!!! 뭐가 문제인지 알아보자

axios 기본구성

axios({
    method: "get", // 통신 방식
    url: "http://localhost:3000/user/login/kakao", // 서버주소
    headers: { Authorization: JSON.stringify(token) } // 헤더
})

• 기본 문법 상으로는 통신 방식별로 달라지는 게 method: 뿐!
• but! axios에서는 편리한 사용을 위해 모든 요청 메소드의 단축 메소드를 제공하는데, 이때 메소드별로 문법에 약간의 차이가 있다.

단축 메소드

GET(DELETE)

    > axios.get(url[, config])
    
    axios.get(
        'http://localhost:3000/user/login/kakao',
        {
          headers: { Authorization: JSON.stringify(token) }
        },
    );

• GET, DELETE 등은 일반적으로 body가 비어있으므로
  • 첫번째 인자: url
  • 두번째 인자: config(구성옵션)
    • 따라서 headers에 넣어야 하는 token을 두번째 인자에 넣어주면 된다.

POST(PUT, PATCH)

수정 전 Code 👩🏻‍💻

    > axios.post(url[, data[, config]])

    axios.post(
        'http://localhost:3000/user/login/kakao',
        {
          headers: { Authorization: JSON.stringify(token) }
		},	
	);

• POST, PUT, PATCH 등은 일반적으로 body에 전송할 데이터가 들어가기 때문에
  • 첫번째 인자: url
  • 두번째 인자: data(body)
  • 세번째 인자: config(구성옵션)
    • 따라서 headers에 넣어야 하는 token을 세번째 인자에 넣어주어야 된다.
    • 전송할 데이터(body)가 없이 토큰만 보내는 POST여서 두번째 인자를 비워두지 않고 headers를 바로 두번째 인자로 넣어버려서 토큰이 가지 않았던 것이었다...🥲

수정 후 Code 👩🏻‍💻

    > axios.post(url[, data[, config]])

    axios.post(
        'http://localhost:3000/user/login/kakao',
        {}, ✅
        {
          headers: { Authorization: JSON.stringify(token) }
		},	
	);

• 이렇게 빈 칸이라도 자리를 만들어주고, headers가 세번째 인자가 되게 하면 해결 🚀