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

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

1. 이번 주 목표

• 김민태 강사님 강의 듣기
• 추가 JS 강의 듣기
• 필수 강의 운영체제 부분 듣기
• lush 홈페이지 클론 코딩
• 개발 블로그 작성하기

2. 커리큘럼 학습 내용

지난 금요일에는 최우영 강사님의 컴퓨터 운영체제 시간이 있었는데 인터넷에 관한 이야기를 들을 수 있었습니다. 요즘 화두에 오르고 있는 망 사용료 같은 이야기도 잠깐 해 주셨고, IP 주소가 어떤 형식으로 만들어졌는지에 대한 이야기도 들을 수 있었습니다. 운영체제 같은 경우에는 얕게는 알고 있는 지식들이 많지만 깊게 알려고 하니 용어도 어렵고, 조금은 생소하다고 느껴지는 것 같습니다. 용어에 대해서라도 잘 알게 된다면 조금은 친숙하게 느껴지지 않을까 싶습니다.

월요일이 되었고, 계속해서 박영웅 강사님의 JS 시간이 이어졌습니다.
this는 일반 함수와 화살표 함수에 따라서 다르게 정의됩니다. 일반 함수에서는 호출된 위치에서 정의되고, 화살표 함수에서는 this가 선언된 위치에서 정의됩니다

class 함수와 getter, setter에 대해서도 설명해 주셨는데 아직 개념이 정확히 이해가 안 되는 부분이 있기도 하고 어떻게 쓰이는지 잘 감이 잡히지 않아서 제가 설명을 적기엔 조금은 무리가 있지 않나....

정적 메소드(static methods)는 class의 유틸리티 함수를 만들 때 사용합니다. 인스턴스와 연결되지 않으며, class 자체에서 호출해서 사용합니다.

---

필수 강의 중 운영체제 파트도 강의를 들었습니다. 이번 주에 들었던 내용 중 메모를 남긴 것을 적어 보겠습니다.

`malloc` C 언어 동적 할당

`free` 동적 해제

BSS 초기화 되지 않은 전역 변수, DATA 초기값이 있는 전역 변수

지역 변수는 stack 프레임으로 들어감


PC(Program Counter) + SP(Stack Pointer)

프로세스 구조: Stack, HEAP, DATA(BSS, DATA), TEXT(CODE)

PCB: 프로세스 상태 정보 - PC, SP, 메모리, 스케쥴링 정보 등

컨텍스트 스위칭: 프로세스 상태 정보를 PCB로부터 CPU에 로드, 실행

C 언어가 나오기도 하고, C 언어로 프로세스를 실행시켰을 때 어떤 방식으로 프로세스가 진행되는지에 대한 설명이 나오다 보니 조금은 이해하는데 어려운 부분이 있는 것 같습니다.

---

HTML/CSS 과제 제출 기간이 끝나고 코드 리뷰 기간이 되었습니다. 생각보다 제 멘토님이 빠르게 리뷰를 달아 주셔서 확인을 해 보았는데 긍정적인 말씀을 담아 주셔서 좋았습니다. 제가 구현하고 싶었던 기능 중에서 실패했던 것이 있었는데 그것에 대한 자세한 리뷰를 달아 주셔서 다음 주에는 리뷰를 반영하여서 코드를 고치는 시간을 가져야 될 것 같습니다.

3. 그룹 스터디 학습 내용

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

이번 주 수요일을 기준으로 HTML/CSS 과제가 끝이 납니다. 저는 그 전에 이미 끝내 두어서 계속해서 다른 JS 강의들을 듣고 있는 중입니다. 김민태 강사님의 Hacker News 페이지 만들기 강의 중 JS를 활용하는 부분은 일단 다 들은 상태이고, 여태 들었던 강의들과는 다른 스타일로 JS를 작성하는 타입이라 이해하는 시간이 좀 걸렸지만... 몇 번씩 다시 보고 이해해 봐야 될 것 같습니다. 코드 자체가 어려운 것은 아니라서 사용하는 방법만 익숙해진다면 괜찮을 것 같습니다.

나만의 MBTI 테스트 만들기 강의를 듣고 십이간지 연애유형 페이지를 만들었습니다. 강의를 진행하면서 작성한 코드는 GitHub에 남겨두었고, 어려웠던 부분을 다시 한 번 여기에 정리해 보려고 합니다.

   let pointArray = [
     { name: 'mouse', value: 0, key: 0 },
     { name: 'cow', value: 0, key: 1 },
     { name: 'tiger', value: 0, key: 2 },
     { name: 'rabbit', value: 0, key: 3 },
     { name: 'dragon', value: 0, key: 4 },
     { name: 'snake', value: 0, key: 5 },
     { name: 'horse', value: 0, key: 6 },
     { name: 'sheep', value: 0, key: 7 },
     { name: 'monkey', value: 0, key: 8 },
     { name: 'chick', value: 0, key: 9 },
     { name: 'dog', value: 0, key: 10 },
     { name: 'pig', value: 0, key: 11 }
   ]

   for (let i = 0; i < endPoint; i += 1) {
     const target = qnaList[i].a[select[i]];
     for (let j = 0; j < target.type.length; j += 1) {
       for (let k = 0; k < pointArray.length; k += 1) {
         if (target.type[j] === pointArray[k].name) {
           pointArray[k].value += 1;
         }
       }
     }
  	}

   let resultArray = pointArray.sort(function (a, b) {
     if (a.value > b.value) {
      return -1;
    } if (a.value < b.value) {
       return 1;
    }
      return 0;
  	});

  let resultword = resultArray[0].key;
  return resultword;
}

강의 후반엔 더 간단한 알고리즘으로 바뀌긴 했었지만, for문이 연속으로 3개가 나오는 로직을 작성했었습니다. 간단하게 설명을 하자면, endPoint는 질문의 개수입니다. 질문이 하나씩 지나갈 때마다, 답변을 하나씩 고르게 되고, 그 답변 안에 있는 동물 타입들을 가지고 와서 pointArray에 각 동물마다 value 값을 1씩 더해 주는 함수입니다. 그리고 value 값을 보고 가장 큰 순서대로 정렬을 해 줍니다. 그리고 value값이 가장 큰 index 0번 값을 반환합니다.

그리고 카카오톡으로 공유하기 API를 사용하였습니다. 해당 사이트에 들어가서 JS로 구현하는 것을 따라서 하면 되는데 강의랑 지금은 버전이 조금 바뀌어서 참고할 수 있는 사이트만 확인한 후 거의 스스로 구현해 보았습니다. 그리고 카카오톡으로 공유를 하게 되면 결과 페이지가 아니라 메인 페이지로 공유가 되기 때문에 공유하는 JS 파일에 내 결과 페이지가 공유되게끔 함수를 만들어 주었습니다. 그러면서 새로운 폴더에 결과값에 따른 페이지들을 하나씩 다 만들어 주었습니다.

function setShare () {
  const resultImg = document.querySelector('#resultImg');
  const resultAlt = resultImg.firstElementChild.alt;

  const shareTitle = '십이간지 연애유형 결과';
  const shareDes = infoList[resultAlt].name;
  const shareImage = `https://raw.githubusercontent.com/nani6765/MyMBTI/main/%235.%20Img%20Version/img/image-${resultAlt}.png`
  const shareURL = `https://profound-fenglisu-8cfc4f.netlify.app/page/result-${resultAlt}`

강사님이 const let var을 혼용해서 사용하셨는데 var을 사용하지 않고 코드를 짜려고 노력했고, 제 기준에서 다른 것으로 대체할 수 있을 것 같은 코드는 제가 생각한 방식대로 구현하려고 하였습니다. 결과물도 잘 작동하여서 만족한 강의였습니다.

그룹이 생기면서 패스트캠퍼스에서 제공 받았던 강의를 드디어 들어 보게 되었습니다. 예제를 통해서 JS를 사용하고, REACT에 대해서 배우는 강의인데 첫 번째는 버츄얼 키보드 만들기였습니다. HTML과 CSS는 기본적으로 제공이 되어서 그 부분에선 부담이 없었는데 webpack을 사용하여서 개발하고 빌드하는 방식이었습니다.webpack이 아직은 익숙하지 않아서 설정하는 것만으로도 꽤 시간이 걸렸고, class 함수를 사용하여서 JS를 작성하는 것이 아직은 익숙하지 않아서 작성하는 것에 꽤나 애를 먹었던 것 같습니다. 그리고 진행 중에 한국어 정규표현식이 제대로 먹지 않아서 고민을 하던 중 팀원을 통해서 해결할 수 있었습니다! 팀원 블로그 원인과 해결 방안까지 잘 제시해 주어서 따라서 할 수 있었습니다. 해당 강의를 듣고 정리한 자료는 GitHub에 30project 안에서 branch에 따라서 정리해 두었습니다.

다음 주부터 본격적인 진행을 할 것 같은데 그룹원들과 모던 자바스크립트 Deep Dive책으로 공부를 하기로 하였습니다.

4. 개인 학습 내용

그룹원들과 함께 진행할 모던 자바스크립트 Deep Dive를 사면서 예제 공부가 더 필요할 것 같아서 기초부터 완성까지, 프론트엔드 책을 구매하였습니다. e-book으로 구매한 거라 목차를 눌러 보면서 예제가 많나... 하고 봤더니 생각보다 없기도 하고, 눈에 확 보이는 코드들이 없어서 조금 당황하였지만... 이론을 공부한다는 마음으로 천천히 보고 있습니다. HTML이나 CSS에 대한 내용보다는 JS에 관련한 내용이 많아서 JS를 더 공부하는 데에 도움이 될 거라고 생각합니다.

5. 주간 회고

😍
이번 주는 다양한 강의들을 접하고 JS를 작성할 때 다양한 방법이 존재한다는 것을 알 수 있는 주가 아니었나 싶습니다. 강의를 듣다가 어? 이건 내가 먼저 해 볼 수 있겠는데? 하는 것들은 먼저 작성을 한 뒤 강의를 참고하여 코드를 고쳐가는 방식으로 진행하였습니다. 계속해서 이런 방식으로 진행하다 보면 코드를 사용하는 데에 더 익숙해질 것 같습니다. 그리고 HTML/CSS 과제 리뷰에서 긍정적인 평가를 해 주셔서 아주 기분이 좋습니다. :) 리뷰해 주신 내용을 토대로 살을 덧붙여 봐야겠습니다.

🤔
계속해서 lush 홈페이지 클론 코딩을 진행 중인데 swiper를 사용하면서 막히는 구간이 생겨서 계속 미루게 되는 점....

6. 다음 주 목표

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

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