[TIL-004] 알고리즘 테스트, 기술 매니저님께 질문 응답 정리

Today목표 : 4/13일 알고리즘 테스트, 기술 매니저님께 질문 응답 정리

---

알게된 점,

 

알고리즘 테스트를 꾸준히 준비하자 🟠

오늘 알고리즘 테스트에서 3번문제를 못풀고 나왔다. 지뢰찾기 알고리즘 문제였는데 일단 문제를 이해하는게 너무 어려웠다. 3문제 중에 2문제를 맞췄기 때문에 만족은 하지만 어려운 문제를 해석하는게 전에도 지금도 앞으로도 너무 어려운 것 같다. 알고리즘은 단 기간에 늘기는 아무래도 힘든 것 같으니 꾸준히 하루에 한 문제씩이라도 풀 수 있도록 노력하자..!

다음 문제는 백준 지뢰찾기 문제다. 알고리즘 테스트와 같은 문제는 아니지만, 기회가 된다면 꼭 풀어보도록 하자.

4396번: 지뢰 찾기

 

 

기술 매니저님께 질문한 내용 응답 정리 ✅

1. Priomise에서 resolve와 reject는 따로 콜백으로 전달하지 않았는데 어떻게 받아오는 것인가?

const promise = new Promise((resolve, reject) => {
  console.log("doing something..."); 
  // 비동기 처리, 데이터 통신 로직
  setTimeout(() => {
    resolve("junyoung"); 
    // reject(new Error("no network"));
  }, 2000);
});

자바스크립트 Promise 자체에서 내부적으로 resolve와 reject를 반환하여 전달해 준다.

resolve와 reject에 비동기 처리 후의 결과값을 전달하면, promise를 호출시에 비동기 처리 성공시 resolve에 전달된 결과값을 .then(data)에서 전달받을 수 있다. reject에서는 에러메세지나 문구를 전달하며, promise 호출 시 실패 처리가 될 경우, catch를 통해 에러 핸들링을 할 수 있다.

 

2. 비동기 처리에서 async - await 을 axios와 같이 사용하던데, 비동기 처리와 비동기 통신 api를 같이 사용하는 이유는 무엇인가? fetch도 비동기 통신으로 알고있는데 fetch에서도 async-await을 사용하는가?

export const login = async (payload: { email: string; password: string }) => {
  try {
    const { data } = await axiosAuth.post('login', payload);
    return data;
  } catch (error) {
    if (error instanceof AxiosError) {
      console.error(error.response?.data.detail);
    }
    return false;
  }
};

1. 일단 async-await은 네트워크 통신에만 사용 되지만은 않는다. 함수적 처리에서도 비동기적으로 처리해야 할 때 사용한다.

2. axios 자체에는 비동기적인 개념이 없다. fetch와 axios는 api 통신을 위해 사용하며, fetch는 비동기 통신이지만 axios는 비동기 통신이 아니기 때문에 async-await을 사용하여 비동기화 시키기 위해 같이 사용하는 것이다.

3. fetch의 경우 fetch자체가 비동기 통신이고, 프로미스를 반환하여 .then과 .catch를 통해 비동기적으로 제어가 가능하기 때문에 굳이 async-await을 사용할 필요는 없다. 

4. 현업에서는 fetch 보다는 async-await과 axios를 같이 사용한다. 추가적으로 나중에는 리덕스 청크도 많이 사용하기 때문에 이에 대해 공부해 보는 것도 좋다. axios의 장점은 다음과 같이 headers나 baseURL 등 반복적으로 사용해야 하는 코드를 미리 지정해 놓고 사용할 수 있기 때문에 편리하다고 알고 있는데 이에 대해서도 추가적으로 공부해 보아야 겠다.

const axiosAuth = axios.create({
  baseURL: 'https://api.urscent.co.kr/auth',
  headers: {
    'content-type': 'application/json',
  },
});

 

3. try - catch문과 .then과 .catch를 이용한 핸들링의 차이는 무엇인가?

try - catch문은 그저 성공과 실패에 따른 어떤 처리를 실행하는 구문이다. 첫번째 네트워크 통신에 성공할 경우, 다음 코드들이 전부 실행된다. 

.then의 경우, .then에서 결과값을 처리한 것이 성공해야만 다음 .then 구문이 실행되고, 또 실행된 .then 구문이 성공해야만 그 다음 구문이 실행된다. .then에서는 성공과 결과를 계속해서 체크해주어야 하고, try에서는 첫번째 구문이 성공하면 다음 코드들이 모두 실행되는 차이가 있다.

 

4. 비동기적 처리는 면접 단골 질문이다. Promise 하나에만 집중하여 문법의 사용 방법 등을 공부하는 것도 좋지만, 보통은 비동기적 처리의 비교와 차이점에 대해 많이 묻는다. 예를 들어 Promise의 then과 async - await의 차이점은 무엇이고, 왜 .then을 사용하고, 왜 async - await을 사용하는가에 대한 차이점을 생각해 보는 것이 좋다.

 

5. 리액트에서 컴포넌트를 생성할 때 함수 선언식으로 사용하는 방법과, 표현식으로 변수에 담아 사용하는 방법이 있는데 둘의 차이점은 무엇이고 보통 현업에서는 어떤 식으로 많이 사용하는가?

각자 개발자에 따라 어떤 것을 사용할지는 선택사항이다. 다만 선언식에서는 memo를 사용할 수 없기 때문에 memo를 사용해야 한다면 변수에 담아 표현식으로 사용한다. 또 컨벤션적으로 회사 내부 자체에서 권장하는 규칙을 따르기도 한다. 다만 일관성있게 하나만 사용하는 것이 아니라 둘을 섞어서 사용할 것이라면, 왜? 그렇게 사용하는지에 대해 명확한 이유를 가지고 사용해야 한다. 기술 매니저님의 경우 그 부분에 대한 지적을 받고 난 후로 명확한 자신의 기준을 세워 사용하신다고 한다. 예를들어 가장 상위의 컴포넌트에서는 선언식을 사용하고, 컴포넌트 내부에서 사용되는 함수같은 경우는 변수에 담아 표현식으로 사용하신다고 한다. 또 memo가 사용되야하는 부분은 변수에 담아서 사용하신다고 하셨다. 이 부분에 대해서는 리액트를 본격적으로 공부하면서 계속해서 생각하고 사용해야 할 부분인 것 같다.

 

6. 현업에서 가장 많이 사용하는 CSS전처리기는 무엇인가?

보통 SCSS, tailwind, styled component가 가장 많이 사용된다. 그 중에서도 SCSS와 tailwind를 가장 많이 사용하는 것 같다고 하셨다. styled component는 리액트에서 많이 사용되긴 하지만 개인적으로 코드가 길어지는 것을 좋아하지 않으셔서(따로 외부적으로 모듈화하여 사용도 가능하지만) 선호하지는 않으신다고 한다.

또 tailwind를 사용할 때는 반드시 className에 직접 inline으로 사용하는 것은 절대 가독성이나, 유지보수 측면에서 좋지 않으니 반드시 tailwind의 apply로 정의하여 사용하길 권장하셨다. 이부분은 앞으로 많이 사용할 테니 꼭 기억해 두자.

 

7. 타입 스크립트를 배우고 취업을 준비해야 하는가?

타입 스크립트를 꼭 배워야지만 취업을 할 수 있는 것은 아니다. 다만 어차피 현업에 가면 다 배워야 하는 기술이기 때문에 시간적인 여유가 가능하다면 배우는 것이 실전에서 급하게 배우는 것 보다는 여유로울 수 있다.

타입 스크립트를 공부할 때에는 강의를 듣는 것도 좋지만, 실제로 타입을 어디에서 지정해 줘야 하는지 감이 잘 안오기 때문에 github등에서 타입스크립트 사용의 코드를 보면서 공부하는 것이 많이 도움이된다. 나같은 경우는 개발자 분이 짜신 코드가 있기 때문에 분석하면서 공부해 보면 좋을 것이라 하셨다.

 

배운 점,

비동기 처리에 대해 항상 코드를 보면서 이해가 가질 않았는데 오늘 면접 스터디 준비를 하면서 동기와 비동기를 공부하고, 매니저님께 프로미스나 async-await 그리고 axios에 대해 여쭈면서 대략적인 궁금함을 해소할 수 있어서 한결 마음이 시원해 졌다. 앞으로 계속 사용할 개념이기 때문에 좀 더 구체적으로 확실하게 각각 비동기 처리의 차이점을 생각하면서 공부해야 할 것 같다. 또 적재 적소에 왜 이 비동기 처리를 사용했는지 명확히 의도를 가지고 코드를 작성해야 겠다는 생각이 들었다.