패스트캠퍼스 챌린지 최종 후기

드디어 30일간의 패스트캠퍼스 챌린지가 끝났다. 아직 뒤에 못들은 부분은 앞으로도 열심히 듣기로 하고!!
사실 처음에 신청할 때 환급이 걸려있는 만큼 쉽게 완료할 수 있을거라고 생각했다. 글주변이 없어서 최종 후기 4천자 쓰는것만 어떻게 해내면 맨날 강의 듣고 포스팅 하는거야 잘 해낼 수 있지~~ㅋㅋ 라고 생각했는데 스스로를 너무 얕봤었다.. 처음엔 열심히 듣다가 어느샌가 부터 11시 다 되어서 부랴부랴 강의 듣고 포스팅한 적이 꽤 된다. 갈수록 하루에 듣는 강의량도 조금씩 줄고... 매일 공부하는 습관 들이려고 시작했다가 점점 게을러지는 스스로의 모습보고 자괴감도 조금 들었었다 ㅜㅜ 그래도 어찌저찌 한 달 간 해낸거 생각하니 뿌듯하기도 하고 앞으로의 동기부여도 된다!! 중간에 제주도로 2박 3일 여행갔는데 이거 포스팅 하느라고 노트북도 챙겨갔다. 짐도 많은데 노트북 들고 다니는거 무거워 죽겠고 혹시 깨질까봐 노심초사하고.. 친구 쉬는동안 강의듣고 정리하고.. 그래도 수고했어 나 자신 남은 강의도 화이팅해서 듣자^_^


나는 여러 강의 중에서 프론트엔드 강의를 신청했다. 내가 처음 코딩 배운지 1년 정도 되었나?? 민망하지만 난 아직도 진로에 대한 갈피를 잡지 못했다. 전공자들의 경우는 학교에서 여러 방면으로 배우고 프로젝트 하면서 이것저것 겪어보겠지만 비전공자인 나는 상대적으로 접해볼 수 있는 환경이 적으니까 뭐 프론트엔드 백엔드 게임 개발 등 여러 분야에서 어느것이 내 적성에 가장 잘 맞을지 알기가 어려웠다.. 그래서 그냥 조금씩 다 배워보고 정하기로 했다!! 그러던 중 패스트캠퍼스에 프론트엔드를 전반적으로 다루는 강의를 발견했는데 환급 챌린지를 하고있고.. 그래서 바로 결제해버렸다.

현재 나는 강의 초반부만 들은 상태라 30일 동안 HTML/CSS/JS 이렇게만 배웠다! 여기서 각각의 언어들은 모두 다른 역할을 가지는데 HTML은 웹의 구조, CSS는 시각적인 표현(정적), JS는 페이지를 동작시키는 동적 처리를 담당한다고 보면 된다. 참고로 뒤에 강의는 강사님이 다른지 잘 모르겠는데, 해당 파트 가르쳐주신 강사님 되게 잘 가르쳐주시더라. 엄청 매끄럽게 진행하시고 중요한 부분만 쏙쏙 뽑아서 잘 알려주신다. 다시 돌아와서, html css는 전에 다른 강의 들으면서 기초는 조오금 어느정도 아는 상태였고 JavaScript는 출력하는 console.log만 알고 나머지는 다 처음 배워보았다. 강의 들으면서 각각 언어들에 배웠던 내용을 정리해보자!!

HTML

우선 HTML은 앞서 설명했던 것처럼 웹의 구조를 담당하는 언어이다. 이제는 익숙하지만 <태그>내용</태그> 와 같은 구조로 작성하며 이렇게 태그와 내용을 포함해서 요소(Element)라고 부른다. 종료 태그가 시작 태그와 다른 점은 / 가 붙는다는 점! <태그><태그>내용</태그></태그> 와 같이 태그 안에 태그가 있는 형태는 부모와 자식 관계라고 보며, 상위(조상) 요소는 부모 요소를 포함한, 나를 감싸고 있는 모든 요소를 지칭하는 용어이며 하위(후손) 요소는 자식 요소를 포함한, 내가 감싸고 있는 모든 요소들을 지칭하는 용어이다.
meta, img 등 닫힌 태그가 없는 태그들은 빈 태그(empty tag)라고 부르며 <태그 속성="값"> 과 같이 속성과 값을 적용할 수 있다.
HTML에서 요소가 화면에 출력되는 특성은 인라인, 블록 2가지가 있다. 인라인 요소는 글자를 만들기 위한 요소들, 블록 요소는 상자(레이아웃)을 만들기 위한 요소들에 해당한다. 대표적인 인라인 요소로는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도로 <span> 이, 대표적인 블록 요소로는 마찬가지로 <div> 가 있다. 그 외에 <h1>~<h6>, <p>, <img src="" alt="">, <a href="" target=""> 등의 요소가 있다.
그리고 전역속성은 전체 영역에서 모두 사용할 수 있는 속성으로, body에서 사용하는 태그들의 전체 영역에서 언제든지 사용할 수 있다. 요소의 정보나 설명을 지정하는 title, 요소에 적용할 스타일을 지정하는 style, 요소를 지칭하는 중복 가능한 이름인 class, 요소를 지칭하는 고유한 이름인 id, 요소에 데이터를 지정하는 data-이름 속성들이 있다. 예시로 <태그 title=""></태그> 와 같이 속성을 넣어주면 된다.

CSS

CSS는 HTML의 기본 구조를 보기 좋게 꾸며주는 역할을 한다. CSS에서 중괄호 영역 앞쪽에 작성하는 부분을 HTML의 특정한 부분을 선택한다는 의미에서 선택자라고 부른다.
부모 요소 혹은 조상 요소로부터 적용된 스타일이 자식이나 하위 요소로 상속되어 적용되는 것을 css의 스타일 상속 이라고 하며, 값에 inherit을 넣어 실질적으로 상속되지 않는 css 내용도 강제적으로 상속시킬 수 있는 강제 상속도 존재한다.
선언방식으로는 크게 4가지가 있다. HTML의 HEAD 요소에 작성하는 내장 방식, <link /> 로 외부 CSS 문서를 가져와서 연결하는 링크 방식, 선택자 없이 요소의 style 속성에 직접 스타일을 작성하는 인라인 방식, CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 @import 방식이 있다. 여기서 내장 방식과 인라인 방식은 권장하지 않는 방식이라 배웠다!
선택자는 5가지로 나뉜다. 전체, 태그 선택자와 같은 기본 선택자, 기본 선택자를 조합해서 사용하는 복합 선택자, hover나 active처럼 동작을 나타내거나 형제 요소 중 첫번째, 마지막, n번째 요소를 선택하는 가상 클래스 선택자, 선택자 요소의 내부 앞 뒤에 내용을 삽입하는 가상 요소 선택자, 속성을 포함한 요소를 선택하는 속성 선택자가 있다. 그리고 선택자에는 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 css 속성을 우선 적용할지 결정하는 우선순위가 존재한다. 점수가 높은 선언이 우선되며, 같은 점수이면 마지막에 해석된 선언이 우선된다.
css 속성으로는 margin, border, padding, display 이나 글꼴과 관련된 font-style, font-weight, font-size, 문자와 관련된 color, text-align, text-decoration, 배경과 관련된 background-color, background-img, background-attachment 과 position, 1차원 레이아웃을 설정하는 flex, 요소의 전 상태와 후 상태의 중간 단계를 자연스럽게 만들어주는 전환효과를 설정하는 trasition, 2D나 3D 변환효과를 설정하는 transform 등등... 엄청나게 많았다. 익숙해지려면 계속 많이 많이 사용해보는 수 밖에 없겠다..

JS

페이지를 동작시키는 동적 처리를 담당하는 JavaScript. JS에서 표기법은 4가지로 구분할 수 있다. 단어 사이에 대쉬 기호(-)를 사용하는 dash-case(kebab-case) 표기법, 단어 사이에 언더바 기호(_)를 사용하는 snake_case 표기법, 첫 단어는 소문자로 시작하고 뒤 단어부터는 대문자로 시작하는 camelCase 표기법, camelCase와 비슷하지만 첫 단어를 포함해 단어들이 대문자로 시작하는 PascalCase 표기법. JS에서는 이 중에서 주로 camelCase를 사용한다고 했다!
JS에서는 0을 기반으로 번호를 매기는 Zero-based Numbering을 사용한다고 했다. 특수한 경우를 제외하고 자바스크립트는 1이 아니라 0부터 숫자를 시작한다.
그리고 JS는 HTML, CSS와 달리 도형이나 크기가 아니라 문자나 숫자와 같은 데이터로 사고하면서 학습해야한다고 배웠다. JS에서 사용하는 데이터의 종류로는 문자 데이터를 나타내는 String, 숫자 데이터를 나타내는 Number, 논리 데이터를 나타내는 Boolean, 값이 할당되지 않은 상태를 나타내는 Undefined, 값이 의도적으로 비어있음을 나타내는 Null(undefined와는 다르게 null 값을 직접 넣어줌!), 객체 데이터를 나타내는 object, 배열 데이터를 나타내는 Array가 있다.
변수는 데이터를 저장하고 참조하는 데이터의 이름을 의미한다. JS에서는 let , var나 const를 이용해 변수를 사용할 수 있지만 var는 권장사항이 아니고 let을 사용하면 재할당이 가능하며 const를 사용할 경우 재할당이 불가능하다고 했다! 그리고 함수를 선언할 때 이름이 있는 함수를 기명 함수, let world = function() { } 와 같이 이름이 없는 함수를 익명 함수라고 하며, 기명 함수처럼 function 다음에 이름을 명시하면 함수 선언이라고 하고 익명 함수처럼 이름 명시 없이 변수에 할당해서 사용하는 것은 함수 표현이라고 한다.
DOM API란 자바 스크립트에서 HTML을 제어하는 명령들, 메소드 체이닝이란 자바 스크립트에서 메소드를 체인처럼 연결해서 쓸 수 있는 기능을 의미한다. DOM API는 계속 사용하면서 연습해봐야겠다 ㅜㅜ

---

5일차에 강의 들으면서 codepen.io 사이트도 처음으로 사용해보았다. 기존에 작업하던 프로젝트에서 내용을 훼손하지 않고 새로운 내용을 테스트하고 싶은 경우, 아주 빠르게 코드를 실행하고 확인 해 볼 수 있는 사이트이다.

codepen.io 사이트 처음 사용

HTML 패널에서 작성하는 부분은 VS Code에서 body 부분에 작성하는 것과 같고 DOCTYPE과 같은 부가적인 내용들은 작성할 필요가 없으며, CSS와 JS 파일을 링크를 입력해 넣어줄 필요도 없다!! 각각의 언어들 옆에 톱니바퀴 설정을 누르면 전처리 기능들을 설정할 수 있다. 프론트엔드를 작업할 경우 유용하게 사용할 수 있을 것 같다!!



이번에 강의듣고 배우면서 오버워치 캐릭터 선택하는 간단한 예제 사이트까지 만들어봤다.

오버워치 사이트 만들면서 작성한 코드

강의 들으면서 여러가지 태그나 속성 배울 땐 충분히 이해하고 넘어갔다고 생각했는데, 당연한 말이지만 실제로 사이트를 만들어보니 생각과는 엄청 많이 달랐다. 강의 들으면서 어영부영 따라 만들긴 했는데 html 태그를 어떤 구조로 만들어야 할지, 어떤 부분의 코드를 먼저 작성해야 효율적으로 만들 수 있을지, css는 선택자를 어떤 순서로 작성하면 좋을지? 어떻게 작성해야 알아보기 쉬울까 등.. 정말 하나도 감이 안 잡혔다. 뭔가 만들어본 게 처음이니 당연히 그렇겠지만 흑흑,, 반복해서 많이 만들어보면 익숙해지겠지!! 경험을 쌓는것도 중요하니까.. 그래도 코드 하나씩 작성하면서 브라우저에 출력해보고 수정 수정 수정 수정 하면서 완성되어 가는 모습 보니까 쾌감이 있달까..
아래는 완성한 사이트!! 아직은 보고 따라하는게 전부지만 나중엔 혼자서 만들 수 있을 정도가 되어야지.

만들어본 오버워치 예제 사이트!!

지금은 스타벅스 예제 사이트 만들기 부분을 듣고 있다. 강의 초반에 사이트 봤을 때 이런걸 만들 수 있을까? 싶은 생각이 들었는데 어떻게 하나씩 배우다 보니 되긴 된다.. 하하 아직 헤더 부분 만드는거 밖에 안됐지만 열심히 따라하다 보면 완성 되겠지!! 얼른 완성한 모습을 보고싶다.

작성중인 스타벅스 예제 코드

30일이 긴 기간은 아니지만, 그래도 매일 강의 듣고 포스팅 하면서 공부 습관도 들이고 끝나고 보니 스스로 모습도 돌아보게 되고.. 꽤 의미있는 시간이었다고 생각한다. 여유가 된다면 들어보라고 추천하고 싶다. 그럼 남은 강의 들을 때까지도 화이팅이다!

---

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
https://bit.ly/3FVdhDa