기본 자료형 - 숫자, 문자열, 블
복합 자료형 - 배열, 함수, 객체
저장을 할 때 사용하는 공간
스택(Stack) - 기본 자료형과 주소 등을 저장하는 메모리 공간 [잘 쌓는 공간]
-> 기본 자료형은 직접 들어 간다
-> 복합 자료형은 그 주소(addresss)가 들어 간다
힙(Heap)- 복합 자료형을 저장하는 메모리 공간 [대충 큰 것들을 던져서 쌓는 공간]
-> 복합 자료형의 본체가 저장된다
주소
- 저장된 자료의 위치
레퍼런스 한다
- 스택의 주소가 힙의 자료를 가리키는 것
래퍼런스 변수
- 스택에 저장된 것중에 주소가 저장된 변수
const의 제한
- const의 경우 스택에 있는 값에 대해 변경을 못하는 거지, 힙에 있는건 변경할 수 있다
const a = 10
a = 20
//error 발생
const a = [1, 2, 3]
a.push(4)
console.log (a)
.. [1, 2, 3, 4]
//배열에 숫자 추가되어 생성
스코프
글로벌 스코프 (전역변수)
- 함수나 블록 바깥에 선언된 변수
- 어디서든 접근 가능
함수 스코프 (지역변수)
- 함수 안쪽에서만 접근 가능한 변수
- 지역 스코프
블록 스코프
- 블록({ }) 안에서만 접근 가능
- let, const 에만 적용
- 함수 역시 블록 스코프
호이스팅
인터프리터가 변수와 함수의 메모리 공간을 전언 전에 미리 할당하는 것
호이스팅 일어남
- var
- 함수 선언문
호이스팅 일어나지 않음
- let, const
- 함수 표현식
this
모든 실행 컨텍스트에 만들어지는 특별한 변수
this 는 static하지 않아 함수가 호출 될 때마다 값이 달라진다
옵셔널 체이닝 (?.)
undefined, null에서는 어떤 프로퍼티를 참조할 수 없음 *TypeError
이 에러를 방지하기 위해 만들어진 es6 문법임
Q 오늘의 문제
# 프로젝트 명 - 주사위 게임
# 프로젝트 설명
번갈아 가면서 주사위를 던지는 게임입니다. 먼저 누적 점수 50점을 만들면 이깁니다.
주사위를 던져 1~2가 나오면 본인의 현재 점수 초기화 후 턴 변경 3~6이 나오면 현재 점수에 나온 주사위 숫자를 더한다.
이후에 홀드 하고 현재 점수를 누적 점수에 더 할지, 계속 주사위를 던질지 선택한다.
레퍼런스
https://pig-game-v2.netlify.app/
✨주사위 게임 이해를 돕기 위해 제공해 드리는 레퍼런스이며, 요구사항이 다르기 때문에 이 레퍼런스를 그대로 따라 만드는 것이 아닙니다.
디렉토리 구조
- index.html
<body> <!-- html 코드는 여기에 입력하고 아래에 script.js 파일을 삽입합니다 --> <script src="script.js"></script> </body>
- style.css
- script.js
주의사항
- HTML과 CSS는 레퍼런스를 참고해서 레이아웃이 구분될 정도로만 만들어 주시면 됩니다. 너무 디자인에 집착하지 않아도 됩니다.
- css 클래스명은 BEM 방식을 따르기를 권장합니다.
- 주어진 프로젝트 설명을 명확하게 이해하고 해당 요구사항대로 정확하게 구현을 하는 것에 집중합니다.
- 아직 리액트를 본격적으로 들어가기 전 주차이기 때문에, DOM을 직접 조작하는 방식으로 구현합니다.
현재 진행 중.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>주사위 프로젝트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="player">
<div id="info-player1">
<div id="player-main__top">
<div id="player__name">PLAYER 1</div>
<div id="player__score">0</div>
</div>
<div id="player__chance">
<div id="player__current">CURRENT</div>
<div id="player-current__score">0</div>
</div>
</div>
<div id="info-player2">
<div id="player-main__top">
<div id="player__name">PLAYER 2</div>
<div id="player__score">0</div>
</div>
<div id="player__chance">
<div id="player__current">CURRENT</div>
<div id="player-current__score">0</div>
</div>
</div>
</div>
</body>
</html>body {
background-color: #fffdc1;
margin: 10%;
}
#player {
display: flex;
justify-content: space-between;
}
#info-player1 {
border: 2px solid white;
padding: 10rem;
opacity: 80%;
text-align: center;
}'취미 공부 > Weekly' 카테고리의 다른 글
| 2024. 06. 16 (토) 7주차 - Weekly Coding - Day06 (0) | 2024.06.16 |
|---|---|
| 2024. 06. 08 (토) 6주차 - Weekly Coding - Day06 (0) | 2024.06.08 |
| 2024. 05. 25 (토) 4주차 - Weekly Coding - Day06 (0) | 2024.05.25 |
| 2024. 05. 18 (토) 3주차 - Weekly Coding - Day19 (0) | 2024.05.18 |
| 2024. 05. 11 (토) Weekly Coding - Day13 (0) | 2024.05.11 |
