프로그래밍_8

사전 계획서

1. 프로젝트 개요
프로젝트명: 무드등 iOS 앱
목표: 사용자가 다양한 색상과 밝기를 조절하여 무드등을 설정할 수 있는 앱 개발
주요 기능:
색상 선택 기능
밝기 조절 기능
타이머 설정 기능
사용자 맞춤형 테마 저장 기능
Bluetooth 또는 Wi-Fi를 통한 무드등 제어 기능

2. 기술 스택
프로그래밍 언어: Swift
개발 환경: Xcode
데이터베이스: Core Data 또는 Firebase
UI/UX 디자인: Sketch 또는 Figma

3. 일정 계획
2025년 3월 20일 - 3월 31일: 요구사항 분석 및 기획
2025년 4월 1일 - 4월 15일: UI/UX 디자인
2025년 4월 16일 - 5월 15일: 개발 단계
색상 선택 및 밝기 조절 기능 구현
타이머 및 테마 저장 기능 구현
Bluetooth/Wi-Fi 연결 기능 구현
2025년 5월 16일 - 5월 25일: 테스트 및 버그 수정
2025년 5월 26일 - 5월 30일: 최종 검토 및 배포 준비

4. 작업 분담
팀원 A:

요구사항 분석 및 기획
UI/UX 디자인
테스트 및 버그 수정
팀원 B:

색상 선택 및 밝기 조절 기능 구현
타이머 및 테마 저장 기능 구현
최종 검토 및 배포 준비
팀원 C:

Bluetooth/Wi-Fi 연결 기능 구현
데이터베이스 설계 및 구현
테스트 및 버그 수정

bundle identifier은 식별자라고 생각하면 됨, 이게 달라야 앱이 올라감

실행키: commend(윈도우키)+R

import UIKit // UIKit 프레임워크를 임포트하여 iOS 앱의 UI 요소를 사용할 수 있게 함

class ViewController: UIViewController { // ViewController 클래스를 정의하며, UIViewController를 상속받음

    override func viewDidLoad() { // 뷰가 메모리에 로드된 후 호출되는 메서드
        super.viewDidLoad() // 부모 클래스의 viewDidLoad() 메서드를 호출하여 기본 동작을 수행
        print("viewDidLoad()") // viewDidLoad가 호출되었음을 콘솔에 출력
    }

    override func viewWillAppear(_ animated: Bool) { // 뷰가 화면에 나타나기 직전에 호출되는 메서드
        print("viewWillAppear") // viewWillAppear가 호출되었음을 콘솔에 출력
    }

    override func viewDidAppear(_ animated: Bool) { // 뷰가 화면에 나타난 후 호출되는 메서드
        print("viewDidAppear") // viewDidAppear가 호출되었음을 콘솔에 출력
    }
}

AppDelegate.swift :iOS 애플리케이션의 시작, 씬 관리 및 리소스 정리를 담당하는 파일

import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {



    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        return true
    }

    // MARK: UISceneSession Lifecycle

    func application(_ application: UIApplication, configurationForConnecting connectingSceneSession: UISceneSession, options: UIScene.ConnectionOptions) -> UISceneConfiguration {
        // Called when a new scene session is being created.
        // Use this method to select a configuration to create the new scene with.
        return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
    }

    func application(_ application: UIApplication, didDiscardSceneSessions sceneSessions: Set<UISceneSession>) {
        // Called when the user discards a scene session.
        // If any sessions were discarded while the application was not running, this will be called shortly after application:didFinishLaunchingWithOptions.
        // Use this method to release any resources that were specific to the discarded scenes, as they will not return.
    }


}

SceneDelegate.swift :  iOS 애플리케이션에서 씬의 생명 주기를 관리하고, 씬의 상태 변화에 따라 필요한 작업을 수행하는 파일

import UIKit // UIKit 프레임워크를 임포트합니다.

class SceneDelegate: UIResponder, UIWindowSceneDelegate { // SceneDelegate 클래스를 정의하고, UIResponder와 UIWindowSceneDelegate를 상속받습니다.

    var window: UIWindow? // 현재 씬에 연결된 UIWindow 객체

    // 씬이 세션에 연결될 때 호출되는 메서드
    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // 주어진 UIWindowScene `scene`에 UIWindow `window`를 구성하고 연결하는 데 사용할 수 있는 메서드입니다.
        // 스토리보드를 사용하는 경우, `window` 속성은 자동으로 초기화되고 씬에 연결됩니다.
        // 이 델리게이트는 연결되는 씬이나 세션이 새롭다는 것을 의미하지 않습니다 (새로운 세션에 대한 `application:configurationForConnectingSceneSession`를 참조하세요).
        guard let _ = (scene as? UIWindowScene) else { return } // 씬이 UIWindowScene인지 확인합니다. 아니라면 메서드를 종료합니다.
    }

    // 씬이 시스템에 의해 해제될 때 호출되는 메서드
    func sceneDidDisconnect(_ scene: UIScene) {
        // 씬이 백그라운드로 들어가거나 세션이 버려진 직후에 호출됩니다.
        // 다음 번에 씬이 연결될 때 재생성할 수 있는 씬과 관련된 리소스를 해제합니다.
        // 씬은 나중에 다시 연결될 수 있습니다. 세션이 반드시 버려진 것은 아닙니다 (세션이 버려진 경우는 `application:didDiscardSceneSessions`를 참조하세요).
    }

    // 씬이 비활성 상태에서 활성 상태로 이동할 때 호출되는 메서드
    func sceneDidBecomeActive(_ scene: UIScene) {
        // 씬이 비활성 상태에서 활성 상태로 이동할 때 호출됩니다.
        // 이 메서드를 사용하여 씬이 비활성 상태일 때 일시 중지된 작업을 재시작합니다.
    }

    // 씬이 활성 상태에서 비활성 상태로 이동할 때 호출되는 메서드
    func sceneWillResignActive(_ scene: UIScene) {
        // 씬이 활성 상태에서 비활성 상태로 이동할 때 호출됩니다.
        // 이는 임시 중단(예: 전화 수신)으로 인해 발생할 수 있습니다.
    }

    // 씬이 백그라운드에서 포그라운드로 전환될 때 호출되는 메서드
    func sceneWillEnterForeground(_ scene: UIScene) {
        // 씬이 백그라운드에서 포그라운드로 전환될 때 호출됩니다.
        // 이 메서드를 사용하여 백그라운드에 들어갈 때 변경한 내용을 되돌립니다.
    }

    // 씬이 포그라운드에서 백그라운드로 전환될 때 호출되는 메서드
    func sceneDidEnterBackground(_ scene: UIScene) {
        // 씬이 포그라운드에서 백그라운드로 전환될 때 호출됩니다.
        // 이 메서드를 사용하여 데이터를 저장하고, 공유 리소스를 해제하며,
        // 씬을 현재 상태로 복원하는 데 필요한 씬 특정 상태 정보를 저장합니다.
    }
}

App Life Cycle

포그라운드 모드(Foreground Mode)
활성 (Active): 앱이 화면에 보이고 사용자와 상호작용 중.
비활성 (Inactive): 앱이 화면에 보이지만 사용자 입력을 받지 않음.

백그라운드 모드(Background Mode)
실행 중 (Running): 앱이 백그라운드에서 코드 실행 중, 사용자가 다른 앱으로 전환할 때 잠시 이 상태에 있음.
정지 (Suspend): 앱이 백그라운드에 있지만 코드 실행하지 않음. 필요 시 시스템이 종료할 수 있음.

뷰(View)

모든 뷰는 UIKit의 UIView클래스의 자식클래스이다

uicontrol은 클릭하거나 했을 때 반응함

나머지 툴바, 이미지바 등은 순수하게 화면을 보여줌

일반적으로 보여주는 거는 uiview클래스에서 관리함 

부모를 수퍼뷰, 자식을 서브뷰라고 함 

control: 컨트롤들은 정보를 표시하고 사용자에게 반응하는 뷰들을 포함

viewcontroller.swift ( 뷰의 배경색 설정)

import UIKit // UIKit 프레임워크를 임포트합니다.

class ViewController: UIViewController { // ViewController 클래스를 정의하고 UIViewController를 상속받습니다.

    override func viewDidLoad() { // 뷰가 메모리에 로드된 후 호출되는 메서드
        super.viewDidLoad() // 부모 클래스의 viewDidLoad 메서드를 호출하여 기본 설정을 수행합니다.
        view.backgroundColor = UIColor.green // 뷰의 배경색을 초록색으로 설정합니다.
    }

    // view: UIViewController의 기본 속성으로, 현재 뷰 컨트롤러가 관리하는 화면을 나타냅니다.
    // 이 속성을 통해 화면의 UI 요소에 접근하고, 레이아웃을 설정하며, 이벤트를 처리할 수 있습니다.
}

무드등 만들기

import UIKit // UIKit 프레임워크를 임포트하여 사용자 인터페이스 관련 기능을 사용합니다.

class ViewController: UIViewController { // ViewController 클래스를 정의하고 UIViewController를 상속받습니다.
    
    var colorChangeTimer: Timer? // 배경색을 변경하기 위한 타이머 변수

    override func viewDidLoad() { // 뷰가 메모리에 로드된 후 호출되는 메서드
        super.viewDidLoad() // 부모 클래스의 viewDidLoad 메서드를 호출하여 기본 설정을 수행합니다.
        
        // 1초마다 배경색을 변경하는 타이머를 설정합니다.
        colorChangeTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { timer in
            // 랜덤한 색상을 생성하기 위해 각각의 RGB 값을 생성합니다.
            let red = CGFloat(arc4random_uniform(256)) / 255.0 // 0부터 1까지의 랜덤한 빨간색 값
            let green = CGFloat(arc4random_uniform(256)) / 255.0 // 0부터 1까지의 랜덤한 초록색 값
            let blue = CGFloat(arc4random_uniform(256)) / 255.0 // 0부터 1까지의 랜덤한 파란색 값
            
            // 생성된 RGB 값을 사용하여 뷰의 배경색을 설정합니다.
            self.view.backgroundColor = UIColor(red: red, green: green, blue: blue, alpha: 1.0)
        }
    }
    
    override func viewDidDisappear(_ animated: Bool) { // 뷰가 화면에서 사라질 때 호출되는 메서드
        super.viewDidDisappear(animated) // 부모 클래스의 viewDidDisappear 메서드를 호출합니다.
        
        // 뷰가 사라질 때 타이머를 무효화하고 nil로 설정하여 메모리 해제를 도와줍니다.
        colorChangeTimer?.invalidate() // 타이머를 중지합니다.
        colorChangeTimer = nil // 타이머 변수를 nil로 설정합니다.
    }
}

오디오 재생

import UIKit

import AVFoundation  // 오디오를 다루기 위한 프레임워크 추가

class ViewController: UIViewController {
  
  var colorChangeTimer: Timer?
  var audioPlayer: AVAudioPlayer!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // 배경 음악 재생 설정
    if let soundURL = Bundle.main.url(forResource: "bgm", withExtension: "mp3") {
      do {
        audioPlayer = try AVAudioPlayer(contentsOf: soundURL)
        audioPlayer.play()
      } catch {
        print("음악 파일 로드 또는 재생 중 에러 발생: \(error)")
      }
    }
    
    // 1초마다 반복되는 타이머 생성
    colorChangeTimer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { timer in
      // 랜덤한 빨간색, 초록색, 파란색 값을 생성
      let red = CGFloat(arc4random_uniform(256)) / 255.0
      let green = CGFloat(arc4random_uniform(256)) / 255.0
      let blue = CGFloat(arc4random_uniform(256)) / 255.0
      self.view.backgroundColor = UIColor(red: red, green: green, blue: blue, alpha: 1.0)
    }
  }
  
  override func viewDidDisappear(_ animated: Bool) {
    super.viewDidDisappear(animated)
    
    // ViewController가 사라질 때 타이머를 중지하고 nil로 설정하여 메모리 누수를 방지
    colorChangeTimer?.invalidate()
    colorChangeTimer = nil
    
    // 음악 재생 중지
    audioPlayer.stop()
  }
}

오토레이아웃 : 모든 기기에 자동으로 디자인 적용

-오토레이아웃 사용 방법의 장단점

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var textFeld: UITextField!
    
    @IBOutlet weak var label: UILabel!
    
    @IBAction func displayText(_ sender: Any) {
        label.text = textFeld.text
        startScrolling()
    }
    func startScrolling() {
    UIView.animate(withDuration: 10, delay: 0, options: [.curveLinear, .repeat], animations: {
    self.label.center.x -= self.view.bounds.width
    }, completion: nil)
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}

출처: 한성현 교수님 수업자료

리액트란

-사용자 인터페이스를 만들기 위한 JavaScript라이브러리

- SPA를 쉽고 빠르게 만들수 있도록 해주는 도구

장점

•  빠른 업데이트와 렌더링 속도
•  재사용성이 높은 컴포넌트 기반 구조 
• 메타의 든든한 지원 
• 활발한 지식 공유와 커뮤니티 
• 리액트 네이티브를 통한 모바일 앱 개발 가능

단점

• 방대한 학습량
• 높은 상태 관리 복잡도

프레임워크와 라이브러리

-프로그램 흐름에 대한 제어권한차이

-프레임워크는 전체적인 흐름을 갖고 있으며, 애플리케이션의 코드는 프레임워크에 의해 사용됨

-라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 가져다 사용  

SPA(Single Page Application)

-단일 페이지로 구성된 웹 애플리케이션

*하나의 html 틀을 만들어 놓고 , 사용자가 요청할 그 페이지에 해당하는 콘텐츠를 가져와 동적으로 페이지의 내용을 채워서 보여주는 방식

여러개의 버튼 생성하기

// MyButton 컴포넌트 정의
function MyButton(props) {
    // 클릭 상태를 관리하는 상태 변수와 setter 함수 정의
    const [isClicked, setIsClicked] = React.useState(false);

    // 버튼을 생성하여 반환
    return React.createElement(
        'button', // 'button' HTML 요소 생성
        { onClick: () => setIsClicked(true) }, // 버튼 클릭 시 상태를 true로 변경하는 이벤트 핸들러
        isClicked ? 'Clicked!' : 'Clicked here!' // 클릭 상태에 따라 버튼 텍스트 변경
    );
}

// ButtonGroup 컴포넌트 정의
function ButtonGroup() {
    return React.createElement(
        'div', // 'div' HTML 요소 생성
        null, // div의 속성은 없음
        React.createElement(MyButton), // 첫 번째 MyButton 컴포넌트 생성
        React.createElement(MyButton), // 두 번째 MyButton 컴포넌트 생성
        React.createElement(MyButton)  // 세 번째 MyButton 컴포넌트 생성
    );
}

// DOM의 '#root' 요소를 선택
const domContainer = document.querySelector('#root');

// ButtonGroup 컴포넌트를 렌더링
ReactDOM.render(React.createElement(ButtonGroup), domContainer); // ButtonGroup을 선택한 DOM 요소에 렌더링

CRA(create-react-app)기반 리액트 프로젝트 생성

 npx create-react-app my-app

cd my-app

npm start

*내장 웹서버를 통해 리액트 프로젝트의 웹 페이지에 접속 가능

var를 이용한 변수 선언의 문제점

-# 변수를 덮어 쓸 수 있음

-# 다시 선언(재선언)할 수 있음

let을 이용한 변수 선언

-재선언 불가능, 변수 덮어 쓸 수는 있음

let val2 = "let 변수";
 console.log(val2);
 // let은 덮어 쓰기 가능
val2 = "let 변수 덮어 쓰기“;
 console.log(val2);
 // let은 재선언 불가능/ 에러 발생
let val2 = "let 변수 재선언";
 console.log(val2);

const를 이용한 변수 선언

-재선언, 덮어쓰기 모두 불가능

const val3 = "const 변수";
 console.log(val3);
 // const 변수는 덮어 쓰기 불가능 / 에러 발생
val3 = "const 변수 덮어 쓰기";
 // const 변수는 재선언 불가능 / 에러 발생
const val3 = "const 변수 재선언";

* 예외적으로 오브젝트 타입(객체, 배열, 함수, 기타)의 데이터는 const로 정의해도 도중에 데이터 수정 가능

* 프리미티브 타입 ( boolean, number, bigint, string, undefined, null,symbol)은 데이터 수정 불가

객체속성값변경및추가

 // 객체정의
const obj1 = {
  name: "홍길동",
  age: 24,
 };
 console.log(obj1);
 // 속성값변경
obj1.name = "이순신";
 console.log(obj1);
 // 속성값추가
obj1.addr = "Seoul";
 console.log(obj1);

배열값변경및추가

// 배열정의
const arr1 = ["dog", "cat"];
 console.log(arr1);
 // 첫번쨰값변경
arr1[0] = "bird";
 console.log(arr1);
 // 값추가
arr1.push("monkey");
 console.log(arr1);

*push()함수: 배열 끝에 요소 추가

*리액트 개발에서는 const가장 많이 사용

*동적으로 바뀌는 값은 state 으로 관리

*state로 관리하지 않으면서 처리 도중 수정이 필요한 변수만 let으로 선언

템플릿 문자열

+연산자 사용

const name = "홍길동";
 const age = 24;
 // 기존의 문자열과 변수 결합 방법
const message = "내 이름은 " + name + "입니다. 나이는 " + age + "세 입니다.";
 console.log(message);

` 역따옴표 사용

• `(역 따옴표 또는 백쿼트backquote)로 문자열 감싼다
• 문자열 내부에 ${}로 감싼 안쪽은 자바스크립트로 입력 가능
• 변수 외에도 함수 호출 같은 자바스크립트 코드 넣을 수 있음

const name = "홍길동";
 const age = 24;
 // 템플릿 문자열 이용 방법
const message = `내 이름은 ${name}입니다. 나이는 ${age}세 입니다.`;
 console.log(message);

화살표 함수 () => {}

기존 함수 작성 예

 // 기존함수작성법#1
 function func1(value) {
  return value;
 }
 console.log(func1("func1입니다"));
 // 기존함수작성법#2
 const func2 = function (value) {
  return value;
 }
 console.log(func2("func2입니다"));

화살표 함수 예) 

const func3 = (value) => {
 return value;
 }
 console.log(func3("func3입니다"));

*주의점

인수가1개인경우에는소괄호( ) 생략이 가능함

const func3 = value => {
 return value;
 }
 console.log(func3("func3입니다"));

인수가2개이상인경우소괄호를생략할수없음.

const func3 = value1, value2 => {//에러 발생//(value1, value2)괄호 필요
 return value1 + value2;
 }
 console.log(func3("func3입니다"));

return생략표기법

•처리를한행으로반환하는경우중괄호와return을생략할수있음.

// 처리를한행으로반환하므로{} 및return문생략
const func4 = (num1, num2) => num1 + num2;
 console.log(func4(10, 20)); // 30

• 반환값이여러행일경우에는( )로감싼뒤단일행과같이모아서반환할수있음

const func5 = (val1, val2) => (
 {
 name: val1,  
age: val2,
 }
 )
 console.log(func5("홍길동", 24)); //{name: '홍길동', age: 24}

잘못된return 생략표기법.

•중괄호로감싼뒤return을생략할수있지만값이반환되지않는문제가발생함.

// { }로감쌌지만return 구문을이용하지않음.
 const func4 = (num1, num2) => {
  num1 + num2
 };
 console.log(func4(10, 20)); // undefined

분할대입{ } [ ]

//분할 대입을이용하지않고문자열을출력
const myProfile = {
 name: '홍길동',
 age: 24,
 }
 const message = `내 이름은 ${myProfile.name}입니다. 나이는
${myProfile.age}세 입니다.`;
 console.log(message);
 
 // 분할 대입 이용
const { name, age } = myProfile;
 const message = `내 이름은 ${name}입니다. 나이는 ${age}세 입니다.`;
 console.log(message);

•객체분할대입 

//일부만추출하거나순서를바꾸어추출
const myProfile = {
  name: '홍길동',
  age: 24,
 }
 // 일부만추출
const { age } = myProfile;
 // 순서를바꾸어추출
const { age, name } = myProfile;

// 추출한속성에새로운별명을지정하여사용
const myProfile = {
  name: '홍길동',
  age: 24,
 }
 // 콜론(:)기호를이용해다른변수명(별명)을지정.
 const 
{ name: newName, age: newAge } 
= 
myProfile;
 const message = `내이름은${newName}입니다. 
나이는${newAge}세입니다.`;
 console.log(message);

•배열 분할 대입

•객체와 마찬가지로 배열에서도 분할대입을 이용할 수 있음.

•배열에 분할대입을 할때는 변수선언부에[ ]를 사용하여 배열에 저장된순서에 임의의 변수명을 설정하여 추출할 수 있음.

// 배열인덱스를지정해서대입
const myProfile = ["홍길동", 24];
 // 배열인덱스를지정해서대입
const message = `내이름은${myProfile[0]}입니다. 나이는${myProfile[1]}세입니다.`;
 console.log(message);
 
 // 배열에분할대입
 const myProfile = ["홍길동", 24];
 // 배열분할대입
const [ name, age ] = myProfile;
 const message = `내이름은${name}입니다. 나이는${age}세입니다.`;
 console.log(message);

디폴트값=

디폴트값은함수의인수나객체를분할대입할경우,

값이존재하지 않을때초기값을설정해주는기능.

인수의 디폴트값

//메시지출력함수의인자값을전달하는경우와아닌경우의출력결과
constsayHello = (name) =>console.log(`${name}님, 안녕하세요!`);
 // 인수가정상적으로전달된경우
sayHello('홍길동');
 // 인수가전달되지않은경우//인자값이전달되지않은경우값이존재하지않기때문에undefined로출력
sayHello(); 


// 인수의디폴트값으로출력된경우
constsayHello = (name="게스트") =>console.log(`${name}님, 안녕하세요!`);
 // 인수가전달되지않은경우//인수값이전달되지않은경우디폴트값“게스트”를출력함
sayHello();

•객체분할 대입의 디폴트값

•인수와 마찬가지로 변수명뒤에=로값을 설정하면 속성이 존재하지 않은 경우에 설정할 초기값을 지정할 수 있음.

//존재하지 않는 속성을 출력
 const myProfile = {  
  age: 24,
 }
 const { name } = myProfile;
 const message = `${name}님, 안녕하세요!`;
 console.log(message); 
 
 
 
 //분할대입시의디폴트값을설정
 const myProfile = {  
  age: 24,
 }
 const { name=“게스트” } = myProfile;
 const message = `${name}님, 안녕하세요!`;
 console.log(message);

스프레드구문...

. . . 과 같이 점 세 개를 연결해 배열에 내부요소를순차적으로전개할수 있는표기법

• 1) 요소 전개

 • 스프레드구문

const arr1 = [1, 2];
 console.log(arr1); //[1,2]
 console.log(...arr1);//1 2

• 일반적인함수와스프레드구문

const arr1 = [1, 2];
 const summaryFunc = (num1, num2) => console.log(num1 + num2);
 // 일반적으로 배열값을 전달하는 경우
summaryFunc( arr1[0], arr1[1] ); 
// 스프레드 구문을 이용하는 방법
summaryFunc( ...arr1 );

• 2) 요소모으기

constarr2 = [1, 2, 3, 4, 5];
 const[num1, num2, ...arr3] = arr2;
 console.log(num1); // 1
 console.log(num2); // 2
 console.log(arr3); // [3, 4, 5]

• 3) 요소복사와결합

// 두개의배열결합
const arr4 = [10, 20];
 const arr5 = [30, 40];
 // 스프레드구문을이용해복사
const arr6 = [...arr4];
 // 스프레드구문을이용해결합
const arr7 = [...arr4, ...arr5];
 console.log(arr4);  
console.log(arr6);  
console.log(arr7);  

//두개의객체결합
const arr4 = {val1: 10, val2: 20};
 const arr5 = {val3: 30, val4: 40};
 // 스프레드구문을이용해복사
const arr6 = {...arr4};
 // 스프레드구문을이용해결합
const arr7 = {...arr4, ...arr5};
 console.log(arr4); 
console.log(arr6);   
console.log(arr7);

*등호(=) 복사하면 복사본 데이터의 변경시 원본 데이터도 변경되는 예상치 못한 동작 발생

스프레드를 사용하여 완전히 새로운 데이터를 생성해 복사해야만 한다

const arr8 = [...arr4]; // 스프레드구문을이용해복사

map, filter

*배열 처리에서 기존 for문을 대체하여 효율적으로 코드 작성이 가능한 문법

map함수

기존 for문
const nameArr = ["홍길동", "이순신", "유관순"];
 for(let index=0; index < nameArr.length; index++) {
 console.log(nameArr[index]);
 }
 
 //map함수
 const nameArr = ["홍길동", "이순신", "유관순"];
 nameArr.map((name) => console.log(name));

map 함수의 인수를이용해 요소 순서대로추출

const nameArr = ["홍길동", "이순신", "유관순"];
 nameArr.map((name, index) => 
console.log(`${index}번째 ${nameArr[index]} 입니다.`));

filter함수

*map함수와 동일하며 return 뒤에 조건식을 추가하여 일치하는 것만 반환

const numArr = [1, 2, 3, 4, 5];
 // 홀수(2로나눈나머지가1)인경우만추출
const newNumArr = numArr.filter((num) => {
  return num % 2 === 1;
 });
 console.log(newNumArr); //[1, 3, 5]

삼항연산자

*if ~ else ~ 구문을 단축시켜줄 수 있는 연산자

조건? 조건이true일때의처리: 조건이false일때의처리

//E ?와 :을 이용한예시 
const val1 = 1 > 0 ? "true입니다" : "false입니다.";
 console.log(val1);  
// true입니다.


// 함수 return 부분에 삼항 연산자 이용
const checkSumOver100 = (num1, num2) => {
 return num1+num2 > 100 ? "초과" : "허용 범위"; 
}
 console.log(checkSumOver100(50, 40));
 console.log(checkSumOver100(50, 70));

DOM(Document Object Model)

DOM은HTML 문서의객체기반표현방식으로프로그램에서접근및사용.

•문서객체: HTML 태그를자바스크립트에서사용할수있는객체로만든것

getElementById( ) 메서드를 사용해 문서 객체 1개 선택하기

<html>
 <head>
 <script> 
// 페이지가 완전히 로드된 후 실행될 함수를 지정합니다.
window.onload = function () { 
    // 'header'라는 ID를 가진 HTML 요소를 선택합니다.
    let header = document.getElementById('header'); 
    
    // 선택한 요소의 글자 색상을 주황색으로 변경합니다.
    header.style.color = 'orange'; 
    
    // 선택한 요소의 배경 색상을 빨간색으로 변경합니다.
    header.style.background = 'red'; 
    
    // 선택한 요소의 내용을 'From JavaScript'로 변경합니다.
    header.innerHTML = 'From JavaScript'; 
}; 
</script>
 </head>
 <body> 
    <!-- ID가 'header'인 h1 요소 -->
    <h1 id="header">Header</h1>
 </body>
 </html>

* querySelector( ) 메서드를 사용해 문서 객체 1개 선택하기

* querySelectorAll( ) 메서드를 사용해 문서 객체 여러개 선택하기

<script> 
  // 이벤트를연결합니다. 
  window.onload = function () { 
  
    // 변수를선언합니다. 
    let output = ''; 
    for (let i = 0; i < 10; i++) { 
output += '<h1>Header -' + i + '</h1>'; 
} 
    // 문서객체내부의글자를변경합니다. 
document.body.textContent = output; ➊
    // innerHTML 속성을사용합니다. 
// document.body.innerHTML = output; ➋
  }; 
</script>

// +, - 버튼을 클릭할 때마다숫자를증가/감소시켜주는카운터프로그램

<!DOCTYPE html>
<html>
   
 
<body>
    <button id="increase">+</button>

 <span id="count">0</span>
 <button id="decrease">-</button>
 
 </body>

<script>
 let count = 0;
 document.getElementById("increase").addEventListener("click", () => {
 count++;
 document.getElementById("count").innerText = count;
 });
 document.getElementById("decrease").addEventListener("click", () => {
 count--;
 document.getElementById("count").innerText = count;
 });
 </script>
   
     <img id="image">
    </body>
    </html>

숫자 저장하기 위한 변수 선언

var myNumber = 10 // lowerCamelCase, UpperCamelCase

*lowerCamelCase: 소문자로 시작해, 단어가 바뀔때 대문자로 , 변수명

*UpperCamelCase: 첫단어가 대문자, 클래스 이름

var x = 10 // 정수형 변수 x를 10으로 초기화
print(type(of: x)) // x의 타입을 출력 (결과: Int)

let s = MemoryLayout.size(ofValue: x) // x의 메모리 크기를 바이트 단위로 가져옴
let t = MemoryLayout<Int>.size // Int 타입의 메모리 크기를 바이트 단위로 가져옴

print(s, t) // x의 메모리 크기와 Int 타입의 메모리 크기를 출력

int형

// 정수형 변수 x를 10으로 초기화
var x = 10

// x의 타입 출력
print(type(of: x)) // Int

// x의 값 출력
print(x) // 10

// 변수 이름 x를 문자열로 출력
print("x") // x

// x의 값을 문자열 보간법으로 출력
print("\(x)") // 10

// x의 값을 포함한 문장 출력
print("값은 \(x)입니다.") // 값은 10입니다.

// Int형의 최소값과 최대값 출력
print("Int Min = \(Int.min) Int Max = \(Int.max)")
// Int Min = -9223372036854775808 Int Max = 9223372036854775807

부동 소수점 데이터 타입: Double vs Float

*double형이 기본

// 실수형 변수 myWeight를 58.5로 초기화
var myWeight = 58.5 

// myWeight의 타입 출력
print(type(of: myWeight)) // Double

부울 데이터 타입 : Bool

* 참 또는 거짓(1 또는 0) 조건을 처리

문자 데이터 타입 : Character

문자열 데이터 타입 : String

상수선언: let

 let maximumNumber = 10

변수 선언 var

var myVariable = 10 // :Int

튜플(Tuple)

:여러 값을 하나의 개체에 일시적으로 묶는 방법

// 이름이 없는 튜플
let myTuple1 = (10, 12.1, "Hi")
// 인덱스를 사용하여 접근
var myString = myTuple1.2 // myString에 "Hi" 저장
print(myString) // 출력: Hi
print(type(of:myTuple))//(Int,Double,String)


// 이름이 있는 튜플
let myTuple2 = (count: 10, length: 12.1, message: "Hi")
// 이름을 사용하여 접근
print(myTuple.message, myTuple.2)//에러 발생
print(myTuple2.message, myTuple2.count) // 출력: Hi 10

func logMessage(_ s: String) { // {앞에 ->Void나 ->() 생략
print("Message: \(s)")
}
let logger: (String)->Void = logMessage //여기서는 함수 자료형이라 ->Void 생략 불가
logger("Hello")

typealias Void = ()

// 문자열을 받아서 반환값이 없는 함수 logMessage 선언
func logMessage(_ s: String) {
    print("Message: \(s)") // 전달받은 문자열을 출력
}

// logMessage 함수를 호출하는 클로저를 logger라는 상수로 선언
let logger: (String) -> Void = logMessage // 함수 자료형이므로 ->Void 생략 불가

// logger 클로저를 사용하여 "Hello" 메시지 출력
logger("Hello") // Message: Hello

옵셔널(optional)

 Int("100") // 100이 아닌 Optional(100)을 리턴함,print(Int("100")), Int형 initializer
 Int("Hi") // 정수 값을 반환할 수 없음, 아무런 값도 반환할 수 없다는 의미로 nil을 반환

var x : Int? //옵셔널 정수형 변수 x 선언
var y : Int = 0
x = 10 // 주석처리하면?
print(x) // Optional(10)
print(x!) // forced unwrapping해서 10이 나옴
print(y)//0
x = x!+2 //!필요
print(x)//12
y = x! //!필요
print(y)//12

forced unwrapping

var x : Int?//=nil
//x = 10
//print(x!)

if x != nil {
print(x!)
}
else {
print("nil")
}

주의 : if x!=nil 이라고 쓰면 안됨

optional binding

var x : Int?
x = 10
//print(x)//x=10을 주석처리할 경우 nil출력
if let x{ //옵셔널 변수 x가 값(10)이 있으므로 언래핑해서 일반 상수 xx에 대입하고 if문 실행
print(x)
}
else {
print("nil")
}

여러 옵셔널을 언래핑

var pet1: String?
var pet2: String?
pet1 = "cat"
pet2 = "dog"
if let firstPet = pet1, let secondPet = pet2 {
print(firstPet, secondPet)
} else {
print("nil")
}


// 위 소스를 short form of if-let to the Optional Binding으로 변경
var pet1: String?
var pet2: String?
pet1 = "cat"
pet2 = "dog"

// Optional Binding의 short form 사용
if let firstPet = pet1, secondPet = pet2 { // pet2의 let 생략 가능
    print(firstPet, secondPet) // cat dog
} else {
    print("nil")
}

여러 옵셔널 값 동시에 언래핑

var x: Int?
var y: Int?
x = 10
y = 20

if let xx = x {
    print(xx) // 10
} else {
    print("nil")
}

if let yy = y {
    print(yy) // 20
} else {
    print("nil")
}

Nil-Coalescing Operator(Nil합병연산자) ??

var age: Int?
age = 20
print(age) // Optional(20) - age가 옵셔널이므로 값이 Optional로 감싸져 출력됨

var myAge = age ?? 1
print(myAge) // 20 - age가 nil이 아닐 경우 그 값을 사용하고, nil일 경우 1을 사용

옵셔널을 언래핑하는 여러가지 방법

var x: String? = "Hi" // x는 옵셔널 문자열로 "Hi"로 초기화됨
// = "Hi" 지우고도 실습: x는 nil이 될 수 있음

print(x, x!) // Optional("Hi") "Hi" (x가 nil이 아닐 경우)
if let a = x {
    print(a) // "Hi" (옵셔널 바인딩을 통해 a에 "Hi"가 할당됨)
}

let c = x ?? "" // x가 nil일 경우 빈 문자열("")을 할당
print(c) // "Hi" (x가 nil이 아니므로 "Hi"가 출력됨)

암묵적인 언래핑(implicitly unwrapped)

 var x : Int? //옵셔널 변수 선언방법 1
 var y : Int! //옵셔널 변수 선언방법 2, 암묵적인 언래핑(implicitly unwrapped) 옵셔널, 자동으로 풀리기도 함

let x: Int? = 1 // x는 옵셔널 정수형으로 1로 초기화됨
let y: Int = x! // 강제 언래핑하여 y에 1을 할당
let z = x // z는 옵셔널 정수형 (Optional<Int>)으로 x를 그대로 할당
print(x, y, z) // 출력: Optional(1) 1 Optional(1)
print(type(of: x), type(of: y), type(of: z)) 
// 출력: Optional<Int> Int Optional<Int>

let a: Int! = 1 // a는 암시적 언래핑 옵셔널로 1로 초기화됨
let b: Int = a // a가 자동으로 언래핑되어 b에 1을 할당
let c: Int = a! // 강제 언래핑하여 c에 1을 할당
let d = a // d는 암시적 언래핑 옵셔널 (Optional<Int>)로 a를 그대로 할당
let e = a + 1 // a가 자동으로 언래핑되어 1 + 1 = 2가 됨
print(a, b, c, d, e) // 출력: Optional(1) 1 1 Optional(1) 2
print(type(of: a), type(of: b), type(of: c), type(of: d), type(of: e)) 
// 출력: Optional<Int> Int Int Optional<Int> Int

nil-Coalescing Operator (nil합병연산자)

let defaultAge = 1 // 기본값으로 사용할 정수형 변수
var age: Int? // 옵셔널 정수형 변수 선언
age = 20 // age에 20 할당
print(age) // Optional(20) - age가 옵셔널이므로 값이 Optional로 출력됨

var myAge = age ?? defaultAge // age가 nil이 아니므로 20이 myAge에 할당됨
print(myAge) // 20 - age가 nil이 아니므로 언래핑된 값인 20이 출력됨

var x: Int? = 1 // 옵셔널 정수형 변수 x 선언 및 초기화
var y = x ?? 0 // x가 nil이 아니므로 1이 y에 할당됨
print(y) // 1 - x가 nil이 아니므로 언래핑된 값인 1이 출력됨

Int!형을 property로 갖는 클래스

// MyAge 클래스를 정의
class MyAge {
    // Int형의 강제 언래핑된 Optional 변수 age 선언
    var age: Int!
    
    // 초기화 메서드, age를 매개변수로 받음
    init(age: Int) {
        self.age = age // 초기화된 age 값을 설정
    }
    
    // 나이를 출력하는 메서드
    func printAge() {
        print(age) // age의 값을 출력 (optional(1) 형태로 출력)
        
        // age에 1을 더하여 출력 (강제 언래핑 없이 사용 가능)
        print(age + 1) // 2 (age가 nil이 아님을 보장)
        
        // age를 Int형으로 바인딩
        let age1: Int = age
        print(age1) // 1 (age의 값을 출력)
        
        // age에 2를 더한 값을 age2에 저장하고 출력
        let age2 = age + 2
        print(age2) // 3
    }
}

// MyAge 클래스의 인스턴스를 생성하고 나이를 1로 설정
var han = MyAge(age: 1)

// printAge 메서드를 호출하여 나이를 출력
han.printAge()

for-in문

*for 문 다음의 실행코드가 한 줄이라도 괄호({})를 필수적으로 사용

for i in 1...5 {
print("\(i) 안녕")
}
for _ in 1...5 {
print("안녕")
}

while 반복문

// 변수 myCount를 0으로 초기화
var myCount = 0

// myCount가 1000보다 작은 동안 반복
while myCount < 1000 {
    myCount += 1 // myCount의 값을 1씩 증가
}

// myCount의 최종 값을 출력
print(myCount) // 결과는 1000

repeat~while 반복문

// 변수 i를 10으로 초기화
var i = 10

// repeat-while 루프 시작
repeat {
    i = i - 1 // i를 1 감소시킴
    print(i) // 현재 i의 값을 출력
} while (i > 0) // i가 0보다 큰 동안 반복

// 출력 결과:
// 9
// 8
// 7
// 6
// 5
// 4
// 3
// 2
// 1
// 0

반복문에서 빠져나오기 (break)

for i in 1..<10 { // 1부터 9까지 반복
    if i > 5 { // i가 5보다 큰 경우
        break // 반복문을 종료
    }
    print(i) // i가 5 이하일 때만 출력
}

옵셔널은 연관 값(associated value)을 갖는 enum

// Optional 열거형 정의
public enum Optional<Wrapped> {
    case none          // 값이 없음을 나타내는 경우
    case some(Wrapped) // 값이 있는 경우 (Wrapped 타입의 값을 포함)
}

// Optional 타입의 변수 선언 및 초기화
var x: Int? = 20 // .some(20)으로 초기화됨
var y: Int? = Optional.some(10) // Optional.some을 사용하여 10으로 초기화
var z: Int? = Optional.none // 값이 없는 경우로 초기화

// Optional<Int> 타입의 변수 x1을 직접 초기화 
var x1: Optional<Int> = Optional.some(30) // .some(30)으로 초기화

// 변수 x, y, z, x1의 값을 출력
print(x, y, z, x1) // 출력: Optional(20) Optional(10) Optional.none Optional(Optional(30))

if 문 조건에서 콤마: 조건나열(condition-list)

var x = 1
var y = 2

// 첫 번째 if 문: x가 1이고 y가 2일 때
if x == 1 && y == 2 { // 논리식이 둘 다 참일 때
    print(x, y) // 출력: 1 2
}

// 두 번째 if 문: x가 1이고 y가 2일 때
if x == 1, y == 2 { // 조건이 둘 다 참일 때, 두 조건을 콤마로 연결한 condition-list
    print(x, y) // 출력: 1 2
}

var a: Int? = 1 // 옵셔널 정수형 변수 a 선언 및 초기화
var b: Int? = 2 // 옵셔널 정수형 변수 b 선언 및 초기화
print(a, b) // 출력: Optional(1) Optional(2)
// 강제 언래핑을 통해 값을 출력
print(a!, b!) // 출력: 1 2


if let a1 = a, let b1 = b { // a와 b가 nil이 아니면, 언래핑하여 a1과 b1에 대입
    print(a1, b1) // 출력: 1 2
}

// 오류 발생 코드 (주석 처리된 부분)
// if let a1 = a && let b1 = b { // error: expected ',' joining parts of a multi-clause condition
//     print(a1, b1)
// }

범위 연산자( One-Sided Ranges)

// 문자열 배열 names를 정의
let names = ["A", "B", "C", "D"]

// 배열의 인덱스 2부터 끝까지 반복
for name in names[2...] { // 2번째 인덱스부터 끝까지의 요소를 가져옴
    print(name) // 각 이름을 출력
} 
// 실행 결과:
// C
// D

switch-case문 

let anotherCharacter: Character = "a" // anotherCharacter를 "a"로 초기화

switch anotherCharacter {
case "a": // "a"인 경우
    print("a글자") // 실행문 추가: "a"일 때 출력
case "A": // "A"인 경우
    print("A글자") // 출력: "A글자"
default: // 위의 경우가 아닌 경우
    print("A글자 아님") // 출력: "A글자 아님"
}

//bmi if문 switch-case문으로 변경
//if 문 

let weight = 60.0
let height = 170.0
let bmi = weight / (height*height*0.0001) // kg/m*m
var body = ""
if bmi >= 40 {
body = "3단계 비만"
} else if bmi >= 30 && bmi < 40 {
body = "2단계 비만"
} else if bmi >= 25 && bmi < 30 {
body = "1단계 비만"
} else if bmi >= 18.5 && bmi < 25 {
body = "정상"
} else {
body = "저체중"
}
print("BMI:\(bmi), 판정:\(body)")


//switch-case문
let weight = 60.0
let height = 170.0
let bmi = weight / (height * height * 0.0001) // kg/m*m
var body = ""

switch bmi {
case _ where bmi >= 40:
    body = "3단계 비만"
case _ where bmi >= 30:
    body = "2단계 비만"
case _ where bmi >= 25:
    body = "1단계 비만"
case _ where bmi >= 18.5:
    body = "정상"
default:
    body = "저체중"
}

print("BMI:\(bmi), 판정:\(body)")

where: 조건을 추가

var numbers: [Int] = [1, 2, 3, 4, 5] // 정수 배열 numbers 선언 및 초기화

// numbers 배열의 각 요소에 대해 반복
for num in numbers where num > 3 { // num이 3보다 큰 경우에만 실행
    print(num) // 조건을 만족하는 num을 출력
}

switch-case에서 where절 사용하기

var temperature = 60
switch (temperature)
{
case 0...49 where temperature % 2 == 0:
print("Cold and even")
case 50...79 where temperature % 2 == 0:
print("Warm and even")
case 80...110 where temperature % 2 == 0:
print("Hot and even")
default:
print("Temperature out of range or odd")
}
//과제 : where절 예제 하나 만들기



// 숫자 변수를 정의
var number = 15

// switch 문을 사용하여 number의 값을 평가
switch number {
case 1...10 where number % 2 == 0:
    print("Number is between 1 and 10 and is even.")
case 1...10 where number % 2 != 0:
    print("Number is between 1 and 10 and is odd.")
case 11...20 where number % 2 == 0:
    print("Number is between 11 and 20 and is even.")
case 11...20 where number % 2 != 0:
    print("Number is between 11 and 20 and is odd.")
default:
    print("Number is out of range.")
}

// 출력 결과:
// Number is between 11 and 20 and is odd.

fallthrough

var value = 4
switch (value)
{
case 4:
print("4")
fallthrough
case 3:
print("3")
fallthrough
case 2:
print("2")
fallthrough
default:
print("1")
}

함수

// 함수 정의부의 값을 매개변수, 호출시의 값은 아규먼트라고 부름
#include <stdio.h>
void Fun( int param ) // parameter(매개변수, 인자), 형식 매개변수(formal parameter)
{
printf("%d",param);
}
int main()
{
Fun( 10 ); // 10은 argument(전달인자), 실 매개변수(actual parameter)
return 0;
}

함수 선언 방법

//매개변수를 받지 않으며 결과를 반환하지도 않고 오직 메시지만 출력
func sayHello() { //리턴값 없으면( -> Void ) 지정하지 않아도 됨
print("Hello")
}
void sayHello() { //C, C++
printf("Hello");
}
//하나의 문자열과 하나의 정수를 매개변수로 받아서 문자열을 반환
func message(name: String, age: Int) -> String {
return("\(name) \(age)")
}

c->swift

//c
int add(int x, int y) { //C, C++
return(x+y);
}
add(10,20);

//swift
func add(x: Int, y: Int) -> Int {
return(x+y)
}
print(add(x:10, y:20))//30
print(type(of:add))//(Int,Int)->Int

-기본연산

-산술연산 함수

1. 변수명 지정방법

- 첫글자는 영문자 또는 마침표로 시작(일반적으로 영문자)

- 두번째 글자부터는 영문자, 숫자 , 마침표, 밑줄 사용가능(특수문자 사용불가)

- 대문자, 소문자 구분

- 변수명 중간에 변수명 사용 불가

+)변수명 저장할때 alt+-누르면 <-가 입력됨

2.변수의 자료형

-특수값

• NULL/
• NA(결측값)
• NAN(수학적으로 정의 불가능한 값) ex) sqrt(-3)
• Inf,-Inf (양의 무한대(Inf)/ 음의 무한대(-Inf))

3. 변수값은 변경 가능

1. 벡터의 개념

1차원 배열: 벡터(vector)로 표현

ex) 1학년의 영어 성적 자료

2차원 배열: 매트릭스(martix) 또는 데이터 프레임(data frame)으로 표현

2. 벡터 만들기

-c는 "combine"의 약자, 여러 값을 하나의 벡터로 결합하는 데 사용

w <-c(1,2,3,"a","b","c") 
w #[1]"1""2""3""a""b"c"

*출력 결과 앞에 [1]은  [1]은 "1"이 벡터의 첫 번째 요소를 뜻함(인덱스)

+) R은 인덱스가 1부터 시작함

-연속적인 숫자로 이루어진 벡터 생성

v1 <- c(1,2,3,50:60)
v1 #[1]  1  2  3 50 51 52 53 54 55 56 57 58 59 60

- seq() 함수

일정한 간격의 숫자로 이루어진 벡터 생성 

v3 <- seq(1, 10, 3) 
v3 # [1] 1 3 6 9

-rep() 함수

반복된 숫자로 이루어진 벡터 생성

v5 <- rep(1, times = 5)  # 1을 5번 반복
v5 # 출력 결과: [1] 1 1 1 1 1

v6 <- rep(1:5, times = 3)  # 1에서 5까지 3번 반복
v6 # 출력 결과: [1] 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

v7 <- rep(c(1, 2, 3), times = 3)  #1, 2, 3을 하나의 벡터로 묶고/ 1, 2, 3을 3번 반복
v7 # 출력 결과: [1] 1 2 3 1 2 3 1 2 3

-names()

벡터에 저장된 값에 이름을 부여할 경우

score <- c(90, 85, 70)  # 점수 벡터 생성
score# 출력 결과: [1] 90 85 70

names(score)  # 현재 이름 확인
# 출력 결과: NULL (아직 이름이 지정되지 않음)

names(score) <- c("John", "Tom", "Jane")  # 점수에 이름 지정
names(score)  # 이름 확인
# 출력 결과: [1] "John" "Tom"  "Jane"

score  # 최종 점수 벡터 출력
# 출력 결과: 
# John Tom Jane 
#  90  85  70

-벡터에서 원소 값 추출방법

d <-c(1,4,5,7)
d[1] #d의 첫번째 값 출력
#출력결과: [1] 1

d[2] #d의 두번째 값 출력
#출력결과: [1] 4

*벡터에서 []는 요소를 선택하거나 추출

-여러 값 한번에 추출

d <- c(1, 4, 5, 7, 8)  # 벡터 d 생성

d[c(1, 3, 5)]  # 1번째, 3번째, 5번째 요소 선택
# 출력 결과: [1] 1 5 8

d[1:3]  # 1번째부터 3번째 요소 선택
# 출력 결과: [1] 1 4 5

d[seq(1, 5, 2)]  # 1부터 5까지 2씩 증가하는 인덱스 선택
# 출력 결과: [1] 1 5 8

d[-2]  # 2번째 요소를 제외한 나머지 요소 선택
# 출력 결과: [1] 1 5 7 8

d[-c(3:5)]  # 3번째부터 5번째 요소를 제외한 나머지 요소 선택
# 출력 결과: [1] 1 4

-벡터에서 이름으로 값 추출

GNP <- c(2090, 2450, 960)  # GNP 벡터 생성
GNP
# 출력 결과: [1] 2090 2450  960

names(GNP) <- c("Korea", "Japan", "Nepal")  # GNP에 이름 지정
GNP
# 출력 결과: 
# Korea  Japan  Nepal 
# 2090  2450   960 

GNP[1]  # 1번째 요소 선택
# 출력 결과: [1] 2090

GNP["Korea"]  # "Korea"에 해당하는 요소 선택
# 출력 결과: Korea 
# 2090 

GNP[c("Korea", "Nepal")]  # "Korea"와 "Nepal"에 해당하는 요소 선택
# 출력 결과: 
# Korea  Nepal 
# 2090   960

-벡터의 저장된 원소 값 변경

v1 <- c(1, 5, 7, 8, 9)  # v1 벡터 생성
v1
# 출력 결과: [1] 1 5 7 8 9

v1[2] <- 3  # 2번째 요소를 3으로 변경
v1
# 출력 결과: [1] 1 3 7 8 9

v1[c(1, 5)] <- c(10, 20)  # 1번째 요소를 10으로, 5번째 요소를 20으로 변경
v1
# 출력 결과: [1] 10  3  7  8 20

-프론트엔드 신입개발자 질문&답변

뤼튼

HTML이란 무엇인가요?

HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.
CSS의 역할은 무엇인가요?

CSS는 웹 페이지의 스타일을 지정하는 데 사용됩니다.
JavaScript란 무엇인가요?

JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.
반응형 웹 디자인이란 무엇인가요?

다양한 기기에서 웹 페이지가 잘 보이도록 설계하는 방법입니다.
DOM이란 무엇인가요?

DOM은 문서 객체 모델로, 웹 페이지의 구조를 나타내는 객체입니다.
AJAX란 무엇인가요?

비동기적으로 웹 페이지를 업데이트할 수 있게 해주는 기술입니다.
RESTful API란 무엇인가요?

REST 원칙에 따라 설계된 웹 서비스 API입니다.
프레임워크와 라이브러리의 차이점은 무엇인가요?

프레임워크는 전체 구조를 제공하고, 라이브러리는 특정 기능을 제공합니다.
CSS Flexbox란 무엇인가요?

요소들을 효율적으로 배치할 수 있는 CSS 레이아웃 모듈입니다.
CSS Grid란 무엇인가요?

2차원 레이아웃을 구성할 수 있는 CSS 모듈입니다.
브라우저 호환성이란 무엇인가요?

다양한 브라우저에서 웹 페이지가 동일하게 작동하는 것을 의미합니다.
SEO란 무엇인가요?

검색 엔진 최적화를 통해 웹 사이트의 가시성을 높이는 과정입니다.
버전 관리 시스템이란 무엇인가요?

코드 변경 사항을 추적하고 관리하는 시스템입니다. (예: Git)
모듈화란 무엇인가요?

코드를 독립적인 모듈로 나누어 관리하는 방법입니다.
CORS란 무엇인가요?

Cross-Origin Resource Sharing의 약자로, 다른 출처의 리소스에 접근할 수 있게 해주는 메커니즘입니다.
Webpack이란 무엇인가요?

JavaScript 애플리케이션의 모듈 번들러입니다.
프론트엔드 성능 최적화 방법은 무엇인가요?

이미지 최적화, 코드 분할, 캐싱 등을 사용할 수 있습니다.
프로미스란 무엇인가요?

비동기 작업의 완료 또는 실패를 나타내는 객체입니다.
ES6의 주요 특징은 무엇인가요?

화살표 함수, 클래스, 템플릿 리터럴, 모듈 등이 포함됩니다.
웹 접근성이란 무엇인가요?

장애인 포함 모든 사용자가 웹을 이용할 수 있도록 하는 설계 원칙입니다.

perplexity

HTML/CSS 관련 질문

1. Q: HTML5의 새로운 기능은 무엇인가요?
   A: 시맨틱 태그, 멀티미디어 지원, 캔버스, 로컬 스토리지 등
2. Q: 시맨틱 태그의 장점은?
   A: 검색엔진 최적화, 코드 가독성 향상, 접근성 개선
3. Q: CSS Box Model이란?
   A: 콘텐츠, 패딩, 보더, 마진으로 구성된 요소의 레이아웃 모델
4. Q: Flexbox와 Grid의 차이점은?
   A: Flexbox는 1차원, Grid는 2차원 레이아웃 시스템
5. Q: CSS 선택자 우선순위는?
   A: !important > 인라인 스타일 > ID > 클래스 > 태그

JavaScript 관련 질문

1. Q: var, let, const의 차이점은?
   A: 스코프와 재선언/재할당 가능 여부의 차이
2. Q: 호이스팅이란?
   A: 변수와 함수 선언이 스코프 최상단으로 끌어올려지는 현상
3. Q: 클로저란?
   A: 외부 함수의 변수에 접근할 수 있는 내부 함수
4. Q: 이벤트 버블링과 캡처링의 차이는?
   A: 이벤트 전파 방향의 차이 (상향 vs 하향)
5. Q: Promise란?
   A: 비동기 작업의 최종 완료 또는 실패를 나타내는 객체

프레임워크/라이브러리 관련 질문

1. Q: React의 특징은?
   A: 가상 DOM, 컴포넌트 기반 구조, 단방향 데이터 흐름
2. Q: Vue.js의 장점은?
   A: 학습 곡선이 낮고, 가볍고 유연함
3. Q: Angular의 특징은?
   A: TypeScript 사용, 양방향 데이터 바인딩, 의존성 주입
4. Q: Redux의 핵심 개념은?
   A: 단일 스토어, 액션, 리듀서, 불변성
5. Q: jQuery와 모던 JavaScript의 차이점은?
   A: DOM 조작 방식, 브라우저 호환성, 성능 등의 차이

성능 최적화 관련 질문

1. Q: 웹 성능 최적화 방법은?
   A: 이미지 최적화, 코드 분할, 캐싱, CDN 사용 등
2. Q: 브라우저 렌더링 과정은?
   A: DOM 생성 > CSSOM 생성 > 렌더 트리 구축 > 레이아웃 > 페인트
3. Q: 크리티컬 렌더링 패스란?
   A: 브라우저가 HTML을 화면에 렌더링하는 데 필요한 단계들
4. Q: 레이지 로딩이란?
   A: 필요한 시점에 리소스를 로드하는 기술
5. Q: 디바운싱과 쓰로틀링의 차이는?
   A: 이벤트 호출 제어 방식의 차이 (마지막 호출 vs 일정 간격)

ios 개발 스택 중요도 순서>

Swift - 30%

iOS 앱 개발의 주요 프로그래밍 언어입니다.
Xcode - 20%

iOS 앱 개발을 위한 통합 개발 환경(IDE)입니다.
UIKit - 15%

iOS의 기본 사용자 인터페이스 프레임워크입니다.
SwiftUI - 10%

최신 UI 프레임워크로, 선언적 방식으로 UI를 구축할 수 있습니다.
CocoaPods / Swift Package Manager - 5%

외부 라이브러리 관리 도구입니다.
RESTful API - 5%

서버와 통신하기 위한 API 이해가 필요합니다.
Core Data - 5%

데이터 관리를 위한 프레임워크입니다.
Git - 5%

버전 관리 시스템으로 팀 협업에 필수적입니다.
Testing (XCTest) - 3%

애플리케이션의 품질 보장을 위한 테스트 프레임워크입니다.
App Store 배포 - 2%

hello, world 앱을 만드는 간단한 ios 예제>

<스토리보드 사용하기>

1. 프로젝트 생성:
   
   Xcode를 열고 "Create a new Xcode project"를 선택합니다.
   "App"을 선택하고 "Storyboard"를 선택합니다.
2. UI 구성:
   
   Main.storyboard 파일을 열고, View Controller를 선택합니다.
   왼쪽 패널에서 "Label"을 드래그하여 View Controller에 추가합니다.
   Label의 텍스트를 "Hello, World!"로 변경합니다.
3. 앱 실행:
   
   Command + R을 눌러 앱을 실행합니다.

 코드로 만들기

1. 프로젝트 생성:
   
   Xcode를 열고 "Create a new Xcode project"를 선택합니다.
   "App"을 선택하고 "Swift"와 "UIKit"을 선택합니다.
2. 코드 작성:
   
   ViewController.swift 파일을 열고, viewDidLoad 메서드에 아래 코드를 추가합니다.
   swift
   
   
   

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.text = "Hello, World!"
        label.textAlignment = .center
        label.frame = CGRect(x: 0, y: 0, width: 300, height: 50)
        label.center = view.center
        view.addSubview(label)
    }
}

3.앱 실행:

Command + R을 눌러 앱을 실행합니다.

<SwiftUI 사용하기>

1. 프로젝트 생성:
   
   Xcode를 열고 "Create a new Xcode project"를 선택합니다.
   "App"을 선택하고 "SwiftUI"를 선택합니다.
2. 코드 작성:
   
   ContentView.swift 파일을 열고 아래 코드를 작성합니다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
            .font(.largeTitle)
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3. 앱 실행:

Command + R을 눌러 앱을 실행합니다.

스토리보드, 코드, SwiftUI의 장단점을 비교>

예시)

let optionalValue: String? = nil // 옵셔널 문자열 변수, 현재 nil로 초기화
let defaultValue = "기본 값" // 기본 값 문자열 변수

// nil-coalescing 연산자 사용
let result = optionalValue ?? defaultValue // optionalValue가 nil이면 defaultValue를 사용

print(result) // 결과 출력: 기본 값

https://bbiguduk.gitbook.io/swift

이름 10번 출력

let name = "홍길동" // 출력할 이름

// 0부터 9까지 반복
for _ in 0..<10 {
    print(name) // 이름 출력
}

vscode 에서 Django설치

-Python과 Python Extension Pack  설치

-Django설치 :터미널에서

pip install django

- Django 프로젝트가 생성

django-admin startproject project

- Django 개발 서버가 시작

python manage.py runserver

-.vscode 폴더 안에 launch.json 파일을 생성 하는 법

• ctrl+shift+d(실행 및 디버그)로 "launch.json 파일 생성" 옵션을 선택후 launch.json 생성

*패키지: 프로젝트에서 필요한 외부 도구나 라이브러리

*Node.js에서는 이 패키지를 npm이라는 도구로 설치, 관리함

1. Node.js 프로젝트를 초기화하고 package.json생성

npm init -y

*package.json 파일은 프로젝트의 설정, 의존성 및 스크립트 등을 저장하는 파일

2. Express설치

npm install express

 *실행하면 node_modules폴더 생성됨( express 관련 파일들이 설치됨)

3.의존성 설치

npm install

*package.json에 정의된 모든 의존성 패키지를 설치함(프로젝트에 필요한 라이브러리 자동 설치)

4.package.json 에 scripts 안에 

"start": "node app.js"

추가하면 터미널에서 npm start 명령어를 실행하면 app.js 파일이 실행됨(서버를 쉽게 실행 가능)

서비스 동작 원리

1. 주소 입력과 DNS 조회

브라우저에 "www.example.com"을 입력하면 DNS(도메인 이름 시스템)가 이를 해당 서버의 IP 주소로 변환

• DNS 역할: 도메인 이름과 IP 주소를 연결하는 인터넷의 주소록.
• 비유: 도메인 이름은 사람이 기억하기 쉬운 주소, IP 주소는 서버의 정확한 위치를 알려주는 지도 좌표.

과정 요약:

1. 사용자가 브라우저에 주소를 입력.
2. DNS 서버가 해당 주소의 IP 주소를 반환.
3. 브라우저가 반환된 IP 주소를 통해 서버에 연결.

2. 서버와 데이터베이스의 역할

• 서버(Server): 클라이언트의 요청을 처리하고, 필요한 정보를 제공
• 데이터베이스(Database): 정보를 저장하고, 요청에 따라 데이터를 반환

서버-클라이언트 동작 예시:

1. 사용자가 쇼핑몰에서 상품을 검색.
2. 서버가 데이터베이스에서 해당 상품 정보를 가져와 클라이언트에 전달.
3. 복잡한 계산이 필요한 경우(예: 할인율 계산), 서버가 연산 후 결과를 반환.

3. 구현 방법: 기본 프로그래밍 개념

• 반복문(Loop): 특정 작업을 반복 수행.
  • 예: 음악 플레이어에서 노래를 반복 재생.
• 조건문(Conditional): 특정 조건에 따라 서로 다른 결과 실행.
  • 예: 회원가입 시 중복된 아이디를 확인.

4. 코드 재사용과 효율적 개발

• 라이브러리: 자주 사용하는 코드를 미리 만들어 놓은 도구 모음.
• 프레임워크: 개발을 쉽게 하고 구조를 표준화하는 틀.
  • Node.js: 서버 개발.
  • Express: API를 쉽게 구현할 수 있는 Node.js 프레임워크.

5. 웹 개발의 핵심 기술

• HTML: 웹 페이지의 구조를 정의.
  • 예: 이미지, 텍스트, 버튼 위치.
• CSS: 스타일(크기, 색상, 배경 등)을 정의.
• JavaScript: 동적인 기능과 사용자 반응을 구현.

비유:

• HTML은 건물의 뼈대,
• CSS는 외관,
• JavaScript는 건물의 전기 시스템으로, 사용자의 상호작용을 처리.

6. 데이터베이스 종류와 선택

종류특징)

7. 모바일 개발의 차이점

플랫폼언어장점)

8. 데이터 직무와 블록체인

• 데이터 직무:
  • 데이터 엔지니어: 데이터를 효과적으로 처리하고 관리.
  • 데이터 애널리스트: 데이터를 분석해 비즈니스 전략 제안.
  • 데이터 사이언티스트: 머신러닝을 통해 데이터 기반 예측 수행.
• 블록체인 개발:
  • Solidity 언어를 사용해 DApp(탈중앙화 애플리케이션) 개발.
  • 활용 예시: 안전한 전자 투표 시스템 구현.

9. IoT와 임베디드 시스템

• IoT(사물 인터넷): 다양한 기기가 인터넷에 연결되어 데이터 교환.
  • 예: 스마트 냉장고가 유통기한을 알려줌.
• 임베디드 시스템: C 언어와 Python을 사용해 가전제품 및 로봇 청소기 설계.