뭐든지 할 수 있어

프로그래밍 구문의 시작 : 일반적으로 프로그램의 문법을 배우는 것부터 시작함

→ 문법을 잘 안다고 해서 외국어를 잘한다고 말할 수 없다

💡 그렇다면 어떻게 해야 외국어를 잘 한다고 할 수 있을까?

→ 외국어 화자의 말이나 문장을 정확히 이해한다

→ 문맥에 따른 적절한 어휘 선택을 해야한다

→ 순차적으로 결론을 향해 나아가는 문장 구성이 필요함

→ 문법에 맞는 문장을 구성하는 것은 언어의 역할을 충실히 수행할 수 없다

colorless green ideas sleep furiously

언어의 의미는 문맥에 있는 것이지 문법에 있는 것이 아니다.

cosnt number = "string"
conole.log(number + number)

자바스크립트의 변수에는 어떠한 타입의 값도 할당할 수 있다.

따라서 위 예제는 문법적으로 전혀 오류가 없지만, 의미적으로는 옳지 않다.

• Number라는 이름의 변수에 문자열이 할당되어 있기 때문.
• 저 이름을 가진 변수에는 숫자를 할당하는 것이 의미적으로 옳다

 💡 결국 문제 해결 능력을 통해 만들어낸 해결 방안은 프로그래밍 언어의 문법을 사용해 표현한다.

→ 즉, 작성된 코드는 해결 방안의 구체적 구현물 이다.

→ 프로그래밍 언어의 문법의 부합하는 것은 물론이고 수행하고자 하는 바를 정확히 수행하는 것,

→ 요구사항이 실현(문제가 해결)되어야 의미가 있다.

대부분의 프로그래밍 언어의 문법

• 변수의 값
• 키워드
• 연산자
• 표현식과 문
• 조건문과 반복문에 의한 흐름 제어
• 함수
• 자료구조 (객체, 배열)

프로그래밍 언어가 제공하는 문법을 적절히 사용한다 - 요구사항의 집합을 분석해서 적절한 자료구조와 함수의 집합으로 변환한 후 , 그 흐름을 제어하는 것.

2. 프로그래밍 언어

명령을 수행하는 주체 : 컴퓨터

→ 사람이 이해할 수 있는 자연어가 아닌 컴퓨터가 이해할 수 있는 언어, 즉 기계어 로 명령을 전달해야 함

→ 사람이 기계어를 이해해서 기계어로 직접 명령을 전달하는 것은 매우 어려운 일

→ 사람이 이해할 수 있는 약속된 구문(문법)으로 구성된 ‘프로그래밍 언어’를 사용

• 이 일종의 번역기를 컴파일러 혹은 인터프리터라고 한다.

console.log("hello world")

프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

이는 구문 과 의미 의 조합으로 표현된다.

1. 프로그래밍이란?

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

→ 먼저 무엇을 실행하고 싶은지 정의할 필요가 있음

즉, 앞서 해결해야 할 문제를 명확히 이해한 후 적절한 문제 핵ㄹ 방아능 정의할 필요가 있다

문제 해결 능력 = 알고리즘?

반드시 그런 것은 아니다. 문제 해결 능력을 함양하는데 알고리즘 학습은 큰 도움이 되지만

→ 문제 해결 능력은 더 큰 차원의 능력

대부분의 문제(요구사항)은 복잡하며 명확하지 않을 수도 있다. 따라서 문제 (요구사항)을 명확하게 이해하는 것이 먼저

• 복잡함을 단순하게 분해하고
• 자료를 정리하고
• 자료를 구분하고
• 순서에 맞게 행위를 배열해야 한다

→ 프로그래밍 : 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업= 그 결과물이 바로 코드

모호하고 대략적인 요구사항을 전달해도 우리의 머릿속에 있는 의도를 정확히 꿰뚫어 완벽히 이해하는 컴퓨터는 절대 존재할 수 없다.

우리는 문제 해결 방안을 고려할 때 컴퓨터의 입장에서 문제를 바라보아야 한다.

이때 필요한 것이 computing thinking (컴퓨팅 사고) 이다.

문제 해결 능력은 직감과 직관의 영역이라고 볼 수 있는데, 이는 문제를 바라보는 우리의 사고와 경험에 영향을 받는다.

사람의 일반적인 사고 방식은 매우 포괄적이며 실생활에서 경험하는 익숙한 사항에 대해 당연시하는 안일한 인식이 있다.

• 듣는 행위

사람 : 하나의 간단하고 당연한 기능

컴퓨터 : 단순하지 않음

• 크기를 표시할때

사람: 크다 Or 작다

컴퓨터: 양적 개념

→ 현재 볼륨보다 1단계 크게 조정하라

→ 볼륨을 60으로 조정하라

💡 붉다, 사랑과 같은 관념적 개념은 컴퓨터에게 매우 난해한 개념이다. 사람은 지인의 얼굴을 보고 누구인지 바로 인지하지만, 컴퓨터에게 이는 매우 어려운 일이다. 347의 6승을 계산하는 것은 사람에게는 쉽지 않지만 컴퓨터에게는 매우 쉬운 일일것이다.

💡 이렇듯 컴퓨터와 사람은 사고, 인지의 방식이 다르다. 따라서 컴퓨터의 관점에서 문제를 사고해야 한다.

→ 여기에는 논리적, 수학적 사고가 필요하며, 해결 과제를 작은 단위로 분해하고 패턴화해서 추출한다

→ 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다

걷기 기능 디자인하기

‘걷다’라는 기능을 디자인하려면

• 판단해야 하는 상태
• 그 상태를 판단하는 시기
• 판단기준

을 정의해야 하며, 이를 바탕으로 분해한 처리의 실행 여부를 결정한다

→ 장애물이란 무엇인가? (크기, 움직임 등)

→ 어떤 범위 내에 있는 것인지 명확히 수치화해서 정의해야 함

→ 어떤 조건에서 걷는 것을 멈춰야 하는가?

→ 이 모든 것을 프로그래밍 언어로 표현해야 한다.

TIMELINE

TO-DO LIST

 
모두 완료 !
 

공부한 내용 : 코딩애플 

https://insidepixce.tistory.com/110

https://insidepixce.tistory.com/111

https://insidepixce.tistory.com/112

https://insidepixce.tistory.com/113

 
다시 처음부터, 커리큘럼 따라 하나하나 되짚어보기로 했다
내가 아는 것들을 추가적으로 정리해보면서 강의요약본을 작성했다.
어려운 부분도 있어서 의외였다.

공부한 내용 : 프로그래머스 

 
181947 : 덧셈식 출력하기
https://github.com/insidepixce/programmers/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/unrated/181947.%E2%80%85%EB%8D%A7%EC%85%88%EC%8B%9D%E2%80%85%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0
 

 
181946: 문자열 붙여서 출력하기
https://github.com/insidepixce/programmers/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/unrated/181946.%E2%80%85%EB%AC%B8%EC%9E%90%EC%97%B4%E2%80%85%EB%B6%99%EC%97%AC%EC%84%9C%E2%80%85%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0

 
181945: 문자열 돌리기
https://github.com/insidepixce/programmers/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/unrated/181945.%E2%80%85%EB%AC%B8%EC%9E%90%EC%97%B4%E2%80%85%EB%8F%8C%EB%A6%AC%EA%B8%B0

 
181944: 홀짝 구분하기
https://github.com/insidepixce/programmers/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/unrated/181944.%E2%80%85%ED%99%80%EC%A7%9D%E2%80%85%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0

 
181943: 문자열 걉챠쓰기
https://github.com/insidepixce/programmers/tree/main/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%A8%B8%EC%8A%A4/unrated/181943.%E2%80%85%EB%AC%B8%EC%9E%90%EC%97%B4%E2%80%85%EA%B2%B9%EC%B3%90%EC%93%B0%EA%B8%B0

공부한 내용 : 리버스 프록시

리버스 프록시란 무엇인가?

1. 단어의 사전적 의미 찾아보기

• Reverse: (정반대로) 뒤바꾸다
• Proxy : 대리인, 대용물

Proxy server

프록시 서버는 클라이언트와 서버를 이어주는 것으로, 중간 다리 쯤이라 생각하면 편하다.
그 행위 차체를 프록시 라고 부르며, 그 기능을 하는 서버를 프록시 서버 라고 부른다.

• 프록시 서버 중 일부는 서버에 요청된 내용들을 캐시를 이용하여 저장해둔다
• 캐시를 해두고 난 뒤에 캐시 안에 있는 정보를 요구하는 요청에 대해서는 원격 서버에 접속하여 데이터를 가져올 필요가 없게 됨으로써 전송 시간을 절약할 수 있게

리버스 프록시란 무엇인가?

1. 단어의 사전적 의미 찾아보기

• Reverse: (정반대로) 뒤바꾸다
• Proxy : 대리인, 대용물

Proxy server

프록시 서버는 클라이언트와 서버를 이어주는 것으로, 중간 다리 쯤이라 생각하면 편하다.
그 행위 차체를 프록시 라고 부르며, 그 기능을 하는 서버를 프록시 서버 라고 부른다.

• 프록시 서버 중 일부는 서버에 요청된 내용들을 캐시를 이용하여 저장해둔다
• 캐시를 해두고 난 뒤에 캐시 안에 있는 정보를 요구하는 요청에 대해서는 원격 서버에 접속하여 데이터를 가져올 필요가 없게 됨으로써 전송 시간을 절약할 수 있게

 
이거 자체는 하다가 말았다... 내일 시간 쪼개서 더 해야지.

총평

오늘 몸이 너무 안좋다... 설상가상으로 비까지 와서 더 꿀꿀한 상황 ;;
오늘 푹 쉬고 내일 또 열심히 달려야지 화이팅!
우리의 미래는 언제나 찬란한다!

css 파일 만들고 넣는 법

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body style="background-image:url('backgroundsea.jpeg');">
 <img src = "Myselfie.jpeg" style="width:100px; display:block;  margin-left:auto; 
 margin-right:auto;"> 
 <h1 style="letter-spacing:2px; text-align :center;">future fullstack developer</h1>
 <h3 style="color:blue; margin right: auto; margin left: auto;
 text-align: center;"><strong>nsidepixce</strong></h3>
<p style="text-align: center; color:white;"><strong>우리의 찬란한 일기(본문)</strong><a href = "https://insidepixce.tistory.com/">이동하기</a></p>
<p style="text-align: center;"><strong>동서대학교 정보보안학과 1학년<br> 코딩을 정복하고 말테야!"</strong></p>

</body>
 </html>

이렇게 길게 적으면 더럽게 보인다. 너무 길면 더러우니 css파일을 만들면 된다.

.css로 끝나면 css파일이다.

• 스타일을 css파일로 다 몰아넣자!

<link href= "css/main.css" rel= "stylesheet">

먼저 html 파일에 css를 넣어주자

.profile {
    width: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.title {
    text-align: center;
    letter-spacing:2px;
}

.ido {
    color:blue; 
    margin-right:auto; 
    margin-left:auto;
    text-align:center;
}

.texty {
    text-align:center; 
    color:white;
}

이렇게 css 파일을 몰아넣어준다.

<h3 class="ido">오늘따라 뭔가 행복한 느낌<h3>

이런식으로 쓸 수 있다.

```css
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <link href="css/main.css" rel="stylesheet">
</head>  
<body style="background-image:url('source/backgroundsea.jpeg');">
    <img src="source/Myselfie.jpeg" class="profile">
    <h1 class="title">future fullstack developer</h1>
    <h3 class="ido"> insidepixce</h3>
    <p class="texty">우리의 찬란한 일기(본문)<a href="https://insidepixce.tistory.com/">이동하기</a></p>
    <p class="title"><strong>동서대학교 정보보안학과 1학년<br>코딩을 정복하고 말테야!</strong></p>
</body>
</html>
```

이렇게 전부 수정해보았다

똑같이 이렇게 잘 뜨는 걸 확인할 수 있다.

class의 특징

• 점찍고 작명할것
• 이름 중복은 피하자 (유니크하게 작명할것)
• 비슷하게 쓸수 있는게 있는데, 클래스 명을 안 쓰고 p로 쓸 수도 있다.

p {
    text-allign: center;
}

이런식으로 둘수 도 있다.

• id속성에도 둘 수 있다

#special {
    text-align:center;
    color:blue;
}

(잘 안 쓴다) - 자바스크립트가 우선이기 때문에.

• 우리는 이 css파일을 셀렉터라고 한다
• 만일 Id와 클래스 둘 다 넣는다면?
• -id가 제일 우선, 그다음 class → tag 순 (style속성이 가장 우선이긴 함)

1. 저번 숙제 정답

<p>안녕하세요<a href="https://naver.com">이동하기</a></p>

내가 적었던 것이랑 비슷했다.

저번 시간에 배운 것

• 글을 쓸때 <태그>를 사용해야함
• 가끔 속성넣기 가능
• 태그안에 태그를 넣을수도 있음

2. 미니 프로젝트 만들기 : 프로필 페이지 만들기

이렇게 만들어 주었다.

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body style="background-image:url('backgroundsea.jpeg');">
 <img src = "Myselfie.jpeg" style="width:100px; display:block;  margin-left:auto; 
 margin-right:auto;"> 
 <h1 style="letter-spacing:2px; text-align :center;">future fullstack developer</h1>
 <h3 style="color:blue; margin right: auto; margin left: auto;
 text-align: center;"><strong>nsidepixce</strong></h3>
<p style="text-align: center; color:white;"><strong>우리의 찬란한 일기(본문)</strong><a href = "https://insidepixce.tistory.com/">이동하기</a></p>
<p style="text-align: center;"><strong>동서대학교 정보보안학과 1학년<br> 코딩을 정복하고 말테야!"</strong></p>

</body>
 </html>

오타가 있는데… 그냥 봐주세요]

body 태그에 style 을 넣어서 background-image까지 넣어보았다.

바다 느낌으로 꾸미려고 했는데 그 느낌이 안 나서 속상한 사람= 나

3. 텍스트의 일부분만 스타일을 변경하고 싶을때

<p>안녕하세요 저는 <span style="color:red">뛰어난</span>개발자입니다.</p>

<span>이라는 태그로 감싼 뒤에 스타일을 주면 된다.

.

 💡 span 태그는 display:inline 이라는 스타일 속성을 내포하고 있으며, 이를 가지고 있는 요소는 폭, 넓이 등을 단독으로 결정할 수 없다

 💡 높이를 주고싶으면 얘를 감싸고 있는 <p>에 주어야 한다

1.Html 안에 글 입력하기

Html <body> 안에 원하는대로 글을 입력해도 좋지만, 태그를 입력하면 속성을 설정할 수 있다

• <p>태그

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
    <p>우리의 미래는 찬란하다</p>
</body>  
 </html>

<p> 는 paragraph의 약자로, 일반 글을 적고 싶으면 이를 사용하면 된다

• <h> 태그

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
    <p>우리의 미래는 찬란하다</p>
</body>  
 </html>

이렇게 <h> 태그를 사용하였을때 제목이 좀 더 커진것을 볼 수 있다

이런 식으로 h1~h6까지 있는데 입맛에 맞게 사용하면 된다

글을 적고 싶으면 h와 p중 하나를 사용할 수 있다.

2. Html의 주요 태그들

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
<p>우리의 찬란한 일기(본문)</p>
<h1>오늘의 노력은 빛을 발할 거야</h1>
<img src="Myselfie.jpeg"
style="width:100px; height:100px;"> 
<button>버튼인데</button>
<a href= "https://google.com"> 구글로 가는 법</a>
<ul>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
</ul>
<ol>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
</ol>
</body>

• ol과 ul 의 차이

→ <ol> 은 리스트에 숫자를 붙여서 보여준다

→ <ul> 은 리스트에 동그라미를 붙여서 보여준다

3. 이미지 누르면 구글로 이동하게 하는 법

<a href = "https://naver.com">
    <img src="Myselfie.jpeg"
    style="width:100px; height:100px;">

이렇게 하면 가능하다.

나같은 경우는 사진 크기가 너무 커서 100x100으로 바꿔주었다

이제 밑의 사진을 클릭하면 링크를 타고 이동한다. 네이버로 해보았다.

4. 숙제 (이동하기라는 글자를 누르면 네이버로 이동하게 하기)

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
    <p>우리의 미래는 찬란하다 이동하기</p>
</body>  
 </html>

이 상황에서 이동하기만 눌렀을때 다른 링크로 이동하게 만들고 싶다면?

</head>  
<body>
<p>우리의 찬란한 일기(본문) <a href ="https://insidepixce.tistory.com/">이동하기</a></p>

나같은 경우에는 이렇게 만들어줬다.

이 상황에서 옆에 이동하기를 누르면 내 티스토리로 이동된다.

1. html 언어란?

Hyper Text Markup Language = HTML

→웹페이지를 만들 때 사용하는 마크업 언어

**마크업언어 가 무엇인가?**

자료의 구조를 이해하기 위한 언어

웹페이지에 우리가 글을 넣고, 그림을 넣고, 박스를 넣고, 버튼을 넣고, 자료를 입력한다.

그 자료들이 어디에 배치되는지 기록하기 위해 존재하는 언어

2. 개발환경 세팅

1. 에디터 설치하기

• brackets 에디터
• vs code 에디터

→ 나는 vs code를 이전부터 사용해왔기때문에 vscode를 사용할 예정임

1. 작업 폴더 설치하기

내 경로 : Volume/Samsick/codingapple/htmlcss/index.html

중간에 Samsick은 내 외장하드 명이다

• .html로 끝나면 모두 html 파일이라고 생각하면 된다.

3. Html 기본 템플릿 작성

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
    
</body>  
 </html>

모든 Html 파일은 항상 이것부터 써놓고 시작해야함

<head> 내부에는 사이트 생성에 필요한 인코딩형식, 사이드 제목, 필요한 css 나 Js 파일들이 들어감

<body> 내부엔 실제 웹사이트에서 보여줄 글,그림 등을 적어주면 된다

• 비슷한 예로 html:5 를 입력하면

<!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    
 </body>
 </html>

이렇게 자동으로 써주는 것을 볼 수 있음.

• html:5 와 강의에서 제공한 양식에 한가지 다른점은

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

가 추가되어 있다는 것임.

이는 Html에서 사용되는 메타태그 로, 웹페이지의 뷰포트 설정을 지정하는 데에 사용됨

• width=device-width 는 뷰포트의 너비를 기기의 너비와 동일하게 설정함
• initial-scale=1.0 페이지가 처음 로드될 때의 초기 확대/ 축소 수준을 설정.

→ 1.0 이라고 되어있는건 초기 확대/ 축소를 100%로 설정하며, 확대 축소가 적용되지 않았음을 이야기함.

• 뷰포트란?

현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역

→ 웹 브라우저에서는 현재 창에서 문서를 볼 수 있는 부분 (전체화면이나 화면 전체) 를 말함.

→ 뷰포트 바깥의 콘텐츠는 스크롤을 통해서 볼 수 있음

4. 바디 태그에 내용 입력해보기

<!DOCTYPE html>

 <html>
<head>
    <meta charset="utf-8">
    <title>Document</title>
</head>  
<body>
청춘을 갈아넣은 미래 
</body>  
 </html>

이런식으로 바디 태그 안에 내용을 넣으면 실행되는 것을 볼 수 있다.

5. 라이브 서버

• live server 란?

-우리가 편집하는 것들을 저장만 해주면 바로바로 띄워주는 아이

vs code extension에서 다운로드 받을 수 있다.

저장만 해줘도 바로바로 반영되는 것을 볼 수 있다

<aside> 💡 라이브 서버의 기본 포트는 5500이다

</aside>

extension 말 나온 김에 자랑하는 내 고양이

이름은 톰이고 내 Vs code에서 살아가고 있다

vs-code-pets 확장자로 다운받아서 키울 수 있음