[DAY 2] JavaScript 주요 문법 (1)

한 달간 중요한 것

데브코스 과정에서 한 달동안 중점적으로 익힐 내용은 기본기와 상식이다! 이런 부분들은 앞으로 공부할 때 점점 어려워지게 되므로 처음부터 잘 학습해두는 것이 좋은데, 효율적인 학습을 위해서 앞으로 가져야 할 태도가 있다!

1. 기본기와 상식을 탄탄하게 기르기
2. 정답을 찾는 과정을 즐기면서 고민을 오래 해보기
3. 내가 무엇을 잘하고 무엇을 못하는지에 대한 메타 인지를 명확하게 하기
4. 공부한 내용은 기록하고 공유하기
5. 잘 모르겠는 내용을 하루 이상 고민하게 될 것 같으면 두려워하지 말고 꼭 질문하기

자바스크립트의 역사

초기의 웹은 간단한 html 문서로 구성되었다. 그래서 동적으로 화면에 변화를 줘야 하는 기능을 구현할 수 없었는데, 프로그래밍 언어를 개발해서 브라우저에 내장하기로 결정했다. (Netscape)

자바스크립트의 초창기 이름은 Mocha 였는데, 이후에 LiveScript 변경하다가 당시 자바가 큰 유행을 얻고 있어서 마케팅 효과를 얻기 위해서 언어 이름을 JavaScript 로 변경했다.

초창기

자바스크립트가 등장한 초기에는 간단하게 DOM 요소를 조작한다거나, alert, confirm 과 같은 간단한 이벤트를 조작하는 일들을 주로 했었다.

현재

지금은 자바스크립트의 생태계가 많이 확장되어서 복잡한 UI/UX 를 다루는 웹 애플리케이션을 만든다거나, 모바일 앱을 만든다거나, 서버를 만든다거나 하는 다양한 역할을 하고 있다.

브라우저의 역할

브라우저는 크게 3가지의 역할을 한다.

1. 통신: 브라우저가 서버에 html css js 등의 파일에 대한 요청을 보내면 서버가 알맞은 응답을 한다.
2. 렌더링: 서버로부터 받은 응답으로부터 해석하면서 DOM Tree 와 CSSOM Tree 를 만들고 화면에 적절한 요소를 그린다.
3. 스크립트 실행: script 태그에 포함된 js 파일을 실행하면서 동적인 화면을 구성한다.
   DOM 요소를 조작하거나 일부 스타일을 조작하는 경우 reflow, repaint, composite 등의 과정이 발생하게 된다.

프론트엔드 개발자의 역할

프론트엔드 개발자의 기본적인 역할은 브라우저에서 동작하는 UI를 개발하는 것이다.
다만 프로덕트의 거의 마지막 부분을 담당하는 직군이므로 일정을 잘 조율하는 게 중요하고 다음과 같은 역량이 필요하다:

1. 커뮤니케이션: 여러 직군과 의사소통할 일이 많기때문에 관계가 원만하고 활발하게 커뮤니케이션 하는 것이 중요함.
2. UI: UI가 어떻게 구성이 되고, 어떻게 나타낼 것인지에 대한 이해가 필요함.
3. 네트워크와 보안: 네트워크와 보안에 대한 기본적인 지식을 갖춰야 함.
4. 브라우저: 브라우저 간의 호환성 문제를 고려하는 등 브라우저에 대한 이해가 필요함.
5. 디자인: 디자인을 어느 정도는 이해를 해야 디자이너가 놓친 점을 파악하고 의사소통할 수 있음.

주의사항

• 컴퓨터 과학적인 부분을 무시하는 태도는 좋지 않음.
• CSS 를 퍼블리셔가 하는 영역이라고 생각하고 소홀히 하는 태도는 좋지 않음.
• 단순히 라이브러리를 가져다가 기능을 구현할 줄만 아는 코더가 되는 것은 지양해야 함.

변수와 메모리

기존에 var, let, const 에 대한 포스트를 작성해둔 상태였는데 글을 더 정리하고 오늘 학습한 변수와 메모리에 대한 부분을 추가해서 새로운 포스트를 작성했습니다.

표현식과 문

• 표현식(Expression)
  어떠한 결과 값으로 평가되는 식이다.
  리터럴, 식별자, 연산자, 함수 호출 등의 조합으로 이루어질 수 있으며 값으로 평가될 수 있는 문(Statement)은 모두 표현식이다.
  ex) let num = 10;
• 문(Statement)
  프로그램을 구성하는 기본 단위이자 최소 실행 단위이다.
  문은 표현식일 수도 있고 아닐 수도 있다.
  ex) let num;

연산자

• 할당 연산자: 오른쪽의 표현식을 왼쪽의 피연산자 값에 할당하는 연산자.
  ex) =
• 산술 연산자: 두 피연산자의 값을 계산하는 연산자.
  ex) + - * / 등
• 비교 연산자: 왼쪽의 피연산자와 오른쪽의 피연산자를 비교하는 연산자.
  ex) ==
• 논리 연산자: 논리값을 통해 참과 거짓을 검증하는 연산자.
  ex) && || ! 등
• 삼항 연산자: 조건에 따라서 값을 선택하는 연산자.
  ex) 조건 ? 참일 때의 값 : 거짓일 때의 값
• 비트 연산자: 비트를 직접 조작하는 연산자.
  ex) & | ^ ~ << >> 등
• 관계 연산자: 객체에 속성이 조재하는지 확인하는 연산자.
  ex) 'name' in obj
• 타입 연산자: 피연산자의 타입을 반환하는 연산자.
  ex) typeof num

흐름 제어

조건이나 반복을 통해서 프로그램 실행의 흐름을 제어할 수 있다.

• Control Flow: goto, if-then-else, switch, for, while 등의 조건문이나 반복문
• Data Flow: Array.prototype.filter, Array.prototype.forEach 등의 함수형 프로그래밍 방식으로 구현이 가능한 메소드

배열

오늘 학습한 부분과 다른 자료를 함께 학습하여 새로운 포스트를 작성했습니다.

객체

기존에 작성해 둔 포스트가 있어서 복습 차원에서 다시 확인했습니다.

클로저

기존에 작성해 둔 포스트가 있었는데 오늘 배운 부분 중에서 활용 사례나 예상하지 못한 버그를 잡는 사례를 추가로 정리했습니다.

헷갈렸던 부분

메모리 심화 부분에서 왜 원시 타입은 스택 영역에 저장되고, 참조 타입은 힙 영역에 저장되는지 이해하기가 어려웠는데 동기님이 추천해주신 영상 을 두 번 보고 다시 강의를 확인하니 이해하기 수월해졌다!

원시 타입은 값이 불변하고 확보해야 할 메모리 공간이 명확하기 때문에 실제 값을 스택에 할당하고, 참조 타입은 값이 가변하고 필요한 메모리 공간이 가변적이기 때문에 실제 값을 힙 영역에 할당하는 것 이었다.

참고 자료

모던 자바스크립트 Deep Dive 5장 표현식과 문
[10분 테코톡] 📏 인치의 불변성