프로젝트 | 쿠팡 클론코딩 1회차(feat. Next.js)

 

[진행중] React 가장 실무에 가까운 쿠팡 클론 코딩 챕터 Ⅰ

 

프론트엔드 챌린지
실무에서 잘쓰이는 기술스택을 가지고 쿠팡 클론코딩 하기

 

❓상황

Next.js 프레임워크가 실무에서 많이 쓰인다고 하여, 개발역량 향상을 위해 공부하려고 인터넷에 Next.js관련 정보를 얻다가 챌린지를 시작하게 되었다.

 

특히, 실무에서 가장 잘 쓰이는 기술스택을 모아놨다고 한다.

 

곧바로 채용이 될 수는 없겠지만, '기업들이 원하는 인재상에 잘 맞는 개발자가 되지 않을까'하는 기대감도 생겼다.

 

🎥 목차

프로젝트 미션

사용한 기술스택

깨달은 점

오류 해결방법

아쉬운 점

 

🚀 프로젝트 미션

로그인을 위해 필요한 Data Fetching 모듈을 만들어볼 것입니다.

 

주어진 Interface에 맞게 Class 및 Function들을 만들어보며 지속가능한 모듈 설계와 프론트엔드에서의 객체지향에 대해서 고민해봅니다.

 

👨‍💻 사용한 기술스택

Next.js 

Axios (?)

react-query

 

💡 깨달은 점

쿠키

사실 딱 한번 공부해놓고 잘 안다고는 할 수 없지만, 똑같은 상황이 닥칠 경우 파훼법을 알아내어 헤쳐나갈 수 있다는 자신감을 얻었다.

 

혹은, 내가 쿠키에 대해 까먹었어도 정리한 글을 보며 헤쳐나가면 되지 않을까?

 

아래는 내가 정리한 글이다.

공부 | HTTP 쿠키(cookie) 알아보기

 

Axios : instance

그동안 axios를 사용하면, 데이터 fetch하는 정도까지만 알았지 데이터를 가져오는 것을 리팩토링 하는것까지는 할 시간도 없었고 어떻게 해야하는지 감도 잡히지 않았다.

 

이번 챌린지를 통해, 구현된 axios 코드를 리팩토링 하는 미션을 받게되어서 조금 더 재사용성을 높이기 위해 무엇이 있을까 찾아보다가 axios의 instance를 이용하게 되었다.

const instance = axios.create({
  baseURL: SERVER_URL,
  data: null,
});

 

또한, instance가 변화된 값을 가지게하려면 어떻게 할지 고민도 했는데, 이것은 바로 밑에 interceptors에서 알아보겠다.

 

Axios : interceptors

axios로 쿼리를 요청할때 interceptors(가로채기)를 발동하여, 쿼리 전에 코드를 실행시킬 수 있다. (request)

또는, 데이터 쿼리 후에 코드를 실행 시킬 수도 있다.(response)

 

처음에는 axios 요청하기 전에  코드를 작성하면 해결되는 부분이 아닌가? 라는 생각이 들면서 괜히 쓸데없는거 공부하는게 아닌가 싶었다.

 

나중에 리팩토링을 할때 instance가 재사용 모듈로 사용되니, interceptors도 재사용할때 쓰인다는 것을 알아차리고 나서 공부를 하게되었다.

 

또한, axios를 이용하여 API를 호출할때, error 핸들러하기 위해 try - catch 문을 사용했는데, interceptors에 이러한 기능이 있다는 것을 알고나서 interceptors를 사용하는게 더 좋겠다는 생각을 하게 되었다.

# request
instance.interceptors.request.use(
      (config) => {
        // query 실행 전 실행할 코드
        return config;
      },
      
      (error) => {
      	// query 실행 전 에러 핸들러 코드
        return error;
      }
    );
    
# response
instance.interceptors.response.use(
      (config) => {
        // query 실행 후 실행할 코드
        return config;
      },
      
      (error) => {
      	// query 실행 후 에러 핸들러 코드
        return error;
      }
    );

 

useState : 콜백함수로 초기값 할당

콜백 형식으로 초깃값을 지정하면 첫 렌더링 시 한 번만 콜백을 실행해서 초깃값을 만들고 그 이후에는 콜백을 실행하지 않는다.

 

원래 useState로 state에 초기값 할당은 딱 한번만 일어나는 것으로 알고 있다. 별 다른 것은 없다.

 

직접 값을 넣는 것 대신 콜백함수를 이용해 초기값을 넣을 경우에 콜백함수가 실행되고 값을 return할 때까지 기다린다.

즉, 비동기적으로 콜백 함수가 리턴할 때까지 리액트가 렌더링을 하지 않고 기다린다.

 

만일 콜백함수가 실행이 오래 걸리면, 전체적인 성능에 문제가 생겨 화면 렌더링이 오래걸린다.

const [state, setState] = useState(() => callback());

 

변수 재 선언?

간편하게 콜론 뒤에 다른 문자로 사용될 변수명을 입력하면 바뀐 변수명으로 사용할 수 있다.

 

검색해도 잘 나오지 않아서 내가 직접 해봤을때는, 객체 구조분해할당 할때 만 가능한거 같다.

(알려주시면 감사하겟습니다)

const { face: me } = { face: 'hello', man: 'hey', go: 'sup' };

console.log(face) // ReferenceError
console.log(me) // 'hello'

 

😥 오류 해결방법

Axios : interceptors

axios에서 interceptors로 headers에 Authorization 값을 부여할때, 빨간 줄이 나와서 해결 방법을 찾게되었다.

오류 | axios interceptors(feat. typescript)

 

🐧 아쉬운 점

Next.js를 공부하려고 했지만, 정작 Next.js를 깊이 공부하지 못했다.

챌린지를 시작하기 전에는 Next.js를 공부하겠다는 생각과, 챌린지를 하게되면 Next.js를 심도깊에 공부할 수 있겠지라는 기대감이 있었다.

 

그러나 정작 배우는 것은, 리팩토링과 또다른 기술스택(react-query)를 배우는 것이었다.

 

물론 실무에서 잘쓰인다는 기술스택을 배울 수 있다는 것은 좋았다.

 

일과 병행하면서 챌린지를 진행하다보니, Next.js를 배우기도 시간이 벅찬데 다른 기술스택을 배우고 있어서, 스스로 아쉬운 마음이 들었다.

 

2회차때 부터는 시간분배를 잘해서 Next.js를 공부해야겠다.