[우아한테크코스 4기] 1차 합격 및 프리코스 사전 준비

감사합니다

 

합격 (1차)

11월 6일 토요일에 우테코 코딩 테스트를 보고 나서 정말 많이 기다렸던 1차 발표날..

사실 코딩테스트를 끝나고 복기를 하는데 꽤나 놓친 것들이 몇 개가 있었고

마지막 문제는 풀지도 못했다.. (어렵진 않았는데 아이디어가 2시간동안 생각해도 생각나지 않았다.)

 

원래 내가 파트타임으로 하얀마인드 업무를 보고 있었는데 사실 업무가 잘 들어오지 않았다.

그리고 친구랑 같이 이메일을 까봤는데 정말 정말 정말 다행히도 합격을 주셨다.

 

아직 최종 합격이 아니라서 기뻐하긴 이르지만 그래도 정말 한 고비, 아니 정말 큰 고비를 넘긴 느낌이고

너무 기뻐서 카페에 있었는데 자리에서 벌떡 일어나버렸다ㅋㅋㅋㅋㅋㅋㅋ

 

 기쁨은 잠시 뒤로두고 바로 프리코스를 준비를 했어야 했다.

1차 합격 발표가 19일 금요일이고, 바로 그 다음주 수요일부터 프리코스 1주차가 시작되었다.
(사실 이 글을 쓰는 시점인 지금은 1주차가 당장 내일이면 끝난다.)

 

그래서 1주차가 시작되기전에 무언가를 준비를 하고 싶었다.

그러다가 인스타 스토리 광고에서 우연찮게 Udemy에서 우테코 강사분이 진행하는 강의가 있었는데

바로 바로 ☕ 블랙커피 Vanilla JS Lv1. 문벅스 카페 메뉴 앱 만들기이다.

https://www.udemy.com/course/vanilla-js-lv1/

문벅스 카페 메뉴 앱 만들기

 

(광고 아닙니다.)

원래 가격은 22,000원 이었는데 마침 반 값 할인을 해서 11,000원에 바로 결제를 해버렸다.

그리고 프리코스까지 시간이 별로 남지 않았기 때문에 바로 수강을 해버렸다.

 

수강완료

 

이 강의는 자바스크립트로 간단한 애플리케이션을 구현하는 강의인데

나는 자바스크립트를 많이 안다고 생각했는데 역시나 사람은... 겸손해야 하는 것 같다.

이 강의를 들으면서 내가 배웠던 것에 대해서 몇 가지 적은 것이 있다.

내가 강의를 들으면서 배웠던 것

1. 맨 처음에 요구사항을 받았을 때는 바로 코딩을 시작하는 것이 아니라 요구사항을 코딩하기 쉽게 재정의하는 것이 좋다.

1. 개발 순서에 맞게 요구 사항을 정렬
2. 요구사항은 꼼꼼히 읽어야 한다.

2. 같은 코드가 반복이 된다면 줄여서 사용해야 한다.

document
    .querySelector('#espresso-menu-form')
    .addEventListener('submit', (event) => {
      event.preventDefault();
    });

document
    .querySelector('#espresso-menu-name')
    .addEventListener('keypress', (event) => {
      if (event.key === 'Enter') {
        // something
      }
    });

위와 같이 document.querySelector가 반복된다면 아래와 같이 고칠 수 있다.

const $ = (selector) => document.querySelector(selector);

function App() {
  // form이 제출되는 것을 막아줍니다.
  $('#espresso-menu-form')
    .addEventListener('submit', (event) => {
      event.preventDefault();
    });

  $('#espresso-menu-name')
    .addEventListener('keypress', (event) => {
      if (event.key === 'Enter') {
        // something
      }
    });
}

3. 이벤트 위임

li 태그와 같이 동적으로 생성되는 요소에는 이벤트를 어떻게 달아줄까에 대한 아이디어.

이미 생성된 ul 태그에 이벤트를 달아준다.

$('#espresso-menu-list')
    .addEventListener('click', (event) => {
      const checkButtonType = (type) => event.target.classList.contains(`menu-${type}-button`);

      if (checkButtonType('edit')) {
        editMenuName(event);
      }

      if (checkButtonType('remove')) {
        removeMenuName(event);
      }
    });

4. 리팩토링

로직들이 너무 길다면 함수로 리팩토링하자

아래의 코드는 li의 내용을 수정하는 코드

코드가 괜찮다고 생각할 수 있지만 한 달뒤에 이 코드를 봤을 때

한 줄 한 줄 읽으면서 이해를 다시 해야할 수도 있다.

const checkButtonType = (type) => event.target.classList.contains(`menu-${type}-button`);

if (checkButtonType('edit')) {
	const $menuName = event.target.closest('li').querySelector('.menu-name')
	const edittedMenuName = prompt('수정할 메뉴명을 입력하세요', $menuName.innerText);
	if (edittedMenuName == null) return;
	$menuName.innerText = edittedMenuName;
}

그럴때를 방지해서 수정을 하는 로직을 함수로 만들고,

해당 부분을 함수를 실행하는 것으로 바꾸면 조금 더 직관적으로 바꿀 수 있다.

const editMenuName = (event) => {
    const $menuName = event.target.closest('li').querySelector('.menu-name')
    const edittedMenuName = prompt('수정할 메뉴명을 입력하세요', $menuName.innerText);
    if (edittedMenuName == null) return;
    $menuName.innerText = edittedMenuName;
}

const checkButtonType = (type) => event.target.classList.contains(`menu-${type}-button`);

if (checkButtonType('edit')) {
	editMenuName(event);
}

5. 기억을 믿지 말고 기록을 믿자.

6. 객체로 함수들을 관리하는 방법

const store = {
  setLocalStorage(menu) {
    localStorage.setItem('menu', JSON.stringify(menu));
  },
  getLocalStorage(menu) {
    return JSON.parse(localStorage.getItem(menu));
  },
};

localStorage를 사용하는 함수들을 store라는 객체 안에 함수로 넣어서 관리를 하는 모습.

store.setLocalStorage, store.getLocalStorage 처럼 불러서 사용할 수 있다.

7. 자바스크립트 new 에 대해서

function App() {
	this.init = () => {}
}

const app = new App();
app.init();

App 이라는 인스턴스를 여러 개 만들고 싶을 때 new로 여러 개 생성할 수 있다.

new 명령어를 class로 선언을 해야 생성할 수 있는줄 알았는데 그게 아니었따.

8. if 문에 대해서

if (checkButtonType('edit')) {
 	editMenuName(event);
}

if (checkButtonType('remove')) {
	removeMenuName(event);
}

if (checkButtonType('sold-out')) {
	soldOutMenuName(event);
}

이렇게 If문이 여러 개 존재할 때

만약 edit이 실행이 되고나서, 밑의 if문들의 조건들을 검사할 필요가 없다.

그럴 때는 return을 넣어서 일어날 수 있는 사이드 이펙트를 방지하자.

if (checkButtonType('edit')) {
	editMenuName(event);
	return;
}

if (checkButtonType('remove')) {
	removeMenuName(event);
	return;
}

if (checkButtonType('sold-out')) {
	soldOutMenuName(event);
	return;
}

9. API 코드 리팩토링

const BASE_URL = 'http://localhost:3000/api';

const HTTP_METHOD = {
  POST(data) {
    return {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    }
  },
  PUT(data) {
    return {
      method: 'PUT',
      headers: {
        "Content-Type": "application/json",
      },
      body: data ? JSON.stringify(data) : '',
    }
  },
};

const request = async (url, option) => {
  const response = await fetch(url, option);
  if (!response.ok) {
    alert('에러가 발생했습니다.')
    console.error('에러가 발생했습니다.');
  }
  return response.json();
};

const MenuApi = {
  async addMenu(category, addMenuName) {
    return request(`${BASE_URL}/category/${category}/menu`, HTTP_METHOD.POST({ name: addMenuName }));
  },
  async editMenu(category, menuId, editMenuName) {
    return request(`${BASE_URL}/category/${category}/menu/${menuId}`, HTTP_METHOD.PUT({ name: editMenuName }))
  },
};

export default MenuApi;

 

모든 코드를 fetch, 또는 axios 함수안에 전부 넣지말고 중복되는 코드들은 위와 같이 고쳐서 사용할 수 있다.

생산성, 가독성, 재사용성 모두가 좋아지는 마법.

 

총평

내가 자바스크립트를 잘 안다고 생각했는데 역시나 아니었다...

강의를 듣기를 정말 잘한 것 같다. 배울 수 있는건 어디서나 존재하는구나.

프리코스의 시작이 좋은 것 같다고 생각했다.

 

최종 코딩테스트까지 열심히 준비해서 우테코에서 교육을 받고싶다.

후회없이 열심히 하자!