"첫 HA를 앞두고"
내일은 첫 HA 가 있는 날입니다. HA 는 Hiring Assessment 라고 해서, 지난 5주 간 공부한 내용을 확인할 수 있는 과제를 하루 동안 풀어 제출하는 날입니다. 사실 그동안 공부한 것들을 오늘 열심히 정리하고 복습했어야 했는데, 빠질 수 없는 가족 관련한 일이 있었던 탓에 아무것도 못한 채로 저녁이 되어버렸네요..
그래도 일단 이제까지 배운 내용을 복습하는 차원에서 통째로 정리해보려고 합니다. 그동안은 부족한 와중에도 여러 자료를 확인해 가급적 정확하게 적어보려 노력했는데요. 오늘만큼은 다른 자료를 참고하지 않고, 캘린더를 보며 개념 위주로 제가 배우고 이해한 바를 쭉 정리해볼까 합니다. 그럼 시작해보겠습니다.
variable : 변수의 선언과 초기화, 할당을 통해 데이터를 관리할 수 있다. let, const 로 선언할 수 있으며, 비유하자면 정보를 담는 그릇이라고 할 수 있다.
type : 자바스크립트는 데이터의 타입을 구분한다. typeof 를 이용해 데이터의 타입을 확인할 수 있으며, string(문자열), number(숫자), boolean(참,거짓으로 나뉘는 논리값), undefined(할당된 데이터가 없음), NaN(숫자가 아님), Object(객체) 등이 여기에 해당한다.
function : 함수는 입력을 받아 함수 내부의 계산을 처리해 결과값을 리턴한다. 선언식과 표현식, 화살표 함수 를 활용해 만들 수 있다.
conditional : 불리언을 도출하는 조건을 만들고, true/false 일 경우에 각각 작동하는 코드를 작성할 수 있다. 기본적으로는 if 와 else 를 활용하고, else if 를 이용할 경우 선행하는 조건을 만족하지 않았을 때의 조건을 계속해서 이어 만들 수 있다.
iteration : 특정한 조건에 따라 반복하며 코드를 실행한다. 가장 기본적인 구문은 for(초기문; 조건문; 증감문) 이며, 배열은 for(요소 of 배열), 객체는 for(속성 in 객체) 로도 실행할 수 있다. while 을 이용한 반복문도 있으며 이 경우, while 의 조건을 만족하는 한 계속해서 반복이 진행되기 때문에, 적절하게 break 를 활용해 반복문을 빠져나와야 한다.
HTML 기초 : HTML 은 웹개발에 있어서 구조를 담당하는 언어이다. 태그와 어트리뷰트가 주를 이루며, 일반적으로 태그는 여는 태그와 닫는 태그의 쌍으로 구성되나 일부 태그는 닫는 태그가 필요 없을 때도 있다.
CSS 기초 : CSS 는 웹의 비주얼을 담당한다. HTML 에서 작성한 구조를 기반으로 스타일링하게되며, 태그의 이름이나 id, class 등의 어트리뷰트에 지정한 이름을 활용한다.
CLI 기초 : 그래픽과 마우스를 이용해 사용하는 UI 가 아닌 텍스트와 명렁어를 사용하는 UI 이다. 입력하는 도구로 키보드만을 사용하기 때문에 직관성은 떨어지지만, 명령어를 잘 이해하고 활용하면 매우 강력한 성능을 자랑한다. 맥에서는 terminal 이 여기에 해당한다.
Git : 깃을 활용하면 코드의 변화를 기록하고 게임에서의 Load/Save 기능처럼 특정한 시점으로 되돌아가는 것이 가능하다. 여러 사람이 함께 코드를 작성하고 이를 병합할 수도 있기 때문에 협업을 위해 알아두어야 하는 중요한 시스템이라고 할 수 있다.
Array : 배열은 대괄호 [ ] 를 활용해 여러 개의 데이터를 저장할 수 있으며, index(자바스크립트에서 index 는 0 부터 시작) 로 접근이 가능하다. 여러 개의 정보를 담기 때문에 주로 반복문과 조합되고, 자바스크립트는 배열을 객체의 일종으로 분류하기 때문에, 배열인지를 확인하기 위해서 typeof 가 아닌 isArray 를 사용해야 한다.
Object : 객체는 중괄호 { } 를 활용해 여러 개의 데이터를 저장할 수 있으며, key 와 value 의 쌍으로 이루어진 속성으로 구성된다. 객체의 이름['key'] 또는 객체의 이름.key 를 활용해 내부의 속성 값에 접근할 수 있다. 숫자로 이루어진 index 를 갖는 배열과 달리, key 를 구분하여 지정할 수 있기 때문에 데이터의 특성에 따른 구분 및 활용이 가능하다.
Flexbox : CSS 의 정렬을 위해 반드시 알아야 하는 스킬이다. 부모 요소에 display: flexbox; 를 만들어주면 자녀 요소에 정렬 기능이 적용되며, justify-content, align-items, flex-direction 등이 있다.
Scope : 자바스크립트의 변수는 그것이 선언되는 위치에 따라 접근 가능한 범위가 지정된다. HTML 의 부모 자식 관계를 빌려와 이해한다면, 자식은 부모에서 선언한 변수에 접근 가능하지만 부모는 자식에서 선언한 변수에 접근이 불가능하다. 이는 자식의 범위에서 선언된 변수는 그 범위가 종료되면서 소멸하기 때문이다.
Closure : 앞서 스코프에서의 설명에도 불구하고, 중첩된 함수의 경우, 외부의 함수가 종료되고 나서도 내부의 함수에서 외부의 함수에서 선언된 변수에 접근이 가능한 경우가 있는데 이를 closure 라고 할 수 있다.
DOM : HTML 의 정보들을 객체처럼 인식해 접근하는 것으로, 자바스크립트를 이용한 HTML 의 변경을 가능하게 한다. 프로그램의 기본이라고 하는 CRUD 를 통해 HTML 의 구성요소들을 조작할 수 있기 때문에, 동적인 웹의 구성이 가능해진다.
고차함수 : 자바스크립트에서 함수는 일급객체이다. 함수는 변수에 할당이 가능하고 다른 함수의 인자로 전달 가능하며, 또한 함수의 결과로 리턴이 가능하다. map, filter, reduce 가 기초적이면서 자주 활용되는 고차함수의 예라고 할 수 있다.
React : 페이스북에서 개발한 자바스크립트 라이브러리(프레임워크가 아님) 로, 기능 중심의 코드 묶음으로 이루어진 Component 기반의 개발을 통해 효율적인 웹 구성이 가능하다. 리액트는 자바스크립트 내에서 HTML 의 태그와 그 요소들을 함께 활용하는 jsx 라는 문법을 제공하기 때문에, html 과 js 파일을 넘나들지 않고서도 조금 더 직관적으로 각 요소를 파악할 수 있다.
정리하고 보니 축약하여 간단하게 정리했는데도 불구하고 꽤나 많은 것들을 공부했다는 걸 알 수 있네요. 초반의 일정들은 그래도 파이썬이라는 언어를 공부하며 익혔던 개념들이 겹치는 부분이 있어 수월하게 풀어나갈 수 있었다면, 후반부의 일정들은 정말 아예 처음부터 새로 배우는 것들이었기 때문에 소화해내는 것이 벅찼던 것 같습니다. 실제로 지금도 뭐 이것들을 다 안다고 할 수는 없으니까요.
그럼에도 불구하고 5주 동안 정말 많이 배웠고, 성장해가고 있다는 걸 느끼게 됩니다. 총 정리를 작성하고 보니 5주 전의 나와 지금의 나는 비교가 불가능할 정도네요. 배운 것들을 잘 활용해 HA 를 순조롭게 통과하고, 다음 단계로 진행할 수 있었으면 좋겠습니다. 5주 동안의 노력을 믿어보도록 하겠습니다.
