[자기계발] 혼공단10기 자바스크립트 1주차 (개요, 자료와 변수)

자기계발/혼공단

[자기계발] 혼공단10기 자바스크립트 1주차 (개요, 자료와 변수)

mylee99 2023. 7. 5. 13:36

취업 전부터 jQuery나 javaScript에는 유난히 자신이 없었다.
ajax도 지금은 많이 적응되었지만 최종 프로젝트 당시만 해도 얼마나 어려웠는지...
웹 개발자로서 javaScript는 피할 수 없는 존재기에, 확실히 내 것으로 만들고 싶어서 시작하게 되었다.

혼공단 10기 일정(자바스크립트)

1주차(7/3 - 7/9)
Chapter 01 ~ 02

Chapter 01. 자바스크립트 개요와 개발환경 설정

자바스크립트(JavaScript) : 웹 브라우저에서 사용하는 프로그래밍 언어.
(자바와는 완전히 다르고, 동적 웹 페이지와 데스크톱/모바일 애플리케이션 등을 개발하는 데 사용됨)

개발환경 세팅 : 텍스트 에디터(Visual Studio Code) + 코드 실행기(Google Chrome)

자바스크립트에서 자주 접하는 오류 :

Uncaught ReferenceError : OO is not defined
//OO 부분을 잘못 입력했을 때 발생
Uncaught Syntax Error : Invalid or unexpected token
//토큰(기호)을 잘못 입력했을 때 발생 - ex) 따옴표('')를 열었으나 닫지 않았을 경우
Uncaught Syntax Error : missing ) after argument list
//토큰(기호)을 잘못 입력했을 때 발생 - ex) 괄호(())를 열었으나 닫지 않았을 경우

Chapter 02. 자료와 변수

1. 기본 자료형
자료(data) : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것.
자료형(data type) : 자료 형태에 따라 나눠 놓은 것.
- 대표적인 자료형 : 숫자(number), 문자열(string), 불(boolean)

1) 문자열 자료형
(1) 이스케이프 문자 : \n(줄 바꿈), \t(탭), \\(\)
(2) 문자열 연산자 :
- 문자열 + 문자열 : 문자열을 연결하는 연산자
- 문자열[숫자(인덱스)] : 문자열 내부의 문자 하나를 선택하는 연산자
- 문자열.length : 문자열의 길이를 구하는 연산자
(3) 구문 오류

Uncaught SyntaxError : Unexpected identifier
//식별자가 예상하지 못한 위치에서 등장했을 때 발생

2) 숫자 자료형
- 연산자 : +(더하기), -(빼기), *(곱하기), /(나누기), %(나머지)

3) 불 자료형 - 참(true)과 거짓(false) 값의 표현
(1) 비교 연산자 : ===(양쪽이 같다), !==(양쪽이 다르다), >, <, >=, <=(문자열 자료형은 사전의 앞쪽에 있을수록 값이 작음)
* ===, !== 연산자는 '값과 자료형이 같은지'를 비교 vs ==, != 연산자는 '값이 같은지'를 비교
(2) 불 부정 연산자 : !(참을 거짓으로, 거짓을 참으로)
(3) 불 논리합/논리곱 연산자 : &&, ||

4) 자료형 검사
- 연산자 : typeof(자료) - ex)typeof(273) -> "number"

2. 상수와 변수
1) 상수 : '항상 같은 수'
(1) 선언 : const 이름 = 값
(2) 구문 오류

Identifier has already declared
//한 파일에서 같은 이름의 상수가 다시 선언되었을 때 발생
Missing initializer in const declaration
//상수를 선언하며 값을 지정해주지 않았을 때 발생
Assignment to constant variable
//선언된 상수의 자료를 변경하려고 할 때 발생

2) 변수 : '변할 수 있는 수'
(1) 선언 : let 이름 = 값
(2) 값 변경 : 변수 = 값
* var 키워드는 변수를 중복해서 선언할 수 있다는 위험성 등의 이유로 let 키워드가 등장하며 대체되었음.

3) 변수에 적용할 수 있는 연산자
(1) 복합 대입 연산자 : +=, -=, *=, /=, %=
(2) 증감 연산자 : 변수++, ++변수, 변수--, --변수

4) Undefined 자료형
- 상수와 변수로 선언하지 않은 식별자, 값이 없는 변수

3. 자료형 변환
* 함수를 실행하고 값을 남기는 것 : 리턴(return)
(1) 문자열 입력
- prompt(메시지 문자열, 기본 입력 문자열)
(2) 불 입력
- confirm(메시지 문자열)
(3) 다른 자료형을 숫자 자료형으로 변환하기
- Number(자료)
- 다른 문자가 있어서 숫자로 변환할 수 없는 경우 NaN 출력
(4) 다른 자료형을 문자 자료형으로 변환하기
- String(자료)
(5) 다른 자료형을 불 자료형으로 변환하기
- Boolean(자료)
(6) 논리 부정 연산자(!)를 사용해 자료형으로 변환하기

1주차 기본 미션

- p.54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기

<!DOCTYPE html>
<head>
    <title></title>
    <script>
        alert('Hello World')
    </script>
</head>
<body>
      
</body>
</html>

1주차 선택 미션

- Ch.01(01-1) 확인 문제 1번 상세하게 적고 인증하기
▶ 인터넷을 돌아다니면서 보았던 '쉽게 사용할 수 있고', '기능이 많다'고 느꼈던 웹 사이트를 5개 정도 적어보세요. (ex.유튜브, 페이스북, 디스코드, 노션 등)
1) 티스토리 : 개발 블로그를 시작하면서 벨로그, 네이버 블로그, 티스토리 3개를 비교했을 때 가장 UI가 깔끔하고 관리자 기능이 잘 되어있다고 생각해서 지금도 잘 사용 중이다.
2) GitHub : 개발자라면 누구나 접하는 대표적인 웹사이트가 아닐까! 소스 코드를 저장하고, 개발자들 간 협업에 최적화된 플랫폼.
3) ChatGPT : GPT의 등장은 혁명이다. 사용자에게 필요한 정보를 제공하는 데 있어 신속한 응답과 상호작용을 보여준다.
4) 구글 : Gmail, Youtube, 번역, Drive 등 다양한 서비스를 제공하는 구글은 이제 없어서는 안될 중요한 웹사이트라고 생각한다.
5) W3Schools : HTML, CSS, JavaScript 등의 웹 개발 기술을 공부하기 좋은, 정리가 잘 되어 있는 웹사이트.

Review

역시 아직 많이 부족함을 느낀다.
var와 let의 차이도 이제야 알았다는 게 제일 충격적..
이론을 알고 나니 업무 진행 시 확실히 자신감도 붙고 더 많은 걸 해낼 수 있을 것만 같다.
남은 6주차까지 화이팅 !

저작자표시 비영리 변경금지