메모

Mobal.io의 소프트웨어 엔지니어 역할에 대한 기술 인터뷰 준비 참고 사항

소개

기술 인터뷰는 앱의 프런트엔드를 코딩하는 라이브 코딩 인터뷰입니다. API를 통해 액세스할 수 있는 백엔드 서버에 프런트엔드를 연결해야 합니다. 작업을 완료하려는 최신 프런트엔드 프레임워크를 선택할 수 있습니다.

기술

React.js

생식

저장소 복제

https://github.com/axelmukwena/monage

npm가 설치되어 있는지 확인하십시오.

$ npm -v

저장소 디렉토리로 이동

$ cd mobal

패키지 설치

$ npm install

시작하다

$ npm start

창조

반응 앱을 만듭니다.
전제 조건: Node >= 14.0.0 및 npm >= 5.6

$ npx create-react-app mobal
$ cd mobal

시작하다

$ npm start

뭐? 몇 가지 흥미로운 독서

https://www.freecodecamp.org/news/learn-react-by-building-a-weather-app/

https://www.simplilearn.com/tutorials/reactjs-tutorial

조직 및 표준

명사

--save-dev (프로덕션이 아닌 개발에만 사용됨)

--save (프로덕션 의존성)

--global 또는 -g (전 세계적으로 사용, 즉 로컬 시스템의 어디에서나 사용할 수 있음)

문자열을 경로로 변환

둘 다 사용

const regex = /[^a-zA-Z0-9]+/g;
const title = "hello123!@#";

// Convert
const path = title.trim().replace(regex, "-").toLowerCase();

구조

-- src
   -- api
   -- components
   -- styles
   -- pages
   -- utilities

린트

Dev 의존성으로 pretier 설치

$ npm install prettier --save-dev

루트에 .prettierrc를 만들고

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false
}

UI 및 스타일링

Material-UI 설치: https://mui.com/material-ui/getting-started/installation/

$ npm install @mui/material @emotion/react @emotion/styled
$ npm install @mui/icons-material

시간을 형식화하는 Moment.js

$ npm install moment

API 및 가져오기 요청

악시오스

$ npm install axios

여러 항목 업데이트
참조: https://stackoverflow.com/a/32101994/8050183

// PATCH /items
const params = [ { id: 1, name: 'foo' }, { id: 2, name: 'bar' } ]

// Post data to api
async function postResource(path, params, handleResponse) {
  const url = API_URL + path;

  // Only send request if there's a authorize cookie set
  // if (!token) return;

  // headers
  const headers = {
    headers: {
      "Content-Type": "application/json",
      Authorization: "token",
    },
  };

  await axios
    .post(url, params, headers)
    .then((response) => {
      handleResponse({ resource: response.data });
    })
    .catch((error) => {
      handleResponse({ resource: null, message: error.message });
      console.log("POST Resource Error");
      console.log(error);
    });
}

글로벌 스토어

$ npm install @reduxjs/toolkit
$ npm install react-redux

상점을 만드는 방법

createSlice

모든 항목을 보관할 디렉토리 생성, store

특정 전역 변수의 업데이트 및 읽기를 처리할 파일을 만듭니다. slice.js

값을 사용하여 개체createSlice({})를 초기화합니다.

name : 글로벌 상점 내의 고유 문자열

initialState: {} : 전역 변수의 기본 초기 상태입니다. 이 객체의 키는 reducers에서 업데이트됩니다.

reducers: {} : 여기서 선언합니다

변수가 여러 개인 경우 switch 문을 사용할 수 있습니다.

// currentUserSlice.js
import { createSlice } from "@reduxjs/toolkit";

export const currentUserSlice = createSlice({
  name: "currentUser",
  initialState: {
    user: null,
  },
  reducers: {
    updateCurrentUser: (state, action) => {
      state.user = action.payload;
    },
  },
});

// Action creators are generated for each case reducer function
export const { updateCurrentUser } = currentUserSlice.actions;

export default currentUserSlice.reducer;

글로벌 스토어 내의 모든 스토어 슬라이스 가져오기

import { configureStore } from "@reduxjs/toolkit";

// reducer import
import currentUserReducer from "./currentUserSlice";

const store = configureStore({
  reducer: {
    currentUser: currentUserReducer,
  },
});

export default store;

그런 다음 어디에서나 지속적인 저장 가치를 읽고 업데이트합니다.

// Read
import { useDispatch, useSelector } from "react-redux";

const Component = function Component() {
  const dispatch = useDispatch();

  // Update
  dispatch(updateCurrentUser({ name: "Axel", foo: true }));

  // Read value
  const currentUser = useSelector((state) => state.currentUser.user);

  return null;
};

export default Component;

createReducer

모든 항목을 보관할 디렉토리 생성, store

특정actions에 대해 정의된 모든 작업 이름을 유지하기 위한 디렉토리를 만듭니다reducers.

createAction에는 페이로드를 발송하는 데 사용할 작업 이름이 포함되어 있습니다.

   // /actions/counterActions.js
   import { createAction } from "@reduxjs/toolkit";
   export const increment = createAction("counter/increment");

특정 전역 변수의 업데이트 및 읽기를 처리할 reducer 디렉토리를 만듭니다. resourceReducer.js

변수/상태

에 대해 생성initialState: {}

가져오기createReducer({}) 및 설정:

initialState 아구메넷

builder : 이 리듀서가 처리할 작업을 정의하기 위해 호출할 수 있는 addCase, addMatcher 및 addDefaultCase 함수를 제공하는 콜백 객체입니다.

   // /reducers/counterReducer.js
   const counterReducer = createReducer(initialState, (builder) => {
     builder.addCase(increment, (state, action) => {
       state.value++;
     });
   });

상점 만들기

// store.js
import { configureStore } from "@reduxjs/toolkit";
import booksReducer from "./reducers/booksReducer";

const store = configureStore({
  reducer: { books: booksReducer },
});

export default store;

그런 다음 어디에서나 지속적인 저장 가치를 읽고 업데이트합니다.

// Read
import { useDispatch, useSelector } from "react-redux";
import { deleteBook } from "../../store/actions/booksActions";

const Component = function Component() {
  const dispatch = useDispatch();

  // Update
  dispatch(deleteBook(id));

  // Read value
  const books = useSelector((state) => state.books.books);

  return null;
};

export default Component;

두 가지 방법 모두 최상위 구성 요소에서 저장소를 초기화합니다.

// Top level component, e.g App.js
import { Provider } from "react-redux";
import store from "../store/store";

const App = function App() {
   <Provider store={store}>
      { children }
   <Provider>
}

export default App;

라우팅

$ npm install react-router-dom

경로 구조

<!-- At top level -->
<BrowserRouter>
  <div />
</BrowserRouter>

그 다음에

<Routes>
  <Route path="/" element={<Dashboard />}>
    <Route path="tasks" element={<DashboardTasks />} />
  </Route>
</Routes>