innn

웹 1주차 본문

FE/React

웹 1주차

33삼 2022. 10. 5. 11:26

 

이론 

1주차 : HTML, CSS 

- Babel 

<탁월한 프론트엔지니어가 되는 법>

1. 문제를 해결하는데 그치지 말고 어떻게 동작하는 지 파악하라
2.  브라우저의 변화를 예측할 수 있게 학습하라
3. 명세Spec을 읽어라
프로그래밍의 유지 보수가 가능하도록 프로그램의 구조와 기능을 상세하게 기술한 문서 

명세서 
- 내가 어떤 버전으로 하는지, 
보안 강화 히스토리 읽기 

4. 다른 사람의 코드를 읽어라
- 서로 코드 리뷰 30분 (강조)
5. 나보다 똑똑한 사람과 일하라
6.  있는 걸 다시 만들어라
- 리팩토링
7. 배운 것을 기록하라 
- 열심히 하는 걸 보여주는 태도
- 정리해서 남들에게 나타낼 수 있는가 (블로그로 개발일지 데일리 스크럼 옮겨 적기) 

<웹 1.0 ~ 3.0>
웹 1.0 : 단방향 소통
WEB 1.0
READ ONLY 
Keyword : HTML, FLASH, Java Script
웹 1.0은 읽기만 가능한 형태의 인터넷 서비스였다. 

웹 2.0 : 양방향 소통, 사용자와의 상호작용(유튜브 댓글, 구독 좋아요의 기능 등)
Read & write
keyword : social media, privacy
사용자도 읽고 활동 가능해짐.

웹  3.0 : 탈중앙화된 개인 맞춤형 서비스.
아주 대표적인 사례로 이더리움의 Smart Contract
Read & write & possession
Keyword : Decentralization, Cloud, Blockchain, Bitcoin
웹 3.0의 핵심은 탈중앙화와 소유이다. 주체적으로 소유권을 가질 수 ㅣ있게된 것. 
사용자의 정보, 활동기록 데이터가 특정서버에 모두저장되는것이 아니라 블록체인을 기반으로 분산되어 저장된다.
내가 정보를 소유할 수 있게 된 것


<웹 브라우저, 엔진>

브라우저별 호환성 확인 사이트
www.cainuse.com

<프로토콜 = 규약>
HTTP : (HyperText Transfer Protocol) 
서버와 클라이언트간에 데이터를 주고받는 프로토콜 
HTTP의 단점 : 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않음
특정 브라우저에서 홈페이지 접속시 "안전하지 않은 웹사이트"가 뜸

HTTP는 하이퍼 텍스트 전송 프로토콜(Hypertext Transfer Protocol)의 약자입니다. 서로다른 시스템들 사이에서 통신을 주고 받게 해주는 가장 기초적인  프로토콜인데요. 암호화가 안되있음. 여러분이 웹서핑을 할 때 서버에서 여러분의 브라우저로 데이터를 전송해주는 용도로 가장많이 사용됩니다. 그리고 인터넷 초기에 모든 웹사이트에서 기본적으로 사용되었떤 프로토콜 이기도 하죠 

<프로토콜 = 규약>
HTTPS :(security) HTTP에 암호화가 추가된 프로토콜
장점 : SSL 인증서를 이용해 사이트에서 제공하는 정보를 암호화해준다. 보안강화 !
SEO(serch engine optimization)에 최적화 된다. 사이트 검색 잘됨!

HTTPS는 하이퍼 텍스트 전송 프로토콜 보안의 약자이다. 일반 HTTP 프로토콜의 문제점은 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않는 다는 것이었습니다. 이를 보안한게 HTTPS입니다. 

<URL vs URI>
URL (Uniform Resource Locator) : 자원이 실제로 존재하는 위치를 가리키는 주소(ex. 서울 마포구  큰우물로~)

URI : 인터넷 상에서 특정 자원(파일)을 나타내는 유일한주소 

<UX / UI>
UI : PC나 스마트콘 같은 디바이스 사용하는 화면상에서 발생하는 화면, 레이아웃, 페이지, 폰트 같은 시각적인디자인

UX : 행위전체를 가지는 사용자 경험에 대한 부분을 다루는 디자인

<HTML?>
건물의 골격 = HTML 
건물의 디자인 = CSS
건물의 작동 = Java Script

웹문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어

<CSS>
도큐먼트(HTML)가 사용자에게 어떻게 보여질까 기술하는 언어 

- 수업때 규칙에 중점으로 보자.

<알아두면 좋은 인사이트>
5. 어떻게 개발 트렌드 키워드를 알 수 있을까요?
제리 꿀팁 공유
1. JD(JOB Descriptiom) 매월 채용공고를 아카이브 해두세요
필수조건과 우대 조건을 목록화해놓고 새로나온 키워드를 공부하세요
2. 개발 단톡방에 들어가세요 배터리 아까워도 여러개 들어가세요. 실무자들의 수다를 통해 트렌드 뉴스 기사들, 키워드들, 어떤 것들을 공부해야하는 지 알 수 있어요. 

 

 

실습

<html lang="ko">

>> lang은 ko로 바꿔서 쓰길 권장.

한국어에 최적화시켜주기 때문.

 

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

<head> 태그 안에 들어가는건 환경설정으로 생각.  

 

viewport =  스마트 기기 화면에 보여지는 그 자체를 뷰포트. 

 

- 시맨틱 태그 

<header> <footer> 등 태그 자체로 의미를 갖고 있는 태그 

 

- 왜 시멘틱 태그들이 언급 되느냐?

html파일을 읽는 것인데, 그냥 div 태그로 헤더 태그를 구현하는 것보다 헤더라는 고유한 의미를 갖고 있는 태그로 만들게 되면 읽을 때 이게 헤더구나 감지를 할 수 있기 때문.

 

- 스크립트 태그를 가장 최하단에 놓는 이유

이는 js 구현을 여러가지 하고 규모가 커질 수록 함수들을 업로드 하는데 시간이 오래걸리기 때문이다.

html파일은 위에서부터 아래로 내려오는데 js 태그가 앞에 있으면 멈춰서 걸린다. 그래서 사용자에겐 로딩이 오래 걸려 빈화면이 뜨는 것. 프론트는 유저 중심이기 때문에 스크립트 태그를 아래에 연결해주어야 한다. 

 

- css 선택자

 

우선 순위가 제일 낮은 건 전체 

* {} 

 

* {}  이렇게  같은 선택자일 시엔, 아래에 있는게 반영이 된다 (1번 *은 적용 x 2번 *이 적용된다)

 

그 다음은 태그  

p {}

 

그 다음은 클래스 

.lightblue {}

 

구체적이면 구체적일 수록 우선순위가 높다.

클래스는 중복으로  가능하다. 가령 

.lightblue.big {} 으로 css 를 준다면 그냥 lightblue 만 갖고 있는 클래스에는 적용이 안된다.

class="lightblue big" 이렇게 두 개를 다 갖고 있는 애들만 적용이된다.

 

태그선택자 + 클래스명 {} 도 가능하다.

ex. span.lightblue {} 

 

그 다음은 id 선택자 

클래스 선택자보다 우선순위가 높다. 

클래스는 원하는 곳에 중복으로 사용이 가능한데, id는 고유하기 때문에 하나에만 넣어주어야 한다.  

#blue {}

 

그룹 선택자

이 세가지 속성에 모두 동일한 효과를 주고싶을 때 

p, .lightblue, #blue {}

 

클론코딩할 때도 틀을 잡고 틀을 구현하나를 

위에서부터 세개를 잡고 

 

기본 설정으로 바디가 꽉 차게 기본으로 해줘야함

body {

margin : 0;

}

 

>>> * { margin : 0} 으로 해도 동일 

* 이랑 body 랑 똑같음 

 

page { width : 100 vw; hight : 100vh; } 로 하는 게 좋다. 그래야 어느 기기서든 호환이 가능함. 

 

먼저, 페이지 같은 경우엔 한 번 크게 설정 잡고 간다.

.page {

width : 100vw;

height : 100vh;

display:flex;

flex-direction:column; >>> 세로로 정렬 

]

 

.header div {} >> 헤더 안에 디브태그 

 

.header div:first-child {

flex-basis : 100px;

}

 

.header div:last-child {

flex-grow : 1px;

}

 

flex-grow >>  나머지 크기만큼 늘어나도록

 

.center {

flex-grow : 1;

display:flex;

align-items: center;

justify-content : center;         >>> 한가운데 얼라인 아이템 + 저스티파이 콘텐트 

border: 3px solid blue;

 

 

.footer {

text - align : center ; >> 텍스트 한가운데 

} 

 

 

 

'FE > React' 카테고리의 다른 글

[bun] bun에서 devDependencies 추가할 때  (0) 2023.11.14
[React] 공식문서가 알려주는 state 구조 잘 짜는 방법  (0) 2023.11.14
리액트 3주차  (0) 2022.10.27
JSX 문법 9가지 규칙  (0) 2022.10.25
JSX란 무엇인가  (0) 2022.10.25
'FE/React' Related Articles more