안녕하세요. 졸업을 위해 새로운 프로젝트를 시작했습니다. 다소 늦은 감이 있어서 졸업을 할 수 있을지는 모르겠지만,, 해 내야죠. 정처기 실기 2회차도 결과를 기다리는 중입니다. 이번엔 난이도가 쉬워서,, 붙길 기도중임미다,, 흑 그만 볼래,,

프로젝트 소개(아주 간단한)

• 교통약자를 위한 지하철 역사 안내 앱입니다.
• reactnative(RN)+expo, firebase 정도 사용할 예정입니다.

분명 학교를 4년 다녔는데 개발 능력은 1학년 때와 다르지 않아서,, 많이 해맬 예정이니 혹시라도 보고 답답하거나 정보가 있으시면 댓글로 조언 부탁드림미다.ㅜ

expo를 공식 안내를 보면서 따라하는 중입니다. https://docs.expo.dev/

expo 설치 명령어

npx create-expo-app@latest

설치 옵션 --template(설정안하면 기본으로 됨.)

--template default: 기본 템플릿, Expo CLI, Expo Router 라이브러리, TypeScript 구성 활성화 등 권장 도구가 포함
--blank: 최소한의 기능만 설치
--blank-typescript: ts만 활성화된 빈 템플릿
--tabs: expo router와 ts를 사용하여 파일기반 라우팅 설치 구성

설치 후 실행

cd 파일명

npx expo start

실행되면 QR 뜸 -> 휴대폰으로 찍으면 화면 실행 가능!

추가

파일 구조를 어떻게 구성하면 좋을 지 찾아보는 중입니다. react와 비슷할 거 같아서 rn을 선택했는데,,, 아직 많이 찾아봐야 할 것 같습니다ㅜ

... 진도: chater 05 ✅기본 숙제(필수): p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기

<script>
        function isLeapYear(year){
            return(year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0) 
        }
        const year = Number(prompt("연도를 입력하세요", "연도"))
        if(!isLeapYear(year)){ //if의 조건문이 true일 때 if문 실행.
            alert(`${year}년은 윤년이 아닙니다.`)
        } else {
            alert(`${year}년은 윤년입니다.`)
        }
 </script>

✅추가숙제(선택): p.240 확인문제 1번 풀고, 풀이과정 설명하기

1. filter 함수의 콜백 함수 부분을 채워서 1) 홀수만 추출 2) 100 이하의 수만 추출, 3) 5로 나눈 나머지가 0인 수만 추출해주세요. 그리고 코드의 실행 결과를 적어보세요.

   <script>
        let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]
        numbers = numbers.filter((value) => value % 2 !== 0)
        numbers = numbers.filter((value) => value <= 100)
        numbers = numbers.filter((value) => value % 5 === 0)
   
        console.log(numbers)
    </script>
   //실행 결과
   [25, 75]

   numbers에서 filter함수로 1~3번 조건을 만족하는 것만 추출, 화살표 함수를 활용해서 익명함수로 간단하게 만듦.

✅ 진도: chater 04 ✅ 기본숙제(필수): 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기 ✅ 추가 숙제(선택): p. 173 확인문제 3번 문제 풀고, 풀이 과정 설명하기

04-1. 배열

- 배열: 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형(여러 자료를 묶어 활용 가능)

const 배열명 = [요소, 요소, ... ,요소]

<script>
const array = [273, 'string', true, function( ) { }, {}, [273, 103]] 
//배열 안에 숫자, 문자열, boolean, 함수, 다른 배열,, 등을 넣을 수 있음.
</script>

- 배열 요소에 접근 하는 방법: 인덱스 활용

배열 [인덱스]

<script>
const numbers = [273, 52, 103, 32]
</script>
> numbers[0] //콘솔입력
273//출력
> numbers[1+1]
103

- 배열 요소 개수 확인 : length 속성 사용

배열.length

<script>
const fruits = ['배', '사과', '키위', '바나나']
</script>
> fruits.length //콘솔 입력
4 //콘솔 출력
>fruits[fruits.length - 1]
'바나나'

- 배열 뒷부분에 요소 추가

1. push() 메소드

   배열.push(요소)

<script>
const todos = ['혼공단', '동아리', '프젝', '정처기']
</script>
> todos.push('중국어 공부') //콘솔 입력
5 //push()메소드로 요소가 추가된 후의 요소 개수 출력됨.

2. 인덱스 사용

   <script>
   const apple = ['ipone', 'ipad', 'appleWatch']
   </script>
   > apple[apple.length] = 'airpod'//배열의 마지막 위치에 추가
   > apple[10] = 'ipod' //특정 인덱스에 추가, apple[4]~[9]: empty

.. 🤔 배열.push()를 배우면서 두가지 궁금증이 생겨서 찾아봤새우 (제 정보가 틀렸다면,, 댓글 부탁함미다.)

1. 스택의 push와 배열의 push는 같은 건가,,? => push()의 기능 자체는 동일하지만 스택과 배열에 차이점이 있음

   • 스택은 LIFO 규칙을 따르는 데이터를 관리하는 자료 구조
   • 배열은 일반적인 데이터를 관리하는 자료구조 => 배열이 더 넓은 범위의 개념

2. const는 상수를 선언할 때 사용하는 명령어인데 const로 선언한 배열에 요소를 추가할 수 있는 이유가 무엇일까? => const: 변수 자체의 변경은 제한하지만, 객체 내부 요소의 변경은 허용함.(객체의 속성이나 요소 변경 허용) => const : 배열이 저장된 메모리 주소(참조)의 변경 막음. but, 내부 요소 변경 허용//주소 내의 값 변경은 허용함.

..

- 배열 요소 제거

1. 인덱스 기반 제거

• splice() : 접합 // 특정 인덱스부터 n개의 요소를 제거한 후 합침.

  배열.splice(인덱스, 제거할 요소의 개수)

<script>
const apple = ['ipone', 'ipad', 'appleWatch']

apple.splice(1,1)//'ipad'제거: 배열의 1번째 인덱스로부터 1개 요소를 제거
</script>

2. 값 기반 제거

• indexOf: 배열 내부의 특정 값의 위치를 찾음, 요소가 있을 경우 인덱스를 리턴하고 없을 경우 '-1' 리턴

> const 인덱스 = 배열.indexOf(요소) > 배열.splice(인덱스, 1)

<script>
const apple = ['ipone', 'ipad', 'appleWatch']
const index = apple.indexOf('ipad')//'ipad'의 인덱스: 1

apple.splice(index, 1)//'ipad'제거: 배열의 1번째 인덱스로부터 1개 요소를 제거
apple.indexOf('ipad')//-1 출력(ipad가 없으니까.)

</script>

+ 특정 문자열에서도 indexOf()메소드 사용 가능.

• 찾는 글자의 앞글자의 위치 인덱스를 출력

  <script>
  const apple = '원숭이 엉덩이는 빨개 빨가면 사과 사과는 맛있어'
  apple.indexOf('빨개')//9 출력, 띄어쓰기 주의
  

3. 배열 내부에서 특정 값을 가진 요소 모두 제거
- `filter()` 메소드 사용

``` JavaScript
<script>
const apple = ['원숭이', '엉덩이는', '빨개', '빨가면', '사과', '사과', '맛있어']
apple.filter((item)=> item !== '사과' )
// 출력: (5) ['원숭이', '엉덩이는', '빨개', '빨가면', '맛있어']

</script>

+ 콜백함수: 다른 함수의 인자로 전달되어 실행되는 함수
\- filter()가 배열의 각 요소를 순회하며 콜백함수 실행
\- 콜백 함수가 true를 반환하는 요소만 새로운 배열에 포함
\- filter()는 원본 배열의 변경이 아닌 새로운 배열의 반환임.

- 배열의 특정 위치에 요소 추가

배열.splice.(인덱스, 0, 요소) // 0: 아무것도 제거하지 않음, 요소: 추가하고 싶은 요소 입력

<script>
const apple = ['원숭이', '엉덩이는', '빨가면', '사과', '사과', '맛있어']
apple.splice(2, 0, '빨개') //2번째 인덱스에 빨개 추가

</script>

🌟splice()가 접합이라는 점을 잘 활용하기.

✅ 기본숙제(필수): 비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

자료의 비파괴적 처리와 파괴적 처리

연습문제

✅ 추가 숙제(선택): p. 173 확인문제 3번 문제 풀고, 풀이 과정 설명하기

3. 다음 표시된 함수들이 파괴적 처리를 하는지 비파괴적 처리를 하는지 구분해 맞는 것에 O 표시하세요.(형광펜하겠새우)

1) [파괴적 처리 / 비파괴적 처리]

> const strA = "사과, 배, 바나나, 귤"
undefined

> strA.split(",")
(4) ["사과", "배", "바나나", "귤" ]

> strA
"사과, 배, 바나나, 귤"

2) [ 파괴적 처리 / 비파괴적 처리]

> const arrayB = ["사과", "배", "바나나", "귤" ]
undefined

> arrayB.push("감")
5

> arrayB
(5)["사과", "배", "바나나", "귤", "감"]

3) [파괴적 처리 / 비파괴적 처리]

> const arrayC = [1, 2, 3, 4, 5]
undefined
> arrayC.map((x) => x * x)
(5) [1, 4, 9, 16, 25]

> arrayC
(5) [1, 2, 3, 4, 5]

4) [파괴적 처리 / 비파괴적 처리]

> const strD = " 여백이 포함된 메시지 "
undefined

> strD.trim()
"여백이 포함된 메시지"

>strD
" 여백이 포함된 메시지 "

04-2. 반복문

- for 반복문

1. for in 반복문

• 배열 요소를 하나하나 꺼내 특정 문장을 실행할 때 사용.
• 반복 변수에 배열이나 객체의 인덱스가 들어감.

for ( const 반복 변수 in 배열 또는 객체 ) {   문장 }

<script>
const todos = ['혼공', '중국어', '운동']
for (const i in todos) {
console.log(`${i}번째 할 일: ${todos[i]}`)
}
</script>
//출력
 0번째 할 일: 혼공
 1번째 할 일: 중국어
 2번째 할 일: 운동

+ for in 보단 for of나 for이 더 안정적임.

2. for of 반복문

• 반복변수에 요소의 값이 들어감.

  for ( const 반복 변수 of 배열 또는 객체 ) {   문장 }

  <script>
  const todos = ['혼공', '중국어', '운동']
  undefined
  for (const todo of todos) {
  console.log(`오늘의 할일: ${todo}`)    
  }
  </script>
  //출력
  오늘의 할일: 혼공
  오늘의 할일: 중국어
  오늘의 할일: 운동

  .. 🤔 위의 예제에서 인덱스와 값 모두 출력하는 방법은 없을까? (ex. 오늘의 할일: 1.운동) / 참고로 gpt한테 물어본거라 오류가 있다면 댓글 부탁드립니당,, 1) entries() 메소드 사용
• entries()는 [인덱스, 값] 형태의 배열을 반환해, 인덱스와 값 모두 받을 수 있음.

  <script>
  const todos = ['혼공', '중국어', '운동'];
  

for (const [index, todo] of todos.entries()) { console.log(오늘의 할일: ${index + 1}. ${todo}); }

2) `forEach` 활용
- 배열의 각 요소를 순회하면서 콜백 함수를 실행하는 메소드
- 중단이 필요하거나 비동기 코드가 있을 경우 for of가 더 적합함.
```Javascript
<script>
  todos.forEach((todo, index) => {
  console.log(`오늘의 할일: ${index + 1}. ${todo}`);
});
</script>

..

3. for 반복문

• 특정 횟수만큼 반복하고 싶을 때 사용함.

  for (let i = 0; i < 반복 횟수; i++){  문장 }

  <script>
  for (let i=0; i<3; i++){//0이상 3미만이면 반복
  console.log(`${i}번째 반복입니다.`)
  }
  </script>
  //출력
  0번째 반복입니다.
  1번째 반복입니다.
  2번째 반복입니다.

  .. 🤔for in, for of와 달리 for 반복문이 반복 변수를 let으로 선언하는 이유는?
• for in과 for of는 반복할 때마다 반복 변수를 새로 선언함. 즉, 기존의 변수에 재할당할 필요가 없음.(let을 쓸 수는 있지만, 안정성을 위해 const를 쓰는 게 좋음.)
• for 반복문은 반복 시 반복 변수에 값을 재할당하므로 let이어야 함.(i++하면 기존 i값에 더해진 값을 재할당.) ..

4. for 반복문 + 배열

• 배열의 length 속성(길이)만큼 반복을 돌리는 형태로 사용

  <script>
  const todos = ['혼공', '중국어', '운동']
  

for(let i=0; i < todos.length; i++){ console.log(${i}번째 할 일: ${todos[i]})} //출력 0번째 할 일: 혼공 1번째 할 일: 중국어 2번째 할 일: 운동

### - while 반복문
1. while 반복문
- 조건을 기반으로 사용하는 반복문이 필요할 때(if문과 유사함.)
- 불 표현식이 true이면 무한히 반복됨.
- 무한루프에 빠지지 않도록 조건을 거짓으로 만들 수 있는 내용이 있어야 함.(js는 무한 반복 사용 시 페이지 전체가 먹통이 될 수 있음.)
> while (<span style = "color:yellowgreen">불 표현식</span>){
<span style = "color:yellowgreen">&emsp;문장</span>
}
```Javascript
<script>
while(confirm("계속 진행하시겠새우?")){
    //사용자가 [확인]버튼을 클릭하면 true가 되어 계속 반복
    alert(`${i}번째 반복입니다.`)
    i++
}
</script>
//결과
confirm창의 확인을 누를 때마다 alert창의 숫자가 올라가며 반복됨.

2. while 반복문 + 배열

   <script>
   let i = 0
   const array = [1,2,3,4,5]
   

while (i < array.length) { console.log(${i}번째 요소: ${array[i]}) i++ } //출력 0번째 요소: 1 1번째 요소: 2 2번째 요소: 3 3번째 요소: 4 4번째 요소: 5

### - Keyword
1. break 키워드
- switch 조건문이나 반복문을 벗어날 때 사용
> while(true) {
}break
```Javascript
<script>
for (let i=0; true; i++){
    alert(i+'번째 반복문입니다.')

    //진행 여부 물어봄
    const isContinue = confirm('계속 하시겠새우?')
    if(!isContinue) {
        break
    }
}
//취소를 누르면 반복이 끝나며 프로그램 종료 뜸.
alert('프로그램 종료')
</script>

2. continue 키워드

• 반복문 안의 현재 반복 작업을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 수행.

  <script>
  let output = 0
  for(let i=0; i<=10; i++){
    if(i%2===1){
        continue
    }
    output+=1
  }
  alert(output)
  </script>
  //출력
  6

  - 중첩 반복문

• 반복문을 여러 겹 중첩해 사용하는 것
• n차원 처리를 할 때 주로 사용(ex. n차원 배열)

<script>
for(i=0; i<10; i++){
    for(j=0; j<i; j++){
        output += "*"
    }
    output += "\n"
}
console.log(output)
</script>
//출력
*
**
***
****
*****
******
*******
********
*********

공부법이라고 적어놨지만 저도 처음이라 우선 계획 설명 정도에 그칠 것 같습니다. 혹시라도 합격하게 된다면 앞에 합격을 붙일 예정입니다.

🕛시험 일정: 2025.02.27 12:40

1월에 공부할 시간이 적어서 2월 말로 신청했는데 실기 준비가 너무 촉박해질 것 같아서 조금 걱정이 되긴 하네용,,, 하지만 우선 필기 합격이 1차 목표이므로 약 1달 간 빡공 예정입니다.

공부 계획

1. 기출 풀기 - 맞추다 어플리케이션 이용 -> 선택 이유: 최신 기출과 해설을 간편하게 볼 수 있음. 2. 기출 분석 - 시나공 핵심 요약 -> 푼 문제의 개념을 확인하고, 오답을 체크하는 용 -> 추가적으로 필요한 개념은 검색하여 핵심 요약에 추가할 예정 3. 암기 - 수제비 구음 - 시나공 핵심요약에 정리한 내용

1, 2를 D-21까지 2회독 하고, 3은 D-20부터 병행할 예정입니다.

정처기 준비하시는 모든 분들,,, 꼭 1트에 같이 붙어용,, 호호 그리고 더 나은 방법이 있다면 추천 부탁드립니다!!

인생은 계획대로 되지 않는 법. 프로젝트랑 병행했더니 도저히 시간이 안나서 7일 남기고 친구한테 받은 이기적 기출집 풀고 들어갔습니다.

(이기적은 인터넷으로 모의고사를 풀어볼 수 있어서 좋았어요.)

• 하루에 3시간 정도 공부한 것 같고, 2-3일 남기고는 6시간 정도 공부했습니다.
• 기출 한 회차 풀고 모든 문제에서 모르는 개념있으면 오답 노트에 적어가면서 공부했습니다. tip,, 그냥 문제 많이 푸세요. 어차피 실기공부 다시 해야돼서 평균 60점만 넘기겠단 생각으로 빨리 많이 푸는 게 중요한 것 같습니당.

[ 2주차 : Chapter 03 ]

[ 과제 ]

✅ p. 139의 확인문제 3번 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행 결과 인증하기 (기본) ✅ p.152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡쳐하기 (선택)

03-1. if 조건문

• 조건문 : 조건에 따라 코드를 실행하거나 실행하지 않기 위해 사용하는 구문

  • 조건분기 : 조건에 따라 코드가 실행되는 흐름을 변경하는 것
  • 조건 : 불 자료형(비교연산자와 논리연산자를 활용해 만듦)

• if 조건문 : 가장 일반적인 조건문

  if ( 불 표현식 ) { 불 값이 참일 때 실행할 문장 }

  실행 결과 >> 오후입니다.

• else 구문 : if 조건문 뒤에 사용, if 조건문이 거짓일 경우 실행.

  if ( 불 표현식 ) { 불 값이 참일 때 실행할 문장 } else { 불 값이 거짓일 때 실행할 문장 }

  실행 결과 >> 오후입니다. 
  
  

• 중첩 조건문 : 조건문 안에 조건문을 중첩해서 사용

  if ( 불 표현식 1 ) { // 불1 값이 참일 때 실행할 문장  if ( 불 표현식 2 ) { 불2 값이 참일 때 실행할 문장  } else { 불2 값이 거짓일 때 실행할 문장  } } else { //불1 값이 거짓일 때 실행할 문장  if ( 불 표현식 3 ) { 불3 값이 참일 때 실행할 문장  } else { 불3 값이 거짓일 때 실행할 문장  } }

  실행 결과 >> 저녁밥 먹으새우.  

• if else if 조건문 : 중첩 조건문에서 중괄호 생략, 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용.

  if (불 표현식) {  문장 } else if (불 표현식) {  문장 } else if (불 표현식) {  문장 } else {  문장 }

  <script>
    //변수를 선언합니다.
    const date = new Date()
    const hour = date.getHours()
    //if else if 조건문
    if(hour < 11){
    alert('아침이새우')
    } else if (hour < 15){
    alert('점심이새우')
    }else{
    alert('저녁이새우')
    }
  </script>

  실행 결과 >> 저녁이새우.

  연습문제 (기본과제)

  3. 중첩 조건문은 2장에서 배운 논리 연산자를 적용해 하나의 if 조건문으로 만들 수 있습니다. 빈칸에 어떤 논리 연산자가 들어가야 할까요?

  if (x > 10) { if (x < 20) { console.log('조건에 맞습니다.') } }

  if ( x > 10 빈칸 x < 20) { console.log ('조건에 맞습니다.') }

  답: &&

  • 코드
  • 실행결과

03-2. switch 조건문과 짧은 조건문

• switch 조건문 : 특정 값의 조건을 비교할 때 주로 사용.

  switch (자료){ case 조건 A: break case 조건 B: break default: //default 생략 가능 break }

  <script>
      //변수를 선언합니다.
      const input = Number(prompt('숫자를 입력하세요.', '숫자'))
      //조건문
      switch (input % 2){
          case 0:
              alert('짝수입니다.')
              break
          case 1:
              alert('홀수입니다.')
              break
          default:
              alert('숫자가 아닙니다.')
              break
      }
    </script>

  실행결과>> 입력>16 / 결과>짝수입니다.

  • break : switch 조건문이나 반복문을 빠져나갈 때 사용. break 키워드를 만나면 break를 감싸고 있는 조건문이나 반복문의 실행을 중단하고 다음 코드 실행.

• 조건부 연산자 (=삼항 연산자)

  불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과

  <script>
      //변수를 선언합니다.
      const input = prompt('숫자를 입력해주세요.', '숫자')
      const num = Number(input)
  
      //조건문
      const result = (num >= 0) ? '0 이상의 숫자입니다':'0보다 작은 숫자입니다.'
      alert(result)
    </script>

  실행결과>> 입력 > -3 / 결과 > 0보다 작은 숫자입니다.

• 짧은 조건문 : 논리 연산자의 특성을 조건문으로 사용.

  • 논리합 연산자(||) : 좌변이 참이면 우변 실행 안함 불 표현식 || 불 표현식이 거짓일 때 실행할 문장

  true || console.log('실행될까요?')
  >>>true
  false || console.log('실행될까요?')
  >>> 실행될까요?

  • 논리곱 연산자(&&): 좌변이 거짓이면 우변 실행안함 결과가 거짓인 불 표현식 && 불표현식이 참일 때 실행할 문장 => 실행안함.

  누적예제(선택 과제)

• p.152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡쳐하기

• 코드

  

• 실행 화면

  

• split()을 활용해 효율적으로 코드짜기

  <script>
  const input = prompt('태어난 연도를 입력하새우', '')
  const year = Number(input)
  const animalArray = '원숭이, 닭, 개, 돼지, 쥐, 소, 호랑이, 토끼, 용, 뱀, 말, 양'.split(',')
  
  alert(`${year}년에 태어났다면 ${animalArray[year%12]}띠입니다.`)
  </script>

• 문자열 '원숭이~양'을 ,로 나눠 배열로 만듦. 문자열A.split('문자열B'): 문자열 A를 문자열 B로 잘라 배열을 만드는 메소드

❇️ 틀린문제

• 다음 중 다른 실행 결과를 내는 코드를 고르세요. 1) true ? alert('출력 A') : alert('출력 B') 2) false ? alert('출력 B') : alert('출력 A') 3) true || alert('출력 A') 4) true && alert('출력 A)

  답: 4 해설 1) 삼항 연산자이므로 true인 경우 alert('출력 A') 실행 2) 삼항 연산자이므로 false인 경우 alert('출력 A') 실행 3) 논리합 연산자이므로 둘 중 하나만 참이어도 참, 앞에서 true가 나오면 더 이상 실행하지 않고 true로 결론 냄. 4) 논리곱 연산자이므로 둘 모두가 참이어야 참, 두 항 모두 확인해봐야 하므로 alert('출력 A)가 실행됨.

조건문이나 반복문은 어느 언어든 비슷한 것 같다는 생각이 들어요. 그래서 다양한 예제를 풀어보면 좋을 것 같습니당. 아쉬운 이번 주를 뒤로 하고 다음 주부터는 조금 부지런히 지내봐야겠어요.. 아 참고로,, 정처기 필기도 접수했답니다.. 호호 더더욱 열심히 해야 할 이유가 생겨서 행복해요 그럼 이번주도 아좌좌!🍤

자료형

• 자료형: 자료의 종류

  문자열 자료형

• 문자 표현 (js는 문자 한 개만을 나타나는 자료형 없음)
• 큰 따옴표(" ")와 작은 따옴표(' ') 사용

   console.log("This is 'sewoo'")
   > "This is 'sewoo'"

  이스케이프 문자 ( \ )

  • \ + 따옴표(") = 따옴표를 문자 그대로 사용 가능

• \n : 줄바꿈
• \t : tab
• \\ : 역슬래시

  console.log("This is \"string\"")
  > "This is "string""

• 문자열 연산자

1. 문자열 연결

• + : 문자열 연결 연산자

    console.log('가나다' + '라마' + '바사아')
    > "가나다라마바사아"

• 템플릿 문자열(백틱(``)과 ${...} 기호 사용)

    console.log(`15 + 2의 값은 ${15 + 2}이다.`)
    > "15 + 2의 값은 17이다."

2. 문자열[숫자]

    console.log('안녕하세요'[3])
    > "세"

숫자 자료형

• 숫자 표현

• 숫자 연산자

  • + : 더하기
  • - : 빼기
  • * : 곱하기
  • / : 나누기(몫)
  • % : 나머지 연산자

• 연산자 우선순위 고려

    console.log(5 + 3 * 2)
    > 11
    console.log((5 + 3) * 2)
    > 16

  boolean(불린) 자료형

• 참과 거짓 표현

• boolean 자료형

  • true : 참
  • false : 거짓
  • ! : 논리 부정 연산자 (참 -> 거짓 / 거짓 -> 참)

• 비교연산자

  • === : 양쪽이 같다.
  • !== : 양쪽이 다르다.
  • > : 왼쪽이 더 크다.
  • < : 오른쪽이 더 크다.
  • >= : 왼쪽이 더 크거나 같다.
  • <= : 오른쪽이 더 크거나 같다.

    console.log(52 > 273)
    > false
    console.log(52 < 273)
    > true

    • ==, != : 값이 같은지
    • ===, !== : 값과 자료형이 같은지

• 논리합 / 논리 곱 연산자

  • && : 논리곱 연산자(양쪽 모두 참일 때만 참) //그리고
  • || : 논리합 연산자(한 쪽만 참이어도 참) //또는

자료형 검사

• typeof 연산자

  typeof(자료) or typeof 자료

  typeof('문자열')
  >> "string" //문자열을 의미
  typeof 273
  >> "number" //숫자를 의미
  typeof (10) === 'number'
  >> true //문자열과 비교하여 자료형 확인 시 주로 사용 
  >```
  
  

02-2. 상수와 변수

상수

• 항상 같은 수 (선언 후 값 수정 불가)
• 상수 선언 : const 이름 = 값

변수

• 변할 수 있는 수 ( 선언 후 값 수정 가능 )
• 변수 선언 : let 이름 = 값

⚠️ var 이름 = 값 으로도 변수를 선언 할 수 있지만, 중복 선언의 위험성과 변수의 범위 문제로 let 으로 대체됨.

선언

• 상수 또는 변수를 생성하는 것

할당

• 상수 또는 변수에 값을 넣는 것

관련 연산자

• 복합 대입 연산자 ( 기존 변수의 값에 값을 연산함)

  • += : a += 1 (뜻: a = a + 1).
  • -= : a -= 1 (뜻: a = a - 1).
  • *= : a = 1 (뜻: a = a \ 1).
  • /= : a /= 1 (뜻: a = a / 1).
  • %= : a %= 1 (뜻: a = a % 1).

• 증감 연산자(기존 변수 값에 1을 연산함 -> 복합대입 간략하게 사용)
  • 변수 ++ : a++ (a에 1 더함 / 후위)
  • ++ 변수 : ++a (a에 1 더함 / 전위)
  • 변수 -- : a-- (a에 1 뺌 / 후위)
  • -- 변수 : --a (a에 1 뺌/ 전위)

후위 : 문장 실행 후 값을 연산하라

<script>    
let num = 5
alert(num++)//출력: 5
alert(num++)//출력: 6
alert(num++)//출력: 7
</script>

전위 : 문장 실행 전 값을 연산하라

<script>    
let num = 5
alert(++num)//출력: 6
alert(++num)//출력: 7
alert(++num)//출력: 8
</script>

• undefined 자료형 : 값이 없다는 것을 확인할 때 주로 사용 (선언 후 값을 할당 or 초기화하지 않았을 때.)

02-3. 자료형 변환

입력

• 문자열 입력 ( prompt(메시지 문자열, 기본 입력 문자열) )

  <script>
  const input = prompt('경고창에 뜰 내용을 입력하시오.', '_default')
  alert(input)
  </script>

  <input //prompt 함수 실행>

<alert 함수 실행 // input에 입력된 문자열의 내용 출력>

리턴: 함수를 실행한 후 값을 남김

• boolean 입력 (confirm(메시지 문자열))
  • 사용자의 답변에 따라 true or false 값 리턴함.

    <script>
    const input = confirm('수락하시겠습니까?')
    alert(input)
    </script>

    <확인 : true / 취소 : false // 선택에 따른 boolean 값 리턴>

🤔웹 페이지를 제작 시, confirm의 리턴값을 받아서 다음 동작을 지시할 때 활용할 수 있을 것 같다는,, 생각이,,,

자료형 변환

• 숫자 자료형으로 변환
  • Number(자료) : 함수를 사용하여 숫자 자료형으로 변환
  • NaN : 숫자로 변환할 수 없는 문자열의 경우 Not a Number 출력
• 문자열 자료형으로 변환
  • String(자료) : 함수를 사용하여 문자열 자료형으로 변환
  • 문자열 + '' : 문자열 + 빈 문자열 연산으로도 문자열 자료형으로 변환 할 수 있음.
• 불 자료형으로 변환
  • Boolean(자료) : 함수를 사용하여 불 자료형으로 변환
  • !! : 논리 부정 연산자를 2번 사용하여 불 자료형으로 변환할 수 있음 ⚠️ 대부분의 자료는 불 변환 시 true로 변환되지만, 5개의 자료형(0 / NaN / '...'또는 '빈문자열'/ null / undefined)은 false로 변환됨.

🤔연습문제를 다시 풀어보는 중에 궁금증이 하나 생겼습니다. js는 자동 형변환이 되는 데 왜 형변환을 해줘야 할까?

<script>
        const input = prompt('cm를 입력해주세요')
        const cm = input //const cm = Number(input)으로 쓰는 게 정석

        const inch = cm * 0.393701

        alert(`${cm}cm는 ${inch}inch입니다.`)
    </script>

그래서 gpt한테 물어봤습니다..(혹시 틀린 답이라면 알려주세요) => '자동 형변환이 되지만, 오류가 생길 수 있으니 초보자일수록 형변환하는 습관을 들여라,,,'

그렇게 2주 간 자바스크립트 공부를 하다가 기말고사가 왔고 어느순간 js공부를 잊고 있는 저를 발견했담미다. 그리하여 약간의 강제성과 내면의 J를 깨우기 위해 혼공학습단에 참여하게 되었슴미다.

#여기서 잠깐,, 새우의 새해 결심은 1. 공부습관만들기(매일1시간이상,,) 2.운동하기(주2회이상,,) 3. 자격증따기(졸업하자) 4. 재태크공부(취미생활임미다..) 여러분은용,,?

말이 너무 많았네용,, 첫 글이니 이해해주시길,,,

[ 1주차 : Chapter 01 ~ 02 ]

[ 과제 ]

✅ p. 54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기
✅ Ch.01(01-1) 확인 문제 1번 상세하게 적고 인증하기 (선택)

...

01-1. 자바스크립트의 활용

<자바스크립트란?>

• 웹브라우저에서 작동하는 프로그래밍 언어
• 웹 클라이언트, 서버(Node.js), 모바일(리액트 네이티브), 데스크톱(일렉트론), 데이터(NoSQL) 등의 분야에서 사용

<ECMAScript란?>

• 자바스크립트의 표준 명칭 but. 대부분 자바스크립트라고 함.
• 크롬, 파이어폭스와 같은 최신 브라우저는 최신 버전의 자바스크립트 문법을 지원함.(인터넷 익스플로러 제외🪦)

<웹 애플리케이션이란?>

• 기존의 웹 페이지보다 많은 기능을 구현한 웹 페이지(정적 -> 동적)

...

확인문제

1. 인터넷을 돌아다니면서 보았던 쉽게 사용할 수 있고, 기능이 많다고 느꼈던 웹 사이트를 5개 정도 적어보세요(✅선택 과제)

   1) notion 2) triple 3) youtube 4) discord 5) wishbucket

2. Statcounter에서 책을 보고 있는 현재 시점의 웹 브라우저 점유율(Browser Market Share Worldwide)을 확인해보세요. https://gs.statcounter.com/browser-market-share/desktop/south-korea

   

....

01-2. 개발환경 설치와 코드 실행

그래도,,, VScode는 있어서 실행만 했슴미다..😹(✅과제)

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

구글 크롬 개발자 도구 단축키: Ctrl + Shift + i

....

확인문제

1. 구글 크롬 개발자 도구의 콘솔을 실행하고 다음 명령을 입력했을 때 나오는 결과를 빈칸에 적어보세요. 코드를 하나 실행할 때 여러 줄의 출력이 나오는 경우 모두 적어주세요.

   1) "안녕하새우."

   '안녕하새우'

   2) console.log("안녕하새우.")

   안녕하새우

   3) "안녕하세요

   VM295:1 Uncaught ReferenceError: 안녕하세요 is not defined at :1:1

2. 비주얼 스튜디오 코드에 다음 소스 코드를 입력하고 ex01.html로 저장한 후 나오는 결과를 적어보세요.

   <body>
    <script>
      document.body.innerHTML = "<h1>안녕하세요</h1>"
    </script>
   </body>

   

....

01-3. 알아두어야 할 기본 용어

1. expression(표현식)
   • 자바스크립트에서 값을 만들어 내는 간단한 코드
2. statement(문장)
   • 하나 이상의 expression의 모임
   • 세미콜론(;) 또는 줄바꿈으로 문장의 종결 선언(혼용 가능)
   • statement의 모임 -> program,,
3. keyword(키워드)
   • 정해진 의미가 있는 단어
4. identifier(식별자)
   • 선언하여 사용하는 단어

     • 키워드를 사용하면 안 됨.
     • 숫자로 시작하면 안 됨.
     • 특수 문자는 _와 $만 허용
     • 공백 문자 포함할 수 없음.
     • 대문자 시작: 클래스/ 소문자 시작: 변수, 인스턴스, 함수, 메소드
     • 여러 단어로 이루어진 식별자는 두번째 단어부터 첫글자 대문자로(ex. i am a sewoo -> iAmASewoo)
     • 의미있는 단어로 만드는 게 좋음(a(x), number1(O))

5. comment(주석)
   • 코드 설명용, 프로그램에 영향 없음.
   1. HTML 태그 주석

      <!--주석-->

   2. 자바스크립트 주석

      // 주석 (한 줄만 주석처리할 때) /*주석*/ (여러 줄 주석 처리할 때)

....

확인문제

1. 다음 단어 중 식별자로 사용할 수 있는 것은 O표, 식별자로 사용할 수 없는 것은 X표 하세요.

   1) a (O)
   2) hello (O)
   3) 10times (X)
   4) _ (O)
   5) $ (O)

2. console.log()에서 conosole과 log는 무엇인가요?

   1) console: 식별자
   2) log: 식별자, 메소드

3. 여러 단어로 이루어진 식별자를 만드세요.

   1) we are the world => weAreTheWorld
   2) create output => createOutput
   3) create request => createRequest
   4) init server => initServer
   5) init matrix => initMatrix

4. 다음 코드를 입력해보고 어떤 오류가 뜨는지 확인해보세요.

   1) konsole.log('안녕하세요')
   => VM41:1 Uncaught ReferenceError: konsole is not defined
    at <anonymous>:1:1
   

2) +++ 1 ++ 2 + 3 => Uncaught SyntaxError: Invalid left-hand side expression in postfix operation

3) console.log) => Uncaught SyntaxError: Unexpected token ')'

---
  처음 써봐서 그런지 내용 요약이 아쉽네요. 더 간결하게 줄일 수 있을 것 같은데 흠,, 앞으로 써가면서 더 효율적으로 정리해봐야겠어요.

  구럼 여기서 마치도록 하겠슴미다. 읽어주셔서 감사하새우🍤 다들 아좌좌!
  ![](https://velog.velcdn.com/images/zzang_sera/post/c81fa891-75bc-43c5-b54c-e0fb5725c824/image.png)