WIL 03, 항해 2주차 이야기

Edwin·2023년 2월 26일

13기 JavaScript React WIL 스파르타코딩클럽 언어주간 항해99

스파르타코딩클럽-항해99-13기

목록 보기

16/22

항해99 2주자 이야기

01 항해99의 자기주도적 학습

1) 할말이 많은 자기주도학습

항해99를 소개하는 스파르타코딩클럽의 학습안내는 "자기주도적 학습"이라는 부분으로 귀결된다. 그러나 이 자기주도적 학습이 의미하는 바에 대해서 항해를 시작하기 전까지는 그 내막을 알지 못했다.

항해는 나날이 변화 중...

현재 13기를 나아가며 항해는 고정된 학습일정이 따로 존재하지 않는 것 같다. 이번 13기가 약간 심하였다. 월~토 주 100시간을 학습시키는 것이 목표라고 했지만, 출석도 퇴근도 사실 항해 측은 관심이 없다. 열심히 하는 사람이 많이 얻어가는 시스템이다. 어떤 면에서 이는 장점이기도 하다. 그 누구도 닦달하지 않기 때문이다.

그렇다면, 학습자료는 충분할까?

항해OT주차는 말그대로 항해99의 커리큘럼 밖의 영역이다. 스파르타코딩클럽의 대표 강의인 웹개발종합반을 사전에 수강했는지의 여부에 따라서 OT주간은 달라진다. 웹개발종합반을 들었다면 토이프로젝트를 만들 수 있는 기회를 부여받는다. 물론 어떤 맴버를 만나는지에 따라서 이 역시도 달라지지만, 그래도 공부한 욕망을 투영시킬 수 있다는 점에서 재미있는 한 주였다.

이어서 입학시험을 금요일에 보고 해당 요일은 쉼의 하루이다. 그리고 다음날 토요일이 되었을 때 사전에 공지되지 않은 무박 스파르톤(밤샘코딩)이 이번 13기에서 도입되었다. 이는 월요일부터 진행될 "기초언어주간"을 위한 교육과정이라고 설명하였다. 이때 만 해도 재미있었다. 무언가를 만들어 냈기 때문이다.

이후로 시작된 항해99의 본격적인 기초언어주간의 주일을 포함하여 11일의 기간 동안 항해의 커리큘럼은 이상적이었을까?

2) 논란의 기초언어주간 2주

기존에도 언어주간은 있었지만, 항해13기부터 도입된 언어주간은 그 기간을 크게 2주로 증가시켰다. 주말 무박 스파르톤을 한 이유가 언어주간의 확보 때문이었다는 것이 항해99의 설명이다. 그렇게 시작된 언어주간에서는 스프링을 선택한 사람들을 위한 자바와 노드와 리액트를 선택한 사람들을 위한 자바스크립트로 양분되어 학습이 진행되었다.

편차가 너무나도 심한 강의진

아쉽게도 스파르타코딩클럽의 정규커리큘럼은 존재하지 않았다. 오전 9시부터 오후 9시까지를 학습시간이라고 하고, 전달해준 내용은 웹페이지에서 다소 산만하게 정리된 자바스크립트 모음집이었다. 강의 동영상이 존재하느냐? 물론 그런 것도 존재하지 않았다. 그렇다고 강의라는 부분이 있을까? 저녁에 되서야 기술매니저가 진행하는 Zoom 시간이 있지만 그 시간도 1시간일 뿐더러(이때 기술매니저란 항해 소속이 아니라 항해에서 계약을 통해서 해당 주차에 참여한 현업 개발자), 기술매니저의 역량에 따라서 그 퀄리티는 극과 극에 달하는 것 같다.

항해99, 13기의 언어주차 기간 기술매니저

한마디로 본인의 실력은 어떠한지 모르겠지만, 내용을 전달하는 교수자로서는 심히 부족하신 분이셨다. 그렇다고 이분을 매도할 수는 없다. 이분의 교수법에 대해서 검증하지 못한 항해99의 오판이다.

항해99는 해당 매니저님이 이미 수차례 여러 기수의 매니저로 역임하셨다고 이야기 했지만, 이 부분에 있어서 수강생들에 대한 배려는 없었던 부분이었다. 한 마디로 자바스크립트 부분에 있어서 항해에서 야심차게 준비한 2주간의 언어주간이었지만, 정말 심각했다. 많은 수강생들의 마음의 열정을 잃어버리게 하기에 충분한 기간이었다.

3) 살기위한 그룹스터디

그렇다고 손 놓고 있을 것인가? 여기에서 항해99가 주창하는 "자기주도적 학습"이 빛을 바란다. 440여 만원을 지불하고 들어왔지만, 항해99에서 주는 자료나 강의가 없어서 살기위해 사람들이 모여들기 시작했다.

딱 한권의 교재 제공

440여 만원을 내고 들어온 항해99이지만 제공된 교재는 단 한 권 <코어자바스크립트> 뿐이었다. 그런데 제공 된 <코어자바스크립트>는 초보자가 보기에는 좋은 책은 아닌 것 같다. 많은 사람들의 후기를 보았을 때, 초심자에가 중급자로 넘어가기 전 어딘가에서 보는 책이라고 한다.

살기위한 내돈내산

440여 만원을 냈지만, 살기 위해서 나는 별도의 책을 구매해야 했다. <모던 자바스크립트 딥다이브>를 구매했고 해당 내용을 미친듯이 살펴보고 정리했다.

EDWIN벨로그, 배열과 메서드들

EDWIN벨로그, Date 객체

EDWIN벨로그, 숫자열 자료형

EDWIN벨로그, 프로토타입(1)

EDWIN벨로그, 프로토타입(2)

EDWIN벨로그, 클로저

EDWIN벨로그, 비동기프로그래밍

EDWIN벨로그, 실행컨텍스트

EDWIN벨로그, 노마드코더의 바닐라JS (1)

EDWIN벨로그, 노마드코더의 바닐라JS (2)

정리는 다하지 못했지만 바닐라JS 완강

생활코딩 자바스크립트 완강

코딩앙마 자바스크립트 완강

생활코딩 리액트 완강

항해99에서 제공해 주는 강의가 터무니 부족했기 때문에 혼자 공부한 내용들이다. 또한 언어주간에 주는 코딩테스트도 프로그래머스 문제들이고, 내용도 순차적인 것이 아니라 코딩테스트 레벨1의 문제들이 전달된다. 가르쳐주는 강의는 터무니없는데 코딩테스트 문제는 너무나 어렵다는 점이다. 이 역시도 모던자바스크립트 딥 다이브를 기반으로 하고 많은 구글링으로 해당 문제를 풀어나갔다.

EDWIN벨로그, 오늘의 코딩테스트 항해99 선별 level.1(최종복습장)

EDWIN벨로그, 오늘의 코딩테스트 한줄(복습)

EDWIN벨로그, 오늘의 코딩테스느 한줄 - 스파르타코딩클럽이 엄선한..

그러다 보니 TIL을 쓸 여력조차 없어졌다. 그냥 미친듯이 공부하고 미친듯이 정리한 한 주를 보냈다. 그리고 오늘에 와서 WIL을 쓰면서 한 주를 돌아보는 것이다.

2주차 공부시간은 116시간이었고,

3주차 공부시간은 88시간이었다.

2주간의 Apple 운동링

물론 모든 시간을 앉아만 있었던 것은 아니고 중간중간 운동을 다녀오기도 했지만 많은 시간을 앉아있었던 한 주였다.

항해를 시작하기 전 1월만 하더라도 매일 운동을 갔지만, 확실히 줄어들기는 했다. "그래도 건강은 잃어버리면 안되니까 새벽까지 달리면 되지"라는 생각에 나를 더 쏟아 붙였다.

02 항해99측과의 대화

01) 문제가 발생되었기에

항해99의 매니저님과 소통을 했다. 현재의 방치된 상황에서 살기위한 공부가 "자기주도적 학습"인지에 대해서 항해99측에 문의를 했다. 소비자의 입장에서 볼 때 440여 만원의 가치가 전혀 없었기 때문이다.

02) 대화를 통해 얻은 강의동영상

제공되지 않았던 강의, 이전 기수의 강의녹화본이 제공되었다. 제공되지 않았던 강의가 언어주간 10일이 지난 시점에서 제공되었다. 해당 강의를 보았을 때 화가 나기도 했지만 너무 좋았다. 이유는 최원장 튜터님의 강의 퀄리티가 너무나 상급이었기 때문이다. 이런 강의가 있었으면 진작 주었으면 사기가 꺽일 일도 없었을 텐데 말이다. 그리고 알았다. 항해99는 협업 프로젝트를 함께할 팀원을 잘 만나기도 해야 되지만, 해당 기수를 맡는 외부 튜터를 잘 만나는 일도 중요하다는 점 말이다. 편차가 너무 심했고, 심했다.

그래도 다행인 것은 강의가 좋았다.

그래서 언어주차가 마무리되는 수요일목요일(10일차~11일차)는 주어진 강의를 반복해서 듣고 또 들었다. 이해되지 않았던 개념들이 너무나 쏙쏙 들어왔고, 이해되지 않았던 자바스크립트에 대한 이해가 정리되었다. 물론 2주간의 기간동안 딥다이브를 정리하며, 개인적으로 노력한 부분이 있었기에 이는 더 효과적이었다.

화가 아닌 대화

분명 440여만원에 대한 가치가 없는 2주였기 때문에 화가 났다. 그러나 대화를 이쁘게 한 결과, 좋은 결과를 얻었다. 그리고 이는 주특기 주차 때도 이어나갔다.

원래는 없었던 강의같다. 그러나 강의안을 중심으로 이전 기수 때에 튜터님이 강의하신 내용이 있었던 것 같다. 날짜가 1월인 것으로보아 12기의 강의 내용으로 보여진다. 그리고 내용은 Component에 대해서, props에 대해서, Hook에 대해서 공부하기 좋은 시간이었다. 금요일 하루만에 5시간 짜리인 내용의 강의를 수강하고 바로 개인 과제를 만들어 나갔다.

4) 그럼에도 기술매니저님!!!

그럼에도 항해99의 좋은 면도 많다. 언어주간에 대한 깊은 화남이 있었지만, 매일매일 있는 기술매니저님과 조별 대화의 세션이 그것이다. 해당 공간을 잘 활용하면 기술매니저님의 알짜배기 정보들을 많이 습득할 수도 있고, 궁금했던 내용들을 질문하기에 너무나 좋기 때문이다.

또한 즉문즉답의 창구를 통해서 공부하다가 생겨난 질문들에 대해서 바로 피드백을 받을 수 있다는 점도 너무나 좋았다.

이번주의 해결못한 사례 : 할아버지컴포넌트에서 손자컴포넌트로 함수까지로 props 할 수 있을까?

버튼 제작을 맡은 최하위 손자컴포넌트에서 만든 버튼을 할아버지컴포넌트에서 동작하여 useState를 통해 정보를 수정삭제할 수 있을까?

해당과정에서 자료형을 이해하는 것이 얼마나 중요한 지를 깨닫게 되었다.

만약 onClick을 포함한 손자 컴포넌트를 할아버지 컴포넌트에서 함수를 동직시키려는 사고 자체가 틀린 것인지, 제가 어떤 부분을 실수 하고 있는지 질문드립니다. (컴포턴트 구성을 잘못한 것일까요?)

과제수행 중에 발생된 질문에 대해서, Notion

정답을 가르쳐주냐? "그건 아님"

그러나 정답을 가르쳐주시지는 않고 어시스트해주신다. 그럼에도 이번 어시스트는 너무나 적중했고, 문제를 풀어낼 수 있었다.

03 주특기 입문 1주차

1) ES5/ES6에 대해서

자바스크립트는 계속 발전 중

참고 : 루덴스의 티스토리

자바스크립트에는 표준(ECMASCRIPT)이라는 것이 존재한다. 물론 모든 회사가 최신 문법에 대한 표준을 따르는 것은 아니지만, 해를 거듭하며 등장되는 자바스크립트의 표준은 사용자에게 유용한 코드개발과정의 경험을 제공한다.

ES5 2009년
ES6 2015년...
ES13 2022년

그런데 왜 ES6일까?

ES5와 비교할 때 버전의 차이가 뚜렷하기 때문일 것이다. 그래서일까? 취업시장에서는 ES6 이상의 문법을 작성할 수 있는 개발자를 현재 선호하고 있다.

1. 더이상 var 말고 let(변수)와 const(상수)

2. 새로운 함수 표현식 const arrow = () => {}

3. 템플릿 리터럴, 복수의 줄 \n 말고 백틱(`)

4. 객체/배열 구조분해 할당 : EDWIN벨로그, 구조분해할당

4. 객체 리터럴

const name = 'jiyeong';
const role = 'frontend-developer';
const age = 'secret';

// ES6 이후
const person = {
  name,
  role,
  age,
};

// ES6 이전
var person = {
  name: name,
  role: role,
  age: age,
};

6. 전개구문(spread syntax) : EDWIN벨로그, 전개구문

7. 함수의 매개변수 초기값 설정의 간편성

// ES6 이후
function parameterDefault(a=0) {}

// ES6 이전
function parameterDefault(a) {
	cosnt a = 0;
}

2) 과제까지 다한 상태

그렇다면, 이제 무엇을 해야할까? 과제까지 완료했기에 끝난 것일까? 기술매니저님의 추천은 만든었던 것 10번은 만들어보세요라는 것이었다. 숙달 때문일 것이다. 과욕이 아니라 배운 것에 대한 숙달 그렇게 새롭게 만들어 가는 과정에서 조금씩 조금씩 살을 붙여나가려고 한다.

벨로퍼트, 멋진 투두리스트 만들기

예를 들어서 다른 사람은 어떻게 투두리스트를 만들었는지 살펴보는 것이다. 이를 통해서 나와 다른 사람은 어떻게 다른지 살펴보는 것도 좋은 공부방법이 될 것이기 때문이다.

3) onMouseOver, onMonseOut

...
//// onMouseOver에 따른 설정변화
function innerBtnHover() {
    // styles.border = `10px solid ${props.Color}`
    styles = {border:`5px solid ${props.Color}`, backgroundColor:`${props.Color}`, color:"white"}
    const newStyle = {...styles}
    setStyle(newStyle)
  }

//// 해당 컴포넌트 
function InnerBtn() {
    styles = {border:`2px solid ${props.Color}`}
    const newStyle = {...styles}
    setStyle(newStyle)
  }

  return (
    <button id={props.id} className='innerbtx' style={styles} onMouseOver={innerBtnHover} onMouseOut={innerBtn} onClick={props.onClickEvent}>{props.children}</button>
  )
}

마우스를 Hover 했을 때의 상황을 구현해 보고 싶었다. 그런데 문제는 색상 자체를 상위 컴포넌트에서 props로 받아온 상황에서 이를 별도의 css 파일로 분리해서 작업한다는 것은 현재의 시점에서는 어려운 일이었다.

그런 가운데 떠올린 우회로가 onMouseOver, onMonseOut를 이용한 useState Hook이었다.

4) 벨로퍼트의 리액트 라이브러리

import styled, {css} from 'styled-components'

벨로퍼트의 강의를 통해서 styled-components 라이브러리를 사용하여 코드를 세련되게 작성하는 방법에 대해서 공부했다. 내가 props로 가져온 상위컴포넌트의 내용을 onMouseOver, onMonseOut로 적용하는 것이 아니라 바로 JS 안에서 제어할 수 있는 부분에 대해서 말이다.

import styled, {css} from 'styled-components'

const CircleButton = styled.button`
  background: #38d9a9;
  &:hover {
    background: #63e6be;
  }
  &:active {
    background: #20c997;
  }`

하나의 컴포넌트 파일 내에서 별도의 css 파일분리를 하지 않고 작성하는 방법말이다.

태그 내에 직접 Style속성을 기록하여 보여지는 코드를 더럽게 하지도 않고, 마치 css 파일을 별도로 분리한 것과 같이 작성된다.

5) 다음주 한 주 간의 목표

이번에 만든 과제를 10번 정도 돌아보며, CSS의 position과 flex에 대해서 공부해보고자 한다. 그럼 다음 한 주도 열정을 다해서 나아가자!!

Edwin

신학전공자의 개발자 도전기!!

이전 포스트

WIL 02, 항해 1주차 이야기

다음 포스트