11월 10일 학습 일지

11월 10일

오늘 공부에 투자한 순수한 시간: 5시간

학습한 개념 : 변수와 상수와 조건문 / 웹 브라우저 초안

<변수와 상수>

1. 이 이름이 붙은 이유

변수 - '변하는 수'라는 뜻으로 영어로는 variable(바뀔 수 있는 것)에서 넘어왔으며, 넣은 값을 나중에 바꿀 수 있는 상자이다

상수 - 상수는 변수의 반대로 '항상 같은 수'라는 뜻이며 영어로는 constant(일정한 것)이라는 뜻이다. 한 번 넣으면 바꿀 수 없는 상자이다.

코드로 보게 되면

let score = 10;

인데 이것은 변수의 예시이다. 여기서 한 글자씩 해석한다면

let - '~하게 하자'라는 뜻으로 변수 상자를 만들겠다는 뜻

score - 는 앞에서 사용 되었던 let의 상자 이름

= - 오른쪽에 있는 값을 왼쪽에 넣겠다는 뜻

10 - 오른쪽에 있는 let score에 넣어지는 숫자

; - 문장이 끝났다는것을 의미

종합하면 score라는 변하는 상자안에 10을 넣는다. 라는 뜻이고 let 즉 변수 명령어를 사용하니까 10은 언제든지 변할 수 있게 된다.

다음으로는

const name = "민수";

인데 이것은 상수의 예시이다. 이것도 한 글자씩 해석한다면

const - constant의 줄인말로 '변하지 않는 상자'를 만드는 것

name - 은 const로 만들어진 상자의 이름

= - 오른쪽에 있는 값을 왼쪽 상자에 넣겠다는 뜻

"민수" - 오른쪽에 있는 const 상자의 이름인 name을 뜻하고 const의 상자 안에 들어가니까 변하지 않는 이름

; - 문장이 끝났다는 것을 의미

종합하면 이름이 name인 변하지 않는 상자 안에 민수라는 이름을 넣는다. 라는 뜻이고 const가 들어갔으니 변하지 않는 것이다.

여기서 let score = 20; 으로 표현하게 되면 20으로 변하게 되지만 const name = "철수"; 는 민수에서 변할 수 없으니 오류가 발생하게 된다.

2. 언제 무엇을 쓸까?

기본적으로는 const로 만들고 나중에 값을 변경해야 할때만 let을 사용하는데 주로 스코어처럼 값이 계속 변하는 경우에는 let를 사용하고 사이트의 이름처럼 변경하지 않는 것들은 const로 만든다.

3. 다양한 예시

let score = 10;

score + 5

let를 사용했기 때문에 score는 언제든지 변할 수 있는 값이고 아래열에 score + 5가 나왔으니 결과적으로 15가 나오게 된다.

const name = "민수";

name + "님";

const를 사용했기 때문에 이름인 민수는 바뀌지 않는다. 하지만 밑에 name + 님이 붙었는데 이는 원래 변하지 않는 값 (민수)에 추가로 '님'을 붙인것이기 때문에 결과적으로 '민수님'이 된다. 상자 안에 값을 변하기 위해서는 = 가 필요한데 두번째 줄 (추가해주는 명령어)에는 = 가 붙지 않았으니까 결과적으로 상자가 변한것은 아니다. 그러나 만약 name = name + "님"; 으로 붙는것은 오른쪽 상자에서 직접적으로 name을 변화시키는 것이기 때문에 const(변하지 않는 값)를 사용한 부분에 문제가 생겨 오류가 나가 된다. 한마디로 직접적으로 변화를 주는 = 가 붙으면 오류가 생기고 예시에서는 = 없이 그저 name에 추가한 것이기 때문에 오류가 나지 않았던 것이다. 만약에 이어 붙인 값을 남기고 싶다면 const 뒤에 fullName을 사용해서 저장할 수 있다. 코드로 보게 되면

const fullName = name + "님"; 이 된다.

name을 변경한 것이 아닌 name은 그래도 '민수'이지만 fullName에는 '민수님'으로 저장된다. 직접적인 name은 변하지 않지만 새로운 상자를 만들어서 저장하는 것은 가능하다.

let isLogin = false;

isLogin = true;

이처럼 참/거짓을 나누는 것을 '불리언'이라고 하는데 이는 이 값을 연구한 수학자 조지 불의 이름에서 시작했다.

뜻은 true(켜짐)와 false(꺼짐)으로 나뉘어 불린다.

isLogin - 로그인했나를 물어보는 질문이며 is는 '~이다'라는 뜻으로 쓰인다.

false - 거짓이라는 값으로 '로그인을 하지 않았다'라고 기억한 것이다.

다시 천천히 해석하면 맨 처음 let이 붙었고 여기서 붙은 let은 '변하는 상자'를 만든다는 뜻이다. 뒤에 isLogin, 그리고 아래열에 똑같이 isLogin이 붙었으니 값이 둘 중 하나 즉 정답과 거짓이 나온다는 뜻이고 결과에 따라서 Login 부분이 달라진다는 뜻이다.

<조건문>

1. 이 이름이 붙은 이유

조건문은 '조건을 따저서 길을 나누는 문장'이다. 어떠한 상황을 두고 그 상황에 맞춰서 다른 행동을 하는 문장이라고 생각하면 된다.

코드로 확인해보면

let isHungry = true;

if (isHungry) {

console.log("밥 먹어요");

}

라는 문장이 있다. 이 코드의 뜻은 "배고프면 '밥 먹어요'를 출력해라"라는 뜻이다.

한줄씩 확인해보면

let - 값을 바꿀 수 있는 상자를 생성

isHungry - is (~이다) + Hungry(배고픈) 여기서 is는 처음에 시작하게 되면 질문형이 된다. 그래서 결론적으로는 배고픈가? 라는 질문 형태가 된다.

= true; - 여기서 '배고픈가?'라고 물어봤는데 결과값은 true로 나왔기 때문에 지금은 배고픈 상태를 말하는 것이다. 조금 더 풀어서 보면 배고픈가? -> 맞다 = 배고픈 상태이다. 라고 되는것이기 때문이다.

다음줄에 나오는

if - '만약 ~ 라면' 이라는 뜻이다.

(isHungry) - 소괄호 안이 조건이다. 소괄호 안에 있는 값이 true 면 조건에 맞는것이다.

{ } - 중괄호는 조건에 맞을 때 사용하는 코드를 묶는것이다.

console.log("밥 먹어요"); - 콘솔에 '밥 먹어요'를 출력하는 것이다.

이 코드도 조금씩 확인해보면

'값이 변할 수 있는 상자를 만들고 그 안에 배고픈 상태가 맞다는 것을 넣는다. 이 배고픈 상태는 언제든지 변할 수 있다. 만약에 값이 배고픈 상태라면 콘솔에 '밥 먹어요'를 출력하는 것이다.' 2열을 보면 완전한 공백이 있는데 이는 여기부터는 다른 내용이라는 것을 의미한다. 전체적은 틀인 배고픈 상태는 맞다는 것을 확실하게 두고 한줄을 띄어 다음 내용으로 넘어간 것이다. 또한 중괄호와 중괄호 사이에 내용을 적어 넣은 것은 개발자가 보기 더 쉽게 하기 위해서 만든것이다. 나중에 코드가 길어지면 어디서 부터 어디까지가 if의 영역인지 인지하기 쉽지 않기 때문에 넣은 것이다. 주의해야하는 띄어쓰기는

1. let isHungry - let와 isHungry는 띄어주어야 하는데 붙이게 되면 컴퓨터가 하나로 인지하게 된다.

2. isHungry는 띄어쓰기를 할 수 없다.

3. if (isHungry) - 여기는 if와 (isHungry)를 띄거나 붙이거나 크게 상관이 없다.

<반복문>

1. 이 이름이 붙은 이유

반복문은 '같은 일을 되풀이 하는 문장'이다. 영어로는 loop 라고 한다. 코드에서는 for 이라고 시작하는데 이는 '~동안'이라는 뜻이다. i가 이럴 동안 계속 되풀이하라는 뜻이다. 여기서 나오는 i는 index 라는 뜻으로 번호를 뜻한다.

코드로 확인해보면

for (let i = 0; i < 3; i++) {

console.log("안녕", i);

}

이 예시로 들어 볼 수 있는데

for - 지금부터 반복문을 사용한다고 알려주는 신호

(let i = 0; i < 3; i++) - let은 '변하는 박스' 이고 i는 0이라고 알려주고, 시작할때 딱 한 번 사용된다. ;이니 let에 대한 내용은 0까지가 끝인것이다. ;다음에 들어오는 i < 3 은 i는 3보다 작다 라는 뜻으로 참/거짓이라고 생각하면 쉽다. i가 3보다 작은가라는 질문에서 답은 true나 false로 나오게 된다. 이후에 또 ; 가 나오니 i는 3보다 작다는 내용이 끝이난것이다. 다음에 들어오는 i++는 1씩 숫자가 늘어난다는 뜻이다. 먼저 이 문장을 해결한다면 변하는 상자 안에 있는 i는 0이다. i는 3보다 작다. i는 1씩 증가한다. 라는 문장들이 들어있는 것이다. 다음에 들어오는 { 는 조건이 맞을때 사용하는 코드를 묶은 것임으로 위에 적용시켜보면 i가 3보다 작다는 내용이 맞을때 마다 사용 시키기 위한 내용을 담고 있는 것이다. { } 이 안에 console.log("안녕", i); 가 들어있는데 이는 콜솔에 안녕을 출력하라는 뜻이 된다. 그리고 여기서 나오는 쉼표는 출력할 것이 여려개일때 사용된다.

이 내용들을 토대로 풀어본다면

'지금부터 반복문을 시작할거야 (변하는 상자의 변할 값은 i이고 이는 0이다. i는 3보다 작다. i가 3보다 작은 것이 맞다면 +1 씩 더한다.) 만약 이 조건이 맞다면 콘솔에 이것을 출력한다. (안녕과 i (여기서 이야기 하는 i는 숫자 0으로 지정했기 때문에 변하는 숫자를 표시한다.))

이제 실제로 컴퓨터가 도는 순서를 살펴보면

1. i를 0으로 만든다

2. 0 < 3은 맞기 때문에 '안녕 0'을 출력하고 i++로 i는 1이 된다.

3. i가 실제로 1이 되었기 때문에 1 < 3으로 보여진다. 하지만 여전히 3보다 작기 때문에 '안녕 1'이 출력되고 +1 되어 2가 된다

4. i가 실제로 2가 되었는데 여전히 3보다 작기 때문에 '안녕 2'가 출력이 되고 +1이 되어 i는 3이 된다

5. i가 실제로 3이 되었는데 이번에는 3 < 3은 성립하지 않기 때문에 반복문이 마무리 된다.

웹 브라우저 만들기

웹 브라우저, 코드, LLM등 공부 할 수 있도록 하는 웹사이트 초안

목록에 보이는 내용들을 마우스를 올리면 확인할 수 있도록 하고 누르면 그 링크로 옮겨지는 웹 사이트

사전처럼 카테고리별로 나누고 카테고리에서 또 연결되도록 하이퍼링크를 계속 연결짓도록 하는것이 최종 목표

HTML

웹의 3요소 / 코딩공부 필수 / 언어 / LLM

웹의 3요소 - HTML, HTTP, URL

코딩 공부 필수 - HTML, CSS, JavaScript

언어 - C, C++, Java, JavaScript, Python

화면 가장 위쪽에 목록(일자바 목록)

마우스를 올리면 해당 항목의 목록을 보여줌 / onmouseover (마우스를 올렸을때 만들어지는 이벤트) 사용 / button으로 버튼 생성 - CSS에서 수정 예정

목록에 배치될 내용 배치 - 코딩위키 I 홈 배워야하는 이유 웹의 3요소 코딩 공부 필수 언어

홈화면 - onmouseover 이벤트 없음, 그냥 '홈 화면'으로 이동시켜주는 텍스트 / onclick 이벤트 발동

배워야하는 이유 - onmouseover 이벤트 구상중에는 없음, 그냥 '배워야하는 이유'로 이동시켜주는 텍스트 / onclick 이벤트 발동

웹의 3요소 - onmouseover 이벤트 추가 / 마우스를 올리면 HTML, HTTP, URL의 목록을 보여줌 / 목록을 클릭시 onclick 이벤트 발동 - 목록에 맞는 웹브라우저로 이동

코딩 공부 필수 - onmouseover 이벤트 추가 / 마우스를 올리면 HTML, CSS, JavaScript의 목록을 보여줌 / 목록을 클릭시 onclick 이벤트 발동 - 목록에 맞는 웹브라우저로 이동

언어 - onmouseover 이벤트 추가 / 마우스를 올리면 C, C++, Java, JavaScript, Python의 목록을 보여줌 / 목록을 클릭시 onclick 이벤트 발동 - 목록에 맞는 웹브라우저로 이동

목록중에 '코딩위키'를 제외하고 전부 우로 정렬

화면 위 목록 바로 아래 (제목 소개글)

큰 글씨의 제목과 내용과 소개 등 웹 브라우저에서 다루고 있는 내용을 담고 읽어볼 수 있도록 확인하는 텍스트

웹 브라우저 제목 - '코딩 위키'

웹 브라우저 위에 작은 소제목 - 'coding wiki'

웹 브라우저 설명 - '코딩 용어를 한 눈에 찾아보는 프로그래밍 사전' 웹 브라우저 제목 바로 아래

전체적으로 좌로 정렬 / 우측에는 이미지 배치

제목 소개글 바로 아래 (코딩을 배워야하는 이유)

내용 -

AI가 있는데 굳이 코딩을 왜 배워야 하는지 모르는 사람이 많은거 같아요. 저도 처음에는 코딩을 굳이 공부할 필요가 있느냐고 생각했어요. 왜냐면 AI에게 프롬프트를 잘 알려주면 알아서 만들어주니까요. 굳이 어려운 코딩을 배우지 않고 프롬프트만 공부하면 될거라고 생각을 한거죠. 하지만 그 AI가 어떻게 코딩을 짜는지 스스로가 모르면 지속적인 AI의 도움을 받아야 해요. 그렇게 지속적인 도움을 받고 웹 브라우저가 커지면 나중에는 AI에게 주도권을 뺏기면서 잘 못 된 부분을 직접적으로 해결하지 못하게 돼요. 그때는 이미 손을 쓰기 어려워진 이 후가 돼죠. 그리고 그것은 그저 눈에만 예쁘게 보이는 사이트일 뿐이예요. 실질적으로 아무도 사용할 수 없는 사이트가 되는거라고 생각해요. 코딩과 서버, 데이터베이스, 프론트엔드와 백엔드 등 기초부터 어떻게 진행되는지 조금씩이라도 눈에 익혀 두기 위해서 만든 사이트입니다.

AI 대화 내역 링크: https://claude.ai/share/e3410579-baa9-4aee-b4a1-38b4d130ad9b

웹 사이트 제작 대화 링크: https://claude.ai/share/7f43f633-5ffc-4d9e-a475-a2716a35dfd7

오늘 잘한 점: 개념을 이해할때 코드랑 같이 공부하는데 그럴때 마다 학습하고 예시로 나오는 예시 코드를 아무것도 안보고 코드만 보고 해석을 스스로 해봤다.

오늘 부족했던 점: 웹 브라우저의 전체적인 틀를 잡느라 시간을 많이 사용했다. 아직 수정할 곳이 많아서 빠른 마무리를 해야될거 같다.

오늘 총평: 최대한 코드를 이해하려고 노력하면서 스스로 해석을 해보고 스스로 해석이 가능해지니까 재미있었다. 웹 브라우저를 만들때 틀을 잡는데 너무 많은 시간을 사용한 듯하다. 그래도 HTML부분에서 어느 방향으로 나아가야할지 감은 잡아서 진행 속도만 올리면 될거 같다.