[POSCO x Codingon] JS, 변수, 내장함수, 배열, 객체, DOM | 웹개발자 풀스택 과정 12기 2주차 회고 2

 

 

2주차 회고

 

 

 

저번 시간에 HTML, CSS 수업이 마무리 되고 자바스크립트에 대해 배우기 시작했다. 화면의 기능을 구성하는 언어로서 클론코딩을 통해 동작에 대해 이해하고 실습해보는 방식으로 수업이 진행됐다. 2주차에는 변수, 함수, 조건문, 반복문, 연산자, 배열, 객체, DOM 등에 대해 배웠고, 꽤 많은 내용은 배운만큼 중요한 내용은 섬세하게 정리한 후 넘어가려 한다.

 

 

---

 

 

1. JavaScript

: 주로 브라우저에서 사용하는 언어

• UTF-8 : 모든 언어를 다 표현할 수 있는 (인코딩할 수 있는) 코드표
• 자리수 하나를 bit(비트)라하고 8개의 비트가 모이면 8bits=1byte라고 한다. 글자하나를 표현할 수 있는 단위
• CPU=사무실(명령어 만들어냄), RAM=작업장(실제 작업 실행) => ex. k 라는 글자를 저장하시오(명령)→저장하려면 저장하는 주소 필요. (2진수) 주소를 만들어야함.→변수에 계산값, 결과값 저장(마찬가지로 주소 필요).

 

1. 랜더링 vs 파싱

 

• 랜더링(rendering) : html, css, js로 작성된 문서를 문법적으로 분석해 시각적으로 출력하는 것
• 파싱(parsing) : 해석하는 것, 텍스트 문서를 읽어 실행하기 위해 문자열 토큰으로 어휘 분석하고 문법적 의미, 구조를 반영해 트리구조의 파스트리를 생성하는 과정

 

---

 

 

2. 변수

 

• 식별자(identifier) : 값을 구별해 식별할 수 있는 고유 이름

 

• 변수 선언 ⭐⭐

변수 선언

• 네이밍 규칙

네이밍 규칙 퀴즈

 

네이밍 규칙에 대해 알아보기 위해 리더님께서 문제를 하나 내주셨다.

 

혹시나 이 블로그를 보고 계신 분들이 있다면 같이 문제를 풀어봐도 좋을 것 같다.

 

.

.

.

.

 

정답은...!

 

1번 $name만 올바른 이름으로 정의된 것이다.

2번은 변수 이름이 숫자로 시작할 수 없기때문에 잘못된 이름이다.

3번은 변수 이름에는 공백이 들어갈 수 없기 때문에 잘못되었고, 4번은 변수 이름을 설정하는 중간에 하이픈(-)은 사용할 수 없기 때문에 잘못된 이름이다.

마지막으로 5번은 키워드(예약어)로서 변수 이름으로는 사용할 수 없다.

 

 

---

 

 

3. 내장 함수

 

여러가지 함수에 대해 배우면서 자바스크립트에서 활용할 수 있는 내장 함수에 대해서도 배울 수 있었다.

 

내장 함수에 대해서는 배우지 않고는 잘 모르는 부분이 많기에 기억해두려 정리해보려고 한다.

• random() : 0~1사이 값을 임의로 추출하는 함수이다.

 

• 문자열 함수 : 문자열에 대해 특정 문자를 포함하는지, 특정 문자로 시작하거나 끝나는지, 몇번째에 존재하는지, 문자를 변경하는 등의 기능을 가능하게 해주는 함수이다.

 

 

---

 

 

3. 배열

 

⭐⭐⭐ => 중요!!

 

배열의 개념은 매우 중요한 개념이라고 리더님께서 강조해주셨다!!

수업을 들으면서도 내용에 여러가지 개념이 포함될 때 배열에서 헷갈리는 부분이 생겼었던 것 같아

정리를 하고 넘어가겠다..!

 

: 변수 vs 배열

=> 변수와 배열은 모두 값을 저장하는 역할을 하지만, 배열은 하나의 이름에 여러개의 값을 저장할 수 있다.

 

 

: 'for ~ in' 반복문 vs 'for ~ of' 반복문

• for ~ in 반복문 : 배열에서 Key 값에는 접근 가능하나 Value 값에 바로 접근할 수 없다. 반드시 '객체명[키값]' 형태를 통해 접근해야 한다.

for ~ in

• for ~ of 반복문 : 배열에서 Value 값에 바로 접근할 수 있다.

for ~ of

 

 

• 배열에 사용되는 메소드 : ⭐⭐ => 원본 배열도 변화하게 된다!

 

 

: 메소드를 사용하여 배열에 있는 문자들을 합치는 것도 가능하다!

=> split을 이용하여 문자열을 분리해 배열에 저장해주고, join을 이용해 분리된 문자들을 다시 합칠 수 있다.

 

split, join 실행 결과

 

 

 

728x90

 

---

 

 

4. 객체

 

: 자바스크립트를 이루는 거의 모든 것이 객체이다.

• 객체 : 우리가 인식할 수 있는 사물
• 속성 : 객체를 표현할 수 있는 것
• 메소드 : 객체가 할 수 있는 것

객체 예시

 

 

: 객체를 불러오기 위한 방법으로는 2가지가 있다.

=> dot(.) 사용, [ ] 사용

객체 호출 방법

 

 

• 객체를 선언하는 3가지 방법

=> object 객체를 이용한 방법, 리터럴, 함수를 통해 객체를 형성하는 방법이 있다.

 

객체 선언 방법

 

 

---

 

 

5. DOM

 

: 문서 객체 모델로 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다.

=> 계층적으로 구성된 HTML문서를 도식화하면 나무모양과 비슷해서 DOM트리라고 부른다고 한다!

 

• Document 요소 선택

 

• innerText : 공백은 하나만 인식, 공백까지 출력되지는 않는다. 태그를 문자로 인식한다.
• textContent : 공백이 몇개든 공백까지 그대로 출력된다.
• innerHTML : 태그를 문자가 아닌 태그 그대로 인식한다.

 

---

 

 

위와 같이 자바스크립트 개념을 배웠고 이를 활용하기 위해 실습도 진행했다.

 

배수와 홀수 찾기, 성적 구하는 프로그램 만들기, 형변환 실습, 함수 실습, if문 실습, 합계 구하기, 배열에 대한 실습을 해봤다.

 

JS 실습

 

 

 

특히 if문 실습에서 else 문장이 실행되지 않는 이슈가 있었는데 리더님의 피드백을 통해 수정할 수 있었다.

=> else문을 마지막 조건으로 주었는데 모든 조건에 포함되지 않는 경우도 있다는 것을 파악하지 못했었다. 따라서 피드백을 통해 모든 조건에 포함되지 않는 조건을 하나 더 추가해 줌으로서 코드를 수정해주었다!

 

if 문 실습

 

 

---

 

 

이렇게 2주차에 자바스크립트에 대해 변수, 객체, 배열, 함수, DOM 등에 대해 배웠다.
프론트엔드에서 기능을 만들어주기 위해 자바스크립트의 역할이 중요하다는 것을 느낄 수 있었다.
자바스크립트에서 간단한 코드로 경고창을 띄울 수도 있으며, 사용자에게 입력 값을 받는 등 여러 기능을 동적으로 추가할 수 있었다.

프로젝트를 하면서 자바스크립트를 사용해서 여러가지 기능을 적용해보았지만, 실제 코드에 대한 개념과 의미까지 세심하게 알 수 있어서 좋았다.
스크립트를 적용할 때 의미를 생각하며 기능을 더 효율적으로 적용할 수 있겠다고 생각했다.

Document 속성에서 innerHtml, innerText에 대해 배울 때, 태그를 적용하는 과정에서 이해가 안되는 부분이 있었지만 실습 결과를 통해 차이점을 바로 확인할 수 있었다.
클론코딩을 하면서 개념에 대한 결과를 눈으로 바로바로 확인할 수 있어서 이해하기 좋았고, 실습 과제를 통해 실제로 이해한 것이 맞는지 확인해볼 수 있었다.