[패스트 캠퍼스] MegaByte Shcool 프론트 엔드 3기 회고 - 5주차

당근 먹는 쿼카·2022년 10월 14일

MegabyteSchool 개발자취업부트캠프 국비지원교육 내일배움카드 메가바이트스쿨 패스트캠퍼스

회고록

목록 보기

6/38

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

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

1. 이번 주 목표

HTML/CSS 과제 진행하기
필수 강의 JS 부분 듣기
필수 강의 운영체제 부분 듣기
그룹 스터디 JS 공부하기
개발 블로그 작성하기

2. 커리큘럼 학습 내용

지난 수업에 이어서 박영웅 강사님의 JS 시간이 있었습니다. 들었던 내용 중에서 헷갈렸던 부분을 다시 정리해 보겠습니다.

const a = true
const b = false

if (a && b) {
  	console.log('참!')
} // 출력 X

console.log(a && b) // false

AND 연산자는 왼쪽에서부터 가장 먼저 만나는 거짓(Falsy) 데이터를 반환
거짓이 없으면 제일 마지막 (오른쪽) 참(Truthy) 데이터를 반환

const a = true
const b = false

if (a || b) {
  	console.log('하나 이상 참!')
} // 하나 이상 참!

console.log(a || b) // true

OR 연산자는 왼쪽에서부터 가장 먼저 만나는 참(Truthy) 데이터를 반환
참이 없으면 제일 마지막 (오른쪽) 거짓(Falsy) 데이터를 반환

Nullish 연산자 null과 undefined를 만났을 때 다음으로 넘어감

console.log(null ?? 1) // 1
console.log(undefined ?? 2) // 2
console.log(null ?? undefined) // null
console.log(null ?? 1 ?? 2) // 1
console.log(false ?? 1 ?? 2) // false

삼항(Ternary)

const a = 1

if (a < 2){
  console.log('truthy')
} else {
  console.log('falsy')
}

// 조건 ? 값1 : 값2
console.log(a < 2 ? 'truthy' : 'falsy')

// if문과 삼항문은 같은 뜻

호이스팅 (Hoisting) 선언부를 유효범위 최상위로 끌어올리는 현상
함수 선언문: 호이스팅 O
함수 표현식: 호이스팅 X

hello1()
hello2() // Error

function hello1() {
  console.log('Hello!')
}

const hello2 = function () {
  console.log('Hello!')
}

화살표 함수

// 함수 표현
const sum = function(a, b) {
	return a + b
}

// 화살표 함수
const sum = (a, b) => a + b

const log = function (c) {
  console.log(c)
}

const log = c => console.log(c)

const a = () => {} // 매개변수가 없을 경우
// const a = function () {}

const b = x => {} // 매개변수 1개는 소괄호 생략 가능
// const b = (x) => {}
// const b = function (x) {}

const c = (x, y) => {} // 매개변수가 없거가 2개 이상은 소괄호를 생략 불가
// const c = function (x, y) {}

const d = x => { return x * x } 
const e = x => x * x // 함수가 `return`으로 시작하면 `{}`와 `return` 생략 가능
// const de = function (x) { return x * x }

const f = x => { // 함수가 `return`으로 시작하지 않으면 생략 불가
  console.log(x * x)
  return x * x
}
// const f = function (x) {
//	console.log(x * x)
//	return x * x
// }

const g = () => { return { a: 1 } }
const h = () => ({ a: 1 }) // 객체 데이터는 `{}` 기호를 사용하기 때문에 소괄호로 묶어야 함

const i = () => { return [1, 2, 3] }
const j = () => [1, 2, 3]

온라인 강의로 parcel과 webpack에 대해서 배웠는데 webpack은 설치 후 추가적으로 할 것들과 기억할 게 많아서 github에 올리면서 README.md에 자세한 내용을 정리해 뒀다.

3. 그룹 스터디 학습 내용

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

저는 일단 HTML/CSS 과제를 끝내었고, 다른 팀원들은 아직 과제를 진행 중이라 저 개인적으로 JS 강의들을 들으면서 공부 중입니다. 부트캠프를 하기 전에 패스트캠퍼스에서 진행했던 기초 교육이 있었는데 그거 다 듣고 추가로 받았던 강의 중에 JS 강의가 있어서 듣기 시작했습니다.

해당 강의는 이 강의인데 parcel 사용하여 개발 서버를 열어서 진행을 하고, Hacker News API를 받아서 JS 코드를 작성하는 게 공부에 많이 도움이 될 것 같습니다. 사실 코드 내용 자체가 막 어렵거나 그렇지 않은데 API를 사용하는 게 아직 익숙하지 않아서 어려움이 있는 것 같습니다. 해당 강의를 들으면서 작성한 정리는 github 에서 볼 수 있습니다! 혹시나 참고하실 분들은 확인해 보세요. 몰랐던 부분들, 기억하고 싶은 부분들을 꼼꼼하게 README.md에 적어 뒀습니다.

4. 개인 학습 내용

그룹 스터디와 이어지는 내용입니다. 김민태 강사님의 강의를 들으면서 계속 console에 오류가 떴고, 이걸 해결하기 위해서 구글링을 하던 중에 parcel github 에서 해당 오류 내용을 찾을 수 있었습니다. 영어가 짧은 사람이라... 정확한 내용을 이해할 수는 없었지만 아마 강의의 parcel 버전과 현재 지금 parcel 버전이 안 맞아서... 일어나는 일이라고 생각을 했었는데 강의를 보면 강사님도 같은 오류가 계속 나는 걸 보면... 딱히 그런 이유는 또 아닌 것 같더라고요. 오류 내용은 newRequest undefined에 관한 내용이었고, parcel github에 있는 내용을 토대로 <script> 태그에서 type="module"을 지우니 간단하게 해결이 되었습니다.

계속해서 github에 작업물들을 commit 해 주고 있는데 vscode는 아직까지 main branch를 master라는 이름을 사용하고 있어서 충돌이 일어났습니다. 그때 오류 해결을 참고해서 해결을 했습니다.

그 후 HTML/CSS 과제를 제출하려고 하는데 또 저런 문제가 일어났습니다. 이번엔 main과 master의 문제가 아닌 main과 제 이름 branch가 변경된 사항이 없다며 Pull Request가 되지 않는 문제였는데요.... 위의 방법처럼 해결하자니 제 과제를 main으로 강제 merge가 될 것 같아서 어떻게 하지 발을 동동 굴리고 있었는데 구글링을 통해서 여러 글들을 보다가 git push origin +브랜치 이름 즉, +만 붙이면 된다는 글을 보게 됩니다! 그렇게 push를 하고 나니 Pull Request에 더 이상 그런 오류가 뜨지 않아서 안전하게 과제를 낼 수 있었습니다.

HTML/CSS 과제

현재는 CSS를 더 자세히 해 보고 싶어서 lush 홈페이지도 클론 코딩 진행 중입니다. lush 홈페이지는 여태 안 써 본 parcel과 scss로 코드를 작성 중인데 이렇게 진행하니까 또 새로운 것을 배우는 느낌이라 많이 헤매고 있는 것 같지만... 그래도 전에 했던 것들을 보면서 이번 주엔 메인 메뉴까지 완성을 했습니다.

5. 주간 회고

🥰
이번 주에 제일 잘한 점이라고 한다면, 오류 난 부분을 스스로 해결하려고 노력을 많이 했다는 점. 온라인 필수 강의를 다 들어서 새로운 강의들을 찾아서 공부를 시작한 점. 전에 블로그를 쓸 때나 처음엔 내가 배운 것을 스스로 정리하는 게 조금은 방대하게 느껴지기도 하고, 감이 안 잡혀서 정리를 못 했는데 이제는 조금이라도 그 내용들을 정리하려고 한다는 점. 그리고 lush 홈페이지 만들기 시작한 것!

😥
아쉬웠던 점은 운영체제 (온라인) 강의를 들을 때 도저히 집중이 안 돼서 딴 짓을 많이 했다는 것... 근데 들을 때마다 느끼는 거지만 프로세서 알고리즘을 이야기할 때 너무 똑같은 이야기를 반복하는 느낌이었다. 내가 아는 게 없어서 그렇게 느끼는 건지는 잘 모르겠지만.... 그리고 줌 실강 시간에도 온라인으로 들었던 내용을 또 듣는 거다 보니 조금 집중이 안 됐다. 그러면서 막상 강사님이 이건 뭐죠? 라고 질문을 하면 단어를 기억하지 못 해서 버벅거리는 게 조금 더 공부를 해야겠다고 느꼈다.