면접후기-1

오늘 첫 면접을 보았다.
문제해결 테스트가 있다고 노트북을 지참해 오라길래 처음에는 공고에 나와있나 해서 확인을 해 보았다.
공고에는 나와있지 않았으나 어쨌든 사전에 말씀해 주신것이니 떨리는 마음으로 모던자바스크립트와, 그동안 정리했던 내용들을 읽으며 기술면접에 대한 대비를 하였다.

막상 질문이 들어오니 기억이 잘 나지 않았다.

1. 브라우저 랜더링 과정에 대해 설명해 주세요
2. 리엑트의 랜더링 과정에 대해..
3. 타입스크립트를 사용하는 이유
4. CORS는 무엇이고 어떻게 해결하는가
5. SSR은 어떻게 동작하는가.

---

제대로 대답한것이 몇개 되지 않았다.
리엑트의 랜더링에 대해서는 진찌 처음 듣는 내용이었다.
리엑트도 랜더링 과정이 있나??

.
.
일단 최선을 다해 대답을 한 것 같다.
분명 공부를 하고갔는데 왜 정리가 안되고 기억이 안났는지 모르겠다.
너무 긴장...😅

추가적으로 가장 걱정되었던 문제해결테스트를 진행하였다.
.. 생각했던 코딩 테스트가 아니어서 당황했다.

벡엔드 코드를 보고 해당 조건에 맞춰 문제를 해결하는 것이었다.
일단 처음 마주치고 당황하고, 다시보고 뭐지 싶고... 그러다 일부 단어를 구글에 쳐보니 진짜 답이 나오는듯 보였는데 양심상 그것을 볼 수는 없지 않나.....

일단 반복문만 적어두고 제출했다...
그리고 집에와서 어떻게 푸는 것인지 찾아보았다.

---

HTTP통신을 지원하는 패키지 사용.
해당 블로그에서는 다트를 사용하길래 혹시나 해서 보았더니 플러터의 코드인듯 하였다.
그래서 js를 살펴보았다.
내가 일단 사용해 본 fetch, axios 등이 있었다.
나는 Run.js를 사용하면서 반복문안에 fetch를 넣었는데 , axios를 배운것이 막 생각이나서 이것을 이용해 코드를 작성해 보았다.

시도 1

import axios from "axios";
import { useEffect, useState } from "react";
const jwtToken = "토큰값"; // JWT 토큰 값 입력

export default function TEstHttp() {
  const [url, setUrl] = useState("");

  useEffect(() => {
    const goSite = async (): Promise<void> => {
      for (let i = 100; i <= 150; i++) {
        const url = `https://sniperfactory.com/sfac/http_assignment_${i}`;
        const requestOptions = {
          method: "POST",
          headers: {
            "User-Agent": "SniperFactoryBrowser",
            "'Authorization'": jwtToken,
          },
        };
        try {
          const response = await axios.post(url, {}, requestOptions);
          console.log(`요청 성공! URL: ${url}, 결과:`, response.data.result);
          setUrl(url);
        } catch (error) {
          console.log(`요청 실패! URL: ${url}, 에러:`, error);
        }
      }
    };
    void goSite();
  }, []);
  return (
    <>
      <span>{url}</span>
    </>
  );
}

시도 2

import fetch from "node-fetch";
import { useEffect, useState } from "react";
const jwtToken = "토큰값"; // JWT 토큰 값 입력

export default function TEstHttp({ url: string }) {
  const jwtToken = "토큰값"; // JWT 토큰 값 입력
  if (url === undefined) {
    return;
  }
  // const requestOptions = {
  //   method: 'POST',
  //   headers: {
  //     'User-Agent': 'SniperFactoryBrowser',
  //     'Authorization': jwtToken
  //   }
  // };

  return (
    <>
      <span>{url}</span>
    </>
  );
}
export const getServerSideProps = async () => {
  let url;
  for (let i = 100; i <= 150; i++) {
    url = `https://sniperfactory.com/sfac/http_assignment_${String(i)}`;
    const requestOptions = {
      method: "POST",
      headers: {
        "User-Agent": "SniperFactoryBrowser",
        "'Authorization'": jwtToken,
      },
    };
    try {
      const response = await fetch(url, requestOptions);
      if (response.status === 200) {
        console.log(`요청 성공! URL: ${url}`);
        url = await response.json();
      }
      return { props: { url } };
    } catch (error) {
      console.log(`요청 실패! URL: ${url}, 에러:`, error);
      return { props: {} };
    }
  }
};

3번째 시도

import fetch from "node-fetch";
import { useEffect, useState } from "react";
const jwtToken = "토큰값"; // JWT 토큰 값 입력

export default function TEstHttp({ url }) {
  if (url === undefined) {
    return;
  }
  // const requestOptions = {
  //   method: 'POST',
  //   headers: {
  //     'User-Agent': 'SniperFactoryBrowser',
  //     'Authorization': jwtToken
  //   }
  // };

  return (
    <>
      <span>{url}</span>
    </>
  );
}
export const getServerSideProps = async () => {
  let jwtToken = "Bearer ey-1234567890";
  let url = "";
  const randomNumber = Math.floor(Math.random() * 51) + 100;
  url = `https://sniperfactory.com/sfac/http_assignment_${randomNumber}`;
  const requestOptions = {
    method: "POST",
    headers: {
      "User-Agent": "SniperFactoryBrowser",
      "'Authorization'": jwtToken,
    },
  };
  try {
    const response = await fetch(url, requestOptions);
    if (response.status === 200) {
      console.log(`요청 성공! URL: ${url}`);
      url = await response.json();
      console.log(url);
    }
    return { props: { url } };
  } catch (error) {
    console.log(`요청 실패! URL: ${url}, 에러:`, error);
    return { props: {} };
  }
};

답은나와있었지만,...node명령어도 안먹히고... 어렵다..;;