diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 0f983fc..0000000 Binary files a/.DS_Store and /dev/null differ diff --git a/3team_eunji/2025-08-09/javascript_basic.md b/3team_eunji/2025-08-09/javascript_basic.md new file mode 100644 index 0000000..b46659a --- /dev/null +++ b/3team_eunji/2025-08-09/javascript_basic.md @@ -0,0 +1,75 @@ +# JavaScript 연산자 + + +## 연산자의 종류 + +할당 연산자, +비교 연산자, +산술 연산자, +비트 연산자, +논리 연산자, +문자열 연산자, +조건 (삼항) 연산자, +쉼표 연산자, +단항 연산자, +관계 연산자 + +*** +## 연산자 우선순위 (Operator Precedence) + +연산자 우선순위는 "**어떤 연산자를 먼저 계산할 것인가**"를 정하는 규칙입니다. 수학의 사칙연산과 유사합니다. 곱셈과 나눗셈이 덧셈과 뺄셈보다 우선순위가 높죠. 자바스크립트에서도 마찬가지입니다. 우선순위가 높은 연산자가 먼저 계산됩니다. + + +### 높은 우선순위 연산자: + +괄호 () +단항 연산자 (++, --, !, typeof) +곱셈, 나눗셈, 나머지 연산자 (*, /, %) + + +### 낮은 우선순위 연산자: + +덧셈, 뺄셈 (+, -) +비교 연산자 (>, <, ==, !=) +논리 연산자 (&&, ||) +대입 연산자 (=, +=) + +*** + +## 헷갈리기 쉬운 연산자 + +### 후위 vs 전위 +a = i++는 a에 i의 현재 값을 할당한 후 i를 증가시킵니다. +a = ++i는 i를 먼저 증가시킨 후 a에 새로운 값을 할당합니다. + +### ==와 ===의 차이점 +==는 동등성 비교로, 5 == '5'는 true입니다. 하지만 ===는 엄격한 일치 비교로, 자료형까지 비교하므로 5 === '5'는 false입니다. 일반적으로 === 사용을 권장합니다. + +*** +## 삼항연산자 +삼항 연산자(Ternary Operator)는 자바스크립트에서 간단한 if-else 구문을 한 줄로 작성할 수 있게 해주는 연산자입니다. ?와 : 기호를 사용하며, 조건에 따라 두 개의 값 중 하나를 선택하는 역할을 합니다. + +#### 삼항 연산자 사용 예시 + +if-else 문으로 작성한 경우 +``` +let age = 20; +let message; + +if (age >= 18) { + message = "성인입니다."; +} else { + message = "미성년자입니다."; +} + +console.log(message); // "성인입니다." +``` +삼항 연산자로 작성한 경우 +``` +let age = 20; + +let message = (age >= 18) ? "성인입니다." : "미성년자입니다."; + +console.log(message); // "성인입니다." +``` +주의할 점: 복잡한 조건이나 여러 단계의 else if가 필요할 때는 오히려 가독성을 해칠 수 있습니다. 이런 경우에는 if-else 문을 사용하는 것이 좋습니다. 간단하고 명확한 조건에만 삼항 연산자를 사용하는 것이 바람직합니다. diff --git a/3team_eunji/2025-08-11/for_while_comparison.md b/3team_eunji/2025-08-11/for_while_comparison.md new file mode 100644 index 0000000..d230821 --- /dev/null +++ b/3team_eunji/2025-08-11/for_while_comparison.md @@ -0,0 +1,166 @@ +# for문과 while문 사용 가이드 + +## 📋 개요 + +반복문은 프로그래밍에서 같은 작업을 여러 번 수행할 때 사용하는 제어 구조입니다. `for문`과 `while문`은 각각 다른 상황에 적합한 특성을 가지고 있습니다. + +--- + +## 🔄 for문 (For Loop) + +### 특징 +- **반복 횟수가 명확할 때** 사용 +- 초기화, 조건, 증감이 한 줄에 명시됨 +- 코드가 간결하고 구조적 + +### 사용하기 좋은 상황 + +#### ✅ 권장 사용 사례 +- 배열이나 리스트의 모든 요소를 순회할 때 +- 정확한 횟수만큼 반복해야 할 때 +- 숫자 범위를 순차적으로 처리할 때 +- 인덱스가 필요한 반복 작업 + +### 코드 예시 + +```javascript +// 배열 순회 (for...of) +const fruits = ['apple', 'banana', 'orange']; +for (const fruit of fruits) { + console.log(fruit); +} + +// 전통적인 for문 (인덱스 사용) +for (let i = 0; i < fruits.length; i++) { + console.log(`${i}: ${fruits[i]}`); +} + +// 객체 속성 순회 (for...in) +const person = {name: 'John', age: 30, city: 'Seoul'}; +for (const key in person) { + console.log(`${key}: ${person[key]}`); +} + +// 숫자 범위 반복 +for (let i = 1; i <= 5; i++) { + console.log(`숫자: ${i}`); +} +``` + +--- + +## 🔁 while문 (While Loop) + +### 특징 +- **조건이 참인 동안** 계속 반복 +- 반복 횟수가 미리 정해지지 않음 +- 조건에 따라 동적으로 반복 결정 + +### 사용하기 좋은 상황 + +#### ✅ 권장 사용 사례 +- 특정 조건이 만족될 때까지 반복 +- 사용자 입력을 받을 때 +- 파일을 읽거나 데이터를 처리할 때 +- 게임 루프나 서버 대기 상태 + +### 코드 예시 + +```javascript +// 조건 기반 반복 (사용자 입력) +let userInput = ""; +while (userInput !== "종료") { + userInput = prompt("명령을 입력하세요 (종료하려면 '종료' 입력):"); + console.log(`입력받은 명령: ${userInput}`); +} + +// 숫자 카운터 +let count = 0; +while (count < 5) { + console.log(`카운트: ${count}`); + count++; +} + +// 배열 요소 처리 (조건부) +let numbers = [1, 2, 3, 4, 5, 6]; +while (numbers.length > 0) { + const num = numbers.pop(); + console.log(`처리 중: ${num}`); +} + +// 게임 루프 예시 +let gameRunning = true; +let score = 0; +while (gameRunning) { + // 게임 로직 + score += 10; + if (score >= 100) { + gameRunning = false; + console.log("게임 종료!"); + } +} +``` + +--- + +## ⚖️ 주요 차이점 + +| 구분 | for문 | while문 | +|------|-------|---------| +| **반복 횟수** | 명확함 | 미정 | +| **구조** | 초기화, 조건, 증감이 한 곳에 | 조건만 명시 | +| **가독성** | 간결하고 구조적 | 직관적이고 유연 | +| **사용 시기** | 횟수 기반 반복 | 조건 기반 반복 | +| **성능** | 약간 더 효율적 | 거의 동일 | + +--- + +## 🎯 선택 가이드라인 + +### for문을 선택하세요 when: +- 📊 배열, 리스트, 컬렉션을 순회할 때 +- 🔢 정확한 횟수만큼 반복할 때 +- 📈 순차적인 숫자 처리가 필요할 때 +- 🎯 반복 패턴이 명확할 때 + +### while문을 선택하세요 when: +- ❓ 반복 횟수를 미리 알 수 없을 때 +- 🎮 사용자 상호작용이 필요할 때 +- 📂 파일이나 스트림 처리할 때 +- 🔄 특정 조건이 만족될 때까지 대기해야 할 때 + +--- + +## ⚠️ 주의사항 + +### 무한루프 방지 +```javascript +// ❌ 위험한 코드 +while (true) { + console.log("무한루프!"); // 종료 조건이 없음 +} + +// ✅ 안전한 코드 +let count = 0; +while (count < 100) { // 명확한 종료 조건 + console.log(`안전한 반복: ${count}`); + count++; +} + +// ✅ break 문으로 안전하게 종료 +while (true) { + const input = prompt("계속하시겠습니까? (y/n)"); + if (input === 'n') { + break; // 루프 종료 + } + console.log("계속 진행합니다."); +} +``` + +--- + + +> 💡 **JavaScript 팁**: +> - **간단한 배열 처리**는 `forEach`, `map`, `filter` 같은 배열 메서드 사용 +> - **복잡한 로직이나 제어가 필요한 경우** `for문`이나 `while문` 사용 +> - **비동기 처리**가 필요하면 `for...of`와 `async/await` 조합 추천 \ No newline at end of file diff --git a/3team_eunji/2025-08-11/js_for_study.md b/3team_eunji/2025-08-11/js_for_study.md new file mode 100644 index 0000000..236d8ea --- /dev/null +++ b/3team_eunji/2025-08-11/js_for_study.md @@ -0,0 +1,88 @@ +# for문 연습하기 + +기본 구조 +for( 초기화; 조건; 동작;){ } + +*** + +## 연습예제 5문항 + + +1. 1부터 10까지 출력하기 +> for문을 사용하여 1부터 10까지의 숫자를 순서대로 콘솔에 출력하는 코드를 작성하세요. + + +2. 배열의 요소 출력하기 +> 주어진 배열 fruits의 모든 요소를 for문을 사용하여 콘솔에 출력하는 코드를 작성하세요. + +`const fruits = ['사과', '바나나', '딸기', '포도'];` + +3. 짝수만 출력하기 +> for문과 조건문(if)을 함께 사용하여 1부터 20까지의 숫자 중 짝수만 콘솔에 출력하는 코드를 작성하세요. + +4. 역순으로 출력하기 +> for문을 사용하여 10부터 1까지의 숫자를 역순으로 콘솔에 출력하는 코드를 작성하세요. + +5. 두 배열 합치기 +> 두 개의 배열 arr1과 arr2를 for문을 사용하여 새로운 배열 combinedArr에 합치는 코드를 작성하세요. + +`const arr1 = [1, 2, 3];` +`const arr2 = [4, 5, 6];` +`const combinedArr = [];` + + +*** +## 문제풀이 + +1. +``` javascript +for(i = 1; i <= 10; i++){ + console.log(i); +} +``` + +2. +``` javascript +for(i = 0; i < fruits.length; i++){ + console.log(fruits[i]); +} +``` + +3. +``` javascript +for(i = 0; i <= 20; i++){ + if(i%2 ===0){ + console.log(i) + } +} +``` + +4. +``` javascript +for(i = 10; i > 0; i--){ + console.log(i) +} +``` + +5. +``` javascript +const arr1 = [1, 2, 3]; +const arr2 = [4, 5, 6]; +const combinedArr = []; + +// arr1의 요소 추가 +for (let i = 0; i < arr1.length; i++) { + combinedArr.push(arr1[i]); +} + +// arr2의 요소 추가 +for (let i = 0; i < arr2.length; i++) { + combinedArr.push(arr2[i]); +} + +console.log(combinedArr); // [1, 2, 3, 4, 5, 6] +``` +*** + +> 예제를 통해 연습한 문법 +> - push, length, 배열호출법 diff --git a/3team_eunji/2025-08-11/js_object_study.md b/3team_eunji/2025-08-11/js_object_study.md new file mode 100644 index 0000000..cacea18 --- /dev/null +++ b/3team_eunji/2025-08-11/js_object_study.md @@ -0,0 +1,248 @@ +# JavaScript 객체와 메소드 학습 기록 + +> 자바스크립트 객체의 기본 개념(프로퍼티, 메소드, this 키워드)을 연습한 기록입니다. + +## 📚 학습 목표 +- 객체의 프로퍼티와 메소드 정의하기 +- `this` 키워드 올바르게 사용하기 +- 배열 메소드(`push`, `length`) 활용하기 +- 조건문을 활용한 데이터 보호 로직 구현하기 + +--- + +## 🐕 문제 1: 강아지 정보 관리 + +### 문제 +강아지의 정보를 담는 객체를 만들어보세요. + +**프로퍼티:** +- name: "멍멍이" +- age: 3 +- breed: "골든 리트리버" +- toys: ["공", "뼈다귀"] (이미 2개 장난감이 있음) + +**메소드:** +- `bark()`: "멍멍! 저는 [이름]입니다!" 출력 +- `addToy(toy)`: toys 배열에 새로운 장난감 추가 +- `getToyCount()`: 장난감 개수 반환 + +### 내가 처음 작성한 코드 +```javascript +const dog = { + name: "멍멍이", + age: 3, + breed: "골든 리트리버", + toys: ["공", "뼈다귀"], + bark : function(){ + console.log(`멍멍! 저는 ${name}입니다!`) // ❌ this 누락 + }, + addToy : function(toy){ + this.toys.push(toy) // ✅ 정답 + }, + getToyCount : function(){ + return toys.length // ❌ this 누락 + }, +}; +``` + +### 수정된 정답 코드 +```javascript +const dog = { + name: "멍멍이", + age: 3, + breed: "골든 리트리버", + toys: ["공", "뼈다귀"], + + bark: function(){ + console.log(`멍멍! 저는 ${this.name}입니다!`) // ✅ this.name + }, + + addToy: function(toy){ + this.toys.push(toy) + }, + + getToyCount: function(){ + return this.toys.length // ✅ this.toys.length + } +}; +``` + +### 배운 점 +- 객체 내부 메소드에서 같은 객체의 프로퍼티에 접근할 때는 반드시 `this` 키워드를 사용해야 함 +- `this`는 "이 객체의"라는 의미 + +--- + +## 🍕 문제 2: 피자 주문 관리 + +### 문제 +피자 주문 정보를 관리하는 객체를 만들어보세요. + +**프로퍼티:** +- customerName: "김피자" +- size: "라지" +- toppings: ["페퍼로니", "치즈"] (이미 2개 토핑이 있음) +- price: 25000 + +**메소드:** +- `getOrderInfo()`: "고객: [customerName], 사이즈: [size], 가격: [price]원" 출력 +- `addTopping(topping)`: toppings 배열에 새로운 토핑 추가하고 가격 3000원 증가 +- `getTotalToppings()`: 토핑 개수 반환 + +### 내가 처음 작성한 코드 +```javascript +const pizzaOrder = { + customerName: "김피자", + size: "라지", + toppings: ["페퍼로니", "치즈"], + price: 25000, + getOrderInfo: function(){ + console.log(`"고객: ${this.customerName}, 사이즈: ${this.size}, 가격: ${this.price}원"`); + }, + addTopping: function(topping){ + this.toppings.push(topping); + price = price + 300; // ❌ this 누락, 금액 오타 + }, + getTotalToppings: function(){ + return this.toppings.length; + }, +}; +``` + +### 수정된 정답 코드 +```javascript +const pizzaOrder = { + customerName: "김피자", + size: "라지", + toppings: ["페퍼로니", "치즈"], + price: 25000, + + getOrderInfo: function(){ + console.log(`고객: ${this.customerName}, 사이즈: ${this.size}, 가격: ${this.price}원`); + }, + + addTopping: function(topping){ + this.toppings.push(topping); + this.price += 3000; // ✅ this.price와 올바른 금액 + }, + + getTotalToppings: function(){ + return this.toppings.length; + } +}; +``` + +### 배운 점 +- `this` 키워드 사용이 더 자연스러워짐 +- 객체의 프로퍼티 값을 변경할 때도 `this`를 사용해야 함 +- `+=` 연산자로 값을 증가시킬 수 있음 + +--- + +## 📱 문제 3: 휴대폰 정보 관리 + +### 문제 +휴대폰 정보를 담는 객체를 만들어보세요. + +**프로퍼티:** +- brand: "삼성" +- model: "갤럭시" +- battery: 100 (배터리 잔량 %) +- apps: ["전화", "문자", "카메라"] (이미 3개 앱이 설치됨) + +**메소드:** +- `getPhoneInfo()`: "[brand] [model] - 배터리: [battery]%" 출력 +- `useBattery(amount)`: 배터리를 amount만큼 감소 (0 이하로는 안 됨) +- `installApp(appName)`: apps 배열에 새 앱 추가 +- `getAppCount()`: 설치된 앱 개수 반환 + +### 내가 처음 작성한 코드 +```javascript +const phone = { + brand: "삼성", + model: "갤럭시", + battery: 100, + apps: ["전화", "문자", "카메라"], + getPhoneInfo: function(){ + console.log(`"${this.brand} ${this.model} - 배터리: ${this.battery}%"`) + }, + useBattery: function(amount){ + this.battery -= amount // ❌ 배터리가 음수가 될 수 있음 + }, + installApp: function(appName){ + this.apps.push(appName) + }, + getAppCount: function(){ + return this.apps.length + }, +}; +``` + +### 수정된 정답 코드 +```javascript +const phone = { + brand: "삼성", + model: "갤럭시", + battery: 100, + apps: ["전화", "문자", "카메라"], + + getPhoneInfo: function(){ + console.log(`${this.brand} ${this.model} - 배터리: ${this.battery}%`) + }, + + useBattery: function(amount){ + // 방법 1: if문 사용 + if (this.battery - amount >= 0) { + this.battery -= amount; + } else { + this.battery = 0; + } + + // 방법 2: Math.max 사용 (한 줄로 해결) + // this.battery = Math.max(0, this.battery - amount); + }, + + installApp: function(appName){ + this.apps.push(appName) + }, + + getAppCount: function(){ + return this.apps.length + } +}; +``` + +### 연습문제를 통해 배운 점 +- 조건문(`if`)을 사용하여 데이터 보호 로직을 구현할 수 있음 +- `Math.max()`를 활용하면 더 간결하게 최솟값을 설정할 수 있음 +- 객체의 메소드에서도 복잡한 로직을 구현할 수 있음 + +--- + +## 🎯 핵심 개념 정리 + +### 1. this 키워드 +```javascript +// 객체 내부에서 자신의 프로퍼티에 접근할 때 사용 +const obj = { + name: "test", + getName: function(){ + return this.name; // ✅ this 필수 + } +}; +``` + +### 2. 배열 메소드 +```javascript +// 배열에 요소 추가 +this.배열이름.push(값); + +// 배열 길이 확인 +this.배열이름.length; +``` + + +--- + +*작성일: 2025년 8월 11일* +*학습 시간: 약 1시간* \ No newline at end of file diff --git a/3team_yujin/.DS_Store b/3team_yujin/.DS_Store deleted file mode 100644 index 774b967..0000000 Binary files a/3team_yujin/.DS_Store and /dev/null differ