📋 TO-DO LIST
신입 연수원 활동 [o]
3일차 강의 [o]
인턴교육 직후 사수 도움 요청 업무 [o]
팀장님 지시 업무 [o]
중간/일일 업무 보고 작성 [o]
정기 팀/동기 스터디 모임 참석 및 성실도 [x] → 팀 회의없는 날
📍 학습 내용 정리
1. 자바스크립트?
초기 웹페이지의 동적기능을 구현하기 위해 만들어졌습니다.
→ 백엔드 , 모바일 , 게임 등 다양하게 활용됩니다.
HTML과 CSS와 함께 웹 페이지의 동적인 부분을 제어하고
사용자와 상호 작용할 수 있는 기능을 제공합니다.
백엔드와 데이터를 통해 상호작용하는 등 여러 역할을 수행합니다.
자바스크립트는 웹 개발에서 주로 사용되는 프로그래밍 언어로,
브라우저에서의 클라이언트 측 개발부터 서버 사이드 백엔드 개발에 이르기까지
다양한 용도로 활용됩니다.
2. 자바스크립트 문법
변수 선언 및 활용
const
- 한 번 선언된 값은 재할당할 수 없습니다.
하지만 객체나 배열 등의 참조형 데이터의 내부를 수정하는 것은 가능합니다. - 변수가 선언된 이후에만 사용 가능하며, 중복 선언이 불가능합니다.
- const로 선언된 변수는 선언과 동시에 할당되어야 합니다.
const x = 10;
console.log(x) //10
function example() {
const y = 20;
console.log(y) //20
}
console.log(y) // y is not defined
x = 30; //(불가능)let
- 변수가 선언된 이후에만 사용 가능하며, 중복 선언이 불가능합니다.
호이스팅은 발생하지만, 변수가 실제 할당되는 시점까지 접근할 수 없습니다.
let x = 10;
console.log(x) //10
let y = 20;
console.log(y) //20
y = 10;
console.log(y) //10
let c = x+y;
console.log(c); //10+10var
- 변수가 선언되기 전에 사용가능하며, 중복선언이 가능합니다.
호이스팅(hoisting)이 발생하며 이러한 점 때문에 오류를 불러일으키는 경우가 있습니다.
var x = 10;
console.log(x) //10
function example() {
var y = 20;
console.log(y) //20
}
console.log(y) //y is not defined주로 const , let을 활용해서 작성하는것을 지향하며,
호이스팅을 우려해 var의 사용은 가급적 지양하는 편이 좋아보인다.
함수
function
const greet = function(name) {
console.log(`Hello, ${name}!`);
};
greet("Jane"); //출력 : Hello, Jane!arrow function
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("Mike"); // 출력: Hello, Mike!조건문
if문
- if
- if else
- if else
const x = 10;
if (x > 0) { //만약 x가 0보다 크면
console.log("x는 양수입니다."); // ture(결과가 참이라면) 'x는 양수입니다.' 라는 문자열을 출력
} else if (x === 0) { // x가 0보다 크지않고 x가 0가 같다면
console.log("x는 0입니다."); //'x는 0입니다.'라는 문자열을 출력
} else { // 그 외의 경우, 즉 x가 0보다 작다면
console.log("x는 음수입니다."); //'x는 음수입니다.' 라는 문자열을 출력
}swich
const fruit = "apple"; // 변수 fruit를 선언하고 값을 "apple"로 할당
switch (fruit) { // switch 문을 사용하여 변수 fruit의 값에 따라 다른 동작을 수행
case "banana": // 만약 fruit가 "banana"일 경우
console.log("바나나입니다."); // "바나나입니다."를 출력
break; // switch 문을 종료
case "apple": // 만약 fruit가 "apple"일 경우
console.log("사과입니다."); // "사과입니다."를 출력
break; // switch 문을 종료
default: // 만약 fruit가 위의 case에 해당하지 않는 경우
console.log("다른 과일입니다."); // "다른 과일입니다."를 출력
}삼항 조건 연산자
const age = 20; // 변수 age를 선언하고 값을 20으로 할당
const status = (age >= 18) ? "성인" : "미성년자";
// 삼항 조건 연산자를 사용하여 age가 18 이상인 경우 "성인", 그렇지 않은 경우 "미성년자"를 status에 할당합니다.
console.log(status); // status를 출력합니다. 출력: 성인📍 일일보고
부족한 점 : 시도하고 있지만 주석을 달아서 이해력을 키우는게 부족하다고 느낀다.
스스로 시도해본 것들 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter</title>
<style>
#count {
font-size: 24px;
}
</style>
</head>
<body>
<h1>Counter</h1>
<div id="count">0</div>
<button id="incrementBtn">증가</button>
<script src="counter.js"></script>
</body>
</html>//counter.js
// 초기 카운트 값을 설정
let count = 0;
// 카운트를 증가시키는 함수를 정의
function increment() {
// 카운트를 1 증가시킵니다.
count++;
// 증가된 카운트를 화면에 표시
document.getElementById('count').textContent = count;
// 카운트가 20가 같을 경우 색상을 변경
if (count === 20) {
document.getElementById('count').style.color = "red";
}
}
// 버튼 클릭 시 increment 함수를 호출
document.getElementById('incrementBtn').addEventListener('click', increment);해결 내용 : 여러 복잡한 문제에 대해서도 주석을 달아 학습을 이어가고 있다.
알게된 점 :
호이스팅(hoisting) → 자바스크립트에서 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것
var를 사용하면 호이스팅이 발생하여 예상치 못한 오류를 맞딱드릴 수 있기 때문에 가급적 let , const를 활용하는것이 좋다라는 것
헷갈리거나 실수한 점 :
if(조건 a){
}else if(조건 b){
}else{
}
// 처음에는 if 조건의 결과값이 false라면 else로 내려와 else if를 건너뛰는줄 알고 헷갈린 경험회고 : 3일차를 들어서서 자바스크립트를 배워 활용해볼 수 있게 되었고,
그로인해 동적으로 페이지를 제어하고 상호작용하는 요소들을 구현할 수 있게 된것같다.
