1) 학습한 내용

멘토링 (10시 30분)

마지막 멘토링에 관해서 홈페이지 제작에 관한 말이 있었지만 HTML과 CSS는 어떻게든 빨리 배웠지만 자바스크립트에 관해선 미숙하거나 능숙하지 못하다는 말이 있었다. 홈페이지는 메인 페이지와 2페이지만 손 본다면 마무리가 될 것이라고 했었다. 마감날은 8월 23일까지다.

그리고, 홈페이지 피드백 이후에 다음은 이력서와 면접에 관한 말을 했고 주제는 취업으로 전환되었다.

취업 관련

멘토링을 맡은 강사는 프론트 엔드를 예시로 들었을 때, 디자인 시안 대로 배치했는가의 여부와 자바스크립트 인터렉션 및 이벤트 처리를 하는 가?를 물었다.

그리고, 이력서에 작성한 것은 꼭 물어보는 경우가 있으니 이 점을 유의시켰다.

면접을 할 때, 협업 했을 때 경험과 방식을 말하는 것을 권고했었다.

오늘의 할 일

오늘은 홈페이지 제작을 한 번 점검하고 남은 시간은 리액트 독학을 했었다.

리액트 - immer

import {useRef, useCallback, useState} from 'react';
import produce from 'immer';

const App = () =>{
  const nextId = useRef(1);
  const [form, setForm] = useState({ name: '', username:''});
  const [data, setData] = useState({
    array: [],
    uselessValue: null
  });

  // input 수정을 위한 함수
  const onChange = useCallback(
    e => {
      const {name, value} = e.target;
      setForm(
        produce(draft => {
          draft[name] = value;
        })
      );
    },[]);

  // form 등록을 위한 함수
  const onSubmit = useCallback(
    e => {
      e.preventDefault();
      const info = {
        id: nextId.current,
        name: form.name,
        username: form.username
      };

      // array에 새 항목 등록
      setData(
        produce(draft => {
          draft.array.push(info);
        })
      );

      //form 초기화
      setForm({
        name: '',
        username: ''
      });
      nextId.current += 1;
    },
    [form.name, form.username]
  );

  // 항목을 삭제하는 함수
  const onRemove = useCallback(
    id => {
      setData(
        produce(draft => {
          draft.array.splice(draft.array.findIndex(info => info.id === id), 1);
        })
      );
    },
    []
  );

  return(
    <div>
      <form onSubmit={onSubmit}>
        <input
          name="username"
          placeholder="아이디"
          value={form.username}
          onChange={onChange}
        />
        <input
          name="name"
          placeholder="이름"
          value={form.name}
          onChange={onChange}
        />
        <button type="submit">등록</button>
      </form>
      <div>
        <ul>
          {data.array.map(info=>(
            <li key={info.id} onClick={()=> onRemove(info.id)}>
              {info.username}({info.name})
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}

export default App;

App.js

내가 작성한 리액트는 리액트를 다루는 기술에 나온 immer 라이브러리를 사용했다.

아래는 리액트 설치와 immer 설치에 관한 것이다.

프로젝트를 준비하면서 우선

tarn crate react-app immer-tutorial
->
cd immer-tutorial
-> yarn add immer
을 작성하면 된다.

그리고, App 컴포넌트에 immer을 적용하는 방법은 import {useRef, useCallback, useState } from 'react'; 아래에 import produce from 'immer';를 적용시키고
setForm() 부분을 아래와 같이 수정한다.

setForm(
	produce(form, draft =>{
		draft[name] = value;
})

...
setData(
	produce(data, draft => {
    	draft.array.push(info);
    })
)
...
setData(
	produce(dadta, draft =>{
    	draft.array.splice(draft.array.findIndex(info => info.id === id),1);
    })
)

그리고, useState의 함수형 업데이트와 immer를 함께 쓴다면 setForm과 setData 그리고 setData를 아래와 같이 수정하면 된다.

setData(
produce(draft => {
	draft.array.push(info);
})
...
setData(
	produce(draft =>{
    	draft.array.push(info);
    }
)
...
setData(
produce(draft => {
	draft.array.splice(draft.array.findIndex(info => info.id === id), 1);
})

출처 : immer를 사용하여 더 쉽게 불변성 유지하기, 리액트를 다루는 기술,개정판, 2021, 312p~322P.

2) 학습내용 중 어려웠던 점

이번 시간은 팀 프로젝트인 홈페이지 피드백 마지막 날이다. 내일은 웹 페이지 작업한 것을 제출하는 날이라 마지막으로 점검하고 남은 시간은 리액트를 독학할 때 참고한 서적을 보면서 만들었던 것을 올려보았다.

3) 해결방법

이번 시간은 팀 프로젝트 점검날이라서 사소한 점검을 마치고 리액트 독학을 했다.

4) 학습소감

내일은 팀 프로젝트 제출날이다. 그리고, 팀 프로젝트를 하면서 이력서 작성과 취업에 관한 말이 있었다. 강사의 말에 따르면 면접은 이력서에 관한걸 물어본다고 했었다. 그리고, 시간이 되면 두 번째 이력서 작성 및 제출날이 있을 것이라고 했었다. 나는 어떻게 해서든 취업을 해야 한다.