import{_ as c}from"./21-CMwI6eug.js";import{_ as i,a as r,b as u,c as d,d as k,e as h}from"./19-BMoeuIbv.js";import{_ as m}from"./12-DC0nsQDU.js";import{_,r as p,o as g,c as v,a as n,d as a,w as l,b as s,e}from"./app-5lrBuCb5.js";const b="/TIL/assets/1-DTqjixjB.png",f="/TIL/assets/17-DZsAVJd1.jpg",y="/TIL/assets/16-DIS2-Woa.png",w="/TIL/assets/2-BRWA1kbh.jpg",E="/TIL/assets/4-uHNLDA64.jpg",C="/TIL/assets/3-D6JqJLii.jpg",A="/TIL/assets/8-BRtDxKJN.jpg",I="/TIL/assets/9-BV6a9NoG.jpg",x="/TIL/assets/10-Ch9hH438.jpg",B="/TIL/assets/11-CPf4V70r.jpg",j="/TIL/assets/12-C-VzI6_p.jpg",T="/TIL/assets/13-CWdnRYJ6.jpg",D="/TIL/assets/15-BJ5m66De.jpg",P="/TIL/assets/20-xz4Rjy6x.jpg",R="/TIL/assets/21-oZ3SxK8N.jpg",S={},L=e('

2020년 12월 회고

벌써 올 해의 마지막 월 회고를 쓰게 되었다. 아.. 2020년 회고는 언제 써야하나.. 불행인지 다행인지 쓸 내용이 너무 많다 😂

공적

이번 달에는 무언가 새로운걸 만들기 보다는 기존에 있는 것들을 개선하는 작업 위주로 진행했다.

1. Composition API로 리팩토링

',5),q={href:"https://composition-api.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},M=e('

11월 회고 - 21

기존에는 위와 같은 형태의 코드였는데, 리팩토링 작업 후에는

1

이렇게 간소화됐다. 각각의 로직을 useMenus, useSchedule, useTemplateItem, usePreview 처럼 카테고리별로 묶어서 유지보수 할 수 있게 작업했다. 다만 아쉬운 점은 변수와 메소드를 구분할 수 있는 방법이 이름 밖에 없다는 점과 직접 만든 mapper 라이브러리의 경우 IDE 추적을 지원하지 않는 다는 점이다.

Vuex에 Composition API 전용의 유틸성 라이브러리가 추가 되길 기도할 뿐이다.. 😇

작성 규칙

Compositino API를 사용하면서 여러가지 나만의 규칙을 만들었는데, 추후에 제대로 정리해서 공유할 생각이다. 회고에서 다루기에는 양이 너무 많다.

어느정도 리팩토링을 하긴 했지만, 그래도 많이 부족하다. 틈틈이 시간날 때 마다 해야겠다.

2. 마지막 프로젝트

',9),J=n("strong",null,"크롬 브라우저 전용 서비스",-1),N=n("p",null,"기술스택정도만 언급해보자면,",-1),U=n("ul",null,[n("li",null,"Java"),n("li",null,"spring boot"),n("li",null,"Node.js"),n("li",null,"Vue.js"),n("li",null,"SPA + CSR + SSR")],-1),V={href:"https://zuminternet.github.io/ZUM-Mobile-NodeJS/",target:"_blank",rel:"noopener noreferrer"},G=n("p",null,"흠.. 무언가 더 많은 내용을 쓰고 싶지만.. 여기까지만!",-1),H=n("hr",null,null,-1),F=n("h3",{id:"_3-떠나가는-팀원들",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_3-떠나가는-팀원들"},[n("span",null,"3. 떠나가는 팀원들")])],-1),O=n("p",null,"업무적인 내용은 아니지만, 이번 달에만 팀원 두 분이 이직한다.",-1),z=n("p",null,[n("img",{src:"https://item.kakaocdn.net/do/b888ef9aeedc7e048b34a7856ea2ce9415b3f4e3c2033bfd702a321ec6eda72c",alt:"ㅠㅠ"})],-1),W={href:"https://www.kakaomobility.com/",target:"_blank",rel:"noopener noreferrer"},$={href:"https://www.tosspayments.com/",target:"_blank",rel:"noopener noreferrer"},Y=n("strong",null,"여섯 분이 이직",-1),Z=n("strong",null,"새로 들어온 사람은 한 명",-1),K=n("s",null,"드디어 막내 탈출!",-1),Q=e('

^0^

이번에 새로 들어온 사람은 사실 내가 추천해서 들어온 대학교 후배다. 같은 팀에 친한 사람이 들어와서 즐겁다 😁

내년에는 과연 얼마나 많은 분들이 떠나고, 또 새로 들어올까? 기대 반, 걱정 반.. 사실 걱정이 한 80%정도 되는 것 같다.

4. 사내 게임 대회

어쩌다보니 사내 게임대회(카트라이더 러쉬 플러스)에 출전하게 되었다. 각 팀마다 의무적으로 한 명이상 출전해야 하는데, 우리 팀은 아무도 지원하지 않아서 팀 합류 순서로 오름차순하여 출전했다.

우승 상품은 닌텐도 스위치, 준우승 상품은 에어팟 프로였다. 우여곡절 끝에 준결승까지 갔으나.. 지갑의 차이(?)를 극복하지 못하고 탈락했다.

17

16

결승까지 진출했으면 최소 에어팟 프로를 받을 수 있었는데.. ㅠㅠ 너무 아쉽다.

사적

이번 달에는 뭘 했나 싶었는데.. 제목을 나열하고 보니 뭘 또 이리 많이 했나 싶다. 빈수레가 요란하다더니 😅

1. NextStep 리뷰어 활동

',14),X={href:"https://edu.nextstep.camp/s/MNii0Puk",target:"_blank",rel:"noopener noreferrer"},nn=n("strong",null,"12월 23일",-1),sn=n("strong",null,"12월 29일",-1),an=e('

2

그래도 이번 달에는 어느 정도 난이도가 있는 미션들을 수행하는 사람들만 남아서 리뷰 요청이 많이 오진 않았다. 저번 달에 60개의 Pull Request가 올라온 반면에, 이번 달에는 20개의 Pull Request가 올라왔다. 1/3로 줄어든 것이다.

그리고 블랙커피 스터디를 함께 했던 사람들에게 이 과정을 소개해주었고, 몇 분이 이번 기수에 신청해서 참여했다. 그리고 쉽지 않은 여정임에도 불구하고 모든 미션을 잘 마무리 해주셨다.

4

한솔님의 경우 사다리 미션을 나와 함께 진행했고,

3

종완님의 경우 마지막 미션인 볼링 미션을 나와 함께 진행했다.

음.. 좋은 피드백을 많이 남기진 못한 것 같아서 조금 죄송스럽다. 이번 기수에는 내가 너무 힘들었다.

gg

리뷰를 워낙 많이 하기도 했고, 스스로의 역량이 부족하다는 점도 많이 느꼈다. 그래서 다음 기수에는 리뷰어로 활동하지 않고 스스로의 역량 강화에 집중할 예정이다.

2. 단쿠키 개발팀 합류

12월 초에 대면 면접을 진행했다. 면접 장소는 학교 근처였는데 오랜만에 학교 구경좀 하려고 아침 일찍 갔다.

65

교내에 있는 세미나실에서 근무시간 동안 일도 하고, 오랜만에 학교 근처 맛집에서 점심도 먹었다. 그토록 졸업하고 싶었고, 벗어나고 싶었던 곳인데 그래도 학교 다닐 때가 지금 보단 더 마음 편하고 즐거웠던 것 같다.

어쨌든 그렇게 근무 시간이 끝나고 대면 면접을 진행했다. 면접 분위기는 무척 좋았고, 단쿠키라는 서비스에 대한 여러가지 사정을 들을 수 있었다. 여태까지 학생 신분으로 보상도 없이 서비스를 유지하느라 많이 힘들었던 것 같고, 운영진이 얼마나 이 서비스에 애정을 가지고 있는지 느껴졌다.

7

이렇게 나도 단쿠키 개발팀에 합류하게 되었다. 일정이 조금 촉박한 것 같아서 걱정이지만 걱정보단 기대가 더 앞선다.

그렇게 월말이 되었고 다시 단쿠키에서 메일이 왔다. 슬랙 채널을 통해 커뮤니케이션이 진행되는 것 같다.

8

개발팀 인원은 대략 8명정도 되는 것 같은데, 아마 회의를 하게 되면 제대로 알게 되겠지 싶다.

3. Composition API 학습

11월에 Composition API로 TodoList 만들기를 시작했고, 이번 달 초에 마무리 했다.

9

10

11

12

',28),tn={href:"https://ko.reactjs.org/docs/hooks-intro.html",target:"_blank",rel:"noopener noreferrer"},en=e(`
import { reative, toRefs } from "vue";

const useTodo = () => {
  const state = reactive({
    todoItems: []
  });
  
  const addItem = (item) => {
    state.todoItems = [ ...state.todoItems, item ];
  }
  
  return {
    ...toRefs(state),
    addItem
  }
}

const { todoItems, addItem } = useTodo();
addItem("test");
console.log(todoItems); // ["test"];

위와 같이 useTodo를 Composition API의 reative todRefs 등을 이용하여 만들었다.

그런데 이러한 방식으로 전역 상태를 관리하면 문제가 발생 가능성이 매우 높다. 이 때 문제점은 useTodo가 함수라는 것이다. 즉, 여러번 실행할 수 있다는 것이다.

const todo1 = useTodo();
const todo2 = useTodo();

todo1.addItem("test1");
console.log(todo1.todoItems); // ["test1"];

todo2.addItem("test2");
console.log(todo2.todoItems); // ["test2"];

이를 해결하기 위해선 다음과 같은 방식으로 작성하거나

import { reative, toRefs } from "vue";

const state = reactive({
  todoItems: []
});

const addItem = (item) => {
  state.todoItems = [ ...state.todoItems, item ];
}

const useTodo = () => ({ ...toRefs(state), addItem });
export default useTodo;

아예 처음부터 Store(Vuex)를 사용하는 것이다.

결론적으로 composition api만 이용하여 전역 상태를 관리하는 것은 무척 힘들다. 하고자 한다면 못할 건 없으나.. 굳이 그렇게 해야할까 싶기도 하다.

`,8),on={href:"https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd",target:"_blank",rel:"noopener noreferrer"},pn=e('

13

다만 Composition API와 같이 사용할 때 힘든 점은 store에 대한 유틸성 라이브러리가 없다는 점이다. 기본적으로 Vuex로 구성한 것들은 createNamespaceHelper mapState mapGetters mapMutations mapActions 등을 통해 컴포넌트에 쉽게 매핑할 수 있다. 그러나 Composition API에 Vuex를 매핑하는 라이브러리는 존재하지 않는다.

그래서 이를 직접 만들어 사용해야 했다.

import { computed } from "@vue/reactivity";
import { useStore } from "vuex";

export default function useStoreModuleMapper(namespace) {
  const store = useStore();

  const mapState = keys => keys.map(key => computed(() => store.state[namespace][key]));
  const mapMutations = keys => keys.map(key => (...payload) => store.commit(\`\${namespace}/\${key}\`, ...payload));
  const mapActions = keys => keys.map(key => (...payload) => store.dispatch(\`\${namespace}/\${key}\`, ...payload));
  const mapGetters = keys => keys.map(key => computed(() => store.getters[\`\${namespace}/\${key}\`]));

  return { mapState, mapMutations, mapActions, mapGetters };
}

짧게 구성했지만, 기존의 mapper와 유사하게 사용할 수 있게 만들었다.

export default function useTodo() {
  const { mapState, mapGetters, mapActions, mapMutations } = useStoreModuleMapper("todo");
  const [listLoading, appendLoading] = mapState(["listLoading", "appendLoading"]);
  const [filteredTodoItems] = mapGetters(["filteredTodoItems"]);
  const [setTodoItems, setUser] = mapMutations([SET_TODO_ITEMS, SET_USER]);
  const [fetchItems, addItem, updateItem, toggleItem, removeItem, removeAllItem, updatePriority] = mapActions([
    FETCH_ITEMS,
    ADD_ITEM,
    UPDATE_ITEM,
    TOGGLE_ITEM,
    REMOVE_ITEM,
    REMOVE_ALL_ITEM,
    UPDATE_PRIORITY
  ]);
}

그러나 state나 method를 직접 문자열로 매칭해야 하기 때문에 IDE에서 코드 추적이 쉽지 않기 때문에 불편하긴 마찬가지이다. 제일 좋은 방법은 Vuex 측에서 만들어서 제공하는건데.. 과연 언제쯤 가능할까?

when?

`,9),ln={href:"https://github.com/JunilHwang/vue-composition-todoapp",target:"_blank",rel:"noopener noreferrer"},cn={href:"https://junilhwang.github.io/vue-composition-todoapp/#/step1",target:"_blank",rel:"noopener noreferrer"},rn={href:"https://junilhwang.github.io/vue-composition-todoapp/#/step2",target:"_blank",rel:"noopener noreferrer"},un={href:"https://junilhwang.github.io/vue-composition-todoapp/#/step3",target:"_blank",rel:"noopener noreferrer"},dn=n("p",null,"그리고 다음과 같은 문서와 저장소를 참고했다.",-1),kn={href:"https://composition-api.vuejs.org/",target:"_blank",rel:"noopener noreferrer"},hn={href:"https://v3.vuejs.org/guide/composition-api-introduction.html#why-composition-api",target:"_blank",rel:"noopener noreferrer"},mn={href:"https://chodragon9.github.io/blog/composition-api-rfc-migration/",target:"_blank",rel:"noopener noreferrer"},_n={href:"https://github.com/devJang/nuxt-realworld",target:"_blank",rel:"noopener noreferrer"},gn=n("hr",null,null,-1),vn=n("h3",{id:"_4-블랙커피-스터디-레벨-2",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_4-블랙커피-스터디-레벨-2"},[n("span",null,"4. 블랙커피 스터디 레벨 2")])],-1),bn={href:"https://edu.nextstep.camp/s/mnUCGXab",target:"_blank",rel:"noopener noreferrer"},fn=n("p",null,[n("img",{src:m,alt:"블랙커피 Level2 계획"})],-1),yn=n("p",null,[s("2주차는 버퍼기간으로 건너 뛰고, "),n("strong",null,"3주차에 UI 테스트 미션"),s("을 진행했고, "),n("strong",null,"4주차에 E2E 테스트 미션"),s("을 진행했다.")],-1),wn=n("h4",{id:"_1-ui-테스트",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_1-ui-테스트"},[n("span",null,"(1) UI 테스트")])],-1),En={href:"https://testing-library.com/",target:"_blank",rel:"noopener noreferrer"},Cn={href:"https://testing-library.com/docs/dom-testing-library/api-queries",target:"_blank",rel:"noopener noreferrer"},An={href:"https://testing-library.com/docs/dom-testing-library/api-async",target:"_blank",rel:"noopener noreferrer"},In=n("p",null,[s("특히, "),n("code",null,"wait"),s(),n("code",null,"waitFor"),s(),n("code",null,"waitForDomChange"),s(" 등의 API를 사용하는 방법이 무척 헷갈렸고, "),n("code",null,"waitFor"),s("의 경우 IDE 자동완성을 사용하면 "),n("code",null,"babel"),s("을 불러와서 당황스러웠다.")],-1),xn={href:"https://github.com/ctimmerm/axios-mock-adapter",target:"_blank",rel:"noopener noreferrer"},Bn={href:"https://github.com/wheresrhys/fetch-mock",target:"_blank",rel:"noopener noreferrer"},jn=e(`

미션 자체가 삽질의 연속이었달까.. 무척 힘든 작업이었다.

mockAxios의 경우 다음과 같이 사용할 수 있다.

// mockAxios 초기화
const mockAxios = new MockAdapter(axios);

// Mock Request와 Response 정의
mockAxios.onGet('/users').reply(200, {
  users: [{ id: 1, name: 'John Smith' }]
});

// API 요청시 Mock Response 를 반환함
axios.get("/users")
     .then(({ data }) => console.log(data)); // { id: 1, name: 'John Smith' }

그리고 다음과 같이 한 번에 표현할 수도 있다.

const counter = createCounter({ min: 8, max: 12, initVal: 10 });
const response = () => ({
  value: counter.val(),
  isMax: counter.isMax(),
  isMin: counter.isMin()
});
 
mockAxios
  .onGet('/counter').reply(() => [200, response()])
  .onPut('/counter/inc').reply(() => (counter.inc(), [200, response()]))
  .onPut('/counter/dec').reply(() => (counter.dec(), [200, response()]))

전체적인 UI Test Code는 다음 링크에서 확인할 수 있다.

`,6),Tn={href:"https://github.com/JunilHwang/js-test-basic-step2/blob/main/step2/test/uiCounter/dom.spec.js",target:"_blank",rel:"noopener noreferrer"},Dn={href:"https://github.com/JunilHwang/js-test-basic-step2/blob/main/step2/test/serverCounter.spec.js",target:"_blank",rel:"noopener noreferrer"},Pn={href:"https://github.com/JunilHwang/js-test-basic-step2/blob/main/step2/test/todoapp/todoapp.spec.js",target:"_blank",rel:"noopener noreferrer"},Rn=n("hr",null,null,-1),Sn=n("h4",{id:"_2-e2e-테스트",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_2-e2e-테스트"},[n("span",null,"(2) E2E 테스트")])],-1),Ln=n("strong",null,"E2E 테스트",-1),qn={href:"https://www.cypress.io/",target:"_blank",rel:"noopener noreferrer"},Mn={class:"custom-container tip"},Jn=n("p",{class:"custom-container-title"},"cypress",-1),Nn=n("p",null,"핵심적인 내용은 다음과 같다.",-1),Un=n("ul",null,[n("li",null,"브라우저를 다룰 수 있는 별도의 드라이버를 만들어서 사용"),n("li",null,"E2E 뿐만 아니라, 통합, 단위 테스트까지 사용 가능"),n("li",null,"GUI 도구를 지원. 스펙 관리 및 디버깅이 편리함."),n("li",null,"브라우저 내부에서 테스트"),n("li",null,"DashBoard: 모든 테스트 과정과 결과를 저장하고, 한 눈에 분석/관리할 수 있는 서비스 (유료)")],-1),Vn={href:"https://docs.cypress.io/guides/overview/key-differences.html",target:"_blank",rel:"noopener noreferrer"},Gn=n("p",null,"cypress를 이용하여 테스트를 진행하면 다음과 같은 처음에 다음과 같은 대시보드가 나온다.",-1),Hn=n("p",null,[n("img",{src:"https://nextstep-storage.s3.ap-northeast-2.amazonaws.com/37e4a2bdb4564fd996fd8c1235057d59",alt:"대시보드"})],-1),Fn=n("p",null,"그리고 대시보드에서 특정 테스트를 선택하여 실행하면 다음과 같이 브라우저내에서 차례대로 UI 테스트를 진행한다.",-1),On=n("p",null,[n("img",{src:"https://nextstep-storage.s3.ap-northeast-2.amazonaws.com/751848b6474941669abf18146b2e6a33",alt:"UI테스트"})],-1),zn=n("p",null,"그런데 이렇게 테스트를 진행하기 위해선 먼저 앱 자체를 정상적으로 실행할 수 있도록 만들어야한다. 문제는 기존에 Level 1에서 만들었던 결과물을 가지고 테스트를 해야 하는데, 귀찮아서 그냥 건너뛴 오류들 때문에 테스트 자체를 실행할 수 없었다.",-1),Wn=n("p",null,[n("img",{src:"https://item.kakaocdn.net/do/8f3c5af3fa1ca1557ad6cc0ef75d98c9f604e7b0e6900f9ac53a43965300eb9a",alt:"빡침"})],-1),$n=n("p",null,[n("s",null,"과거의 나는 대체 무슨 생각이었던걸까")],-1),Yn=n("p",null,"어쨌든 테스트 코드를 정상적으로 실행하기 위해 3개월 전에 만든 코드를 뜯어고치고, 모든 오류를 없애버렸다. 이 과정에 반절 이상의 시간을 쓴 것 같다 😇",-1),Zn={class:"custom-container tip"},Kn=n("p",{class:"custom-container-title"},"고찰",-1),Qn=n("p",null,"cypress를 이용하면서 든 생각이, 이건 꼭 테스트를 할 때만 필요한게 아니라 무언가 브라우저의 매크로랄까? 그런걸 만들 때 사용해도 재밌을 것 같았다.",-1),Xn={href:"https://github.com/microsoft/playwright",target:"_blank",rel:"noopener noreferrer"},ns={href:"https://github.com/minuukang/army-letter-bot/",target:"_blank",rel:"noopener noreferrer"},ss={href:"https://medium.com/@minukang/%EC%9C%A1%EA%B5%B0%ED%9B%88%EB%A0%A8%EC%86%8C-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EA%B2%80%EC%83%89%EC%96%B4-%EB%89%B4%EC%8A%A4-%EC%A0%84%EC%86%A1-%EB%B4%87-%EA%B0%9C%EB%B0%9C%ED%9B%84%EA%B8%B0-f0c178a4e4dc",target:"_blank",rel:"noopener noreferrer"},as=n("p",null,"우여곡절 끝에 테스트 코드를 작성했는데",-1),ts=n("p",null,[n("img",{src:i,alt:"14"})],-1),es=n("p",null,[s("위와 같이 특정 테스트 하나를 통과하지 못했다. "),n("code",null,"dblclick"),s(" 이벤트와 관련된 문제 같은데 아무리 구글링을 해봐도 원인을 찾을 수가 없었다.")],-1),os=n("p",null,[n("img",{src:"https://item.kakaocdn.net/do/8f3c5af3fa1ca1557ad6cc0ef75d98c9f604e7b0e6900f9ac53a43965300eb9a",alt:"빡침"})],-1),ps=n("p",null,"아무래도 API를 호출하고 다시 렌더링을 하는 과정에서 문제가 있는 것 같은데.. 시간이 너무 지체되어서 그냥 포기했다 😇",-1),ls={href:"https://github.com/JunilHwang/js-test-basic-step3/blob/main/step3/cypress/integration/todolist.spec.js",target:"_blank",rel:"noopener noreferrer"},cs=n("hr",null,null,-1),is=n("h4",{id:"_3-후기",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_3-후기"},[n("span",null,"(3) 후기")])],-1),rs=n("p",null,"프론트엔드 테스트가 어렵긴 하지만 그래도 백엔드 테스트보다 재밌었다. 눈에 보이는 것들을 코드로 정의하여 테스트하는 것 자체가 큰 매력라고 생각한다.",-1),us=n("p",null,[n("img",{src:"https://item.kakaocdn.net/do/8f3c5af3fa1ca1557ad6cc0ef75d98c98b566dca82634c93f811198148a26065",alt:"매력"})],-1),ds=n("p",null,"다음과 같은 글과 영상을 같이 봐도 좋을 것 같다.",-1),ks={href:"https://www.youtube.com/watch?v=L1dtkLeIz-M",target:"_blank",rel:"noopener noreferrer"},hs={href:"https://velog.io/@muchogusto/FeConf2020-%EB%A6%AC%EB%B7%B0-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-TDD%EA%B0%80-%EA%B0%80%EB%8A%A5%ED%95%98%EB%8B%A4%EB%8A%94-%EA%B2%83%EC%9D%84-%EB%B3%B4%EC%97%AC%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4",target:"_blank",rel:"noopener noreferrer"},ms={href:"https://microprotect.github.io/2020/12/16/frontend-tdd-feconf2020/",target:"_blank",rel:"noopener noreferrer"},_s={href:"https://github.com/JunilHwang/black-coffee-study-lv2",target:"_blank",rel:"noopener noreferrer"},gs=n("hr",null,null,-1),vs=n("h3",{id:"_5-블로그-스터디-2기",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_5-블로그-스터디-2기"},[n("span",null,"5. 블로그 스터디 2기")])],-1),bs={href:"https://edu.nextstep.camp/s/4dBdkika",target:"_blank",rel:"noopener noreferrer"},fs=n("s",null,"귀찮기도 해서",-1),ys={href:"https://junilhwang.github.io/TIL/Writing/01-%EC%9C%A0%EB%85%84%EC%8B%9C%EC%A0%88-%EC%9D%B4%EC%95%BC%EA%B8%B0-3/",target:"_blank",rel:"noopener noreferrer"},ws={href:"https://junilhwang.github.io/TIL/Writing/02-2021-%EA%B3%84%ED%9A%8D/",target:"_blank",rel:"noopener noreferrer"},Es={class:"custom-container tip"},Cs=n("p",{class:"custom-container-title"},"유년 시절 이야기 모음",-1),As={href:"https://junilhwang.github.io/TIL/Writing/01-%EC%9C%A0%EB%85%84%EC%8B%9C%EC%A0%88-%EC%9D%B4%EC%95%BC%EA%B8%B0-1/",target:"_blank",rel:"noopener noreferrer"},Is={href:"https://junilhwang.github.io/TIL/Writing/01-%EC%9C%A0%EB%85%84%EC%8B%9C%EC%A0%88-%EC%9D%B4%EC%95%BC%EA%B8%B0-2/",target:"_blank",rel:"noopener noreferrer"},xs={href:"https://junilhwang.github.io/TIL/Writing/01-%EC%9C%A0%EB%85%84%EC%8B%9C%EC%A0%88-%EC%9D%B4%EC%95%BC%EA%B8%B0-3/",target:"_blank",rel:"noopener noreferrer"},Bs=n("p",null,"사실상.. 거의 참여를 하지 않았다고 봐도 무방한 것 같다.",-1),js={href:"https://github.com/next-step/blog/pulls",target:"_blank",rel:"noopener noreferrer"},Ts=e('

그런데 스터디가 종료된 이후에 무언가를 계속 작성 중이다. 음.. 내가 좀 변덕스러운 것 같기도 하고.

하기 싫다

6. 독서

이번 달에는 업무가 엄청 많지 않아서 회사에서 책을 읽었다.

(1) 그림으로 배우는 Http & Network Basic

',6),Ds={href:"http://www.yes24.com/Product/Goods/15894097",target:"_blank",rel:"noopener noreferrer"},Ps=n("img",{src:"http://image.yes24.com/momo/TopCate448/MidCate010/44791452.jpg",alt:"썸네일"},null,-1),Rs={href:"https://www.youtube.com/channel/UC-mOekGSesms0agFntnQang",target:"_blank",rel:"noopener noreferrer"},Ss={href:"https://www.youtube.com/watch?v=g5sxpi0sJc4&t=224s",target:"_blank",rel:"noopener noreferrer"},Ls=n("p",null,"내가 프론트엔드도 같이 병행하고 있기 때문에 네트워크와 관련된 내용은 꼭 익혀둘 필요가 있다고 생각했다. 그래서 구매했고, 생각보다 쉽게 그리고 상세하게 설명되어 있어서 유익한 책이었다.",-1),qs=n("p",null,[s("다만 "),n("strong",null,"HTTP2.0이 나오기 전에 출간된 책"),s("이라서 최신 스펙을 공부하고 싶다면 다른 책을 추천한다.")],-1),Ms=n("h4",{id:"_2-함께-자라기",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_2-함께-자라기"},[n("span",null,"(2) 함께 자라기")])],-1),Js={href:"http://www.yes24.com/Product/Goods/67350256",target:"_blank",rel:"noopener noreferrer"},Ns=n("img",{src:"http://image.yes24.com/goods/67350256/300x0",alt:"썸네일"},null,-1),Us={href:"http://www.ac2.kr/",target:"_blank",rel:"noopener noreferrer"},Vs=n("strong",null,"김창준",-1),Gs=n("p",null,"워낙 유명한 책이고, 많은 사람들이 추천하는 책이라서 구매했다.",-1),Hs=n("ul",null,[n("li",null,"자라기(학습)"),n("li",null,"함께(협력)"),n("li",null,"애자일")],-1),Fs=n("p",null,"등을 주제로 내용이 전개되는데 굉장히 와닿는 이야기가 많이 있었다. 시간이 된다면 전체적인 내용을 정리해보고 싶다.",-1),Os=n("p",null,[s("개발자라면, 아니 개발자가 아니더라도 "),n("u",null,"직장에서 일하는 사람이라면 반드시 읽어야 할 책이라고 생각한다.")],-1),zs={href:"http://agile.egloos.com/",target:"_blank",rel:"noopener noreferrer"},Ws=n("h4",{id:"_3-effective-java-2판",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_3-effective-java-2판"},[n("span",null,"(3) Effective Java 2판")])],-1),$s={href:"http://www.yes24.com/Product/Goods/65551284?OzSrank=1",target:"_blank",rel:"noopener noreferrer"},Ys=n("img",{src:"http://image.yes24.com/goods/65551284/300x0",alt:"썸네일"},null,-1),Zs=n("p",null,"사실 3판을 읽고 싶었는데, 회사에 2판 밖에 없어서 그냥 2판을 읽었다. 아직 전부 읽진 못했지만, 왜 사람들이 추천하고 읽으라고 하는지 충분히 이해 되는 내용의 책이다.",-1),Ks=n("p",null,"2판을 다 읽은 후에 3판을 구매해서 다시 읽어볼 생각이다.",-1),Qs=n("p",null,"이 책을 읽지 한고 리뷰어 활동을 했었다니.. 나는 대체 무슨 생각인걸까? 😇",-1),Xs=n("hr",null,null,-1),na=n("h3",{id:"_7-devears",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#_7-devears"},[n("span",null,"7. Devears")])],-1),sa={href:"https://github.com/dku-study/devears/",target:"_blank",rel:"noopener noreferrer"},aa=n("div",{class:"custom-container tip"},[n("p",{class:"custom-container-title"},"Devears"),n("p",null,"단국대의 상징이 곰(Bear)이다."),n("ul",null,[n("li",null,"Developer(개발자) + Bear(곰) = Devears")]),n("p",null,[s("즉, "),n("strong",null,"단국대 개발자들"),s("이라는 뜻을 가졌다고 볼 수 있다.")])],-1),ta={href:"https://dku-study.github.io/Devears/",target:"_blank",rel:"noopener noreferrer"},ea=n("p",null,[n("img",{src:D,alt:"15"})],-1),oa={href:"https://www.logogenie.net/",target:"_blank",rel:"noopener noreferrer"},pa=n("p",null,[s("사실 프론트가 어렵다기 보단 UI 구성이 어렵다. "),n("strong",null,"어떻게 만들어도 이상하게 보이는 마법"),s("이랄까..? 일단 죽이 되든, 밥이 되든 만들어 보고자 한다.")],-1),la={class:"custom-container tip"},ca=n("p",{class:"custom-container-title"},"프론트엔드 TIP 정리",-1),ia=n("p",null,"Create React App Custom",-1),ra={href:"https://sustainable-dev.tistory.com/126",target:"_blank",rel:"noopener noreferrer"},ua=n("ul",null,[n("li",null,"customize-cra"),n("li",null,"react-app-rewired")],-1),da=n("p",null,"React Router Layout",-1),ka={href:"https://reactrouter.com/web/guides/quick-start",target:"_blank",rel:"noopener noreferrer"},ha={href:"https://simonsmith.io/reusing-layouts-in-react-router-4",target:"_blank",rel:"noopener noreferrer"},ma={href:"https://stackoverflow.com/a/46201798",target:"_blank",rel:"noopener noreferrer"},_a=n("p",null,"Mock API",-1),ga={href:"https://react.vlpt.us/redux-middleware/08-json-mockServer.html",target:"_blank",rel:"noopener noreferrer"},va={href:"https://github.com/typicode/json-mockServer",target:"_blank",rel:"noopener noreferrer"},ba=n("p",null,"Proxy",-1),fa={href:"https://create-react-app.dev/docs/proxying-api-requests-in-development",target:"_blank",rel:"noopener noreferrer"},ya={href:"https://velog.io/@velopert/create-react-app-v2#5-proxy-%EC%84%A4%EC%A0%95%EC%9D%84-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95-%EA%B0%80%EB%8A%A5",target:"_blank",rel:"noopener noreferrer"},wa=e('

Front-end 기술스택

현재까지 진행하면서 사용한 프론트엔드 기술 스택은 다음과 같다.

',1),Ea={href:"https://programmers.co.kr/learn/courses/10658",target:"_blank",rel:"noopener noreferrer"},Ca={href:"https://github.com/junilhwang/react-facebook-clone",target:"_blank",rel:"noopener noreferrer"},Aa=n("strong",null,"내년 상반기",-1),Ia=e('

Summary

그리고 본문에 언급하지 않은 내용도 몇 가지 소개하자면,

마지막은 주인님 사진으로 마무리!

18192021

',7);function xa(Ba,ja){const o=p("RouteLink"),t=p("ExternalLinkIcon");return g(),v("div",null,[L,n("p",null,[a(o,{to:"/Review/2020-year/11-November/"},{default:l(()=>[s("11월 회고")]),_:1}),s("에서 "),n("a",q,[s("Composition API"),a(t)]),s("에 대해 언급했었는데, 그렇게 학습을 어느 정도 마무리 하고 사내 프로젝트에 적용했다.")]),M,n("p",null,[s("벌써 2020년의 마지막 프로젝트를 진행했다. "),a(o,{to:"/Review/2020-year/11-November/"},{default:l(()=>[s("11월 회고")]),_:1}),s("에도 언급했던 "),J,s("이다. 두 달동안 빠르게 거의 프로토타입 형태로 빠르게 만들었고, 월말에 사용자단에 노출될 예정이다. 그러나 아직 정식으로 공개된 서비스가 아니라서 자세한 내용을 언급하긴 어렵다.")]),N,U,n("p",null,[s("등을 사용했다. 아마 "),n("a",V,[s("이 링크"),a(t)]),s("에 나온 내용과 겹치는 부분이 많을 것이다.")]),G,H,F,O,z,n("p",null,[s("한 분은 "),n("a",W,[s("카카오 모빌리티"),a(t)]),s("에 프론트엔드 파트로, 다른 한 분은 "),n("a",$,[s("토스 페이먼츠"),a(t)]),s("로 가신다. 올 해에만 "),Y,s("을 하셨고 "),Z,s("이다. "),K]),Q,n("p",null,[s("지난 달에 이어서 "),n("a",X,[s("TDD, Clean Code with Java 10기"),a(t)]),s("의 리뷰어로 활동했다. "),nn,s("까지였는데, 과정이 종료된 이후에도 포기하지 않고 끝까지 미션을 수행하신 분이 계셔서 "),sn,s("에 비로소 리뷰어 활동을 완전히 끝낼 수 있었다.")]),an,n("p",null,[s("Composition API를 사용하면서 느낀 것은 "),n("a",tn,[s("React Hook"),a(t)]),s("과 굉장히 유사하다는 점이다. 그래서 처음에는 Store 없이 오직 Composition API만 이용해서 전역 상태를 관리하도록 구현했다.")]),en,n("p",null,[s("무엇보다 store(vuex)를 쓰면 좋은 이유 중 하나가 "),n("a",on,[s("VueDevtools"),a(t)]),s("을 이용하여 mutation이나 dispatch가 실행 한 시점의 데이터를 조회할 수 있다는 점이다. 뿐만아니라 현재의 state도 바로바로 조회할 수 있으니 이를 포기하기란 쉽지 않은 선택이다.")]),pn,n("p",null,[s("결과물은 코드는 "),n("a",ln,[s("이 저장소"),a(t)]),s("에서 확인해볼 수 있다. 데모는 아래의 링크에서 확인할 수 있다.")]),n("ul",null,[n("li",null,[n("a",cn,[s("TodoList - Step1 : localStorage"),a(t)])]),n("li",null,[n("a",rn,[s("TodoList - Step2 : Rest API"),a(t)])]),n("li",null,[n("a",un,[s("TodoList - Step3 : Team/Member"),a(t)])])]),dn,n("ul",null,[n("li",null,[n("a",kn,[s("Composition API RFC"),a(t)])]),n("li",null,[n("a",hn,[s("Vue 3 공식문서 - Composition API"),a(t)])]),n("li",null,[n("a",mn,[s("Composition API 경험 정리"),a(t)])]),n("li",null,[n("a",_n,[s("devjang/nuxt-realworld"),a(t)])])]),gn,vn,n("p",null,[s("지난 달에 시작했던 "),n("a",bn,[s("블랙커피 스터디 레벨 2"),a(t)]),s("를 이번 달에 마무리했다.")]),fn,yn,wn,n("p",null,[s("UI 테스트는 "),n("a",En,[s("Testing Library"),a(t)]),s("를 이용하여 진행했다. "),n("a",Cn,[s("Queries"),a(t)]),s(" 문서와 "),n("a",An,[s("Async Utilites"),a(t)]),s("문서를 보면서 삽질을 많이 했다.")]),In,n("p",null,[s("그리고 비동기 테스트(API 테스트)의 경우 "),n("a",xn,[s("axios mock adapter"),a(t)]),s(" 혹은 "),n("a",Bn,[s("fetch mock"),a(t)]),s(" 등을 이용했는데 처음에 사용 방법을 착각해서 삽질을 많이 했다.")]),jn,n("ul",null,[n("li",null,[n("a",Tn,[s("Only UI Counter"),a(t)])]),n("li",null,[n("a",Dn,[s("API + Ui Counter"),a(t)])]),n("li",null,[n("a",Pn,[s("API + TodoApp"),a(t)])])]),Rn,Sn,n("p",null,[Ln,s("는 "),n("a",qn,[s("Cypress"),a(t)]),s("를 이용하여 진행했다.")]),n("div",Mn,[Jn,Nn,Un,n("p",null,[s("상세한 내용은 "),n("a",Vn,[s("여기"),a(t)]),s("서 확인할 수 있다.")])]),Gn,Hn,Fn,On,zn,Wn,$n,Yn,n("div",Zn,[Kn,Qn,n("p",null,[s("실제로 이런 도구를 이용해서 공연 예매를 하거나, 항공사 티켓을 조회하거나, 아니면 SNS에 좋아요 매크로를 만들거나 하는 등에 쓴 사람이 많다고 한다. 나의 지인 중 한 명은 "),n("a",Xn,[s("playwright"),a(t)]),s("를 이용하여 "),n("a",ns,[s("육군훈련소 실시간 검색어 뉴스 전송 봇"),a(t)]),s("을 만들었다. "),n("a",ss,[s("후기"),a(t)]),s("도 읽어보길 권한다.")])]),as,ts,es,os,ps,n("p",null,[s("전체 코드는 "),n("a",ls,[s("여기서"),a(t)]),s(" 확인할 수 있다.")]),cs,is,rs,us,ds,n("ul",null,[n("li",null,[n("a",ks,[s("Youtube - 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다."),a(t)])]),n("li",null,[n("a",hs,[s("FeConf2020 리뷰🖊: 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다."),a(t)])]),n("li",null,[n("a",ms,[s("FEConf2020 프론트엔드 TDD 발표 후기"),a(t)])])]),n("p",null,[s("그리고 전체 미션 코드는 "),n("a",_s,[s("여기서"),a(t)]),s(" 확인할 수 있다.")]),gs,vs,n("p",null,[s("11월 말에 시작했던 "),n("a",bs,[s("블로그 스터디 2기"),a(t)]),s("가 이번 달 중순에 종료되었다. 원래 한 달 동안 3개 이상의 글을 쓰는 것이 스터디의 목표인데, 이번에는 바쁘기도 했고 "),fs,s(" 여러가지 핑계(?)로 두 개의 글만 작성했다.")]),n("ul",null,[n("li",null,[n("a",ys,[s("유년시절 이야기 Part 03"),a(t)])]),n("li",null,[n("a",ws,[s("2021년 새해 계획"),a(t)])])]),n("div",Es,[Cs,n("ul",null,[n("li",null,[n("a",As,[s("Part 01"),a(t)])]),n("li",null,[n("a",Is,[s("Part 02"),a(t)])]),n("li",null,[n("a",xs,[s("Part 03"),a(t)])])])]),Bs,n("p",null,[s("다른 스터디 참가자가 올린 글은 "),n("a",js,[s("여기서"),a(t)]),s(" 확인할 수 있다.")]),Ts,n("p",null,[n("a",Ds,[Ps,a(t)])]),n("p",null,[s("이 책은 꽤 오래전에 출간된 네트워크 관련 서적이다. "),n("a",Rs,[s("우아한Tech Youtube"),a(t)]),s("를 구독중인데 "),n("a",Ss,[s("우아한형제들 개발자에게 묻는다"),a(t)]),s(" 라는 영상을 보고 구매한 책이다.")]),Ls,qs,Ms,n("p",null,[n("a",Js,[Ns,a(t)])]),n("p",null,[n("a",Us,[s("애자일 코칭(AC2)"),a(t)]),s("을 운영하고 계신 "),Vs,s("님이 지필한 책이다.")]),Gs,Hs,Fs,Os,n("p",null,[s("참고: "),n("a",zs,[s("애자일 이야기"),a(t)])]),Ws,n("p",null,[n("a",$s,[Ys,a(t)])]),Zs,Ks,Qs,Xs,na,n("p",null,[s("저번 달에 "),n("a",sa,[s("Devears"),a(t)]),s("라는 사이드 프로젝트를 시작했다.")]),aa,n("p",null,[s("이번 달에는 대충(정말 대충..) "),n("a",ta,[s("요구사항 문서"),a(t)]),s("를 작성했고, Front-end 위주의 작업을 진행했다.")]),ea,n("p",null,[s("로고는 "),n("a",oa,[s("logogenie"),a(t)]),s("에서 로고의 키워드를 검색하고, 여기서 나온 결과물 중에 마음에 드는 것을 참고하여 대충 급하게 만들었다. 실제로 서비스 하기 전에 외주를 맡기던가 할 생각이다.")]),pa,n("div",la,[ca,n("ul",null,[n("li",null,[ia,n("ul",null,[n("li",null,[n("a",ra,[s("CRA로 만든 리액트 프로젝트에서 eject하지 않고 optional chaining 사용하기"),a(t)]),ua])])]),n("li",null,[da,n("ul",null,[n("li",null,[n("a",ka,[s("React Router"),a(t)])]),n("li",null,[n("a",ha,[s("Reusing layouts in React Router 4"),a(t)])]),n("li",null,[n("a",ma,[s("React Router v4 with multiple layouts"),a(t)])])])]),n("li",null,[_a,n("ul",null,[n("li",null,[n("a",ga,[s("json-mockServer - 벨로퍼트와 함께하는 모던 리액트"),a(t)])]),n("li",null,[n("a",va,[s("github/json-mockServer"),a(t)])])])]),n("li",null,[ba,n("ul",null,[n("li",null,[n("a",fa,[s("CRA - Proxying API Requests in Development"),a(t)])]),n("li",null,[n("a",ya,[s("Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까?"),a(t)])])])])])]),wa,n("p",null,[s("그리고 "),n("a",Ea,[s("프로그래머스 리액트 스터디"),a(t)]),s(" 과정에서 만든 "),n("a",Ca,[s("리액트 페이스북 클론 프로젝트"),a(t)]),s("를 참고하여 개발 중이다. "),Aa,s("까지 완성해볼 예정이다(과연..?)")]),Ia])}const Sa=_(S,[["render",xa],["__file","index.html.vue"]]),La=JSON.parse('{"path":"/Review/2020-year/12-December/","title":"2020년 12월 회고","lang":"en-US","frontmatter":{"title":"2020년 12월 회고","description":"개발자 황준일의 2020년 12월 회고입니다.","sidebarDepth":2,"date":"2020-12-30T18:20:00.000Z","hitUrl":"https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https://junilhwang.github.io/TIL/Review/2020-year/end/","tag":"회고","thumbnail":"https://user-images.githubusercontent.com/18749057/172793803-a792c72b-82f0-4da7-b8c0-a58978c234e9.png"},"headers":[{"level":2,"title":"공적","slug":"공적","link":"#공적","children":[{"level":3,"title":"1. Composition API로 리팩토링","slug":"_1-composition-api로-리팩토링","link":"#_1-composition-api로-리팩토링","children":[]},{"level":3,"title":"2. 마지막 프로젝트","slug":"_2-마지막-프로젝트","link":"#_2-마지막-프로젝트","children":[]},{"level":3,"title":"3. 떠나가는 팀원들","slug":"_3-떠나가는-팀원들","link":"#_3-떠나가는-팀원들","children":[]},{"level":3,"title":"4. 사내 게임 대회","slug":"_4-사내-게임-대회","link":"#_4-사내-게임-대회","children":[]}]},{"level":2,"title":"사적","slug":"사적","link":"#사적","children":[{"level":3,"title":"1. NextStep 리뷰어 활동","slug":"_1-nextstep-리뷰어-활동","link":"#_1-nextstep-리뷰어-활동","children":[]},{"level":3,"title":"2. 단쿠키 개발팀 합류","slug":"_2-단쿠키-개발팀-합류","link":"#_2-단쿠키-개발팀-합류","children":[]},{"level":3,"title":"3. Composition API 학습","slug":"_3-composition-api-학습","link":"#_3-composition-api-학습","children":[]},{"level":3,"title":"4. 블랙커피 스터디 레벨 2","slug":"_4-블랙커피-스터디-레벨-2","link":"#_4-블랙커피-스터디-레벨-2","children":[]},{"level":3,"title":"5. 블로그 스터디 2기","slug":"_5-블로그-스터디-2기","link":"#_5-블로그-스터디-2기","children":[]},{"level":3,"title":"6. 독서","slug":"_6-독서","link":"#_6-독서","children":[]},{"level":3,"title":"7. Devears","slug":"_7-devears","link":"#_7-devears","children":[]}]},{"level":2,"title":"Summary","slug":"summary","link":"#summary","children":[]}],"git":{"updatedTime":1740226066000},"filePathRelative":"Review/2020-year/12-December/README.md"}');export{Sa as comp,La as data};