6기 이민규
6기 이민규2
1시간 전•

11월 11일 학습 일지

11월 11일 (xmind)

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

학습한 개념 : 함수, 클래스

<함수>

1. 이 이름이 붙은 이유

함수는 function(기능)이라는 영어 단어에서 나오게 되었다. '실질적으로 많이 사용하는 이름으로 묶어두고 필요할때만 꺼내 쓰는것'이라고 생각하면 된다.

코드로 보게 된다면

function sayHello(name) {

console.log("안녕하세요, " + name + "님");

}

sayHello("민수");

sayHello("철수");

코드는 이렇게 되게 된다.

첫째줄

function - 함수를 만든다는 시작을 알리는 신호

sayHello - 함수의 이름. a로 작성해도 되지만 개발자가 먼저 확인해서 더 빠르게 어떤 행동을 할려고 하는지 예측 할 수 있도록 함

(name) - 'sayHello' 즉 함수를 부르면 소괄호 안에 있는 name을 사용하는 것

{ - 'sayHello'를 불렀고 name을 불러야 할때 콘솔에 출력 될 내용을 설정할 중괄호를 시작

둘째줄

console.log("안녕하세요," + name + "님");

console.log - 콘솔에서 출력할 것 (괄호 안에 내용을)

("안녕하세요," - 콘솔에서 출력할 괄호의 여는 괄호와 안녕하세요, 라는 말이 출력할것. 큰따옴표가 붙는 이유는 온전히 자연어로 출력을 해서 보는이가 이해 할 수 있도록 하는 것.

+ name + "님"); - "안녕하세요,"와 추가로 출력할 내용을 넣은 것. name에서 출력을 자연어로 해야 하지만 이미 소괄호 안에 출력할 내용을 넣었기 때문에 큰 따옴표가 붙지 않아도 된다. 하지만 다음에 붙는 "님"은 온전한 자연어를 추가할려고 하는 것이기에 큰따옴표가 붙는다. 마지막으로 괄호를 닫고 ; 으로 대화 내용을 마무리 지음

sayHello("민수"); - sayHello를 했을때 안에 사용할 함수(name)를 넣은것이고 name 안에서 출력해야 하는 민수는 온전한 자연어이기 때문에 큰따옴표가 붙음

sayHello("철수"); - sayHello를 했을때 안에 사용할 함수(name)를 넣은것이고 name 안에서 출력해야 하는 철수는 온전한 자연어이기 때문에 큰따옴표가 붙음

코드를 나열하면

'함수는 지금부터 시작한다. 함수의 이름은 sayHello이고 함수가 사용되면 ( ) 안에 있는 이름을 사용해라 {

콘솔에 이렇게 출력해라 ("안녕하세요," + ( ) 안에 있는 함수 + "님"); -> (안녕하세요, ( )님)

}

sayHello(민수);

sayHello(철수);

결과적으로는 함수를 시작 시킬 이름 '민수'혹은 '철수'를 나타낸다면 그 이름에 맞춰서 '안녕하세요, 민수 or 철수님' 으로 출력이 된다

추가 코드

function sayHello(name) {

console.log("안녕하세요, " + name + "님");

if (name === "민수") {

console.log("오늘도 힘내세요!");

}

}

바로 해석해보면

'지금부터 함수를 시작한다 sayHello라는 상자 안에 담겨져 있는 (name)을 불렀을 경우

콘솔에 출력해라 (안녕하세요, (name)님); 만약에 (name이 민수)라면 콘솔에 출력해라 (오늘도 힘내세요!);

조금 더 풀어서 해석하면

2열까지는 동일하지만 뒤에 ; 가 붙었기 때문에 출력한 부분은 여기까지임을 알려주고 있다. 다음으로는 이전에 배운 조건문인 if가 들어가서 '만약에'라는 조건문을 선언하는 것이고, name 뒤에 ===가 있는데 =가 하나만 있을 경우에는 값에 관련된 이야기를 한다면(오른쪽 내용을 왼쪽에 대입 시켜라) === 처럼 3개가 있다면 동일하다/같다와 같은 이야기이기 때문에 코드처럼 (name === "민수")로 나오게 되면 '함수에서 만약에 이름이 민수라면 이 함수를 출력해라' 라는 뜻이 된다. 중괄호로 '민수가 나왔을때는 이 함수를 사용해라'라는 뜻으로 name에 민수가 나온다면 '오늘도 힘내세요!' 라는 코드가 출력된다.

<클래스>

1. 이 이름이 붙은 이유

클래스는 class이며 종류라는 뜻이다. 비슷한 코드끼리 묶어서 정보와 기능을 알려주는 명령어이다. 붕어빵 틀에 비유하면 붕어빵 틀 하나를 만들어두고 여러 물건을 여러개 만들어내는 것으로 생각하면 쉽다. 함수에 = 에 맞춰서 넘겨주는 것과 비슷하면서 조금 다른데 정보와 기능을 한 묶음으로 가져가는 점이 다르다. 설계도라고 생각하는것도 좋다.

이를 코드로 보게 되면

class User {

constructor(name) {

this.name = name;

}

sayHello() {

console.log("안녕하세요, " + this.name + "님");

}

}

const minsu = new User("민수");

const cheolsu = new User("철수");

minsu.sayHello();

cheolsu.sayHello();

바로 해석해보면

첫 문단

class - 설계도를 만든다는 신호

User - 설계도의 이름

{ - 설계도 내용 시작

constuctor - constuct는 '만들다'라는 뜻이고 -or은 '~하는 사람' 이라는 뜻으로 만든 사람 이름. 설계도로 하나를 만들때 마다 자동으로 한번씩 실행되는 준비 단계이다.

(name) - 주문서에 적는 칸이다. 그러나 이해를 돕기 위해 코드를 보면

const minsu = new User("민수");

이 코드에서 User 다음에 ("민수")가 나오니까 이것을 '만든 사람' 즉 constuctor의 값에 민수가 들어가게 되는것이다.

{ - 여기서 중괄호로 다시 열게 되는데 이는 내용을 담는 뜻이니까 class User의 중괄호는 아직 열려 있으니 전체적인 내용은 아직 담고 있는 중이고 다음에 두번째로 열린 중괄호는 다음 내용인 constuctor(name) 부분의 내용을 담는 부분을 열어 둔 것이다.

this.name = name; - 두번째 중괄호 안에 들어왔기 때문에 constuctor(name) 부분 안에 내용을 담는 것이고, '나의 이름 = 이름' 이라는 뜻인데 즉 위 코드로 이어서 예시를 들면

const minsu = new User("민수"); 부분에서 new User("민수")로 내용을 만들었고 이 내용이 constuctor(name) 부분 안으로 들어간 것이기 때문에 괄호 안에 들어가는 name은 민수가 된다. 이어서 해석하면 this.name = name 이 부분은 '나의 name칸에 받은 name을 넣어라'는 뜻이 된다. 결과적으로 나의 이름은 민수가 된다.

여기서 중요한 포인트가 있는데 this.name = name 부분에서 뒤에 오는 name은 임시 메모지이다. 그러니 명함의 이름 칸인 this.name에 넣어야 나중에 sayHello에서 읽을 수 있다.

둘째 문단

sayHello() { - 이 명함의 주인이 할 수 있는 일 하나를 sayHello라는 상자 안에 넣어둔다는 뜻이다. 중괄호를 열면서 내용이 시작된다.

console.log ("안녕하세요," + this.name + "님"); - 콘솔에 출력해라 (안녕하세요 + this.name 에서 받은 값 + 님);

} - 첫번째 중괄호가 닫혔으니 sayHello 부분의 내용은 끝이난다.

} - 두번째 중괄호가 닫혔으니 전체적인 class User 부분의 내용이 끝이 난다.

const minsu = new Usea("민수"); - const minsu은 찍은 명함을 'minsu'라는 상자에 넣으라는 뜻이고, new Usea("민수");는 새로 찍은 명함을 뜻하는데 조금 더 풀어서 보면 User이라는 틀로 새 명함을 만들고 이름은 '민수'다 라고 이해하면 되겠다.

const cheolsu = new Usea("철수"); cheolsu라는 상자에 넣어라. 오른쪽 값을

Usea의 틀로 새 명함을 만들고 그 이름은 '철수'이다.

세번째 문단

minsu.sayHello(); - 민수의 명함에 인사를 해라

cheolsu.sayHello(); - 철수의 명험에 인사를 해라

11월 11일 (코드 공부)

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

학습한 개념 : 코드 질문

<nav>

<span>코딩위키</span>

<button>홈</button>

<button>배워야하는 이유</button>

<div>

<button>웹의 3요소</button>

<div>

<button>HTML</button>

<button>HTTP</button>

<button>URL</button>

</div>

</div>

...

</nav>

<nav>

1. 이 이름이 붙은 이유

nav는 navigation(내비게이션)의 줄임말인데 사이트 안에서 원하는 곳으로 가게 해주는 가이드이다.

2. 무엇인가?

<nav>는 메뉴를 한곳에 모아두는 곳이다

3. 브라우저 안에서는 어떻게 보이나?

브라우저 안에서는 <nav>는 보이지 않는다. 대신 <nav>안에 있는 button 들이 보인다.

<span>코딩위키</span>

1. 이 이름이 붙은 이유

span은 '걸치다'라는 뜻이다. 글에서 일부만 묶어둔다.

2. 무엇인가?

위에서 설명한 <nav>는 메뉴들을 모두 묶어두는데 이 중에서 <span>은 일부만 따로 묶어두는 뜻이다. 이는 나중에 CSS에서 따로 꾸밀때 사용하려고 따로 묶어둔 태그이다.

3. 브라우저 안에서는 어떻게 보이나?

브라우저 안에서는 그냥 글씨로 보인다. 지금은 <span>코딩 위키</span> 라고 코드를 만들어 놨으니 브라우저 안에서는 '코딩 위키'만 보인다.

<button>홈</button>

1. 이름이 붙은 이유

button은 버튼이라는 뜻인데 태그로는 누르면 이벤트가 일어나게 하는 버튼을 만든다는 것이다,

2. 무엇인가?

직접 실제로 누를 수 있는 버튼을 생성한다. 지금은 <button>홈</button>이라고 만들어져있으니 '홈' 이라는 버튼을 만드는 것이다.

3. 브라우저 안에서 어떻게 보이나?

'홈'이라고 적힌 실제로 누를 수 있는 버튼이 보인다.

바깥 <div>

1. 이름이 붙은 이유

division의 줄임말로 '나눠진 칸'을 의미한다. 화면을 칸으로 나누는 상자라는 뜻이다.

2. 무엇인가?

실제로 보이는 화면이랑 나눠놓은거라고 생각하면 되는데 일반적으로는 평소에 보이지 않다가 구상했던 '웹의 3요소'에 onmouseover 같은 이벤트가 일어났을때 나타나게 해주는거라고 생각하면 된다. 한 묶음으로 만드는 글 상자이다.

3. 브라우저 안에서 어떻게 보이나?

실제로는 브라우저 안에서는 보이지 않는다.

<button>웹의 3요소</button>

1. 이름이 붙은 이유

button은 버튼이라는 뜻인데 태그로는 누르면 이벤트가 일어나게 하는 버튼을 만든다는 것이다,

2. 무엇인가?

직접 실제로 누를 수 있는 버튼을 생성한다. 지금은 <button>웹의 3요소</button>이라고 만들어져있으니 '웹의 3요소' 이라는 버튼을 만드는 것이다.

3. 브라우저 안에서 어떻게 보이나?

'웹의 3요소'이라고 적힌 실제로 누를 수 있는 버튼이 보인다.

안쪽<div>

1. 이름이 붙은 이유

division의 줄임말로 '나눠진 칸'을 의미한다. 화면을 칸으로 나누는 상자라는 뜻이다

2. 무엇인가?

웹의 3요소에서 보여줄 HTML, HTTP, URL 버튼을 담는 상자이다. 나중에 CSS가 숨겨주고, JS가 마우스를 올릴때 알려준다.

3. 브라우저 안에서 어떻게 보이나?

지금은 CSS로 가리거나 JS로 효과를 넣지 않았기 때문에 그대로 HTML, HTTP, URL이 버튼 상태로 보인다.

다음 코드

<section>

<div>

<small>coding wiki</small>

<h1>코딩 위키</h1>

<p>코딩 용어를 한 눈에 찾아보는 프로그래밍 사전</p>

</div>

<div>(이미지 자리)</div>

</section>

<section>

1. 이름이 붙은 이유

section은 구역이라는 뜻이다. 문서를 의미별로 나눈 한 구역을 뜻한다.

2. 무엇인가?

해당 내용을 하나로 묶는 역할을 한다고 보면 된다. 이번에 사용되는 역할은 '제목 소개글'의 구역을 나누는 것이다.

3. 브라우저 안에서 어떻게 보이나?

브라우저 안에서는 보이지 않고, 메뉴 아래에 새로 시작하는 구역을 만든것이고, 그 안에 들어가는 태그들은 '제목 소개글'안에 담기게 되는 내용들이다.

<div>

1. 이름이 붙은 이유

division의 줄임말로 '나눠진 칸'을 의미한다. 화면을 칸으로 나누는 상자라는 뜻이다.

2. 무엇인가?

실제로 보이는 화면이랑 나눠놓은거라고 생각하면 되는데 일반적으로는 평소에 보이지 않다가 구상했던 '웹의 3요소'에 onmouseover 같은 이벤트가 일어났을때 나타나게 해주는거라고 생각하면 된다. 한 묶음으로 만드는 글 상자이다.

3. 브라우저 안에서 어떻게 보이나?

실제로는 브라우저 안에서는 보이지 않는다.

<small>coding wiki</small>

1. 이름이 붙은 이유

small은 영어로 작다 라는 뜻이다. 내용 안에서 글씨를 작게 보이게 만들어주는 것이다.

2. 무엇인가?

제목 위에 만들게 될 소제목으로 사용이 된다. <small>과 <small> 사이에 coding wiki가 있으니 소제목은 coding wiki가 된다.

3. 브라우저 안에서 어떻게 보이나?

제목 위에 작은 글씨로 'coding wiki'로 보이게 된다

<h1>코딩 위키</h1>

1. 이름이 붙은 이유

heading의 줄임말이고 이는 제목을 뜻한다. h옆에 숫자 1은 가장 중요하다는 뜻인데 1~6까지 있고 1이 가장 중요한 숫자이고 뒤로 갈수록 덜 중요해진다.

2. 무엇인가?

페이지에서 사용 될 가장 중요한 태그이며, 보통 한 페이지에 한개씩 쓰인다.

3. 브라우저 안에서 어떻게 보이나?

브라우저 안에서 크고 굵은 글씨로 '코딩 위키'가 나온다. h1은 위아래에 기본 여백도 있어서 앞뒤줄과 조금 간격이 멀어진다.

<p>코딩 용어를 한 눈에 찾아보는 프로그래밍 사전<p1>

1. 이름이 붙은 이유

paragraph의 문단이라는 뜻의 줄임말이다.

2. 무엇인가?

글 한문단을 만들때 사용되는 태그이다. 보통 제목 밑에 설명하는 문장으로 사용될때 사용된다.

3. 브라우저 안에서 어떻게 보이나?

브라우저 안에서는 제목인 '코딩 위키'아래에 소제목으로 붙어서 나온다.

<div>(이미지 자리)</div>

1. 이름이 붙은 이유

division의 줄임말로 '나눠진 칸'을 의미한다. 화면을 칸으로 나누는 상자라는 뜻이다.

2. 무엇인가?

나중에 이미지를 넣을 자리이다. <div>로 먼저 화면과 분리되는 상자를 만들었고 그 안에 (이미지 자리)라고 이름을 붙였다. 위치를 알아보기 위해서 일단 붙여놓은 임시 이름 정도로 보면 된다.

3. 브라우저 안에서 어떻게 보이나?

지금은 그냥 (이미지 자리)라는 텍스트로만 보인다. 실제로 오른쪽으로 보내는건 CSS를 만들때 옮기게 된다.

</section>

이건 / 가 붙었고 맨 처음 열었어던 section을 닫는것이기 때문에 '제목 소개글'이라는 하나의 구역이 끝난다는것을 의미한다.

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

웹 사이트 제작 대화 링크: https://claude.ai/share/754d56ba-2b5a-4f10-a1d0-9c8fa107a11b

오늘 잘한 점: 함수나 코드를 직접 읽고 해석하며 공부했다. 단순하게 적고 사용법을 익히는 것보다 어디서 어떻게 쓰이는지까지 함께 공부하려 노력했다.

오늘 부족했던 점: 내용의 이해를 하기까지 조금씩 오래걸리게 되며, 실질적으로 어떻게 사용하고 어떻게 쓰이는지를 공부해도 이해가 어려운 부분이 생기기 시작했다

오늘 총평: 공부 방법이나 사용 방법 및 쓰이는 곳 등 최대한 이해하려 노력했지만 어려운 부분이 점점 생기고 있으며, 어렵더라도 최대한 노력해서 이해하려고 하지만 이해하는데 오래 걸리는 것 같다. 이전에 바이브코딩을 했을때는 질문을 잘한다고 생각했지만 실제로 질문에 관련해서 물어보는 것도 어렵다고 느꼈으며 더 겸손해지는 부분을 느꼈다. 여전히 직접 읽고 해석하려고 하며 공부하고 있으며 최대한 이해가 쉽도록 비유나 관련 코드도 질문하며 최대한 이해하려고 노력했다.

0
0

여기에 파일을 드롭하세요