[패스트캠퍼스] 프론트엔드 취업 완성 과정 3기 - Color Flipper 미니 프로젝트

최근 우리팀 스터디는 격변기를 맞이하였습니다. 모두들 전반적인 JS실력이 부족했기에 간단한 책으로 공부를 시작하였고, 중간에 프로그래머스/알고리즘 스터디도 진입하여 저번주까지는 책(혼자공부하는 자바스크립트)과 알고리즘(프로그래머스 lv1)을 병행하여 스터디를 하고있었죠.

그리고 마침 책 스터디 진도가 끝나는 타이밍이었고 앞으로 어떤 공부를 해야할지 다같이 고민에 빠져있었는데 "그룹스터디 워크샵" 기간이 딱 있었던 겁니다.

그룹스터디 워크샵??

---

현업에 계시는 멘토님을 초청하여 각 조별로 그간 어떤 공부를 어떻게, 얼마나 했는지를 발표하고(조장이) 피드백을 받아서 방향성을 재설정하는 시간입니다!

사실 워크샵 전까지만 해도 굉장히 미래에 대해서 불확실했고, 뭘해야할지 몰랐었는데 이번 기회를 통해서 방향성이 좀 잡힌것 같았습니다.

결론은
1. JS 미니프로젝트
2. 알고리즘은 계속
3. 4차 프로젝트도 진행해보자

가되었습니다! (멘토님 넘 감사했습니다... 😭😀👍)

미니프로젝트

---

그래서 시작하게 된것이 이 미니 프로젝트입니다. 목표는 예제들중에서 최대한 많이 만들어 보기인데... 3차,4차 플젝들어가면서 시간도 부족하고 (사실 바닐라 JS 예제들이 이제보면 그렇게 어려워보이진 않는것도있다!) 얼마나 많이 할수있을지 모르겠다.

예제는 freecodecamp의 초보자를 위한 40가지 예제에서 골라서 해보고있는데 이중에서 기술적으로 성장을 할수있는것을 골라서 해보고있다.

git

또한, 미니프로젝트를 하면서 나와 팀원들에게 강제한 사항이 있는데, 바로 git사용법 숙지와 남의코드 많이 읽기였습니다. 팀 repo에 각자의 결과물들과 readme까지 작성하여 PR을 보내면, 나머지 팀원들은 해당 과제의 코드리뷰를 진행해줍니다. 이런 방식으로 git과 친해지기를 진행하고 있습니다.

또한, 저는 옛날에도 언급했듯이 제일 싫어하는 코딩이 "그냥 강의 따라치기" 입니다. 코딩을 완전 처음하는 사람이 아닌이상 코드 따라치기는 문제해결능력과 창의력, 검색능력등을 얻어가지 못한다고 생각하기에 저는 저희 팀원들에게도 절대 예제 설명 영상을 보지말고, 결과물 사이트만 보고 분석하여 사이트를 제작하라고 당부하였습니다(프로젝트의 핵심은 JS입니다. 레이아웃같은경우는 어떻게 짜든 상관이없습니다).

이렇게 한다면 획일화된 코드가 나오지 않고 다양한 관점의 코드가 각자에게서 나올수있으며, 그것을 리뷰하면서 많은것을 배울수도 있겠죠!

Color Flipper

---

첫번째 미니프로젝트는 굉장히 간단하고 가벼운것으로 선정하였습니다. 바로 첫번째 예제인 Color Flipper 만들어보기입니다. 이 예제에서는

• 간단한 DOM 조작과
• Random메서드를 통한 임의의 색상 생성
• Eventlistner 다루기
• 간단한 라우팅(없어도 잘 작동하지만!)

정도를 배워갈수 있었습니다.

메인 화면입니다. 저는 우선

1. simple
2. hex
3. simple + hex

와 같이 3가지의 color모드를 배치하였습니다.

각자의 case는 hash 값을 uri로 보내어 라우팅을 해주었습니다(2차과제에서 사용한 방법).

window.addEventListener("hashchange", router);

function router() {
  const routePath = location.hash;
  console.log(routePath);
  // 초기화면 진입
  if (routePath === "") {
    statusCode = 0;
  } else if (routePath === "#/simple") {
    statusCode = 1;
  } else {
    statusCode = 2;
  }
}

그러면 해당하는 statuscode에 따라서 화면을 전환해주는 것이 아닌, 그냥 color 출력 로직만 변경하면 되는것입니다.

btnEl.addEventListener("click", function () {
  // 16진법 숫자 6개 랜덤으로 고르기
  if (statusCode === 2) {
    let res = "#";
    for (let i = 0; i < 6; i++) {
      res += Math.floor(Math.random() * 15)
        .toString(16)
        .toUpperCase();
    }
    codeEl.textContent = res;
    mainEl.style.backgroundColor = res;
  } else if (statusCode === 1) {
    const res = simpleColors[Math.floor(Math.random() * 7)];
    codeEl.textContent = res;
    mainEl.style.backgroundColor = res;
  } else {
    // 걍 모든것들 중 랜덤느낌인데 로직이 어케될까용??
    // 자유롭게 하면될듯. 나는 50%확률로 hex, 50%확률로 simpe로 하겠음
    const seed = Math.floor(Math.random() * 2);
    if (seed % 2 === 0) {
      // hex
      let res = "#";
      for (let i = 0; i < 6; i++) {
        res += Math.floor(Math.random() * 15)
          .toString(16)
          .toUpperCase();
      }
      codeEl.textContent = res;
      mainEl.style.backgroundColor = res;
    } else {
      // simple
      const res = simpleColors[Math.floor(Math.random() * 7)];
      codeEl.textContent = res;
      mainEl.style.backgroundColor = res;
    }
  }
});

색상을 변경해주는 로직은 위와 같습니다. eventlistner로 click을 감지하여 레이아웃에 적용되어있는 backgroundcolor를 직접적으로 style조작을 통하여 변경시켜주었습니다.

첫 프로젝트였던 만큼 JS는 크게 어렵지않은 코드들로 짤수있었습니다.

코드리뷰의 힘

---

(사진이 참 많네요)
과제를 빠르게 끝마치고 서로의 코드를 리뷰하는 시간을 가졌습니다. 다 완성됐다고 PR을 보냈는데 오류를 발견한 경우도 있었고(잘 수정해주셨습니다) 같은 결과물인데 서로 매우 다른 코드 로직들도 배울수 있었습니다. 현업에서는 다른 사람의 코드를 읽어야하는 만큼 이러한 방법을 통하여 관점과 시각을 넓힐수있지 않을까 기대가 됩니다!