포트폴리오

첫번째로 변수를 지정해줍니다.

예전에는 variable 이라는 var 이라고 칭했지만 몇가지 문제때문에 변수선언을 보통 let 이라고 시작을 합니다.

변수를 선언하고 값을 지정 할당 하지 않으면 undefined 라고 뜹니다. 

let name ;

console.log(name); 을 하게되면

let name[이름선언] = 'Leekyungmin'[값 할당] or 

이경민이라는 네임이라는 곳에 값을 할당한다 라고 표현합니다.

이름을 선언하고 값을 할당합니다.

재할당 하는 방법

name = 'john ' 기존 변수를 지정하고 값을 재할당 해줍니다. 그러면 leekyungmin에서 john 이라고 바뀝니다.

1️⃣ 변수

• 데이터가 저장될 수 있는 공간입니다.

• 변수는 직관적이고 이해하기 쉬운 이름을 붙여서 사용합니다.

• 데이터가 저장되는 공간의 메모리 주소 대신 변수의 이름으로 해당 공간을 가리킬 수 있습니다.

2️⃣ let 키워드

• let 키워드를 사용해 변수를 선언할 수 있습니다.

let name;
console.log(name);

// 결과
undefined

• 변수 name을 선언하면 name이란 이름이 붙은 메모리 공간이 생성됩니다.

• 변수를 선언하고 값을 할당하지 않은 경우 undefined가 자동으로 할당됩니다.

• undefined는 자바스크립트 엔진이 부여한 기본값입니다.

1️⃣ const 키워드

• const 키워드를 사용해 상수를 선언할 수 있습니다.

• 상수(constant)는 변하지 않는 값을 의미합니다.

• const로 선언된 변수는 같은 이름으로 다시 선언될 수 없습니다.

• const 변수는 초기화 이후에 새로운 값을 재할당할 수 없습니다.

값을 할당하지않으면/ 주지않으면 선언을 할수없다는 점이 특이점이다.

const 의 할당된 값은 재할당 불가능

변수명을 지을때 

문자, 숫자, 기호 ($,_) 사용가능

첫글자에는 숫자를 쓰지 않는다.

JavaScript에서 변수를 선언하는 방법을 배우고, 실습을 통해 익숙해지는 것을 목표로 과제를 수행해봅시다.

1. 변수를 선언하고 값을 할당해요.

• var 키워드를 사용해 firstName이라는 변수를 선언하고, "John"이라는 값을 저장하세요.
• let 키워드를 사용해 lastName이라는 변수를 선언하고, "Doe"라는 값을 저장하세요.
• const 키워드를 사용해 birthYear라는 변수를 선언하고, 1990이라는 값을 저장하세요.

2. 변수를 출력해요.

• 1번에서 선언한 firstName, lastName, birthYear 변수를 console.log()를 사용해 출력하세요.

3. 변수 값을 변경해요.

• firstName 변수의 값을 "Jane"으로 변경하고, 다시 console.log()를 사용해 출력하세요.
• birthYear 변수의 값을 변경하려고 시도하고, 어떤 오류가 발생하는지 확인하세요.

4. 변수 이름의 규칙을 알아보아요.

• 다음 중 올바른 변수 이름을 선택하세요. 그리고 왜 그런지 설명하세요.
  • [ ] 1name
  • [ ] first_name
  • [ ] lastName
  • [ ] birth-year
  • [ ] $age
• 올바른 변수 이름은 다음과 같습니다:
  • 1name → X: 숫자로 시작하는 변수 이름은 사용할 수 없습니다.
  • [✔] first_name → O: 밑줄(_)을 사용한 변수 이름은 가능합니다.
  • [✔] lastName → O: 카멜 표기법(camelCase)은 유효한 변수 이름입니다.
  • birth-year → X: 하이픈(-)은 변수 이름에 사용할 수 없습니다. 대신 밑줄(_)을 사용해야 합니다.
  • [✔] $age → O: 달러 기호($)는 변수 이름에 사용할 수 있습니다.

변수란 무엇인지 설명할 수 있다.

변수는 데이터를 저장할 수 있는 메모리 공간을 의미합니다. 변수는 이름을 통해 값을 저장하고, 나중에 그 값을 불러와서 사용할 수 있습니다. 쉽게 말하면, 변수는 데이터를 저장하고 참조할 수 있는 이름이 붙은 "그릇"과 같습니다.

변수를 선언할 수 있다.

변수를 선언하려면, 변수 선언 키워드(예: var, let, const)를 사용하고, 변수 이름을 지정한 후 값을 할당합니다. 각 키워드는 다르게 동작하므로 상황에 맞게 사용해야 합니다:

• var: 변수를 선언하며, ES5 이전부터 사용되어 왔고, 변수의 범위가 함수(scope)나 전체 코드 블록에 영향을 미칩니다.
• let: 변수 선언 방식으로, 블록 범위에서만 유효합니다. 재할당이 가능합니다.
• const: 상수 선언 방식으로, 값을 재할당할 수 없습니다. 블록 범위에서 유효합니다.

변수를 선언하고 값을 저장한 후 출력할 수 있다.

변수를 선언하고 값을 할당한 후, console.log()를 사용하여 그 값을 출력할 수 있습니다.

변수에 값을 변경할 수도 있습니다. 예를 들어:

변수의 값을 출력하려면 console.log()를 사용하면 됩니다.

콘솔은 무엇인가요?

웹 개발에서 브라우저 개발자 도구의 활용은 중요해요. 개발자 도구는 네트워크 요청, 메모리 사용, DOM 변경 사항 등을 실시간으로 확인 할 수 있는 다양한 기능이 존재합니다.

그 중 자주 사용하는 기능 중 하나가 바로 콘솔이에요. 원하는 값이나 메시지를 콘솔에 출력하여 무슨 일이 일어나고 있는지 파악할 수 있는거죠. 이걸 통해 내가 작성한 자바스크립트 코드의 동작/흐름을 이해하거나, 디버깅을 할 수 있어요.

콘솔의 기본기능 F12 버튼을 누르게되면

줄 다음칸으로 넘어가는것은 \ 을 치면된다, document 에서는 \이 표시가 안나기때문에 그점을 유의해주면된다 아니면

shift+enter를 누르면됩니다.

데이터베이스란 함수를 저장하는공간을 말한다.

파이어스토어(Firestore)는 구글 클라우드 기반 NoSQL 데이터베이스 입니다.

콜렉션 이름은 데이터베이스에 저장할 이름입니다. 우리가 저장하는곳은 NoSQL 입니다.

데이터베이스에서 우리가 불러들이고 싶은 html input 내장값을 저장할수가 있습니다. 

'데이터 추가 스켈레톤' 이라고 불리는 스크립트를 붙입니다.

우리는 어떠한 클릭버튼을 눌렀을때 이 값을 가져올수있게 button 코드에다가 id값을 넣어주고

id명을 넣어줍니다.

데이터베이스 함수는 api를 코드를 불러올때 썼던 html에서 onclick="dd" 일반 함수 function (){}을 쓰면 먹히지가 않습니다.

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

이렇게 써줘야합니다.

그리고 기본적으로 데이터베이스를 가져올때 스크립트에 파이어베이스 세팅을 해주고

script type = "module" 로 바꿔줍니다.

onclick 이 먹히지 않기때문에 동적으로 바꿔주어야합니다.

[코드로 클릭을 달아준다] 라고 보시면 됩니다.

데이터베이스에서 카드생성하는방법?!

데이터베이스에서 외부정보를 정보를 저장할수있따. 콜렉션이름을 임의대로 저장하면 데이터베이스에 콜렉션이름명으로 저장이 됩니다.

데이터베이스에 저장되어있는 정보를 가져오는 코드번호.

let docs = await getDocs(collection(db, "콜렉션이름"));
docs.forEach((doc) => {
    let row = doc.data();
    console.log(row);
}); 

----------

데이터베이스에 저장된 출력값이 나오게된다. 그리고 input 태그안에 이미지주소를 저장해서 데이터베이스에 전송하면

데이터베이스에서 card값으로 전송을 해주기때문에 영구저장이 가능합니다!

HTML: 웹 페이지의 뼈대, 즉 구조를 만드는 언어예요. 예를 들어, 웹사이트에 제목, 문단, 이미지 등을 배치할 때 사용해요.

CSS: HTML로 만든 웹 페이지의 모양을 꾸미는 언어예요. 색깔, 글꼴, 배치 등을 조정해서 예쁘게 만들어줘요.

HTML로 만든 웹 페이지의 모양을 꾸미는 언어예요. 색깔, 글꼴, 배치 등을 조정해서 예쁘게 만들어줘요.

3. Backend (서버에서 처리)

웹사이트나 앱에서 보이지 않는 부분으로, 서버에서 데이터를 처리하고 관리하는 부분이에요. 예를 들어, 사용자가 입력한 정보가 저장되는 곳이에요.

Backend는 서버에서 동작하는 부분이에요. 예를 들어, 사용자 요청에 따라 데이터를 처리하고 응답하는 부분이에요.

이 코드는 사용자가 /get_user URL에 접속하면, 서버가 "윤서"라는 이름과 나이를 반환하는 예시입니다.

4. Frontend (웹사이트에서 보이는 부분)

우리가 웹사이트나 앱에서 직접 보는 부분이에요. 화면에 보이는 디자인, 버튼, 글자 등을 담당해요.

Frontend는 사용자가 직접 보고 상호작용하는 부분이에요. HTML, CSS, JavaScript가 포함됩니다.

이 버튼을 클릭하면 경고창이 뜨는 간단한 JavaScript 예시입니다.

5. DataBase (데이터 저장)

정보를 저장하는 곳이에요. 예를 들어, 친구 목록, 게시글, 사진 등을 저장하고 쉽게 찾을 수 있도록 도와줘요.

데이터베이스는 정보를 저장하는 곳입니다. SQL을 이용해 데이터를 관리할 수 있어요.

이 예시는 사용자 정보를 저장하는 데이터베이스 테이블을 생성하고, 한 명의 사용자 데이터를 추가하는 코드입니다.

6. SQL (데이터 검색, 수정)

데이터베이스에서 정보를 쉽게 찾고, 추가하고, 수정할 수 있게 도와주는 언어예요.

SQL은 데이터베이스에서 데이터를 검색하고 수정할 때 사용됩니다.

이 예시는 '윤서'라는 사용자의 나이를 26으로 바꾸는 SQL 쿼리입니다.

7. 버그 (Bug)

프로그램이나 웹사이트에서 의도하지 않은 문제가 발생한 거예요. 오류나 잘못된 행동을 일으켜요.

버그는 코드에서 잘못된 부분이에요. 예를 들어, 코드가 예상대로 작동하지 않으면 버그가 있을 수 있습니다.

8. 에러 (Error)

프로그램이 잘못 작동하거나 이해할 수 없는 상황이 생겼을 때 나타나는 메시지예요. 오류를 찾고 수정해야 해요.

에러는 프로그램 실행 중 발생한 문제를 의미해요. 예를 들어, 사용자가 잘못된 입력을 할 때 에러가 발생할 수 있어요.

이 코드에서 "문자열"을 숫자로 바꾸려고 해서 에러가 발생합니다.

 

---

9. 클라이언트 (Client)

우리가 사용하는 컴퓨터나 스마트폰 같은 기기예요. 우리가 웹사이트를 사용할 때 웹사이트가 보여지는 기기예요.

클라이언트는 사용자가 웹사이트나 앱을 사용할 때 사용하는 기기입니다. 예를 들어, 스마트폰이나 컴퓨터가 클라이언트에 해당해요.

---

10. API (Application Programming Interface)

서로 다른 프로그램들이 서로 대화하고 정보를 주고받을 수 있게 도와주는 도구예요. 예를 들어, 날씨 앱이 날씨 정보를 가져오는 방법이에요.

API는 다른 프로그램들이 서로 데이터를 주고받을 수 있게 해주는 도구예요. 예를 들어, 날씨 앱이 날씨 정보를 얻을 때 API를 사용해요.

 

 

이 코드는 API를 이용해 날씨 정보를 가져오는 예시입니다.

 

11. 예외처리 (Exception Handling)

프로그램이 예상치 못한 상황에 부딪혔을 때, 오류를 피하고 잘 처리할 수 있도록 준비하는 방법이에요. 예를 들어, 인터넷이 끊겼을 때, "인터넷이 연결되지 않았습니다"라는 메시지를 보여주는 거예요.

예외처리는 프로그램이 예상치 못한 오류를 만났을 때, 그 오류를 처리하는 방법입니다.

 

이 코드는 0으로 나누는 오류를 예외처리로 처리한 예시입니다.

12. 라이브러리 (Library)

자주 쓰는 기능들을 모아놓은 코드 모음이에요. 복잡한 작업을 쉽게 할 수 있도록 도와줘요.

라이브러리는 다른 사람이 만들어 놓은 유용한 코드들을 모아놓은 것인데, 이를 가져다 쓰는 거예요.

여기서 math 라이브러리를 사용해서 제곱근을 계산하는 예시입니다.

13. 프레임워크 (Framework)

웹사이트나 앱을 만들 때 필요한 기본적인 구조를 제공하는 도구예요. 처음부터 끝까지 다 만들지 않고, 필요한 부분만 쉽게 고칠 수 있게 도와줘요.

프레임워크는 웹사이트나 앱을 만드는 데 필요한 기본적인 틀을 제공하는 도구예요. 예를 들어, Django, Flask 같은 프레임워크가 있어요.

14. 컴파일 (Compile)

컴파일은 소스 코드를 컴퓨터가 이해할 수 있는 형태로 변환하는 과정입니다. 예를 들어, C언어 코드에서 컴파일이 필요해요.

사람이 작성한 코드를 컴퓨터가 이해할 수 있는 코드로 바꾸는 과정이에요.

15. 인터프리트 (Interpret)

인터프리트는 코드를 실행할 때마다 한 줄씩 해석해서 바로 실행하는 방식이에요. Python이 대표적인 예시예요.

코드를 하나씩 읽으면서 바로 실행하는 방식이에요. 컴파일은 미리 다 바꾸지만, 인터프리트는 바로바로 실행돼요.

16. JSON (JavaScript Object Notation)

데이터를 저장하고 교환하는 형식이에요. 사람이 읽기 쉽게 작성돼 있고, 프로그램끼리 데이터를 주고받을 때 자주 사용돼요. 예를 들어, 날씨 앱에서 날씨 정보를 받아올 때 JSON 형식으로 받는 경우가 많아요.

JSON은 데이터를 저장하고 교환할 때 쓰는 형식이에요. 사람이 읽기 쉽게 작성돼 있어요.

이건 사람도 쉽게 읽을 수 있는 데이터 형식입니다.

웹  화면창에 바로 나오게 하는법 : 함수 호출을 바로하는법

$('document').ready(function(){

});

스크립트에 fetch코드를 넣어준다. 

let url = 'http://주소'

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})

우리는 지금 open api 에서 오늘 기온 데이터들을 이 캡처화면 아래 실시간으로 나타낼것이다.

html에서 p태그를 만들어 작성하고 span태그로 id값을 만들어 이 값을 제이쿼리 함수명을 지칭해서 

패치작업을 실시하면된다.

서버에서 클라이언트로 다량의 정보가 이동할때

클라이언트는 분류를 해내야하는데, 그 분류하는과정을 돕는것이 Jason 이라는 것이다.

Jasonview 라는 프로그램을 설치하면 데이터분류가 더 수월해진다. 

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

서버    은행 하나의 지점이라고 보면된다. 예를들어 주소창에 movie.daum.net 까지가 서버입니다.

api:허락된곳만 접근이 가능하고

open api :  모두가 접근이 가능하다.

주소창에 ? 뒤에는 데이터이다. 데이터를 가져가는것이다. 이것이 바로  get 방식이라고 부른다.

스크립트에 fetch코드를 넣어준다. 

let url = 'http://주소'

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})

forEach 구문으로 날씨 제이슨 코드에서 상세한 정보 따오기.

우리는 날씨 open api의 주소를 가져와서 미세먼지 농도가 40이상인 지역에 빨간효과를 준것입니다.

실시간 데이터이다보니 해보니까 신기하기도하고 두근두근합니다.

코드 짜는 능력은 아직까진없지만 그래도 조금씩 따라하니까 다 되더라구요.

일단 우리는 document에 open api의 데이터들을 가져와 줍니다.

onclick 함수를 html에 입력을 해주고 스크립트에서 함수를 선언해줍니다.

그안에서는 fetch의 url을 입력해줍니다.

data값에서 우리는 RealtimeCityAir 에서 row값 안에있는 세밀한 정보들을 가져와야하기때문에 변수를 또 만들어줘야합니다.

모든 데이터들이 실시간으로 다 들어와야하기때문에 forEach  구문을 적어줘야하고,

let temp_html = `` 안에 저 칸들이 있어야합니다.