2월24일(금) React 시작! (그 전에 HTML, ES6 얕은복사 깊은복사)

오늘부터 언어주차가 끝나고 주특기 React 학습을 시작하였다. 우선 오늘부터 3주간 진행하는 주특기 주차에 대한 발제를 하고 React 학습 전 과제로 HTML 태그를 통해 화면 구성을 해보았다. 부트캠프 시작 전 사전 학습으로 배웠던 기억이 있어 다시 한 번 공부해보고 넘어갔다.

공부했던 것들을 정리해보자면

<'h'> 태그 제목을 나타냄
<'p'> 태그 문단을 나타냄.
<'pre'> 미리 서식을 지정한 텍스트를 나타내며, HTML에 작성한 내용 그대로 표현
<'br'>를 통하여 줄바꿈 (To force line breaks in a text, use the br element.)

<'b'> 단순히 텍스트를 진하게 표시하는 역할.
<'strong'> 단순히 보여지는 강조가 아닌 실제로 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할. 브라우저가 strong 태그 해석할 때 페이지 내에서 중요한 부분으로 이해하며, 웹 접근성에 큰 기여. 스크린 리더에서 음성합성에도 영향.(실제로 강조 하듯 거센억양)

<'i'> (italic)태그도 동일. <'i'> 태그는 기울임 나타내는데 <'em'> (emphasised) 태그 사용하면 실질적인 강조 의미. 스크린 리더에도 영향. <'em'>은 주위 텍스트와 비교했을 때 해당 부분 강조할 때 사용. 단순히 기울임꼴 글씨체 필요할 때는 CSS의 “font-style: italic;”을 활용.

<'mark'> 관련성을 나타냄. 문장에 형광펜으로 줄 그은 것과 비슷
<'small'> 일반 글씨보다 2point정도 작은 글씨체. 전역속성과 이벤트속성 지원.

<'del'> 문서에서 삭제된 텍스트 제거할 때 사용. 글씨 중간에 줄 친다.
<'ins'> 문서에 추가된 텍스트에 사용. 밑줄 그어준다.
<'del'><'ins'>모두 문서에 대한 업데이트나 수정을 표현할 때 사용.

<'sup'> 태그는 윗첨자(superscript) 텍스트를 표현할 때 사용. 일반 텍스트 라인보다 윗쪽에 절반 크기의 작은 문자로 표현. 수학 공식(ex) (a+b)2 = a2 + 2ab + b2)이나 각주(ex) WWW[1]) 등을 표현
<'sub'> 태그는 아랫첨자(subscript) 텍스트를 표현. 일반 텍스트 라인보다 아래쪽에 절반 크기의 작은 문자로 표현. 수학 공식(ex) nPr = n!/(n-r)!)이나 분자식, 화학 반응식(ex) 2H2 + O2 → 2H2O) 등을 표현

<'cite'> 저작물의 출처를 표기할 때 사용, 도서, 논문, 음악, 영화,드라마, 연극, 뮤지컬, 블로그, 트윗 등 다양한 곳에 사용 가능
<'dfn'> 해당 컨텐츠나 문장에서 정의하고 있는 용어를 가리킴.

<'ul'> 태그는 순서가 없는 HTML 리스트(list)를 정의할 때 사용. <'ul'> 요소에 속하는 각 아이템은 <'li'> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 검정색의 작은 원(bullet)이나 사각형 모양으로 표현. HTML5에서는 <'ul'> 요소의 type 속성을 더 이상 지원하지 않으므로, 대신 CSS의 list-style-type 속성을 사용하여 마커의 종류를 변경.

<'ul type="square"'> 여기서 type은 리스트 앞에 모양. circle도 가능

<'ol'> 태그는 순서가 있는 HTML 리스트(list)를 정의할 때 사용.
<'ol'> 요소에 속하는 각 아이템은 <'li'> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 아라비아 숫자나 알파벳으로 표현.

<'ol type="A" start="10”'> 여기서 start=“10”은 10번쨰 부터 시작. 즉, J,K,L부터
<'li'>녹차<'/li'>
<'li'>홍차<'li'>
<'li'>자스민차<'/li'>

<'a'><'/a'> 태그는 하이퍼링크를 걸어주는 태그. (href: 클릭시 이동 할 링크)

• target: 링크를 여는 방법
  • _self: 현재 페이지 (기본값)
  • _blank: 새 탭
  • _parent: 부모 페이지로, iframe 등이 사용된 환경에서 쓰임
  • _top: 최상위 페이지로, iframe 등이 사용된 환경에서 쓰임
  • 프레임이름: 직접 프레임이름을 명시해서 사용

<'html'>
<'body'>
<'a href="http://www.naver.com">Go Naver<'/a><'br>
<'a href="http://google.co.kr" target="_blank">Go Google (new window)<'/a'>
<'/body'>
<'/html'>'

<'form'> 태그는 사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의할 때 사용. 다음과 같은 요소들을 하나 이상 포함할 수 있다.<'button'> <'fieldset'> <'input'> <'label'> <'option'> <'optgroup'> <'select'> <'textarea'>
<'form'> 태그의 action 속성은 폼 데이터(form data)를 서버로 보낼 때 해당 데이터가 도착할 URL을 명시합니다. <'form action="URL"'>

Input type의 종류

• <'input type="button">
• <'input type="checkbox">
• <'input type="color">
• <'input type="date">
• <'input type="datetime-local">
• <'input type="email">
• <'input type="file">
• <'input type="hidden">
• <'input type="image">
• <'input type="month">
• <'input type="number">
• <'input type="password">
• <'input type="radio">
• <'input type="range">
• <'input type="reset">
• <'input type="search">
• <'input type="submit">
• <'input type="tel">
• <'input type="text">
• <'input type="time">
• <'input type="url">
• <'input type="week">

우선 이 정도로 정리할 수 있을 것 같다. 추후에 다른 추가되는 사항이 있으면 더욱 정리해보도록 해야겠다. 이러한 것들을 활용하여 과제를 완료하였고 netlify를 통해 배포까지 완료하였다.
(https://silly-rolypoly-aa0942.netlify.app)

그리고 오늘 React 에서 자주 사용되는 필수 ES6 문법에 대한 세션 및 강의를 들으며 학습해보았다. 사실 전에 어느 정도는 공부해보았던 것들이라 대부분은 무난하게 넘겼다.

const(상수)와 let(변수),
Object 선언, 단축 속성(생략해서 표현하는 방법), 객체 복사,
Template Literals(backtick 및 place holder 이용),
배열/객체 비구조화(구조분해 할당),
전개 연산자 (Spread Operator),
Arrow Functions.

이렇게 다시 한 번 정리 하였는데, 이 중에서 객체 복사 (얕은 복사, 깊은 복사)부분은 새로웠고 한 번에 확 이해되지 않는 부분이라 조금 더 살펴보았다.

얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사한다. 우선, 자바스크립트에서 값은 원시값과 참조값 두 가지 데이터 타입의 값이 존재한다.
원시값은 기본 자료형(단순한 데이터) 즉, Number, String, Boolean, Null, Undefined 등을 말한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장되고, 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다.
반대로 참조값은 여러 자료형으로 구성되는 메모리에 저장된 객체이다. Object, Symbol 등이 있는데, 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)를 저장한다.그래서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것이라 할 수 있다.
원시값을 복사할 때 그 값은 또 다른 독립적인 메모리 공간에 할당하기 때문에, 복사를 하고 값을 수정해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않는다. 이렇게 실제 값을 복사하는 것을 깊은 복사라 할 수 있다.

(깊은 복사 예시, 기존 값에 영향을 끼치지 않음.)

참조값을 복사할 때는 변수가 객체의 참조를 가리키고 있기 때문에 복사된 변수 또한 객체가 저장된 메모리 공간의 참조를 가리키고 있다. 그래서 복사를 하고 객체를 수정하면 두 변수는 똑같은 참조를 가리키고 있기 때문에 기존 객체를 저장한 변수에 영향을 준다. 이처럼 객체의 참조값(주소값)을 복사하는 것을 얕은 복사라 한다.

(얇은 복사 예시, 기존 값에 영향을 준다.)

우리는 보통 깊은 복사를 원한다 그래서 깊은 복사를 위해선
JSON.parse && JSON.stringify 을 쓴다고 한다.
예시는 이러하다
const copy = JSON.parse(JSON.stringify(object));

이렇게 한다고 해서 그렇구나 하긴했지만 이걸 내가 쓸 수 있을까해서 원리를 찾아보았다.
-JSON.stringify()는 객체를 json 문자열로 변환하는데 이 과정에서 원본 객체와의 참조가 모두 끊어집니다. 객체를 json 문자열로 변환 후, JSON.parse()를 이용해 다시 원래 객체(자바스크립트 객체)로 만들어줍니다.-
이런 원리라고는 한다. 다른 방법도 살펴 보았다.

재귀 함수를 구현한 복사, Lodash 라이브러리 사용 등이 있는데 그래도 Lodash 라이브러리 사용 방법이 가장 간단한 것 같다.
예시)const deepCopy = require("lodash.clonedeep")

오늘도 역시나 할 공부들이 많았다. 사실 끝이 없고 나중에 개발자가 된 후에도 너무나 공부할 것은 많은 것 같다. 큰 일이다. 언제쯤이면 내가 나 스스로 개발자라고 해도 부끄럽지 않을 수 있을까. 막막하다..