오늘은 CSS 위주로 공부했습니다.
Localhost? 이 주소는 뭐야?
Web 간단하게 시작했을 때, localhost에서 작업물을 확인하고 있습니다.
IDE는 vscode로 설치한 모듈을 통해서 작업물의 url을 확인해보면 아래와 같습니다.
localhost:번호/프로젝트이름/요청경로
그렇다면 이것을 wifi를 통해서 사용한다면,
같은 wifi를 사용하는 디바이스들은 다 접근이 가능합니다.
단, 웹서버는 항상 서비스 준비가 되어있어야 하며, 고정된 주소여야 합니다.
localhost 대신 해당 wifi의 ip주소를 입력하면 됩니다.
localhost:포트번호/프로젝트이름/요청경로
???.?.?.?:포트번호/프로젝트이름/요청경로
이때, localhost로 입력한 것은 "단순 내 컴퓨터" 라고 생각하면 됩니다.
하지만 ip주소로 입력하였다면 "내 컴퓨터"는 맞지만 약간 다릅니다.
IP주소를 입력하여 한 것은 Loopback이라고 합니다.
잠깐 나갔다가 들어온다고 생각하면 됩니다.
과연 차이점이 있을까요?
네. 있습니다.
네트워크 단에서 "나간다" 와 "들어온다" 는 보안에서 중요한 act 입니다.
나갈 때, 과연 쉽게 나갈 수 있어? : proxy
들어올 때, 과연 쉽게 들어올 수 있어? : firewall
추가로 해당 url들은 사용자가 직접 입력하기 어려워합니다.
그래서 나온것이 dns입니다.
https://shopping.naver.com/living/stationery/home
여기서 naver.com 까지는 dns 이며 이는
???.?.?.?:번호/프로젝트이름/요청경로 에서
프로젝트 이름까지를 대신하는 것입니다.
이후 living부터는 요청경로로 동일합니다.
웹의 흐름도
Web을 본다면 과연 어떻게 이루어지는지 잠깐 확인해보겠습니다.
웹 클라이언트가 요청을 하면, 웹 서버에서는 반응을 해줘야 합니다.
크게 2개로 나누어집니다. Application / Data Store -> 처리 / 저장
위의 그림은 MVC 구조입니다.
MVC (모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다.
해당 구조는 데이터를 만들어서 html등과 같은 템플릿과 합쳐서 주는 것이 아닙니다.
그런 구조는 MVT 구조입니다. 주로 Django에서 보이는 구조입니다.
클라이언트가 요청(Request)을 하면, 접속 컴퓨터(웹 서버) 에서 처리를 하여,
다시 클라이언트에게 응답(Response)를 한다.
이때 데이터, 화면(html) 등이 있다.
예를 들어 봅시다. (회원가입 상황)
우선 회원가입 전송 데이터는 최종인 DB까지 갑니다.
Data 자체를 확인하는 곳은 위의 사진에서 붉은 3곳입니다.
1. 클라이언트에서 나갈 때
2. APP 서버가 받을 때
3. DB가 저장을 할 때
이 데이터가 올바른지 항상 확인을 해야 합니다.
이때, 클라이언트쪽에서 나갈 때 검사를 한다면 서버를 안가고 다시 돌아옵니다. 이렇게 된다면 비용이 적게 들게 됩니다.
웹에서 데이터 처리하는 것은 Script에서 가능합니다.
즉, 네트워크 비용 절감 및 속도 증가를 기대할 수 있습니다.
물론, 클라이언트에서 나갈때만 하는 것은 아닙니다.
해당 데이터가 외부로 나가기만 한다면 데이터 오염을 의심해야 하기 때문에
APP서버 앞쪽에서 https 무결성을 검사할 수 있습니다.
결론입니다.
데이터는 항상 검사해야 한다
- 안그러면 결측치나 이상치가 생겨
- 데이터 분석 시 잘못된 결과를 불러 일으킴
- 결측치 처리, 이상치 처리는 굉장히 어렵다.
- 이말은 threshold를 정하는게 어렵다는 것이다.
- 그러니까 최대한 줄여보자는 것이다.
추가로 강사님께서 웹 프로그래밍을 한다면 3개는 기본적으로 기억하자고 하셨다.
- Class : 어떻게 묶어줄 것인가
- ID : 구분을 어떻게 할 것인가
- Name : 서버에 보낼때는 어떻게 할 것인가
다시 HTML로 돌아오자.
Table 태그
테이블은 시각화가 아닌 단순 데이터 나열이다.
기본적인 형식은 아래와 같다.
<table>
<tr>
<th>제목 셀(header cell)</th>
</tr>
<tr>
<td>내용 셀(data cell)</td>
</tr>
</table>여기서 th는 헤더 부분이고 td는 내용부분이다.
이때, th를 왜 나누었을까?
헤더부분은 계속 읽어지기 때문이다.
Form 태그
웹 프로그래밍에서는 중요하다
사용자의 입력을 받기 위한 요소이다.
데이터를 받아야 하는 상황이다.
이때, 입력받을 데이터를 어떠한 형태로 받을 지 잘 선택해야 한다.
<form action="" method="" enctype="">
<label>이름:<input type="text" name="" id=""/></label>
<br>
</form>ation : 처리할 서버의 url
get / post method : 보여줄거야? / 숨길거야?
❓ 보여지면 보안에 문제가 있는것 아닐까?
❗ 다른 장점이 존재한다.
<label>이름:<input type="text" name="" id=""/></label>이렇게 작성한다면
name은 서버에서 사용하기 위한 이름
id는 클라이언트에서 사용하기 위한 이름
id는 왜적는거야?
유효성 검사를 우선 해봐야해, 안하면 outlier 생성 가능성 존재하기 때문이야
영역 태그(DIV, SPAN)
<div></div>: 블록 태그<span></span>: 인라인 태그
id를 부여해서 사용한다.
CSS
HTML 에 비하면 어려운 편이다.
CSS : 웹 페이지의 디자인을 담당하는 도구이다.
선택자{
속성 : 값;
}
형태는 위와 같다.
내가 원하는 애를 선택하는 선택자를 찾고, 원하는 속성을 찾고, 값을 찾으면 끝난다.
이렇게 보니까 생각외로 쉬울수도??
여러개를 쓸 때에는 무조건 세미콜론을 써야한다.
세미콜론은 명령문을 구분해 주는 단위라고 생각하면 편하다.
그러기에 단순히 값이 하나만 있다면 안써도 된다.
한꺼번에 읽어서 처리하는 애들은 명령을 구분해주는 세미콜론이 필요하다.
CSS는 한번에 읽어서 처리한다.
CSS 적용하는 방법
적용하는 방법은 총 3가지이다.
- 외부에 스타일시트 파일을 만들고 HTML문서에서 불러서 사용하는 것
- HTML 문서 내에 style이라는 태그를 이용하는 것
- 태그 내에 style을 설정하는 것(inline)
3에서 1로 갈수록 권장한다.
3번을 비추천하는 이유는 역할별로 분리해서 작성하는 것을 권장하기 때문이다.
설정 방법
- 선택자 : 어떤 개체에게 적용할지를 결정합니다.(누구에게?)
- 속성 : 어떤 성질을 설정할 지를 알려줍니다.
- 값 : 적용할 데이터로 예약어를 사용하여 넣어줍니다.
문자열 vs 예약어 는 다릅니다.
"red" 와 red의 차이입니다.
선택자
*: 모든것
태그 : 태그
클래스 : .클래스명
id : #id
이렇게 사용합니다.
결론 : 스타일 시트의 용도를 기억하면 됩니다.
다시 GIT으로 돌아옵니다.
git 하는데 좀 오류가 나길래 돌아왔습니다.
에러는 다음과 같습니다.
error: failed to push some refs to
로컬 git remote 까지 하고 commit도 잘 된거 아니야?!
왜 문제가 생기는거지? 하고 어제 오늘 열심히 쳐다봤습니다.
우선 참고한 사이트입니다. https://sosoeasy.tistory.com/406
확인을 해보니, 저는 해당 repository를 만들 때,
readme.txt를 생성하고 시작한거였습니다.
그래서 로컬과 원격 저장소의 차이가 발생해서 push가 되지 않았습니다.
다음부터는 readme를 미리 안만들고 나중에 추가하려고 합니다 😂
