오늘 처음으로 페어 프로그래밍이란 것을 해보았다.

프로그래밍 목표는 Twittler Mockup 사이트 만들기 였다.

트위틀러는 트위터와 비슷한 클론 페이지를 만드는 예제이고

목업(Mockup)은 대부분의 산업에서 실물크기의 모형을 말하는데

웹, 앱 프로그래밍에서는 실제 페이지와 동일한 모양으로 구현하는 것이다.

페어 프로그래밍을 진행하는 방식은 두명 혹은 세명이 있으면 한명이 드라이버를 하고 나머지가 네비게이터를 하는 방식으로 진행한다. 드라이버는 화면을 공유하면서 직접 코드를 입력하면서 나무를 보는 역할이고 네비게이터는 드라이버에게 코딩 방향을 제시하고 전체적인 숲을 보는 역할이다.

프로그래밍을 코드샌드박스라는 플랫폼에서 진행했는데 중간에 자바스크립트에 있는 데이터가 연결이 안되서 하단 부분 데이터가 전부 날라가는 문제가 생겼었다.

게다가 실행 창이 반영이 잘 안되는 것 같아 VSCode로 옮겨가서 하려니까 이번엔 자바스크립트 파일에서 모듈 오류가 났었다.

해당 오류 때문에 데이터가 들어있는 자바스크립트와 연결이 제대로 되지 않아 데이터가 화면에 나오질 않았다...

자바스크립트는 이미 코딩이 된 완성본을 받아서 한거고 나와 페어 모두 자바스크립트는 처음이라서 바로 해결하지 못하고 각자 찾아보기로 하였다. 알 수없는 오류에 좀 당황했지만 페어가 침착한 분이라 차분하게 생각할 수 있었다.

구글링을 해보니까 어느정도 자바스크립트에 대한 이해없이 바로 해결할 수 있는 문제는 아닌 것 같아 불편하더라도 코드샌드박스 홈페이지에서 할 수 밖에 없을 것 같았다. 코드를 복사해서 코드샌드박스를 새로 불러와서 붙여넣기하니까 다행히 정상적으로 작동했다. 페어는 flexbox 속성을 가진 태그에 자바스크립트를 불러오는 태그가 들어가서 그런 것 같다고 하였는데 정확하게 왜 그런진 모르겠다.

그래도 다시 정상적으로 코드가 돌아가서 시간안에 괜찮은 결과물을 완성할 수 있었다.

지금까지는 혼자 코딩하다가 다른 사람과 같이 프로젝트를 진행해보니까 내 약점과 강점이 보였다.

결과물을 자랑하는 시간도 가졌는데 우린 바로 당당하게 자랑할 수 있었다.

다 만들었을 때 그 보람과 뿌듯함은 굉장했고 페어에게 정말 감사했다 ! 😆

↓↓↓↓↓↓↓↓↓↓ 완성본 ↓↓↓↓↓↓↓↓↓↓↓↓

https://ic12jb.csb.app/

○ CSS란?

• Cascading Style Sheets
  • cascading ? css에서 작성하는 코드가 폭포같이 이어지기 때문
• 웹페이지를 꾸미려고 작성하는 코드
• 프로그래밍 언어도 마크업 언어도 아닌 Style Sheet 언어
• HTML 요소들에 선택적으로 스타일을 적용할 수 있음

○ HTML에 CSS 연결하기

• html 문서 head에 <link rel="stylesheet" href="파일이름.css" /> 입력
• html과 css를 같은 폴더에 저장한 경우 파일 이름만 작성, 경로가 다르면 경로 입력해야함
• css 파일을 따로 작성하지 않고 html 문서에 속성 부여할 수도 있지만 관심사 분리 측면에서 권장되지 않음
• 관심사 분리?
  • 관심사는 코드에 영향을 미치는 정보 집단
  • 코드에 조건이나 기능들이 추가되면 코드가 길어져서 가독성이 떨어짐
  • 관심사들은 따로 작성해서 분리하는 것이 좋은 코드

○ CSS 기본 구조

셀렉터(selector) : html에서 스타일을 적용할 곳을 지정

선언(Declaration) : 1개의 스타일을 입력하고 세미콜론(;)

속성(Property) : 적용할 스타일 이름

속성값(Property Value) : 지정할 속성의 값을 입력

○ 셀렉터(selector)

- id

• html 문서에 1개의 요소에만 적용할 수 있음
• html에 <요소이름 속성1... 속성2... id=“id Name”>
• CSS에서 해당 id에 적용할 때 ‘#id Name{ ... }’

- class

• html 문서에서 여러개의 요소에 한번에 적용할 때 사용
• html에 <요소이름 속성1... 속성2... class=“class Name”>
• CSS에서 해당 class에 적용할 때 ‘.class Name{ ... }’
• 하나의 요소에 띄어쓰기로 여러개의 class 적용 가능

<p class=“class1 class2 class3> </p>

- *

• 전체 선택자
• 페이지 전체 적용할 폰트(font-family) 또는 박스 사이즈를 border-line으로 셋팅할 때 사용

* {
	box-sizing: border-box;
}

- 유형 선택자

• 해당 이름을 가진 모든 요소 선택

input {
	border: 1px solid red;
}

   ↑ 페이지 내 모든 input 요소 선택

- 선택자 목록

• ' , ' 로 선택자 여러개 한번에 선택

input, button { }

- 자손 / 후손 결합자

• '  '
• 공백은 공백 앞 요소의 자손인 모든 공백 뒤 요소 선택
• ex) div span { }  --> <div>의 자손인 모든 <span> 선택
• 자손은 자식의 모든 하위 요소까지 포함 (자식의 자식, 자식의 자식의 자식, ...)

- 자식 결합자

• ' > '
• 첫번째 요소 바로 아래 자식인 요소들 선택
• ex) div > span { } --> <div>의 자식인 모든 <span> 선택

- 일반 형제 결합자

• ' ~ '
• 첫 번째 요소와 같은 부모를 공유하는 두 번째 요소들 선택
• ex) p ~ div { } --> <p>와 같은 부모를 공유하는 모든 <div> 선택

- 인접 형제 결합자

• ' + '
• 첫 번째 요소 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소 선택
• ex) p + div { } --> <p> 바로 뒤에 위치하는 <div> 선택

- 속성 선택자

• 요소[속성]
• 요소에 특정 속성이 있는지에 따라 요소 선택
• ex) input[type="text"] --> input 요소에 속성이 'type' 이고 속성값이 'text' 인 모든 요소 선택

-의사 클래스/요소(pseudo-classes / pseudo-elements)

• ' : ' / ' :: '
• 의사 클래스(가상 클래스) ' : ' 는 요소가 특정 상태일 때만 스타일링
• 자주쓰는 의사 클래스

• 의사 요소(가상 요소) ' :: ' 는 요소의 특정 부분을 선택
• 자주쓰는 의사 요소

- 정합성 확인 셀렉터

• ':valid' / ':invalid'
• valid는 정합성 검증이 성공한 요소에만 적용 / invalid는 정합성 검증이 실패한 요소에만 적용
• ex) input[type="text"]:invalid { } --> input 요소 중 속성이 type="text"가 아닌 요소만 선택

- 셀렉터의 우선순위

한 요소에 대해서 서로 다른 셀렉터가 같은 속성의 다른 속성값을 가질 경우 셀렉터 우선순위에 따라 상위 우선순위의 속성값을 갖게 됨

!important (속성값 뒤에 작성, 우선순위 0순위) -> inline style (태그에 직접 스타일 지정)

-> id 셀렉터 -> class 셀렉터 -> 속성 선택자 -> 의사(가상) 클래스 -> 의사(가상) 요소 -> 태그 선택자 -> 전체 선택자

○  박스 모델

• 모든 content는 각자의 영역을 가지고 하나의 content로 묶이는 요소들이 하나의 박스가 됨
• 박스는 항상 직사각형 모양이고 너비(width)와 높이(height)를 가짐
• html의 블럭 레벨 요소는 CSS에서 width, height 속성이 적용되지만 인라인 레벨 요소는 적용되지 않음
• CSS에서 inline 요소 태그에 ‘display: inline-block’ 를 추가하면 inline-block 요소로 성질이 변함
• 줄은 바뀌지 않지만 고유 크기 지정해줄 수 있음

○ 박스에서 많이 쓰는 속성(Property)

• width: 너비 (단위는 주로 px, % 사용)
• height: 높이 (단위는 주로 px, % 사용)
• border: padding 바깥 테두리 (value 차례대로 두께, 스타일, 색깔)

• padding: 컨텐츠 주위의 여백 (border의 안쪽 여백)
• margin: 요소의 바깥 여백 (border의 바깥 여백)

padding, margin 은 공통적으로 위, 아래, 오른쪽, 왼쪽의 여백을 따로 지정할 수 있다.

padding: 10px 20px 30px 40px;

순서대로 위, 오른쪽, 아래쪽, 왼쪽 값

한개의 값만 지정하면 네 방향 동시에 같은  값 지정됨

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

네 방향 각각 따로 지정할 수 있음

참고) padding, margin 의 속성값을 두 개만 지정했을 경우 차례대로 위아래, 양쪽에 적용됨

• background-color: 요소의 콘텐츠와 padding 의 배경 색
• color: 한 요소의 콘텐츠 색 (일반적으로 글자색)
• text-shadow: 한 요소 안의 글자에 그림자를 적용
• display: 요소의 표시 형식을 설정합니다 (flexbox로 만들 때 사용)
• border-radius: 모서리의 굴곡 설정 (둥근 모서리 만들때 사용)
• shadow

< 참고 링크 >

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

https://www.w3schools.com/

□ HTML이란?

- Hypertext Markup Language

- HTML은 프로그래밍 언어가 아닌 마크업(Markup) 언어

- 웹페이지의 구조와 내용 기술

□ Visual Studio Code로 작성하기

- 새 파일 -> 언어선택 -> html -> 저장시 이름.html 형식으로 저장

- VSC에서 코드작성할 때 단락 자동 정렬해주는 extension

확장 탭에서 beauty 검색 -> 설치

정렬 원하는 코드 드래그 -> command+shift+b (Win: Ctrl+shift+b)

□ Element의 구조

1. Opening tag(여는 태그): 요소 이름과 꺽쇠(<>)로 구성, 요소 시작
2. Closing tag(닫는 태그): 여는 태그와 같은 모양 + 요소 이름 앞에 슬래시(/), 요소의 끝에 위치
3. Contents(내용): 요소의 내용
4. Element(요소): 여는 태그, 닫는 태그, 내용을 통틀여서 요소라고 함
5. Attribute(속성): 요소에 추가적인 내용을 담고 싶을 때 사용, 속성 이름(Attribute name)과 속성 값(Attribute value)로 구성

□ 요소의 중첩

- 요소안에 내포되게 중첩할 수 있음

- 어떤 요소의 여는 태그와 닫는 태그 사이에 새로운 요소 넣을 수 있음

- 안에 내포된 요소가 닫힌 후에 포함하고 있는 요소가 닫혀야 함

<head>
	<title>Test page</title>
</head>

□ 블럭 레벨 요소vs 인라인 요소(Inline level elements)

1. 블럭 레벨 요소(Block-level elements)
- 웹페이지에 블럭을 넣는 요소

- 블럭 레벨 요소 앞뒤에 새로운 Line 만들어서 블럭 레벨 요소 이전과 이후 요소 사이의 줄을 바꿈

- 페이지의 단락(Paragraph), 목록(list), 네비게이션 메뉴(Navigation Menu, 꼬리말(Footer) 등을 표현

- 인라인 요소에 중첩될 수 없음

- 블럭 레벨 요소는 다른 블럭 레벨 요소에 중첩될 수 있음

ex)<p> : 문단요소

2. 인라인 요소(Inline elements)

- 항상 블록 레벨 요소에 포함되어 있음

- 새로운 Line을 만들지 않음

- 인라인 요소에 블럭 레벨 요소를 넣을 수는 없음

ex) <a> : 하이퍼링크 정의

      <em> : 텍스트 이테릭체

      <strong> : 텍스트 볼드체

- 인라인과 블럭 레벨 요소의 특징이 섞인 Inline-Block 레벨 요소도 있음(

□ 빈 요소(Empty elements)

닫는 태그가 필요없이 단일 태그(Single tag)로 사용

닫는 태그를 사용해도 되지만 비효율적!

Ex) <img> : 이미지 삽입, <br> : 줄바꿈 요소, <hr> : 가로줄, <input> : 사용자에게서 데이터 받을 수 있는 요소, <link> : 외부 리소스의 관계 명시, <meta> : 해당 문서에 대한 정보인 메타데이터 정의

□ 속성(Attribute)의 규칙

1. 요소 이름 다음에 오는 속성과 요소 사이엔 공백, 여러개의 속성 작성 할 땐 속성 사이에 공백
2. 속성 이름 다음에 등호(=) 작성
3. 속성 값은 따옴표(“”또는 ‘’)로 감싸야 함 (생략가능하지만 오류 발생할 수 있음)

<input type="text" placeholder="type here">

□ 요소에 속성 추가하기

<a href="https://naver.com" title="네이버" target="_blank">naver</a>

<a> : anchor 의미, 닻이 배를 항구로 연결하듯 텍스트를 감싸서 하이퍼링크를 만듦

href: 연결하고자 하는 웹 주소 지정

title: 링크에 대한 정보 추가, 마우스 옮겼을 때 나타남

target: 링크가 어떻게 열릴 것인지 지정, target=“_bland”는 새 탭에서 보여줌

□  참과 거짓 속성(Boolean attributes)

값이 없는 속성

그 속성의 이름과 동일한 하나의 값만을 가짐

ex) disabled : 사용자가 데이터를 입력할 수 없도록 비활성화(회색으로 표시)

<input type="text" disabled>

□ 주석

<!- 주석내용 ->

사용자에게 보이지 않음

메모, 코딩 설명

□  자주 쓰는 요소들

<!DOCTYPE html>: 초창기부터 쓰던 문법, 현재는 제대로 작동하기 위해 포함되어야하는 역사적 유물

<html></html> : html 요소, 전체 페이지의 콘텐츠 포함, 기본요소

<head></head> : 페이지에 보여지지 않지만 검색 결과에 노출될 키워드, 설명, CSS 스타일 등 페이지의 모든 내용 담음

<meta charset="UTF-8"> : 문서의 문자 인코딩을 UTF-8로 지정

 UTF-8이란 전세계 대부분의 문자를 포함한 유니코드 인코딩 방식, 가장 많이 사용됨

<title></title> : 브라우저 탭에 표시되는 이름

<body></body> : 텍스트, 이미지, 링크, 비디오, 오디오 등 페이지에 표시되는 모든 콘텐츠 포함

<ul></ul> : Unordered list 순서없는 리스트

<ol></ol> : Ordered list 순서있는 리스트

<ls></ls> : list 목록

<p></p> : paragraph 문단

<div></div> : division 앞뒤로 줄 바꿈됨

<span></span> : 인라인, 줄 바꿈 x, 문단내에서 일부에만 속성 적용할 때 주로 사용

<a></a> : 하이퍼링크

<img src="경로"> : 이미지 삽입

<input type="text" placeholder="입력 전 메세지"> : 사용자가 입력할 수 있는 박스, type의 기본값은 text

<button>버튼 안의 텍스트</button> : 클릭할 수 있는 버튼 박스

<link rel="stylesheet" href="경로"> : 외부 리소스 연결 요소, 주로 head에 작성, CSS 파일이나 웹 폰트 연결할 때 사용

 참고 링크

W3 School : https://www.w3schools.com/html/default.asp

HTML

튜토리얼: https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started

<컴퓨터의 구성요소>

-소프트웨어

System Software

응용소프트웨어 실행 환경

하드웨어와 직접 소통, 동작 관리

커널과 OS를 포함

Application Software

응용소프트웨어

앱

-하드웨어

CPU(중앙처리장치, 프로세서)

제어장치: 데이터의 흐름 제어, 컴퓨터의 자원 관리

연산장치: 프로그램의 코드에 따라 계산

레지스터: 작고 빠른 기억장치, 연산에 필요한 데이터를 임시 보관

보조기억장치

넓은 데이터 저장 공간

느린 속도

컴퓨터 내의 모든 메모리가 저장

ex) HDD(Hard disk drive), SSD(Solid State Drive)

CPU와 바로 통신하기에는 처리속도가 너무 느림

주기억장치

보조기억장치보다 훨씬 적은 공간

빠른 속도

CPU와 직접 통신

RAM(Random Access Memory), ROM(Read Only Memory)

캐시 메모리(cache memory)

주기억장치보다 빠르지만 CPU보단 느린 속도

자주쓰는 데이터를 저장

입력장치

마우스, 키보드

출력장치

스피커, 모니터

시스템 버스(system bus)

컴퓨터내에 존재하는 데이터가 이동하는 통로

데이터 버스, 주소 버스, 제어 버스

<프로그래밍 용어>

프로그래밍: 알고리즘을 컴퓨터가 알아들을 수 있는 언어로 작성하는 행위

프로그램: 프로그래밍으로 작성된 결과

프로그래밍 언어: 컴퓨터 언어(이진법)과 사람의 언어를 매개해주는 언어

                          컴퓨터 언어에 가까울 수록 Low Level(Assembly) <-> 사람의 언어에 가까울 수록 High Level(Java,C++,,)

컴파일: 작성한 코드를 컴퓨터가 이해할 수 있는 언어로 바꾸는 과정(빌드에 포함)

빌드: 프로그램을 실행할 수 있는 파일로 만드는 것(exe, msi 등)

통합개발환경(Integrated Development Environment, IDE): 코드를 작성하고 디버깅, 빌드 등을 모두 할 수 있는 개발 환경

<웹 클라이언트와 웹 서버>

클라이언트: 사용자에게 보여지는 부분

서버: 클라이언트에게 데이터를 보내는 부분

2-Tier architecture : 클라이언트와 서버로 분리, '클라이언트-서버 아키텍쳐'라고도 함

3-Tier architecture : 2티어 아키텍쳐 + 데이터베이스(데이터 보관)

자바 버전 확인

java -version

자바 버전 변경

export JAVA_HOME=$(/usr/libexec/java_home -v 11)

-v 뒤에 원하는 버전 입력

mac 잠자기 방지(컴퓨터에 카페인주기)

caffeinate

해제 : Ctrl + c

- 지속 시간 설정

caffeinate -t 원하는 시간 초단위 입력

- 디스플레이 꺼짐 방지

caffeinate -d 

사용중인 프로세서 확인

uname -p