yeony's story

목차 https://www.w3schools.com/bootstrap5/index.php Bootstrap 5 Tutorial W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com https://getbootstrap.com/docs/5.2/getting-started/introduction/ Get started with Bootstrap Bootstrap is a power..

let arr=new Array(); // 방법1 let arr =[]; // 방법2 위 문법을 사용하면, 배열을 생성할 수 있다. 배열은 큐, 스택 구조를 구현할 때 쓰인다. 1. pop() : 배열 끝 요소를 제거하고, 제거한 요소를 반환한다. 2. push(x1,x2...) : 배열 끝에 요소를 추가한다. 3. shift() : 배열 앞 요소를 제거하고 반환한다. 4. unshift(x1,x2...) : 배열 앞에 요소를 추가한다. ※ push와 pop의 속도가 shift와 unshift보다 훨씬 빠르다 배열 내부 동작 원리! > 배열의 본질은 객체이다. > 원시형이 아니다. > 배열은 객체와 마찬가지로 참조를 통해 복사된다. > 배열은 순서가 있는 자료를 저장하는 용도로 만들어졌기에, 임의의 키를..

숫자형으로의 형변환은 연산이나 숫자 관련된 함수를 적용할 때 일어나고, 문자형으로의 형변환은 주로 객체를 출력할 때 일어난다. 위와 같은 형변환을 원하는 대로 조절 할 수 있게 하는 게바로 특수 객체 메서드 (toPrimitive) 객체 형 변환은 hint라는 값이 구분 기준이 된다.hint : 목표로 하는 자료형 구분 기준은 총 3종류 1. string >> hint가 스트링이 된다. 2. number >> 수학 연산 적용 시 3. default >> 연산자가 기대하는 자료형이 확실하지 않을 때>> 이항 덧셈 연산자는 피연산자의 자료형에 따라서, 문자열을 합치는 과정이 일어날 수도 있고,숫자를 더해주는 연산과정이 일어날 수도 있다.따라서 +의 인수가 객체일 경우에는hint가 default가 된다. > ..

심볼 (Symbol) > 유일한 식별자를 만들고 싶을 때 사용한다. 즉 객체의 속성키를 Symbol 값으로 해서 해당 속성을 고유하게 관리하고자 할 때 사용! 심볼을 이용하면 내부 이름 충돌을 걱정하지 않아도 된다. Symbol()은 함수이지만, 생성자 함수는 아니다. 호출될 때 새로운 Symbol 값을 반환한다. Symbol은 for..in 문과 같이, 객체의 프로퍼티를 열거하는 문법 사용시, Symbol 속성은 열거되지 않는다. * 심볼 탄생 배경 * for in loop나 object.keys와 같은 기존 메소드를 변경하지 않은 상태에서 객체에 새로운 프로퍼티를 추가하는 작업이 필요해졌다. 즉, 기존 메소드 결과값에는 영향을 주지 않으면서, 기존 객체에 새로운 프로퍼티를 추가하고자 하는 것! 그래서..

자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. 메서드 내부에서 this 키워드를 사용하면, 객체에 접근할 수 있습니다. this 키워드는 메서드를 호출할 때 사용된 객체를 나타낸다. 위 코드 user.sayHi() 부분을 보면 user가 이에 해당한다. 즉, this == 호출한 객체! bind함수를 이용해서 묶어주면 this를 반환한다. 즉 호출 시점에서 이 함수를 property로 가지는 객체를 의미한다. this 값은 내가 어디에서 호출하느냐에 따라 값이 변한다. (=this의 값은 함수를 호출하는 방법에 의해 결정된다.) 이 코드에서 this를 빼면, 아무런 값도 출력되지 않는다. function makeUser() { return { name: "J..

자바스크립트는 눈에 보이지 않는 곳에서 메모리 관리를 수행한다. 우리가 만드는 모든 것은 메모리를 차지한다. 가비지 컬렉션 : 도달 가능성이라는 개념을 사용해서 메모리 관리를 수행한다 모든 객체를 모니터링하고 도달할 수 없는 객체는 삭제한다. 도달 가능성..? => 어떻게든 접근하거나 사용할 수 있는 값을 의미한다. 도달 가능한 값은 메모리에서 삭제되지 않는다. let user={ name:'hello' } 참조가 사라지게 하려면? 다른 값으로 덮어쓰면 참조가 사라진다. user=null; 이제 hello는 도달할 수 없는 상태가 되었고, 가비지 컬렉터는 이제 hello에 저장된 데이터를 삭제하고, hello를 메모리에서 삭제한다. 즉, hello를 참조하는 변수가 없고, hello를 찾는 변수가 없을 ..

참조란? 객체의 실제 위치를 가리키는 포인터 복제는 똑같은 파일(100MB)을 한 개 더 생성하는 것 > 각각의 파일이고, 원본 파일을 변경해도 복제 파일에는 아무런 영향이 없다. 메모리는 똑같이 100MB씩이고! (복제!=복사) 참조는 복제와 다르다 참조는 바로가기 만들기를 이용해서 예시를 들어보자 바로가기 만들기는 원본 파일을 가리키고 있을뿐, 복제한 게 아니다. 따라서 바로가기 파일에서 값을 변경하면, 원본 파일도 변경이 동시에 이루어진다. 객체는 참조에 의해 저장되고 복사 된다. ※ 원시값(문자열, 숫자, 불린 값,null,undefined)은 값이 그대로 저장,할당,복사가 된다 이 때는 두 개의 독립된 변수에 각각 문자열이 저장된다. 복사된 값을 다른 메모리에 각각 할당하기에 서로 영향을 미치지..

일반적으로 우리가 눈으로 볼 수 있는 모든 것을 객체라고 한다. 프로그래밍에서의 객체는 무슨 의미일까? 프로그램을 구성하는 단위 중 하나를 의미한다. 여러 객체가 모여 하나의 프로그램이 완성되는 것! 객체 : 소프트웨어 세계에 구현할 대상 객체의 사전적인 의미 : 실제로 존재하는 것 ex) 책상, 컴퓨터 ... 이러한 유형적인 것뿐만 아니라, 무형적인 것도 객체로 간주한다. ex) 개념, 논리, 수학공식 ... 객체의 특징 >> 객체는 고유의 이름이 존재한다. 객체는 특징과 행동이 있다. 객체의 수는 무제한으로 늘어날 수 있다. 객체는 속성과 동작으로 구성되어 있다. 예를 들면, tv의 속성은 크기, 길이, 높이, 볼륨, 채널과 같은 것이 있으며, tv의 동작은 켜기, 끄기, 볼륨 높이기 등이 있다. 속..

1. 주석을 코딩하기 전에 작성해놓으면, 코딩을 하면서 구현이 쉬워진다. 이 코드들이 어떤식으로 어떻게 동작하는 지 먼저 설명하기 2. 함수에 주석을 다는 것이 가장 효율적이다. 3. 복잡한 소스코드보다 주석 없이도 빠르게 이해할 수 있는 코드가 좋다. >> 개발비용보다 유지보수 비용이 훨씬 크기 때문이다. 4. 프로토타입은 주석 필요 없다. 5. 설계 리뷰가 코드 리뷰보다 훨씬 중요! 6. 라이브러리나 프로그램, 함수 단위에서는 '무엇'인지 설명한다. 7. 실행문에 달아두는 주석은 코드가 '왜' 이렇게 동작하는 지 설명한다. 문서 주석 /** */ 구현 주석 /**/ or // 코드리뷰란? 한 명 또는 여러 명의 개발자들이 본인이 만들지 않은 코드의 내용을 점검하고 피드백을 주고 받는 과정이다. 이 과..

1. 개발자 도구 F12를 누르고 소스패널로 가면, 이런 화면이 나온다 만약 아래와 같은 화면이 나오지 않는다면 소스패널 바로 밑부분에 화살표 아이콘을 눌러보기! 그러면 왼쪽 탭이 뿅하고 등장한다. 디버깅을 설정하고 싶은 줄번호를 클릭하면 설정 완료! 소스 패널에서 설정하기가 번거로우면, 코드상에서 디버깅 설정을 해두는 방법도 있다. 원하는 위치에 debugger; 명령어를 입력해주면 끄~읕! console.log() >> 원하는 것을 콘솔에 입력할 수 있다. console.log('기본'); console.info('정보'); console.warn('경고'); console.error('에러'); console.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 실시간으로 바..