{22년}[패스트캠퍼스] React & Redux로 시작하는 웹 프로그래밍 1주차 학습일지

SANGHYUN KIM·2022년 5월 8일
K디지털기초역량훈련React강의국비지원내일배움카드바이트디그리패스트캠퍼스
0

{22년}[패스트캠퍼스] React 강의

목록 보기
1/8
post-thumbnail

#시작하기 앞서서...그리고 나의 목표

저는 비전공자이며 이전에 인터넷에 돌아다니는 자료로 독학을 따로 했습니다.
목표는 프론트 엔드 개발자로서 거듭나기 위해 부트캠프를 목표하고 있으며 기본기를 다지기 위해 본 강의를 수강하게 되었습니다. 따라서, 저만의 방법으로 정리하고 기재하였으니 참고하되 너무 믿지 말아주세요.

#패스트 캠퍼스 선택 이유

  • 프론트 엔드에 필요한 HTML, CSS, JS, React를 배울 수 있는 다른 K디지털기초역량훈련을 보면서 가장 코스가 마음에 듦

    • 선택과 집중으로 다른 코스에서 이것저것 배우는 것보다 하나를 깊게 파고 드는 것이 제일 중요하다고 생각

  • 프로젝트를 2개할 수 있음

    1. 스타벅스를 따라 만들면서 홈페이지 작성에 대한 막연함 지우기
    2. 위 과정을 통하여 선택사항이지만 과제를 만듦으로서 내가 고민하고 배운 것을 적용할 수 있음

  • 8주 과정이기에 실습 멘토링 또는 커리어 멘토링(각각 30분씩)을 총 4개 받아서 사용할 수 있음

  • 그러나, 모든 사람들이 접근할 수 있는 게시물이기에 그리고 내돈내산(국비로 진행하지만.....)으로 하는 과정이기에 불편한점 좋은 점 모두 솔직히 이야기 할 예정

1주차 강의 복습 및 정리

1. 잡다한 지식들

  • VS code에서

    • 코드를 편하게 정리할 수 있는 "Beautify"를 다운 받고 단축키 설정하여 항상 정렬되게 편집 가능
    • 테크 수정 시 앞을 수정하면 뒤에도 자동으로 수정헤주는 "Auto Rename Tag"가 있음

  • 웹에서 사용하는 이미지는 총 2가지 타입

    1. 비트맵: 정교하고 다양한 색상 출력 가능, 그러나 확대 및 축소 화질 저하

      • JPG(손실 압축): 24bit(1600만 색상) 용량 저하하여 이미지의 품질과 용량을 쉽게 조절 가능
      • PNG(비손실 압축): 24bit(1600만 색상), 투명도(Alpha Channel) 지원
      • GIF(비손실 압축): 8bit 색상, 이미지 파일 안에 디양한 정보 저장 가능, 움짤 애니메이션
      • WEBP(위 3개를 모두 대체 가능): 완벽한 손실/비손실 압축 지원, 애니메이션 지원, Alpha Channel 지원, 그러나 최신 것이라서 브라우저 호환성 체크

    2. 벡터(svg): 확대 및 축소 화질 변화 X, 선 점 면을 활용하여 단순구조 아이콘, 로고 등(메터리얼 이미지)

      • 마크업 언어를 기반으로 그래픽 표현
      • 해상도 영향에서 자유로움
      • CSS어 JS로 제어 가능
      • 파일 및 코드 삽입 가능

  • 오픈소스 라이선스: 자유롭게 이용할 수 있되 상업적 용도가 금지인 경우가 있으니 항상 라이선스를 확인하는 습관이 있어야 함

    • Apache License: 개인/상업적 이용, 배포, 수정, 특허 신청이 가능
    • MIT License: 학생들을 위한 라이선스, 이 소스를 사용하고 있다고 표시만 지켜주면 됨
    • BSD License: MIT와 동일
    • Beerware: 오픈소스 개발자에게 맥주를 사줘야 하는 라이선스, 만날 수 있는 경우

2. HTML

2-1. HTML 기본 구조

  • DOCTYPE 뒤에 HTML의 코드를 지정

    • 뒤에 public 이것 저것 기재되어있으면 버젼이 명시 되어 있음 (xhtml)
    • 웹 표준에 맞춰 실행해달라는 의미

  • html: 시작과 종료 태그 안의 것은 모두 해석

  • head: 문서의 보이지 않는 정보를 나타내는 범위

    • 웹페이지 제목, 설명, 사용할 파일 위치, 스타일(CSS)

      1. title(8 line): 텝에 표시되는 웹브라우저 이름
      2. link(9&10 line): 보통 CSS를 연결할 때 사용 또는 웹 아이콘(favicon) 연결
        • 보통 각 브라우저마다 기본으로 제공되는 스타일이 있으니 reset을 하여 통일성 유지
      3. script(11 line): JS 연결하는 태그
      4. meta: 위의 것을 제외하고 나머지 정보를 표시

  • body: 문서의 보여지는 구조를 나타내는 범위

  • 부모와 자식 관계:

<div> <!--이 아래부터는 하위 및 후손 요소 -->
	<div> <!--부모, 이 위부터 상위 및 조상 요소--> 
		<div> <!--자식-->
		</div>
	</div> 
</div>
  • 빈 태그 2가 사용법
    • <태그> or <태그 />
      • 둘 다 사용 가능하나 후자를 권장, 왜냐하면 해당 태그가 빈 태그라는 것을 표현할 수 있음

2-2. 글자와 상자

2-2-1. HTML은 글자(인라인) 요소

  • 특징: 요소들이 수평으로 쌓임, 또한 margin과 padding을 주기 어려움, 마지막으로 글자 요소 안에 상자 요소 지정 불가능
<span>hello</span>
<span>world</span>
(출력) hello world

(불가능)<span><div></div></span>
  • 종류
    1. span: <p><span>동해물</span>과 백두산이</p>
    2. br: 줄바꿈 강제 요소
    3. img:<img src=”” alt =””>
      • src: 위치(주소) / alt: 이미지 미출력시 표시될 이름
    4. a: anchor로 다른 페이지를 연결(하이퍼 링크 요소)
<a href=”주소” target=”_blank”>”이름”</a>
<!-- target=”_blank”는 새로운 탭에서 열기 -->

2-2-2. 상자(블록) 요소

  • 특징: 수직으로 쌓이고 부모 요소의 크기만큼 가로 넓이가 늘어남, 또한 margin과 padding 가능, 마지막으로 상자 안에서 글자 요소 사용 가능
<div>hello</div>
<div>world</div>

(출력)
hello
world
  • 종류
    1. div: 특별한 의미가 없는 구분 요소
    2. h1~h6: 제목 요소
    3. p: 문장을 의미하는 요소(paragraph)
    4. ul: 순서가 필요 없는 목록을 의미, 객관적인 순서 X
<ul>
  <li>딸기</li>
  <li>사과</li>
  <li>바나나</li>
  <li>참외</li>
</ul>

2-2-3. 다른 요소

  1. input (인라인 및 블록 요소)
<input type=”text” value=”default 값” placeholder=”입력할 값의 힌트” />

<!-- 
- type 뒤에 따라 오는 추가 옵션들
    - value에는 미리 입력되어 있을 값을 기재
    - placeholder에는 사용자가 입력할 힌트 입력
    - disabled: 입력 요소 비활성화
-->
  1. checkbox
<label> <input type=”checkbox” /> Apple</label>

<!-- 흔히 아는 체크박스 -->
  1. radio
<label><input type="radio"> Apple</label>
<label><input type="radio"> Banana</label>
<!-- 체크박스지만 택1만 가능 -->
  1. table
<table>
	<tr>
		<td>A</td><td>B</td>
	</tr>
	<tr>
		<td>C</td><td>D</td>
	</tr>
</table>

<!-- <tr>은 행, <td>는 열 또는 셀을 작성 -->

2-3. 전역 속성

  • <태그 title=”설명”></태그> 요소에 정보나 설명을 지정
  • <태그 style=”스타일”></태그> 요소에 적용할 스타일을 직접 지정
  • <태그 class=”이름”></태그> 요소를 지칭하는 중복 가능한 이름
  • <태그 id=”이름”></태그> 요소를 지칭하는 고유 이름
  • <태그 data-이름=”데이터”></태그> 요소에 데이터를 저장, 많은 경우 JS를 사용
<!--HTML-->
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>
// JS
// 위의 있는 fuit-name을 콘솔 창에 기재

const els = document.querySelectorAll('div')
els.forEach(el => { console.log(el.dataset.fruitName)
})

3. CSS

  • 기본 형식은 아래와 같음
div {
	color: blue;
	widht: 200px;
	height: 200px;
}

3-1. 4가지 선언 방식

  • 4가지의 선언방식이 존재하되 링크 방식을 제일 권장

    1. 내장: html head 부분에 작성

      <style>
	div {
    color: red;
    >
</style>

    2. 인라인 방식

      <div style="color: red; margin: 20px"></div>

    3. 링크 방식(병렬)
      <link rel="stylesheet" href="./main.css">

    4. @import 방식 (직력)

      /*main.css 파일*/
/*연결 형태: html <-- main.css <-- box.css*/
@import url("./box.css")

div {
	color: red;
}

3-2. 선택자

  1. 모든 요소
/*모든 단어를 빨간색*/
*{
	color: red;
}
  1. 태그 선택자
li {
	color: red;
}
  1. 클래스 선택자
/* <li class="oragne">오렌지<li> */
.orange {
	color: red;
}
  1. 아이디 선택자
/*<li id="orange" class="oragne">오렌지<li>*/
#orange {
	color: red;
}

3-3. 선택자_복합

위 선택자를 복합적으로 사용

  1. 일치 선택자 
/* <span class="orange">오렌지</span> */
/* 태그와 클래스 선택자 둘다 사용*/
span.orange {
 	color: red;
}
  1. 자식 선택자 (abc > .def)
/*
<ul>
   	<li>사과</li>
    <li class="orange">오렌지</li>
</ul>
*/
ul > .orange {
   	color: red;
}
  1. 하위 선택자 (abc .def)
/*
<div>
<ul>
    <li>사과</li>
    <li class="orange">오렌지</li>
</ul>
		<span class="orange">오렌지</span>
</div>
*/
ul .orange {
	color: red;
}
  1. 인접 형제 선택자 (abc + def): 같은 부모를 공유하는 다음 형제 "하나" 선택
/*
<div>
<ul>
    <li>사과</li>
    <li class="orange">오렌지</li>
		<li>망고</li>
		<li>사과</li>
</ul>
*/
.orange + li {
	color: red;
}
/*망고만 색칠*/
  1. 일반 형제 선택자 (abc ~ def): 같은 부모를 공유하는 다음 형제 "모두" 선택
/*
<div>
<ul>
    <li>사과</li>
    <li class="orange">오렌지</li>
		<li>망고</li>
		<li>사과</li>
</ul>
*/
.orange ~ li {
	color: red;
}
/*망고와 사과 두 개 색칠*/

3-4. 가상 클래스_1

어떤 행동을 했을 때 적용되는 클래스

  1. Hover(abc:hover): 마우스를 올리면 스타일이 변경됨
.box:hover {
  width: 300px;
  background-color: blue;
}
  1. Active(abc:active): 마우스를 클릭하고 있는 동안 선택
.box:active {
  width: 300px;
  background-color: blue;
}
  1. focus(abc:focus): 포커스되면 선택, 하나의 하나씩 만 가능
/*특히 input요소가 있을 때*/
.box:focus {
  width: 300px;
  background-color: blue;
}

/*input요소가 아닌 것에도 부여할 때 tabindex를 기재*/
<div class="box" tabindex="-1"></div>
.box:active {
  width: 300px;
  background-color: blue;
}
  1. firstchild(abc:firstchild): 선택자 abc 형제 요소 중 첫째라면 선택
/*
<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
    <div>
      <p>망고</p>
      <h3>사과</h3>
    </div>
  </div>
*/

/*딸기 색칠*/
.furits span:first-child {
	color: red;
}

/*없음*/
.furits div:first-child {
	color: red;
}
  1. lastchild(abc:lastchild): 선택자 abc 형제 중 막내 선택
/*
<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
		<div>오렌지</div>      
		<p>망고</p>
		<h3>사과</h3>
  </div>
*/

/*사과 색칠*/
.furits h3:last-child {
	color: red;
}

6.nth-child(abd:nth-child); 몇 번째에 있는 요소를 선택

/*<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
		<div>오렌지</div>      
		<p>망고</p>
		<h3>사과</h3>
  </div>
*/

/*오렌지 색칠*/
.furits *:nth-child(2) {
	color: red;
}

/*짝수(오렌지, 사과) 색칠*/
.furits *:nth-child(2n) {
	color: red;
}

/*홀수(수박, 망고) 색칠*/
.furits *:nth-child(2n+1) {
	color: red;
}
  1. 부정 선택자= abc:not(xyz): 선택자 xyz가 아닌 요소 선택
/*<div class="fruits">
    <span>딸기</span>
    <span>수박</span>
		<div>오렌지</div>      
		<p>망고</p>
		<h3>사과</h3>
  </div>
*/

/*span을 제외하고 전체 색칙*/
.fruits *:not(span) {
	color: red;
}

3-5. 선택자 가상 요소

  1. abc::before: abc 요소의 내부 앞에 내용(content)을 삽입, 인라인(글자)요소
.box::before {
	content: "앞!";
}

/*
<div class="box>
	Content!
</div>
*/
/*앞 Content*/
  1. abc::after: abc 요소의 내부 뒤에 내용(content)을 삽입, 인라인(글자)요소
.box::after {
	content: "Before";
  display: block; /*해당 라인을 통하여 인라인에 박스요소 사용 가능*/
  width: 50px;
  height: 30px;
  background-color: royalblue;
}

/*
<div class="box>
	Content!
</div>
*/
/*출력: Content! 뒤!*/

3-6. 선택자 속성

속성을 선택하여 적용

/*
<input type="text" value="HEROPY">
<input type="password" value="1234">
<input type="text" value="ABCD" disabled>
*/

/*모든 type은 빨간색*/
[type] {
	color: red;
}

/*password만 주황색*/
[type="password"] {
	color: orange;
}

3-7. 스타일 상속

.animal {
	color: red;
}
<div class="ecosystem">생태계
      <div class="animal">동물
        <div class="tiger">호랑이</div>
        <div class="lion">사자</div>
        <div class="elephant">코끼리</div>
      </div>
      <div class="plant">식물</div>
  </div>

상속되는 속성들(모두 글자/문자 관련 속성들)

  • 기울기, 두께, 크기, 폰트, 색상 등등
  • 후손요소에게도 똑깥이 지정이 될 수 있음
  • 강제 상속하여 다른 속성들도 상속시킬 수 있음
.parent {
  width: 300px;
  height: 400px;
  background-color: red;
}

.child {
  width: 100px;
  height: inherit; /*해당 값은 상속이 안되지만 강제로 상속시킴*/
  background-color: orange;
}

3-8. 선택자 우선순의

html에 있는 같은 요소가 여러 선언이 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정

  1. 점수가 높은 선언이 우선(명시도)
  2. 점수가 같으면 가장 마지막에 해석된 선언(나중에 기재)이 우선
div {color:red !important;} /*important키워드로 인해 점수 무한대*/
#color_yellow {color: yellow;} /*ID 선택자 100점*/
.color_green {color: green;} /*Class 선택자 10점*/
div {color: blue;} /*태그 선택자 1점*/
* {color: darkblue;} /*전체 선택자 0점*/
body {color: violet;} /*상속은 점수를 주지 않음*/
<div 
	id="color_yellow"
	class="color_green"
	style="color: orange;"> <!--인라인 선언 1000점 -->
Hello World!
</div>

주간 회고 및 마침

(매우 개인적)
[장점]
환경 조성이 되어 공부할 수 있어서 좋음.
독학으로 배우지 못했던 선택자에 관한 것을 알 수 있었음
선택자 우선순의가 있다는 것을 알 수 있었고 이를 수치화할 수 도 있다.

[단점]
공지사항 답변이 조금 느리다고 생각됨

[신경쓸 것]
5일(평일) 안에 수업을 듣고 주말에 회고록을 쓰려고 했는데 조금 빡빡한 일정이라고 느껴진다.
따라서 5일(평일) 안에 수업을 듣고 notion에 적은 것을 그 날에 다시 복습할 겸 블로그에 임시작성하여 토요일에 올리도록 하자.

또한, 지금 너무 다 쓴 것 같은데, 이미 많은 사람들이 적어 놓은 것이 많이 있을 테니 가면 갈 수록 내가 주의해야 할 것 위주로 단축해서 기재해보자.

profile
SANGHYUN KIM
꾸준히 공부하자
다음 포스트

{22년}[패스트캠퍼스] React & Redux로 시작하는 웹 프로그래밍 2주차 학습일지

0개의 댓글