방방이네 블로그

함수를 정의하는 기본적인방법은

function funcName () {
	...
}

이렇게 작성한다

이것을 더간결하게 줄일수있으며

익명함수를 만들땐

function () {
   ...
}

이름을 생략할수있으며

화살표함수

()=>{
 ...
}

화살표 함수로 더욱더 줄일수도있습니다.

또한 화살표함수를 다룰때에는 구문을 단축 할 수도 있습니다.

1. 하나의 파라미터 일때에는 소괄호()가 생략됩니다

name => {
    console.log(name)
}

이렇게 파라미터가 하나일경우에는 소괄호를 생략할수있습니다

파라미터가 0개 거나 2개이상일경우에는 반드시 소괄호를 () 작성해줍니다

() =>{
     console.log("hello world")
}

(name,age) => {
		console.log(name , age)
}

2. 반환문 외에 어떠한 로직이없을경우 중괄호{}와 return 키워드를 생략할수있습니다

name => console.log(name)

number => number * 5

이런식으로 작성이 가능합니다.

3. 객체를 반환하는경우에는 반드시 소괄호로 감싸야합니다

함수를 만들때에는 자바스크립트에서 제공하는 객체를 만드는 방식의 중괄호{}만 사용할경우 객체로인식하는것이아닌 함수 본문 래퍼로 인식합니다 그렇기 때문에 반드시 객체를 소괄호()로 감싸야 이것이 객체라는것을 알려줄수있습니다

//잘못된방법
number => {age :number}

//올바른방법
number => ({age :number})

Array.from() MDN의 설명입니다

정적 메서드는 반복 가능하거나 배열 과 유사한 객체 에서 **Array.from()**얕은 복사된 새 인스턴스를 만듭니다 .Array

Array.from() 의 첫번째 파라미터는 배열의 길이를 나타 냅니다.

문자열은 배열과 유사한형태의 객체이므로

Array.from("안녕하세요")

[ '안', '녕', '하', '세', '요' ]

이렇게 글자하나하나를 가진 리스트로 반환해준다

또한 임의의 숫자 리스트를 만들기위해서는 from()메소드에 두번째파라미터는 콜백함수를 사용할수있습니다.

Array.from() 메소드의 콜백 함수는 세 개의 인자를 받습니다:

1. 현재 생성되는 요소의 값
2. 현재 생성되는 요소의 인덱스
3. 생성되는 배열 자체

길이 10개짜리 배열을 만들고싶다면

Array.from({length:10})

[ undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined ]

from()메소드에 첫번째 파라미터은 배열과 유사한객체를 전달할떄 속성값을 length로 지정해두면 해당길이의 배열을 만듭니다

하지만 이코드는 길이는 10개인 리스트이지만 값이없기때문에 길이가 10개이나 값이 undefined 인 배열10개가 만들어집니다.

Array.from({length:10},(_,i)=>i+1)

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

Array.from()의 콜백함수의 파라미터는 위의 설명처럼

1. 현재 생성되는 요소의 값 : undefined
2. 현재 생성되는 요소의 인덱스 : 0부터 길이만큼시작

첫번째 파라미터를 “_” 언더바로 표시하게되면 사용하지않겠다는 자바스크릡트의 관례적인표현입니다.

요소의값을 사용하지않고 인덱스값에 +1 을 해주므로써

[1,2,3,4,5,6,7,8,9,10] 과같은 배열을 만들수있습니다.

var pattern1 = /[0-9]/; //숫자
var pattern2 = /[a-zA-Z]/; //영어
var pattern3 = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; //한글
var pattern4 = /[~!@#\#$%<>^&*]/; //특수문자

var testStr = "테스트test";

//숫자 체크하고 싶을 때
if (pattern1.test(testStr)) {
	alert("숫자가 포함됩니다."); //false
}

//영어 체크하고 싶을 때
if(pattern2.test(testStr)){
	alert("영어가 포함됩니다."); //true
}

//한글 체크하고 싶을 때
if(pattern3.test(testStr)){
	alert("한글이 포함됩니다."); //true
}

//한글, 영어 둘다 포함해서 체크하고 싶을 때
if(pattern3.test(testStr) && pattern2.test(testStr)){
  alert("한글 영어 모두 포함됩니다."); // true
}

달력을 만들기위해 여러가지 방면으로 생각하고 검색+GPT를 이용했습니다.

달력라이브러리를 사용하지않고 현재있는 달력을 만들게된계기는 내가 원하는 달력을 만들고싶었기 때문이였습니다 라이브러리를 쓰게되면 만들어둔 달력이기에 내가 원하는 만큼에 모양이 나오지않을꺼같아 이렇게 개발하게 되었습니다

그리고 자바스크립트로만으로 달력을 구현하는것을 해보고도 싶었구요 전체 코드를 남기겠습니다 

달력 구현 알고리즘

1. 달력은 년원-일이표시되며 "요일이란것이있다"

2. 요일은 일월화수목금토일 이다.

3. 오늘이 몇년 몇월 몇일인지 알아야한다.

4. 이번달 첫번째날과 마지막날을 알아야한다.

5. 달력의 UI는 7열 n행이 반복되는 형태이다.

크게 이렇게 생각하고 제작을했습니다

1. 달력은 년-월-일이 표시되며 "요일"이란것이있다

2. 요일은 일 월 화 수 목 금 토일 이다

const daysInWeek = ['일', '월', '화', '수', '목', '금', '토'];

3. 오늘이 몇년 몇월 몇일인지 알아야한다 ()

    const [currentDate, setCurrentDate] = useState(new Date());

new Date() 객체를 통해   const today = new Date() 라고 하셔도 무방합니다.

4. 이번달 첫번째날과 마지막날을 알아야한다.

//현재 월의 첫번째날
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
//그 달의 날짜수 (마지막날을 체크함)
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();

월의 첫번째달은  3번을 활용하는것입니다.

newDate() 객체의 파라미터는 년,월,일,시,분,초 단위로 파라미터를 받는 메소드입니다.

그렇기에 이번달의 첫번째날은 new Date(올해,이번달,1) 을 작성하면 이번달의 첫째달에 대한 정보를 얻을수가있으며 

달의수는 28~31로 변화가있습니다.

그래서 이것을 제대로구현하면 윤달을 계산하는식을 만들어야하는데 자바스크립트에는 Date()객체가 있으므로 더편하게 만들수있습니다.

마지막날은 new Date(올해, 이번달+1 (다음달), 첫째날-1 (이전달의 마지막날 )입니다  이해가 되시나요 ? 

즉 new Date(올해,다음달,0) 이되는것입니다 . 

이번달의 마지막날은  다음달에 첫날에 전날입니다. 

 Date()객체를 보다쉽게 많이 이해하게되었네요

MDN교수님 호이스팅이 뭔가요?

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

-MDN-

뭐라고요..?

MDN 공식문서는 늘 그렇듯 쉬운걸 어렵게 설명한다.  저 내용을 알려면

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

이만큼을 알아야한다. 사실 난 알고 있으니 웹개발 안접는다

이해되면 뒤로가기 다른글 봐라

1. 인터프리터
2. 변수
3. 함수
4. 메모리공간
5. 선언
6. 할당
7. var
8. 선언한변수
9. undefind
10. 변수 초기화
11. let
12. const

호이스팅을 이해하기위한 공식문서에서는 12가지의 키워드가있고 각각 또 검색을해보면 

마치 러시안 인형 처럼 까도까도 계속 나와 개발 접을꺼다 

호이스트란 천장에 달아두고  물건 들어 올려주는게 호이스트다.

자바스크립트  프로그래밍은 "순차적구조"를 가지고있다 그냥 내가 쓴 소스코드가 위에서 아래로 작동 되는걸 의미한다

즉, 이 말은 아래에서 위로는 작동 될 일 없다는 걸 뜻한다.

너무나 중요해서 눈물이 날지경이다 🤭🤭🤭 "순차적구조" 소스코드는 위에서 아래로 실행된다. 특히나 인터프리터언어인 자바스크립트에서는 더욱이나 중요한 구조이다. 객체니 선언이니 이딴게 중요한게아니다. 정말로 리터럴리 순차적으로실행된다는것을 머리속에 박고 시작해야한다.

순차적으로 실행시킬 변수만 있어도 프로그래밍은 된다.

조건,반복,클래스,객체,캡슐,모듈,추상화,알고리즘,자료구조,운영체제,에러처리 다~ 그 다음 이야기이다

TMI

1. 메모리공간
2. 선언
3. 할당
4. 변수 초기화

변수는 메모리공간에 접근할때 사람이 보기 편하게 정한 이름 이고

메모리주소 :0x4d966B0e3177b8318D3DD2B9C1696B032e3177be88318D3D9C16 이런값을 우리가 알아볼리가없다

변수를 선언 한다는 것은  메모리공간을 사용 한다고 컴퓨터에게 "선언" 하는것이다 프로그래밍언어는 컴퓨터에게 이야기하는것이니 선언은 컴퓨터한테 해주는거다 변수는 사실 값이 고정된것이아니라 숫자가 들어올수도 문자가들어올수도 객체가들어올수도 다른메모리주소를 참조할수도 여러가지로 사용이가능하기때문에 반드시 크기를 정해주어야한다.

(킹갓제네럴 자바스크립트는 지가 알아서 정한다)

할당은 메모리주소에 값을 넣는것을 할당이라고한다

변수 초기화는 맨처음하는 할당이다.

선언된 변수는 메모리공간만 있다. 그리고 그 공간은 사람입장에서는  빈공간을 떠올리기가 쉽다. 

하지만 컴퓨터에게는 "빈공간"이라는거조차 설정해주어야 한다. 0과1밖에모르는 똥멍청이에게 "빈공간"이라는걸 설명해주어야한다.

이걸 초기화라고한다 처음 할당받을값을 지정해주는것이다

변수 = 111      #변수는 숫자야
변수 = "글자"    #변수는 글자야
변수 = 객체      #변수는 객체야
변수 = 메모리주소  #변수는 메모지주소야

변수 = Null  #암것두없어...

C언어에서는 정수(integer) 라는 데이터타입은 4바이트 이다

변수를 정할때에는 기본적으로 데이터타입과 얼마 만큼 메모리를 쓸지 컴퓨터에게 알려줘야한다 그냥

변수 = 10 ;  이렇게 해버리면  컴퓨터입장에서는 이딴거 못알아듣는다  메모리공간은 물리적이기때문에 메모리를 사용할크기를 지정을 해주어야하며 컴퓨터는 기본적으로 이진법 즉 0,1만 사용하기때문에 십진법10을 절때 이해못한다 심지어 0,1도 추상화된것이다 그냥 전기가 들어오고 안들어오고이다.

(킹갓제네럴 자바스크립트는 다~알아듣는다)

아래가 선언이다.   지금 저 코드는 메모리에 할당받을 4바이트의 메모리공간을 알려준거다 

int num;  //int라는 데이터 타입의 크기 만큼 메모리를 쓴다고 컴퓨터한테 알려준것이다.

아래가 초기화이다 4바이트의 메모리공간안에 숫자10 (십진 정수) 을 넣었다

num = 10;

선언과 할당을 동시에 할수도있다.

int num = 10;

보통우리가 선언과 초기화,할당을 모두 동시에해버린다.

자 하방방이 한글로된 프로그래밍언어를 만들었고 문법은 한글로 적고싶으대로 쓰면 된다.

1. 화면.출력() 에서 이름을 "참조"했다. 근데 이름이없다?

   - 이딴 코드에서 절때로 화면에 출력이 되면 안된다 무조건 오류가 발생 해야 하는 것이 당연한 이치다. 여기서말하는 오류는 치명적인 오류며 프로그램이 중단되는것을 뜻한다. 컴퓨터 입장에서는 더 이상 실행시킬것이없으니 중단되는것이 당연하다.

화면.출력(이름)  //첫번째 줄이쥬?

변수 이름 = "하방방"  //두번째 줄이쥬?

2.자바스크립트는 "인터프리터" 언어이기 때문에 1줄씩 실행된다

  - 1번에 부가설명이다 인터프리터 언어이기때문에 반드시 1줄씩실행되며 밑에문장은 폰노이만한테 보여줘도 이름이 뭐가 출력 될지 모른다.

화면.출력(이름)  //첫번째줄 이것만 실행 되겠쥬? 폰노이만 할아버지가 와도 이름이 뭔지 모르겟쥬?

3. 하지만 자바스크립트는 저게 실행된다.

화면.출력(이름)
>> undefind 인데요? //자바스크립트엔진은 사실 폰노이만 할아버지임

변수 이름 ="하방방"  // 밑에 이렇게 정의가 되어있었거든요

(킹갓제네럴 자바스크립트는 모든 것을 알고 계신다.)

호이스팅이란 모든 var로 선언된 변수들을 미리 읽어 최상단에 위치시켜두고  Undefind로 초기화 해두는것.

초기화가 되어 있으면 오류가 없이 진행이되니까!
(이래서 자바스크립트가 디버깅하기 빡세다고하는거군요)

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

-MDN 교수님-

자바스크립트는  변수와 값을 설정할수있다.

// value
console.log(10);
console.log('Owen');

// variable
let firstName = 'Thomas';
console.log(firstName);
firstName = 'Alex';
console.log(firstName);

// camelCase
let myAge = 10; // Good
let MyAge = 12; // Bad
let $myAge = 15; // Bad
let 1myAge = 20; // Bad 

// snake_case
let my_age = 25; // Good

자바스크립트의 데이터타입중 원시타입의 대한설명이다

테이터타입은 7가지이다.

// data type

// Primitive

// 1. Number
console.log(10);
let number = 12;
console.log(number);
console.log(typeof number);

// 2. String
console.log("Kevin");
let name = "Kevin";
console.log(name);
console.log(typeof name);

let myName = 'Kim';
let templateLiteral = `hello ${myName}`;
console.log(templateLiteral); // hello Kim

// 3. Boolean
console.log(true);
let isFun = true;
console.log(isFun);
console.log(typeof isFun);

// 4. Undefined
let apple;
console.log(apple);
console.log(typeof apple);

// 5. Null
let time = null;
console.log(time);
console.log(typeof time);

// 6. Symbol
let symbol = Symbol();
console.log(symbol);
console.log(typeof symbol);

// 7. BigInt
let theBiggestInt = 9007199254740991n;
console.log(theBiggestInt);
console.log(typeof theBiggestInt);

const calcTime = (timestamp) => {
  const curtime = new Date().getTime() - 9 * 60 * 60 * 1000;
  const time = new Date(curtime - timestamp);
  const hour = time.getHours();
  const minute = time.getMinutes();
  const second = time.getSeconds();

  if (hour > 0) {
    return `${hour}시간전`;
  } else if (minute > 0) {
    return `${minute}분전`;
  } else {
    return `${second}초전`;
  }
};

여기서 clactime()의 파라미터로 들어오는 timestamp 는. new Date().getTime()이다 

const date  = new Date()    // 새로운 데이트 객체를 만들어주고

const timestamp = date.getTime()  //시간을 가져오고

calcTime(timestmap) 

getElementById()와 querySelector()는 모두 JavaScript에서 DOM(Document Object Model)을 조작하기 위해 사용되는 메서드입니다. 그러나 두 가지 메서드 간에는 몇 가지 중요한 차이점이 있습니다.

선택 방법:
getElementById(id): getElementById()는 HTML 문서 내에서 특정 id 속성 값을 가진 요소를 선택합니다. 이 메서드는 문서 내에서 해당 id 값과 정확히 일치하는 요소를 반환합니다. id는 문서 전체에서 고유해야 합니다.
querySelector(selector): querySelector()는 CSS 선택자를 사용하여 요소를 선택합니다. CSS 선택자를 사용하므로 id 외에도 클래스, 요소 이름, 속성 등 다양한 방식으로 요소를 선택할 수 있습니다.
반환 값:
getElementById(id): getElementById()는 일치하는 id를 가진 요소 중 첫 번째 요소를 반환합니다. 따라서 반환 값은 단일 요소입니다.
querySelector(selector): querySelector()는 일치하는 요소 중 첫 번째 요소를 반환합니다. 따라서 반환 값은 단일 요소입니다.
브라우저 호환성:
getElementById(id): getElementById()는 모든 최신 브라우저에서 지원되는 표준 DOM 메서드입니다.
querySelector(selector): querySelector()는 대부분의 최신 브라우저에서 지원되지만, 오래된 브라우저에서는 지원되지 않을 수 있습니다. 또한, querySelector()는 복잡한 선택자와 일치하는 요소를 찾는 데에는 querySelectorAll()에 비해 성능이 약간 떨어질 수 있습니다.
따라서, 간단한 id 값으로 요소를 선택하고자 할 때는 getElementById()를 사용하는 것이 효율적입니다. 하지만 복잡한 선택자 또는 다양한 속성에 기반한 요소를 선택해야 할 때는 querySelector()를 사용하는 것이 유용합니다.