인터뷰 정리 - 리액트와 백엔드의 협업에 대한 조언

리액트와 백엔드와 협업시 어떻게 진행하는지에 대한 조언을 정리했습니다.

• 프론트 엔드와 백엔드의 Repositroy를 각각 만들고 진행할 예정인데 본인은 어떻게 하는지?

나는 하나의 레포에 진행하고 있는데, 나누어서 진행하는 방식도 매우 좋은 것 같다. (나누는 것을 생각해보지 못했다.) 조언해주신대로 두 개로 나누어서 진행하는게 좋을 것 같다.

• moc API 만들어서 진행하는지

당연히 필수다. 백엔드와 소통해서 어떤 데이터를 주고받을 지 정하고 그걸 토대로 moc API를 만들어놓고 진행하고 있다. 꼭 반드시! 서로 틀리지 않게 맞추는 것이 포인트.

• 로그인은 주로 어떤 방식으로 하는지

JWT를 주로 사용한다. 그냥 그거 써라.

• 서버와 처음 통신해보는데 어떻게 해야할지 막막하다. 조언좀

REST API 아나? 그거 방식대로 통신하면 된다. fetch 또는 axios 키워드로 찾아봐라.axios가 익숙해지면 매우 편하다. 나는 주로 그거 쓴다. 시간 촉박하면 fetch 쓰는 것도 나쁘지 않다. 배울시간이 없으니. 그냥 예제 코드 하나 띄워놓고 보면서 백엔드와 합의한 설계대로 메소드와 보낼 데이터를 코딩하면 된다. 진짜 쉬우니까 걱정마라. 그리고 추후에 시간이 나면, 자바스크립트 비동기에 대해서 공부해봐라. 필수다 필수. 유튜브에 검색해도 좋은 무료강의 나온다.

• 반응형 웹 적용은 어떻게 하나?

가능하면 고정 단위인 px를 피해라. min-width키워드 알아보고 미디어쿼리 요긴하게 써라. 그리고 이런 css는 프로젝트의 최후의 최후의 최후의 최후의 단계에서 해라!! 기능이 우선이다.

• styled-component vs. SCSS 뭐를 쓰는가?

나는 SCSS를 쓴다. 네스팅이 되어서 편하다. 컴포넌트별로 SCSS파일을 만들어서 한다. 이게 좋은 방법인지는 모르겠는데 이런 건 개인의 성향에 맞게 하는 거라… 나는 적어도 이 방식대로 했을 때 프로젝트 진행에 무리가 없었다. styled-component도 좋은 방법이긴 한데 나와는 맞지 않는다. 너도 너가 맞는거해라.

• 리덕스가 너무 혼란스럽다. 뭔지 간략하게 설명 좀.

액션은 액션 그 자체이다. 액션 생성 함수는 함수의 구분자라고 할 수 있다. 디스패치는 사용할 변수를 액션으로 보내는 역할을 하고 리듀서가 실질적으로 데이터를 조작하게 된다. 불변성관리는 꼭 염두하고. 나는 익숙해져서 dimmer 패키지는 안쓴다.

• 협업 프로젝트시 진행하는 순서, 방법 등을 알려줘라

최대한 단순하게 말해보자면, 회의하며 화면을 스토리보드 짜기 or 그려보기 -> 만들 기능들을 구현하는 데에 필요한 API 설계 -> 만들 기능을 우선순위를 정해서 백엔드, 프론트엔드 각각 작업을 한다. 프론트는 화면의 프레임만 짜놓으면 된다. CSS를 이때부터 집착하지마라 -> 화면의 컴포넌트를 쪼개기(나는 최대한 많이 쪼갠다) -> 백엔드와 합을 맞춰 기능 구현(API 통식 확인) -> CSS 적용

이런식으로 하는 것 같다. 여기서, API 설계 단계에서 티격태격하더라도 프론트에서 화면을 띄울 때 필요할만한 데이터를 명확하게 말해야한다. 그래야 편하다 서로.

새벽 2시에 대뜸 전화한 저에게 한시간 가량 좋은 조언을 해준 k군에게 감사드리며 나중에 취업 후 좋은 밥을 대접할 것을 약속합니다.