코드 리뷰 받은 내용과 이번 주에 공부하며 언급된 내용 중에 모르는 개념을 정리해보자. 일단 모르는 개념이 정말 많아서 얼마나 걸릴지 모르지만... 시작해보자
< 목차 >
1. 코드 리뷰 (보완사항)
2. 모르는 개념 정리
1) Cookie, Cache, Session, Token, CDN
2) 일급객체 (first-class object)
3) architecture (아키텍처)
4) hoisting
5) polyfill
6) [메모리 구조] Heap, Stack의 차이
3. 금일 소감
1. 코드 리뷰 (보완사항)
1) 컴포넌트명: 직관적 & 용도에 따라 명확하게 작명
const Button = ({ clickAddButtonHandler }) => {
return <button onClick={clickAddButtonHandler}>
: Button 컴포넌트는 이름부터가 굉장히 범용적으로 쓸 수 있어야 할 것 같아 보인다고 하셨다. 그래서 clickAddButtonHandler라는 props 이름도 그냥 onClick이라고 지어도 좋을 것 같다고 하셨다.
2) props.children을 렌더링
: '추가하기' 버튼명 ⇒ '추가하기' 텍스트를 고정하기보단 props.children을 렌더링하게 해도 좋겠다고 하셨다.
3) Handler 함수를 만들어서 정리
▼ 만들기 전
<button onClick={() => clickDeleteBtnHandler(item.id)}>삭제</button>
<button onClick={() => clickCompleteBtnHandler(item.id)}>{!item.isDone ? "완료" : "취소"}</button>
▼ 만든 후 예시
const handleDeleteButton = () => {
clickDeleteBtnHandler(item.id);
}
<button onClick={handleDeleteButton}>삭제</button>
4) CSS class는 '케밥 케이스'로 적는 것이 일반적
: 파스칼 케이스와 케밥 케이스가 혼용된 것으로 보이며, 1가지를 정해서 프로젝트에서 일관성 있게 작성하는 걸 추천해주셨다.
<div className="Header-Style"><h3> To-do List</h3> <h3>React</h3> </div>
그래서 이 기회에 코딩 표기법에 대해 정확히 알기 위해 종류를 알아보았고, 그 내용을 아래와 같이 정리해봤다.
[코딩 표기법 종류] 5가지
: Camel Case, Snake Case, Kebab Case, Pascal Case, Hungurian Notation
프로그래밍 언어 guide line으로 공통된 표기법이 있다. 개발하는 데 있어서 코딩 컨벤션이 존재해 일관된 코딩 스타일을 가짐으로써 생산성을 높이고 코드 분석에 이점을 얻을 수 있다.
(1) Camel Case (카멜 케이스)
: 처음 단어의 첫 문자는 소문자, 다음 단어의 첫 문자는 대문자
ex) userName, userAge, phoneNumber
(2) Snake Case (스네이크 케이스)
: 모든 단어가 소문자 or 대문자
다음 단어를 _(언더바)로 구분
ex) user_name, user_age, phone_number
(3) Kebab Case (케밥 케이스)
: 다음 단어를 -(대시)로 구분
ex) user-name, user-age, phone-number
(4) Pascal Case (파스칼 케이스)
: 모든 단어의 첫 문자는 대문자
ex) UserName, UserAge, PhoneNumber
(5) Hungurian Notation (헝가리안 표기법)
: 헝가리 사람이 만든 표기법으로, 접두어에 자료형 붙임
IDE 발달로 인해 자료형 변수에 포함시키는것에 대한 이점을 느끼기 힘듦. 알아만 두자.
ex) strUserName, iUserAge, strPhoneNumber
[Reference]
https://velog.io/@jp-share/Coding-%ED%91%9C%EA%B8%B0%EB%B2%95-%EC%B9%B4%EB%A9%9C%EC%BC%80%EC%9D%B4%EC%8A%A4-%ED%8C%8C%EC%8A%A4%EC%B9%BC%EC%BC%80%EC%9D%B4%EC%8A%A4-%EC%8A%A4%EB%84%A4%EC%9D%B4%ED%81%AC%EC%BC%80%EC%9D%B4%EC%8A%A4
5) <input> 태그는 <form> 태그로! + component 분리 추천
: 해당 UI는 결국에 사용자의 입력을 받는 양식이니까 form 요소를 사용하면 더 적절할 것 같다고 하셨다. 그리고 해당 부분을 컴포넌트로 분리하는 작업을 해봐도 좋을 거라고 하셨다. props 설계에 대한 고민하기 좋은 챌린지라고 생각한다고 하셨다.
<div className="Todo-Style">
{/* 띄어쓰기 */}
TITLE
<input
value={title}
onChange={(event) => titleChangeHandler(event)} />
Contents
<input
value={contents}
onChange={contentsChangeHandler} />
{/* btn 연결 확실히 이해하기 */}
<Button clickAddButtonHandler={clickAddButtonHandler} />
</div>
6) [중요] 이 섹션들도 각각(또는 모두를 한 번에) 컴포넌트 분리해보길 추천!
<div><h1> Working...❤️🔥</h1></div>
<div className="TodoBox-Style">
{todo.map(function (item) {
return !item.isDone ? (<Todo key={item.id} item={item} clickDeleteBtnHandler={clickDeleteBtnHandler} clickCompleteBtnHandler={clickCompleteBtnHandler} />) : null
})}
{/* <p>태그는 inline 요소라서 <p>태그 안에 <div> 넣으면 에러남*/}
</div>
<div><h1> Done!🌟</h1></div>
<div className="TodoBox-Style">
{todo.map(item => {
return item.isDone ? (<Todo key={item.id} item={item} clickDeleteBtnHandler={clickDeleteBtnHandler} clickCompleteBtnHandler={clickCompleteBtnHandler} />) : null
})}
</div>
2. 모르는 개념 정리
1) Cookie, Cache, Session, Token, CDN
얼마 전, 챌린지 세션에서 개인적으로 궁금한 사항을 튜터님께 질문하였다.
"튜터님 그러면 로그인했던 사용자 정보를 시간이 많이 지나도 브라우저에서 기억하고 있는 건 메모이제이션 맞나요? 아니라면 무엇인지 궁금합니다."
memoization은 아니고 쿠키에 가깝고 아마 쿠키일 것이라고 말씀하셨다. 더불어, 쿠키와 캐시의 차이점에 대해 알아보라고 말씀하셔서 오늘 정리해보려 한다.
반복되는 작업은 줄이면 줄일수록 좋다. 로그인 작업처럼 한 번 작성하거나 사용한 뒤에는 반복적으로 작업하지 않을 수 있도록 저장해 두는 것이 효율적이기도 하다. 웹 환경에선 이렇게 반복적으로 사용되는 데이터 or 정보를 종류 및 특성에 맞게 저장하고 재활용하기 위해 다음과 같은 5가지 방식을 사용한다.
[반복 작업 저장법 5가지]
: Cookie, Cache, Session, Token, CDN
『브라우저에 저장되는 정보』
(1) Cookie(쿠키)
: 브라우저에 저장되는 정보! 사용자가 갖고 있음
크롬이나 사파리 같은 브라우저에 저장되는 작은 텍스트 조각
- 사용자에게 맡겨도 되는 정보 저장 (ex. 사이트 검색 내역, 장바구니 내역, 팝업 설정(ex. 7일 동안 다시 보지 않기))
- 브라우저의 설정 화면 or 개발자 도구에서 쿠키를 확인 및 수정, 삭제 가능
- 보안에 취약 (제3자 조회 가능)
- Local Storage에 저장!
- 연산을 줄이기 위한 일종
『전송량 줄이고 속도 높임』
(2) Cache(캐시)
: 사용자가 한 번 전송받은 데이터를 저장해놔서 다시 필요로 할 때 로딩 없이 이용할 수 있게 해줌 (임시 저장소에 위치)
캐시는 인터넷 환경뿐 아니라 다양한 곳에서 사용되는 개념이다. 컴퓨터의 하드웨어 안에서도 메모리 안에 들어있는 정보를 더 빨리 가져올 수 있도록 하는 CPU 캐시 등이 있다.
사용자 입장에서 가장 가까이서 접하는 것은 브라우저 캐시다. 사용자가 컴퓨터나 스마트폰에서 인터넷 서핑할 때 받아온 데이터는 브라우저에 캐시 형태로 저장된다. 쿠키처럼 캐시도 각 브라우저 설정에서 조작해 비울 수 있다. 캐시로 인해 사용자는 영상을 재시청할 때 로딩 없이 이용할 수 있다.
쿠키와 캐시 모두 정보를 저장해 재활용하는 기술이지만 쿠키는 사용자의 수고를 덜어주는 데 목적을 두고, 캐시는 데이터의 전송량을 줄이고 서비스 이용 속도를 높이는 데 목적을 둔다.
『서버 부담은 줄이고 사용자와는 가깝게!』
(3) CDN (콘텐츠 전송 네트워크)
: 사용자의 요청을 가까운 서버에 분산시켜 처리해 전송 속도 및 안정성 높임
즉, 여러 지역에 설치된 캐시 서버들을 사용하여 본 서버로 들어오는 요청들을 분산 처리하는 서비스
전 세계 수많은 사용자로부터 끊임없이 들어오는 요청을 처리하다 보면 고사양의 컴퓨터도 감당하기 어려운 부하가 찾아온다. 이로 인한 응답 속도의 저하 혹은 서버 오류는 사용자의 불편으로 이어진다. 이런 문제를 해결하기 위해 사용하는 게 CDN(콘텐츠 전송 네트워크)이다. 지리적으로 분산된 여러 개의 서버를 이용해 웹 콘텐츠를 사용자와 가까운 서버에 전송해서 전송 속도를 높인다.
서버가 데이터를 전 세계 각지에 세워진 캐시 저장 및 전달용 컴퓨터(CDN 업체 소유)들에 보내면 사용자는 본 서버가 아닌 본인에게서 가장 가까운 캐시 서버로 요청을 보내고 데이터를 받아온다. 대량의 데이터를 전송하는 서비스에 필수적이다.
『서버가 나를 알아보는 방법』
(4) Session(세션)
: (로그인 여부 등) 사용자와 서버의 관계가 기억되어 보존되고 있는 상태
웹 사이트에 아이디와 비밀번호를 입력해서 로그인하면 해당 사이트의 회원에게만 허용된 기능들을 사용할 수 있다. 하지만 서버는 로그인에 성공한 사용자와 로그인한 다음 마이페이지 버튼을 누른 사용자가 동일 인물임을 알지 못하기 때문에 로그인한 상태란 걸 서버에 인증하지 못하면 클릭할 때마다 반복해서 로그인해야 한다. 이 번거로움을 해결하기 위해 세션을 사용한다.
사용자가 사이트에 한 번 로그인하면 유효기간이 끝날 때까지 더 이상 아이디와 비밀번호를 입력하지 않아도 되도록 사용자가 이미 서버로부터 인증받았음을 증명해 주는 게 세션이다.
사용자가 서버에 올바른 아이디와 비밀번호로 로그인에 성공하면 서버는 세션 아이디라는 데이터를 만든다. 보통은 ‘2sd98dbawix4’와 같은 식으로 알파벳과 숫자가 혼합된 형식을 갖고 있다. 서버는 영화관에서 티켓을 보관용 부분만 찢어 건네주듯 세션 아이디를 사용자에게 전달하고, 메모리에 아이디 사본을 어떤 사용자의 것인지 적어서 보관한다. 사용자는 서버로부터 받은 세션 아이디를 쿠키로 저장한 다음, 앞으로의 모든 요청에 함께 전달한다.
- [장점] 안전하고 효과적, 메모리에 올려둔 데이터를 빠르게 확인 가능
- [단점] 공간이 한정적이라 서버에 동시 접속하는 사용자가 많아지면 메모리 공간이 부족해져 부하가 걸리고 화면이 움직이지 않는 문제 발생
『세션과는 또 다른 로그인 유지 방식』
(5) Token(토큰)
: 해당 서버만이 만들 수 있는 토큰을 발급함으로써 상태를 저장하지 않고도 사용자의 로그인 여부를 파악할 수 있도록 함
- 메모리 공간을 많이 차지하는 세션 방식의 대안 → 세션 id 대신 토큰 발급해 줌
- 토큰 받아간 사용자는 토큰을 쿠키로 저장해 두고 필요할 때마다 제시 → 토큰 맞으면 서버가 사용자의 요청 허가
[한계점 및 특징]
- 여러 기기에서의 로그인을 제한하기 위해 필요한 때에 로그인되어 있는 사용자를 서버가 강제로 로그아웃을 시킬 수 있어야 하는데, 토큰 방식에서는 이것이 불가능
- 한 번 발행한 토큰은 유효기간이 끝나기 전까지 따로 통제할 수 없기 때문에 세션에 비해 토큰 정보를 탈취 당할 가능성이 높음
- 하지만 토큰은 쿠키처럼 만료 기간을 정할 수 있어서 만료 시간을 짧게 지정해 피해를 줄일 수 있음
- 토큰 방식: 쿠키와 세션을 적절히 섞은 것과 비슷
[Reference]
1) https://hongong.hanbit.co.kr/%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC-%EC%BF%A0%ED%82%A4-%EC%84%B8%EC%85%98-%ED%86%A0%ED%81%B0-%EC%BA%90%EC%8B%9C-%EA%B7%B8%EB%A6%AC%EA%B3%A0-cdn/
2) https://velog.io/@94applekoo/%EC%84%B8%EC%85%98-%EC%BF%A0%ED%82%A4-%ED%86%A0%ED%81%B0-%EC%BA%90%EC%8B%9C-%EC%B4%9D%EC%A0%95%EB%A6%AC
2) 일급객체 (first-class object)
: 힘수를 값으로써 다룰 수 있는 것 (= 일급함수)
즉, 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
* 일급객체 조건
① 무명의 리터럴로 생성 가능 (runtime에 생성 가능)
② 변수 or 자료구조(배열, 객체)로 저장 가능
③ 함수의 매개변수에 전달 가능
④ 함수의 return값으로 사용 가능
함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 것을 의미하고, 이는 *함수형 프로그래밍을 가능케 하는 자바스크립트의 장점 중 하나!
'자바스크립트의 함수'는 다음 예제와 같이 위 일급객체 조건을 모두 만족하므로 일급 객체다.
▼ 예제
// 1. 함수는 무명 리터럴로 생성 가능
// 2. 함수는 변수에 저장할 수 있음
// runtime(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당됨
const increase = function (num) {
return ++num;
};
const decrease = function (num) {
return --num;
};
// 2. 함수는 객체에 저장 가능
const auxs = { increase, decrease };
// 3. 함수의 매개변수에 전달
// 4. 함수의 반환값으로 사용
function makeCounter(aux) {
let num = 0;
return functoin () {
num = aux(num);
return num;
};
}
// 3. 함수는 매개변수에게 함수 전달 가능
const increaser = makeCounter(auxs.increase);
console.log(increaser()); // 1
경우에 따른 예문은 다음과 같다.
(1) 변수에 함수를 담는 경우
/* 일급함수 */
var f1 = function(a) { return a * a; }; // 변수에 함수를 담았다.
console.log(f1); // ƒ (a) { return a * a; }
var f2 = add; // 미리 정의되어 있던 함수도 담을 수 있음
console.log(f2);
(2) 인자로 함수를 넘겨받는 경우
function f3(f) { // 매개변수를 보면 인자로 함수를 넘겨받고 있음
return f();
}
console.log( f3(function() { return 10; }) ); // 10 (함수를 인자로 넘긴다)
console.log( f3(function() { return 20; }) ); // 20 (함수를 인자로 넘긴다)
(3) 함수를 return하는 함수
function add_maker(a) {
return function(b) {
return a + b;
}
}
var add10 = add_maker(10);
// 알기 쉽게 표현하면 add10은 아래와 같은 상황이다.
function add10(a = 10, b) {
return a + b;
}
console.log( add10(20) ); // 30
var add5 = add_maker(5); // 위 함수에 a값이 5로만 변경됐다고 생각하자
var add15 = add_maker(15); // 위의 함수에 a값이 15로만 변경됐다고 생각하자
console.log( add5(10) ); // 15
console.log( add15(10) ); // 25
console.log( add10(20) ); // 30
a라는 변수의 생명주기를 생각해보면 함수를 호출했을 때, 'a를 어떻게 사용하지?' 라는 의문점이 생길 수 있다. 위 경우는 클로저 현상이 발생하였기 때문에 a라는 변수값을 활용할 수 있는 경우에 해당한다. 클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가르킨다.
[Reference]
1) https://j-su2.tistory.com/68
2) https://about-tech.tistory.com/entry/Javascript-%EC%9D%BC%EA%B8%89-%EA%B0%9D%EC%B2%B4First-class-Object%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
3) http://hong.adfeel.info/frontend/%ED%95%A8%EC%88%98%ED%98%95-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D-%EC%88%9C%EC%88%98%ED%95%A8%EC%88%98-2-2/
3) architecture (아키텍처)
: '하나의 서비스가 어떻게 구성되며 어떻게 동작한다'는 걸 표현하는 것 (= 서비스의 동작 원리)
목표하는 대상에 대하여 그 구성과 동작 원리, 구성 요소 간의 관계 및 시스템 외부 환경과의 관계 등을 설명하는 설계도
아키텍처는 의사결정의 결과물이며 이후, 이어질 활동에 대한 기준이 된다. 단순하게 아키텍처를 설계의 결과물로 보는 것은 설계 과정을 단편적으로 바라보는 것이다. 설계는 구상한 것을 현실화하는 것이고, 다양한 제약 사항을 해결하며 초기 목적을 달성하는 과정에서의 최적의 의사결정 집약체를 의미한다. 구조화 과정의 시작이자 기준!
위 소프트웨어 기능의 고도화 그래프를 통해 확인할 수 있듯이 좋지 않은 디자인을 가진 소프트웨어는 시간이 지날수록 기능을 추가하는 것이 어렵고 이후에도 지속적으로 어려워진다. 반면에 좋은 디자인을 가진 소프트웨어는 기능을 추가하기 수월하다. 소프트웨어가 잘 컴포넌트화 되어 있기 때문이다. 이 말은, 더 나은 내부 퀄리티를 가진 소프트웨어를 고른다면 추후엔 새로운 기능을 더 빠르게 많이 추가할 수 있게 되고, 내부 퀄리티가 낮은 제품은 문제 사항에 대한 빠른 개선이 불가능하게 된다는 것이다.
이것이 바로 '소프트웨어 아키텍처가 중요한 이유'라고 Martin Fowler는 말한다.
[Reference]
https://www.osckorea.com/post/bigaebaljado-swibge-ihaehaneun-akitegceoyi-gaenyeom
4) hoisting
: 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것
- 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것
- 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
- 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
- 유효 범위: 함수 블록 {} 안에서 유효
* hoisting 대상
- var 변수 선언과 함수 선언문에서만 호이스팅이 일어난다.
- var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
- let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
* 주의사항
- 호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 한다.
- 변수에 할당된 함수표현식은 끌어 올려지지 않기 때문에 이때는 변수의 스코프 규칙을 그대로 따른다.
▼ 예문
/** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
var myname; // [Hoisting] "선언"
console.log("hello");
myname = "HEEE"; // "할당"
let myname2 = "HEEE2"; // [Hoisting] 발생 X
======
foo();
foo2();
function foo() { // 함수선언문
console.log("hello");
}
var foo2 = function() { // 함수표현식
console.log("hello2");
}
======
/** --- JS Parser 내부의 호이스팅(Hoisting)의 결과 - 위와 동일 --- */
var foo2; // [Hoisting] 함수표현식의 변수값 "선언"
function foo() { // [Hoisting] 함수선언문
console.log("hello");
}
foo();
foo2(); // ERROR!!
foo2 = function() {
console.log("hello2");
}
[Reference]
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
5) polyfill
: 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 지원하도록 구현하는 코드
기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트! 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식
Babel & code-js
: polifill을 위한 Transpiler에는 Babel이 있다. Babel 내부엔 code-js라는 라이브러리가 탑재되어 ES6 이후의 문법들을 polifill 처리 가능
* Transpiler(트랜스파일러): 같은 언어로 변환되지만, 문법적인 것만 변환해주는 것
[Reference]
https://db2dev.tistory.com/entry/%ED%8F%B4%EB%A6%AC%ED%95%84Polyfill%EC%9D%B4%EB%9E%80
6) [메모리 구조] Heap, Stack의 차이
Stack과 Heap은 임베디드 시스템의 기본이다. stack과 heap을 올바르게 설정하는 건 시스템의 안정성을 위해 필수적이다. 하지만 잘못 사용하면 가장 이상한 방식으로 혼란을 초래할 수 있으니 주의해야 한다. Stack과 Heap은 프로그래머가 정적으로 할당해야 한다.
일단 Stack과 Heap의 의미를 먼저 알아보자.
Stack
: 프로그램이 저장하는 메모리 영역
ex)
- 지역 변수
- 반품 주소
- 함수 인수
- 컴파일러 임시
- 인터럽트 컨텍스트
스택에 있는 변수의 수명은 함수의 지속 시간으로 제한된다. 함수가 반환되자마자 사용된 스택 메모리는 후속 함수 호출에서 사용할 수 있게 된다.
Heap
: 시스템의 동적 메모리가 위치하는 곳
동적 메모리와 Heap은 소규모 임베디드 시스템에서 선택 사항으로 간주되는 경우가 많다. 동적 메모리를 사용하면 프로그램의 여러 부분 간에 메모리 공유가 가능해진다. 한 모듈에 할당된 메모리가 더 이상 필요하지 않으면, 다른 모듈에서 재사용할 수 있도록 해당 메모리를 메모리 할당자에게 반환하기만 하면 된다.
Heap에 배치되는 데이터의 몇 가지 예
- 임시 데이터 객체
- C++ 신규/삭제
- C++ STL 컨테이너
- C++ 예외
다음은 Stack과 Heap을 포함한 메모리 구조다. CS상 기초 개념이기도 하니 알아두자.
코드(Code) 영역
- 실행할 프로그램의 코드가 저장되는 영역
- CPU는 코드 영역에 저장된 명령어를 하나씩 가져가서 처리
데이터(Data) 영역
- 전역 변수와 정적(static) 변수가 저장
- 프로그램의 시작과 함께 할당되며, 프로그램이 종료되면 소멸
스택(Stack) 영역
- 함수 호출과 관계되는 지역 변수와 매개 변수가 저장되는 영역
- 함수의 호출과 함께 할당되며, 함수의 호출이 완료되면 소멸
- 스택 영역에 저장되는 함수의 호출 정보를 스택 프레임(stack frame)라고 함
- 스택 영역은 푸시(push) 동작으로 데이터를 저장하고, 팝(pop) 동작으로 데이터 인출
- LIFO(Last-In-First-Out) 방식에 따라 동작
- 메모리의 높은 주소에서 낮은 주소의 방향으로 할당
힙(Heap) 영역
- 변수가 차곡차곡 쌓이는 스택과는 달리 힙 영역에는 임의의 객체가 생성
- 따라서 어떤 객체의 프로퍼티에 값을 저장하거나 저장된 값을 가져오고 싶으면, 그 객체의 힙 영역상 좌표를 알고 있어야 함
더 깊은 내용은 아래의 레퍼런스를 참고하자.
[Reference]
1) https://hooun.tistory.com/193
2) https://www.iar.com/knowledge/learn/programming/mastering-stack-and-heap-for-system-reliability/
3. 금일 소감
다 쓰고 나니 스크롤 길이가 굉장하군..
그래도 모르거나 헷갈렸던 개념 모두 정리해두니 마음이 편안하다. 시간이 꽤 걸리길래 너무 깊게는 정리하지 못했는데 추후 복습하면서 기초적인 개념이 이해되면 좀 더 게시글을 보충하는 식으로 진행할까 한다. 지금 당장은 일단 알아야 하는 개념과 기초 지식이 많으니 하나하나 너무 deep하게 들어가기보단 포괄적으로 공부하는 게 맞는 것 같다.
난해한 노답 삼형제도 좀 더 보충해야 해서 이번 주말도 바쁠 것 같다. 저번 주말은 하루 3~4시간씩 자서 평일 내내 너무 피곤했던 관계 + 튜터님들도 잠 좀 자라고 권유하셨어서 오늘은 좀 잤다.. 좀,,이라기엔 10시간 정도 잤다. 거의 기절 수준,, 공부하자 이제
'[Front-end] 개발자 공부' 카테고리의 다른 글
| [개발 공부 27일차] useParams, useNavigate, Batch (0) | 2024.01.29 |
|---|---|
| [개발 공부 26일차] 선언형 프로그래밍 | every(), some() (1) | 2024.01.29 |
| [개발 공부 24일차] Closure, Execution Context와 Scope (7) | 2024.01.26 |
| [개발 공부 23일차] 비동기와 setState, 의존성 배열과 useEffect, useRef, useContext (1) | 2024.01.24 |
| [개발 공부 22일차] "컴퓨팅적 사고 능력을 길러라" (0) | 2024.01.23 |