우리 fisa 2기 '클라우드 서비스 개발' 4주차

벌써 한 달이다 !
한 달이 다 되어 가면서 많은 것들을 배웠다.
새로운 지식(React)
동기들의 가르침
코테 강사의 가르침
정처기 책의 가르침 ㅋㅋ
등등
 
수원에서 왕복하는 건 적응했다. 몸이 그냥 알아서 상암동까지 데려다 준다 ㅋㅋ
이제는 배운 지식에 대해 적응해야 한다 ㅎㅎ
 

평일 운동은 기계가 되어야 한다. 일어나자마자 핑계거리가 생각나기 시작한다ㅋㅋ
하기 싫어서인 것을 알기 때문에, 그런 생각하는 나를 비웃고 '그냥 갔다와 후회한다!' 하면서 출발한다
(모든 운동러들은 다 그렇지 않나? ㅋㅋ)
 

이 번주 부터 정처기를 시작했다. 원래는 CS를 공부하려 했으나, 정처기 역시 CS이고 어차피 까먹을 수도 있으니,
정처기 필기를 먼저 공부하고 한 달 뒤에 CS를 다시 시작하기로 했다.
공부할 시간이 따로 없어서 버스에서 한다 ㅋㅋ
(버스 흔들리지 않게 가주세요 ㅠ)
 

이번에 React를 배우면서 내가 다시 처음 부터 만들어 보겠다고 낑낑거리고 있는 모습이다.
어렵다ㅠㅠ. 이해하기가 힘든건 아닌데 그냥 익숙하지 않아 어렵다. 조금씩 익숙해지고, 정말 내가 필요에 의해서
이용하는 함수나 방식이 있다면 비로소 내 것이 되지 않을까 한다.
 

(버스 안)
이제는 코테 푸는 양과 속도를 올리고 있다. 이번에 코딩테스트 스터디도 들어가서 열심히 진행하고 있다.
우리 스터디 그룹 사람들 실력자도 있고 열정맨도 한 가득이라서 너무 좋다ㅎㅎ. 다들 도움 서로 받고 큰 성장과 결과가 있었으면 한다.
 

ㅋㅋㅋㅋㅋ 이번 주 돈까스만 세번이나 먹었다. ㅋㅋㅋ 일단 여기 은옥? 이라는 돈까스 집인데 너무 맛있었다.
우리 반 형님이 여기에 반해서 두번 연속 따라가게 되었다 ㅋㅋ
여러 번 먹으니까 너무 물리긴하지만 맛있긴 했다.
*그 형은 3번 간거 같다
*나는 칼국수 집에서 왕돈까스를 한 번 더 먹게된다 ㅋㅋ (친구 왕돈까스 먹어 ~ 류승범 빙의해서 맛있게 먹는다.)
 
 
 
이 번 프로젝트 결과물

 

이번 미니 프로젝트이다!! 나와 우리반 누나 그리고 컴공 동생과 한 팀이 되었다. 하지만, 컴공 동생은 학교 일정으로 프로젝트에 바로 참여하지 못한 상황이었다. 나도 처음 배워서 초보였고 누나도 처음이다 보니 솔직히 이번 프로젝트는 막막했다. 그래서 다른 팀에 합류해서 할 수 있는 방법도 있었다. 처음에는 같이 하자고 해서 마음 속 부담감을 덜어내기 위해 덜썩 같이하고 싶었다.
 
하지만, 
 
결국 스스로 성장하고 일어나야 한다는 생각과 실제로 이런 일이 사회에 나가서도 안 일어나는 법은 없다는 판단하에, 이번에는 맨땅에 헤딩을 해보자 하였다. 이때 해보지 언제 해보겠나 라는 생각이었다. 누나도 같은 생각이었다.
 
우리는 기술적으로는 부족해 보일지는 몰라도, 이번 주에 배운 React 내용을 복습하면서 내것으로 만드는 취지하에 프로젝트를 선정하고 진행하였다.
 
ㅋㅋㅋㅋ 하지만, 역시 쉽지 않았다. 뭔가 남들은 잘하고 있는거 같고 우리는 잘하고 있는지 의문이 들었다. 다른 팀에 합류 했었어야 했나? 라는 생각을 0.5번 했다 ㅋㅋ (하다 말았다는 뜻) 
 
나랑 같이 하는 누나도 블로그를 잘 쓰는데, 서로 블로그에 명언이 있었다.
 
나

시작은 다 그런거다. 포기만 안 하면 되는거다. 

누나
 

남들과 비교하지 말자

 
ㅋㅋㅋㅋ 이렇게 둘이 했던 명언을 합쳐서 서로 좌절하기 전에 말해줬다 ㅋㅋㅋ 꽤나 효과적이었다?
*그날 서로 밤샌다고 했는데 2시 이후로 연락이 닿지 않았다.
 
결국, 전체적으로 완성을 했고 Todos와 큰 차이는 없지만, 우리 둘이가 해낸 첫 프로젝트였다. ㅎㅎ
 
그리고 다음날, 컴공 동생이 와서 이쁘게 꾸며 주었다 !! 별표를 눌리면 최상단으로 가게 해서 방명록을 좀 더 재밌게 만들어줬다.
역시 믿는 동생이다 ㅎㅎ 우리는 생각만 했지 어떻게 하는지는 어려움이 있었는데 동생은 척척하더라. ㅎㅎ 나도 꾸준히 성장해서 뚝딱뚝딱 하는 개발자가 되고싶돠.!!
 
그렇게 점심 시간에도 시간을 투자해서 Readme 까지 작성한 후, 누나가 발표를 했다. 나름 성공적이었다! 첫 맨땅의 헤딩이었지만, 나름 의미 있는 시간이었다. 이 때의 경험과 느꼈던 감정을 잊지 않고 다음 성장을 위한 발판으로 마련해야겠다 ㅎㅎ
 
최종 결과물 : https://github.com/woorifisa-service-dev-2nd/frontend-3rd-Memo

GitHub - woorifisa-service-dev-2nd/frontend-3rd-Memo

 
 
 

여긴 우리집 앞 공원 효원 공원이다. 곧 크리스마스인데 눈이 이렇게 내려 쌓여있다. 새벽 출근러는 눈이 왔다는 기쁨보단, 아침에 덜덜 떨 생각에 걱정이 앞선다 ㅋㅋㅋㅋ 그래도 이겨내야지 어쩌겠어
 
1. 이번 주 배운 것
이번 주는 React를 활용해서 Todos를 만들어보는 시간을 가졌다. 
그 중에 가장 많이 고려할 사항은 컴포넌트 구성이었고 새로운 지식은 hook과 Context API 였다.
기능적인 부분에서는 modal 창 생성이다.
 
컴포넌트 구성에서 가장 중요한 것
컴포넌트 구성에서 가장 중요한 것은 재사용성이다. 컴포넌트를 잘 구성해서 분류해 놓는다면 틀은 유지한 채 내용만  바꾸면서 재사용이 가능하다. 이런 것을 고려해서 컴포넌트를 구성하는 것이 중요하다.
 
Hook
useEffect 
useState 
useReducer
 
useEffect
useEffect는 부수효과라고도 한다. 즉, 어떤 것의 변화가 있다면 자동적으로 작동한다.

useEffect(() => {
	if (enteredTodoFormIsNotEmpty(title, summary)) {
		setInvalid(false);
	} else {
		setInvalid(true);
	}	
}, [title, summary]);

 
이 코드에서 보면 title, summary가 변화하면 자동적으로 내부 함수가 돌아간다.
 
 
useReducer
useReducer는 useState를 대체할 수 있는 훅이다. 일반적으로 component를 관리할 때, useState를 많이 사용하나, 내용이 복잡해지면 useReducer를 사용한다.

const [todos, dispatch] = useReducer(reducer, { data: dummyTodos, category: 'ALL' });

이렇게 해놓으면 reducer의 오른쪽에 있는 인자는 초기 값이다.
 
그리고 reducer를 함수로 정의한다.

const reducer = (todos, action) => {
const { data, category } = todos;

	switch (action.type) {
		case 'ADD':
		const { newTodo } = action;
		return { data: [...data, newTodo], category };

        case 'UPDATE':
        const { updateTodo } = action;
        const updatedTodos = data.map(todo => todo.id === updateTodo.id ? { ...updateTodo } : todo);
        return { data: updatedTodos, category }

        case 'DELETE':
        const { id } = action;
        const deletedTodos = data.filter(todo => todo.id !== id);
        return { data: deletedTodos, category }

        case 'FILTER':
        return { data, category: action.selectedCategory }
	}

}

reducer의 인자중 todos는 현재 상태이고 action은 향후, dispatch를 활용해서 값을 넣어주면 그 객체가 들어가는 위치이다.
 

<select className="p-2 text-gray-100 bg-gray-800 rounded"
	data-cy="todo-filter"
	value={todos.category} onChange={(event) => dispatch({ type: 'FILTER', selectedCategory: event.target.value })}
>

 
이렇게 최종적으로 사용할 때 dispatch(객체) 를 주입하면 객체가 action에 가고 현재 상태의 값인 todos와 병행해서 현재 상태의 값을 변형시킨다.
 
아직 이것의 활용이 쉽지는 않지만 useState 처럼 하나만의 변화가 아닌 여러개가 한 꺼번에 변화하는 형태라면 코드 useReducer를 활용하는 것이 코드의 깔끔할 것이다.
 
지금은 제대로 이용 못하더라도 알고는 있자. 어느 순간 내가 자연스럽게 쓰고 있겠지 ㅎㅎ
 
 
Context API 

기본적으로 React에서 데이터를 전달하기 위해서는 Props를 통해 상위 컴포넌트에서 하위 컴포넌트로 전달하는 방식을 사용한다.

컴포넌트가 중첩된 정도가 2~3개 정도면 Props를 활용할 수도 있지만, 4~5개 이상 중첩된 구조일 경우에는 관리가 복잡해질 수 있다.

이처럼 컴포넌트가 4~5개 이상 중첩되어 Props를 전달하는 방식을 마치 드릴을 파고 내려가는 것 같다고 하여 Props Drilling 패턴이라고한다.

 

사용 방식

 

1. 우선 createContext()를 가져온다.

import { createContext } from "react";

export const TodoContext = createContext(); // Todos 데이터 제공 용도의 Context
export const TodoDispatchContext = createContext(); // Todos Dispatch() 제공 용도의 Context

 

 
2. 이제 이를 활용할 곳을 덮는다. 그리고 전역으로 사용할 객체를 넣는다.

<TodoContext.Provider value={todos}>
	<TodoDispatchContext.Provider value={dispatch}>
		{children}
	</TodoDispatchContext.Provider>
</TodoContext.Provider>

 
 
3. 사용하고자하는 위치에서 useContext를 import 한다.

import { useContext} from "react";

 
 
4. 사용 하고자하는 Context를 useContext() 안에 담고, 읽기 쉬운 이름으로 추상화 한다.

// 읽기 쉬운 이름으로 추상화
export const useTodos = () => useContext(TodoContext);
export const useTodosDispatch = () => useContext(TodoDispatchContext);

 
 
5. 사용하는 Component에 import 해서 적용한다.

const TodoBody = () => {
	const todos = useTodos();
	const filterTodos = (todos, selectedCategory) => selectedCategory === 'ALL' ? todos : todos.filter(todo => todo.category === selectedCategory);
	const filteredTodos = filterTodos(todos.data, todos.category);

	return (
		<ul className='px-0 my-8'>
			{filteredTodos.map((todo,index) => <TodoItem todo={todo} key={index}/>)}
		</ul>
		)
}

먼가 복잡한거 같지만, 익숙해지면 괜찮을 거 같다.

 
Modal 창 생성

{isOpen && createPortal(
	<Modal onClose={closeModal}>
		<TodoForm onClose={closeModal}>New Todo</TodoForm>
	</Modal>,
	document.body)}

Modal 창을 띄울 때 마지막에 document.body가 있는데 이는 html문서에 바디 부분에 올리겠다는 뜻이다. 
 

<div id="root"></div>

원래 이곳에 넣고 있었는데 바깥쪽으로 띄우겠다는 의미이다.
 
 
 
2. 이번 주에 겪은 시행착오와 극복
 
이 번주는 확실히 누구의 도움을 최소화하고 스스로 프로젝트 진행하려고 했던 마음가짐과 실천이었던거 같다. 이전에는 잘하는 동료의 도움이 있어 프로젝트가 그렇게 어려운 것은 아니었다(물론, 어려운건 맞다) 그런데 이번에는 최소화를 통해서 도전을 해보았다. 역시나 ㅋㅋ 쉽지가 않았다. 그래도 차근차근 못하겠다는 생각을 잘 달래고 달래서 결국 하나씩 해결하기 시작했다. 비록 초보 두명이었지만, 서로 도움을 주며 해결해 나갔다!! 그리고 마지막에는 컴공 동생이 와서 우리의 프로젝트에 조금 더 활력을 넣을 수 있었다. 이때 느낀 감정과 경험 잊지 않고 성장의 발판으로 삼겠다.
 
그리고 todos를 만들면서 헷갈리는 부분도 많았다. 하지만 끝까지 이해하려고 하고 혹여나 지금은 이해가 완벽하지 않더라도 공부의 끈을 가지고 이어나간다면 이 역시 잘 극복할 것이다.
 
3. 앞으로 어디에 적용
 
React를 사용하면서 좀더 웹을 효율적으로 만들 수 있음을 알게 되었다. 이번에는 여러 이유로 라이브러리를 사용하지 않고 진행했었는데, 향후에는 라이브러리를 활용하여 react를 좀 더 효과적으로 이용해보고 싶다.
 
4. 현재까지의 학습 평가 및 다음 학습을 위한 다짐/목표
 
ㅋㅋㅋㅋ 매일매일 새로움과 끙끙거림의 연속이다. 이제 한 달 째인데 많은 것들을 배웠고, 포기하지 않고 끝까지 이해하려고 노력했다. 지금은 아니더라도 결국에는 익숙해지고 자유롭게 사용할 날을 기대하며 계속해서 열심히 해야겠다 !! 
 
현재 정처기와 코딩테스트 그리고 복습을 하고 있으며, 다음 주 부터는 기술 세미나를 위해 더욱 철저히 움직여야 하는 상황이다. 조금 더 나를 체계적으로 변화시키고, 몸을 망가뜨리는 일은 자제해야겠다.
 
꾸준하자.