개발자를 희망하는 초보의 자기개발 이야기

[혼공스] 1주차 Chapter 01 ~ 02 본문

혼공학습단/혼공자스

[혼공스] 1주차 Chapter 01 ~ 02

클라우드아실 2025. 1. 10. 01:08
반응형

기본 미션

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

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      alert("Hello world");
    </script>
  </head>
  <body></body>
</html>

선택미션

Ch.01(01-1) 확인 문제 1번 상세하게 적고 인증하기

  1. 네이버 - 쇼핑, 블로그, 카페, 검색, vibe(음악), MYBOX 등.
  2. 다음 - 뉴스, 검색, 메일, 지도 등.
  3. 구글 - 검색, 이메일(Gmail), 지도(Google Maps), 클라우드 스토리지(Google Drive), 번역,
  4. 인스타그램 - 이미지 및 동영상 업로드 기능, 스토리 기능, 무한 스크롤링, 그리고 다양한 애니메이션 효과
  5. 페이스북 - 실시간 채팅, 알림 시스템, 동적 콘텐츠 로딩 기술

학습 기록

개발 환경 설치

  1. 자바스크립트 프로그래밍을 하려면 텍스트 편집기(VSCode)와 코드 실행기(웹 브라우저)가 필요하다.

코드 실행 방법

  • 콘솔에서 코드 한 줄씩 입력하고 실행하기
    • 크롬 브라우저에서 "about:blank" 페이지 열고 마우스 우클릭 > 검사(Ctrl + Shift + I) > 콘솔 탭에서 입력 후 실행
  • 파일에 코드를 작성하고 실행하기
    • Visual Studio Code에서 새 파일 생성, HTML 기본 템플릿 만든 뒤 JavaScript 코드 작성
      (1) [파일] → [새 파일(Ctrl+ N)]을 선택한다.
      (2) 곧바로 [파일] → [저장(Ctrl + S)]를 선택한다.
      (3) "파일_이름.html"라는 형태로 저장한다.
      (4) html:5 또는 ! 입력하고 엔터[또는 탭]
      (5) head 태그 안에 script 태그 생성
      (6) script 태그 안에 코드를 입력한다.
      (7) 코드를 모두 입력했다면 저장한다.
      (8) 크롬에 드래그앤드롭해서 실행한다.
<! DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      alert("안녕하세요"); 
    </script> 
  </head> 
  <body>
  </body> 
</html>

개발자 도구는 코드를 바로바로 입력하고 실행하는 인터랙티브한 방식 (REPL)이다.

  • REPL이란 Read Eval Print Loop의 줄임말로 읽고 + 실행(평가)하고 + 출력하는 것의 + 반복 이라는 뜻이다.
  • 편리하지만 기존 웹 페이지에서 실행시 영향을 줄 수 있어 about:blank 페이지를 사용한다.

오류 확인 방법

콘솔에서 오류 확인: 에러가 발생하면 바로 출력됨

파일로 작성할 때 오류 확인: 파일 실행 후 개발자 도구의 콘솔 탭에서 오류 확인 가능

자주 발생하는 오류:

  • ReferenceError : 단어 오탈자가 발생했을 때 출력한다.
  • SyntaxError: 괄호, 따옴표 등 문법을 잘못 사용했을 때 발생

Visual Studio Code 관련 이야기

  1. 개발 시 어두운 테마를 선호한다.
  2. 들여쓰기 방법: 일반적으로 2칸의 공백을 많이 사용한다. 코딩 컨벤션에 따라 유동적으로 결정하면 된다.

기본 용어

  1. 표현식(Expression):
    • 프로그래밍에서 의미 있는 단어나 구
    • 숫자, 연산자, 함수 호출 등 값이 만들어지는 모든 것은 표현식이다.
  2. 문장(Statement):
    • 코드를 실행하는 단위로 줄바꿈이나 세미콜론으로 구분한다.
  3. 키워드(Keyword):
    • 자바스크립트 언어에서 특별한 의미를 가진 단어들이다.
  4. 식별자(Identifier):
    • 프로그래밍에서 이름을 붙일 때 사용하는 단어이다.
    • 변수명, 함수명 등으로 사용한다.
    • 사용 불가 규칙 있음:
      • 키워드 사용 불가
      • 숫자로 시작 불가
      • 특수문자 제한
      • 공백 문자 포함 불가
    • 가독성 향상을 위해 'camelCase' 규칙 등이 사용된다.

주석과 출력

  1. 주석 작성 방법
HTML 주석: <!--  -->
자바스크립트 한 줄 주석: //
자바스크립트 여러 줄 주석: /* */
  1. 출력 방법
  • alert() 함수: 경고창 출력
  • console.log() 메서드: 콘솔에 출력
  1. 코드 읽는 방법
  • 주어-동사-목적어 구조로 생각하기
  • 명령문은 동사-목적어 구조

문자열과 숫자

문자열 만들기:

// 큰따옴표("") 또는 작은따옴표('')로 문자열을 만들 수 있음
"문자열"
'문자열'

// 문자열 안에 따옴표를 포함하고 싶다면 역슬래시\를 사용해 이스케이프 처리해야 함
let str = "문자열 안에 \"이렇게\" 포함할 것"

// 이스케이프 문자 - 문자 그대로의 표현이 아닌 다른 의미를 가지는 문자
\n(줄바꿈)
\\(역슬래시를 표현)
\t(탭)

문자열 처리:

// 문자열 연결 연산자(+): 두 문자열을 연결할 수 있음
"문자" + "열" => "문자열"

// 문자열 선택 연산: 대괄호[]로 문자열에서 특정 문자를 선택할 수 있음 (인덱스는 0부터 시작)
"문자열"[0] => "문"

// 문자열의 길이: length 속성
"문자열".length => 3

숫자 자료형:

  • 정수, 실수 구분 없이 모두 숫자 자료형으로 취급
  • 사칙연산(+, -, *, /)과 나머지 연산자(%)를 사용할 수 있음

숫자 자료형 관련 주의사항:

  • 컴퓨터의 한정된 자원으로 인해 실수 표현에 오차가 발생할 수 있음
  • 실수에 대한 나머지 연산은 오차 발생으로 거의 사용하지 않음

불(boolean)

참(true)과 거짓(false)을 나타내는 자료형이다. 

불 값을 숫자로 변환하면 true는 1, false는 0이 된다.

불 값으로 변환할 때는 대부분의 경우 true로 변환되지만, 0, '', null, undefined, NaN은 false로 변환된다.

불을 생성하는 방법:

// 직접 true 또는 false를 입력
let a = true;

// 비교 연산자(===, !==, >, >=, <, <=)를 사용하여 생성
console.log(1 < 2) // true

비교 연산자 사용 시 주의사항:

자바스크립트는 같다를 ===, 다르다를 !==로 나타낸다.

불의 활용:

  • 조건문(if-else)에서 사용되어 프로그램의 흐름을 제어
  • 회원가입, 로그인 등의 입력 검증에 활용
if (true) {
  console.log(진실); 
}

// 논리 부정 연산자(!): 불 값을 반대로 변경한다.
!(false) => true

불 연산

논리 연산자

  • 논리합(OR, ||): 적어도 하나가 true면 true
  • 논리곱(AND, &&): 모두가 true여야 true
  • 각 경우에 따른 결과는 총 8가지다.

논리 합 연산:

연산자: ||(또는)
논리합(OR, ||): 적어도 하나가 true면 true

true || true -> true
false || true -> true
true || true -> true
false || false -> false

논리 곱 연산:

연산자: &&(그리고)
논리곱(AND, &&): 모두가 true여야 true

true && true -> true
true && false false -> false
false && true - false -> false
false && false -> false -> false

비교 연산자와 논리 연산자 조합

연립 부등식(두 개 이상의 부등식을 묶어서 나타낸 것)의 경우 js는 좌측부터 우측으로 비교 연산을 진행하므로 오류가 발생한다.

-3 <= x < 2; 
// (-3 <= x)를 먼저 연산 후 true로 결과를 도출
// 이후 true < 2 로 연산. 
// true는 다시 1로 형변환되어 최종 결과는 true가 된다.

따라서 비교 연산자와 논리 연산자를 함께 사용해야 한다.

-3 <= x && x < 2

드 모르간의 법칙:

  • 논리 연산자 부정 시 변환 규칙으로 복잡한 조건을 쉽게 뒤집는데 유용하다.
  • 부등식은 반대로! 논리곱 논리합 교체!한다.
// 원래 코드
!(12 <= 현재_시 && 현재_시 <= 13)

// 드 모르간의 법칙 적용 후
(12 > 현재_시 || 현재_시 > 13)

자료형 검사:

  • typeof 연산자를 사용하면 어떤 자료형인지 확인할 수 있다.
  • 결과값은 문자열로 출력된다.
typeof 2; // 'number'

템플릿 문자열:

  • 연산의 결과를 문자열로 출력할 때 기존에는 연결 연산자(+)를 통해 출력했다.
  • 이를 편하게 처리하고 가독성을 높이고자 백틱(`)를 사용해 만든 것이 템플릿 문자열이다.
  • 달러 기호와 중괄호 {} 를 사용해 표현식을 삽입할 수 있다.
`17 + 23의 값은 ${17 + 23} 입니다.`;

상수와 변수 기본

상수(constant)와 변수(variable)의 개념 및 특징:

// 상수: 값이 변하지 않는 자료.
const a = 1;

// 변수: 값이 변할 수 있는 자료.
let a = 2; 
a = 3;

상수 선언 및 주의사항:

  • 상수는 한 번 선언하면 중복 선언할 수 없음.
  • 상수 선언 시 const 식별자 = 값 형태로 작성해야 함.
  • 선언한 상수 값은 변경할 수 없음.

변수 선언 및 주의사항:

  • 변수는 let 식별자 = 값 형태로 선언.
  • 변수는 언제든 값을 변경할 수 있음.
  • 동일한 이름의 변수를 중복 선언할 수 있으나, 파일 단위로는 중복 선언 불가.

기타 개념:

  • 변수/상수 '선언'은 식별자에 이름을 붙이는 것.
  • 변수/상수에 '할당'은 값을 넣는 것.
  • '초기화'는 처음으로 값을 할당하는 것.
  • let 식별자 = 오른쪽값 에서 '='을 기준으로 왼쪽은 '대입'하는 곳, 오른쪽은 '대입'되는 값.

상수와 변수 사용 시 고려사항:

  • 자바스크립트에서는 기본적으로 상수를 최대한 사용하고, 변경이 필요한 경우에만 변수 사용.
  • 프로그래밍 언어에 따라 상수/변수의 개념이나 사용법이 다를 수 있음.

연산자와 undefined

변수에 적용할 수 있는 연산자:

// 복합 대입 연산자
a += 100; 
a -= 100;

// 증감 연산자
a++; 
a--;
  • 복합 대입 연산자와 증감 연산자는 편리하게 코드를 작성할 수 있게 해줌

undefined 자료형:

  • 변수 선언 없이 사용한 경우
  • 값을 할당하지 않은 변수

자료형 변환:

기존 자료형을 다른 자료형으로 변환하는 것을 말한다.

// 결과는 문자열로 저장된다.
let a = prompt("원하는 숫자를 입력하세요")

// 계산이 쉽도록 숫자열로 형 변환
a = Number(a)

// 변환할 수 없는 문자열을 숫자로 변환하면 NaN(Not a Number)이 나온다.
let a = prompot("원하는 숫자를 입력하세요") // (ex. '안녕하세요')
a = Number(a) // NaN
반응형

'혼공학습단 > 혼공자스' 카테고리의 다른 글

[혼공스] 5주차 Chapter 06 객체  (0) 2025.02.13
[혼공스] 4주차 Chapter 05 함수  (0) 2025.02.05
[혼공스] 3주차 Chapter 04 반복문  (2) 2025.02.04
[혼공스] 2주차 Chapter 03 조건문  (0) 2025.01.22
혼공학습단 13기 선정  (0) 2025.01.06
'혼공학습단/혼공자스' Related Articles more