안녕하세요, 패스트 캠퍼스 메가바이트 스쿨 프론트 엔드 3기 수료 중인 김당퀔입니다! 이번 3기 수료 기간은 9월 13일부터 4월 14일까지 총 7개월 과정입니다. 7개월 동안 매주 주말 회고록을 작성해 보려고 합니다.

블로그 제출 기한으로 인해서 지난 금요일부터 해당 주 목요일까지의 사이클로 작성됩니다.

1. 이번주 목표

• 기초부터 완성까지, 프론트엔드 읽기
• lush 홈페이지 클론 코딩
• 김민태 강사님 강의 듣기
• 코드 리뷰 확인 후 반영하기
• 필수 강의 운영체제 부분 듣기
• 30개 예제로 배우는 JS 강의 듣기

2. 커리큘럼 학습 내용

박영웅 강사님 new 과제! 가 생겼습니다. API를 활용하여서 영화 검색 사이트 만들기입니다. API를 사용하는 게 아직 익숙하지는 않지만 어느 정도는 이해하고 있는 부분이 있어서 key들을 잘 사용하면 될 것 같습니다. 그러나 API를 불러서 오는 것은 할 줄 알더라도 JS로 사이트를 구현하는 게 어려운 만큼 작업을 하면서 꽤나 오랜 시간이 소요되지 않을까 예상이 됩니다.... HTML/CSS 과제처럼 얼른 과제를 시작하여서 다른 시간에는 부족한 부분에 대한 강의를 듣는 것으로 시간을 활용적으로 보내야 될 것 같습니다.

처음으로 알고리즘 시간이 되었는데 띠용, 사실은 코딩 테스트 대비 시간이었고... 처음으로 코딩 테스트 문제를 풀어 보았는데 아직은 JS를 활용하는 능력이 떨어지다 보니 수업 시간 내내 너무 바쁘고... 정신이 없는 느낌이었습니다. 코드를 작성해 주시면 이해는 가지만 막상 내가 또 안 보고 적으려고 하면 너무 어려운....

그 중에서 가장 어려웠던 문제를 작성해 보려고 합니다.
Q. 반복되는 문자열을 압축하고 반복횟수를 표기하는 방법으로 문자열을 반환
KKHSSSSSSSE > K2HS7E

A.

function solution(s) {
  let answer = "";
  let cnt = 1;
  s = s + ' '
  for (let i = 0; i < s.length - 1; i += 1) {
    if (s[i] === s[i + 1]) {
      cnt += 1;
    } else {
      answer += s[i];
      if (cnt > 1) {
        answer += cnt
      }
      cnt = 1
    }
  }
  return answer;
}

console.log(solution("KKHSSSSSSSE"))

제가 작성하던 코드입니다.

function solution(s) {
  let answer = "";
  let cnt = 1;
  for (let i = 0; i < s.length; i += 1) {
    if (s[i] === s[i - 1]) {
      cnt += 1;
      answer = s[i] + cnt
    } else if (s[i] !== s[i - 1]) {
      answer += s[i]
    }
    return answer;
  }
}

console.log(solution("KKHSSSSSSSE"))

이런 식으로 작성하였는데 제가 작성한 코드는 K만 반환하고 다른 것을 반환하지 않았습니다. 우선 저는 인덱스 값이 -1 이면 마지막 글자와 비교하게 될 거라고 생각을 했었고, answer 값에 cnt를 추가하는 방법이 위에 답과는 다르게 if문 안에서 추가를 하고 있어서 더 진행이 되지 않고 값이 끝이 났던 것입니다. 강사님의 설명으로 답 풀이를 이해할 수 있었습니다.

나중에 개인 시간에 추가적으로 코드를 작성해 보았습니다.

function solution(s) {
  let answer = "";
  let cnt = 1;
  for (let i = 0; i < s.length; i += 1) {
    if (s[i] === s[i - 1]) {
      cnt += 1;
    } else {
      if (cnt > 1) {
        answer += cnt;
      }
      cnt = 1
      answer += s[i];
    }
  }
  return answer;
}

console.log(solution("KKHSSSSSSSE"))

해당 예제는 마지막에 E 하나로 끝나서 코드가 잘 작동이 되었었는데 다른 예제를 넣으니 마지막 글자가 잘리는 현상이 일어나서 제가 원하던 답을 얻긴 했지만, 다른 예제에서는 작동하지 않는 코드를 만들 수 있었습니다. 😅

수업 시간에 부족했던 부분과 수업 시간에 다 진행하지 못 했던 문제들을 개인 공부 시간에 풀어 보게 되었는데 어떤 함수를 써야 될지 감이 잘 안 오는 문제도 있었고 해결했던 문제도 있었습니다. 사고력을 키우는 데는 좋은 시간이라는 생각이 들고, JS 실력이 늘기 위해서 코딩 테스트 문제를 풀어 보아야 하는 생각이 들었습니다...

3. 그룹 스터디 학습 내용

저희 그룹은 자바스크립트를 활용한 클론 코딩을 목표로 짜여진 그룹입니다.

21일 금요일부터 자바스크립트 Deep Dive 책을 활용한 스터디가 시작이 되었습니다. 오프라인으로 스터디를 하거나 줌으로 스터디 할 수 있는 시간에 챕터 하나를 정하여서 읽고, 예제를 만들어 보고, 서로 어떻게 이해하였는지 발표하는 순으로 진행을 하고 있습니다.

사실 책을 읽고 이론만 보면 간단한 예제들이기 때문에 이해하긴 쉽지만 직접 예제를 만드는 것은 또 다른 일이었습니다. 저는 단 순 무 식 지 랄까진아니지만 같은 사람이라 예제를 만들 때 A = A처럼 간단한 예제를 만들게 되었는데 그룹원 분이 독특하고 이해하기 쉽고 기억에 남을 만한 예제들을 잘 만들어 주셔서 저에게도 도움이 많이 되었습니다. 이게 그룹 스터디에 장점이 아닐까 싶기도 하고. 다른 그룹원을 보면서 나도 다양한 사고를 해야지, 하는 생각이 많이 들었던 것 같습니다. 이번 주에 했던 그룹 스터디 중 제가 만들었던 예제 몇 가지를 남겨 보도록 하겠습니다.

삼항연산자

const career = 'Front-end'
const result = career.length ? (career.length === 9 ? '프론트엔드 개발자!' : '백엔드 개발자!') : '디자이너!'

console.log(result); // '프론트엔드 개발자!'

암묵적 타입 변환

6 * '7' // 42
`6 + 7 = ${6 + 7}` // 13

1 / 'one' // NaN

+ true // 1
+ false // 0

+ {} // NaN
+ [] // 0
+ [10] // 10
+ [10, 20] // NaN
+ (function () {}) // NaN

단축 평가

// && 연산자가 모두 참일 때, 우항에 있는 값이 반환

'Front-end' && 'Back-end' // 'Back-end'

// || 연산자가 모두 참일 때, 좌항에 있는 값이 반환

'Front-end' || 'Back-end' // 'Front-end'

// if...else
const front = 'Front-end';
let message = '';

if (front) {
	message = '프론트엔드!'
} else {
	message = '비개발자!'
} // '프론트엔드!'

message = front ? '프론트엔드!' : '비개발자' // '프론트엔드!'

프로퍼티 = 상태를 나타내는 값
메서드 = 프로퍼티를 참조하고 조작할 수 있는 동작

4. 개인 학습 내용

vscode 너무 친절하다.
해당 오류가 나와서 빠른 수정을 클릭했더니 알아서 수정을 해 주며 오류가 나지 않았다.

아직 TS와 REACT에 대해서 너무 알못이라 이게 대체 뭘 어떻게 고쳐 준 건지 아직도 모르겠다... 내가 예상하기론 acceptedFiles라는 매개변수의 타입이 없어서 string으로 타입을 준 것 같다.

계속해서 REACT 강의를 들으려고 했는데 TypeScript에 대한 이해도가 아직은 없어서 김민태 강사님의 강의를 들으려고 했으나 그것도 시간이 지나면 지날수록 외계인으로 들리게 되었다... 결국은 학원에서 제공해 준 권장 강의에 있던 TypeScript 강의를 듣기로 하였고, 아직은 초반 설정과 설명에 대한 이야기들이라 들을 만한 것 같다.

5. 주간 회고

해야 될 것 같은 공부는 너무 많고, 내 머리는 따라 주질 않고, 어떻게 진도를 나가야 될지 잘 모르겠어서 이것저것 다 해 본 것 같은 주간입니다. 이 강의도 들어야 될 것 같고, 저 강의도 들어야 될 것 같은데 순서가 뭐가 맞는지 몰라서 여기저기 방황을 조금 했던 것 같습니다. JS가 완전히 공부되지 않은 상태에서 TS나 REACT를 공부하는 게 맞나 싶어서 조금 미루게 되었는데 강사님이 JS를 배우지 않고 REACT를 배우는 게 상관은 없다, 취업은 할 수 있지 않을까? 라는 말씀을 해 주셔서 일단은 눈에 보이는 강의들을 해치우기로 했습니다. 어떻게든 머리에 남길 바라며....

갈수록 해야 될 공부는 많은데 머리로 들어오는 양들이 많이질수록 이해하는 속도가 느려지는 기분이 들기도 합니다. 처음 HTML과 CSS에 대해서 배울 때도 그랬지만 반복해서 들으면 더 익숙해지지 않을까? 하는 생각이 있습니다. 아자좌!

6. 다음 주 목표

• TypeScript 강의 다 듣기
• 영화 API 과제 시작하기
• 기초부터 완성까지, 프론트엔드 읽기

지금까지 7주차의 기록을 읽어 주신 여러분, 감사합니다! 김당퀔은 이만 공부하러. 🥕🥕