ijooha 님의 블로그

this 알아보기         전역환경 this • Borwser(크롬)에서의 this는 window• Node에서의 this는 global         Method에서의 this • method는 항상 누군가 호출해 줘야 하기 때문에• this는 호출의 주체예를들어let obj = { methodA : function() { console.log(this); }, inner : { methodB : function() { console.log(this); } }};이런 객체가 있다고 했을 때, thisobj.methodA();obj 를 참조obj.inner.methodB()obj.inner 참조 화살표 함수의 경우, 상..

복사 알아보기         복사? 객체는 값 자체가 아니라 값의 주소를 통해 데이터를 전달한다.그래서 객체를 단순히 복사하면, 복사한 객체와 원본 객체가 같은 메모리 주소를 참조하게 되어,하나를 변경하면 두 객체가 모두 변경되는 오류가 발생한다.이를 방지하기 위해 깊은 복사(deep copy)와 얕은 복사(shallow copy)라는 개념이 존재한다.얕은 복사는 대상의 1단계 속성만 복사하는 반면,깊은 복사는 대상을 완전히 복사하여 중첩된 객체나 배열까지도 새로운 메모리 주소를 갖도록 복사한다        얕은 복사(shallow copy) • 1단계 속성만 복사const shallowCopy = function(target) { let result = {}; for (let prop in targ..

데이터타입(Data Type) 알아보기         원시 타입 01 숫자형(Number)정수와 소수를 모두 포함2^53-1보다 큰 수는 Bigint  02 문자형(String)"string"'string'`string`다 같지만 백틱(`)의 경우• 줄바꿈이 가능하다• ${}로 다른 변수 사용 가능  03 불리언(Boolean)조건을 표현하는 자료구조truefalse  04 Null널.. 이라고 읽는다..값이 없는 것 (빈 공간)undefined (공간 자체가 없음)          참조 타입 별도의 공간에 원본 데이터를 저장,변수에 데이터의 주소를 저장.주소가 메인이기 때문에let a = [1];let b = [1];a === b //false 같은 값이 들어있는 배열이어도 다른 배열, 혹은 객체이다...

변수 알아보기         변수(Variable 데이터를 저장하고 참조할 수 있는 이름과 주소를 가진 저장소변수 선언 (이 저장소 쓸게) //var a;할당 (이 저장소에 이거 담을게) //a = 1;  01 var**최대한 사용 지양하기**함수 스코프를 가지며, 재선언과 재할당이 가능하다.var x = 10;var x = 20; //재선언 가능x = 30; //재할당 가능TDZ (temporarily dead zone)let x; 이렇게 호이스팅 안되고 에러 뜸but var x; 는 그대로 undefined 로 뜸  02 let재선언 불가능재할당 가능let a = 0;let a = 2; //재선언 불가능a = 1; //재할당 가능  03 const재선언 불가능재할당 불가능const a = 0;con..

화살표 함수와  this, 그리고 호이스팅 알아보기         화살표 함수? function () {}() => {}위가 전통적 함수 표기법, 아래가 화살표 함수다.화살표 함수가 훨씬 간결해서 저것만 쓰면 안되나? 싶어서 찾아보니,동작 방식에서 차이가 있었다.  01 this 바인딩의 차이this 란, 함수나 메서드 내에서 객체를 참조하는 키워드다. (다음 목차에서 더 설명)function에서는 this가 동적으로 결정된다. 즉 아래와 같이 사용이 가능하다.const obj = { value: 10, example: function () { console.log(this.value); //this는 obj를 가리킴 -> 출력: 10 },};하지만 화살표 함수에서는 상위 컨텍스트의 this를 상..

html, css, javascript 연결하기         HTML → CSS html에서 써준 코드를 css에서 꾸며주기 위해 필요한 선택자*모든 태그를 선택tag #id .class li ali 안에 있는 ali + ali 바로 뒤에 오는 a (같은 계층)li > a한 계층 아래 ainput [type=""]속성 선택li.class같은 요소의 클라스들:hover :active :checkedinput[type="radio"]:checked:nth-of-type(n)n번째 요소에 적용(반복):last-child :nth-child :nth-last-child ::first-letter ::first-line ::selection드래그 했을 때         HTML → JavaScript 다음..

'탭이동' classList 기능 연습         실습 목표 시작화면 : 기본 페이지로 시작탭 클릭 : '팀 소개' 혹은 '멤버 소개' 탭 클릭 시 해당 콘텐츠만 보이게 하기기능 : 해당 탭과 관련있는 콘텐츠만 노출, 외는 다 숨기기 자바스크립트는 처음 써봐서 선택자를 사용하는 것부터 살짝 시행착오가 있었지만, 재밌었다!코딩테스트 하면서 썼던 함수들 실제로 응용해봐서 더 좋았음         완성된 코딩 //변수const start = document.querySelector("#start-page");const content1 = document.querySelector("#team-page");const content2 = document.querySelector("#member-page");co..

sticky 알아보기         sticky란? 스크롤을 내렸을 때 화면 위에 딱 달라붙어 사라지지 않는 position값이다.position의 값에는 sticky 외에도 fixed, relative, absolute, static 등이 있다. 언제 사용할까?네비게이션이나 목차, 버튼을 화면에 고정시키고 싶을 때 사용한다.         sticky를 사용하기 위한 기본 CSS css 파일에서 고정시키고 싶은 요소에 아래와 같이 작성하면 된다.position: sticky;top: 0; //고정시키고 싶은 위치 지정          sticky를 사용하기 위한 조건 sticky가 작동하려면 아래 몇가지 조건이 만족되어야 한다. 01 부모 요소의 길이sticky가 작동하기 위해서는, 부모요소의 길이가 ..

CSS 기본 구조와 선택자 알아보기         기본 개념 html에서 몸통 만들어줬다면 이제 옷을 입히고 꾸며줄 차례다.그러기 위해 css를 사용하는데, Cascading Style Sheet라는 뜻이다.스타일 시트를 사용하는 여러가지 방법이 있다.그중 외부에 코드를 작성하고 html에 링크를 삽입하여 연결하는 방법이 가장 좋다쪽에 이런식으로 연결해주면 된다. css 파일은 같은 폴더에 있는 게 좋다.다른 폴더에 있어도 가져올 순 있다.         기본 구조 h1 {color: white;}선택자 {속성: 값;} 이런식으로 스타일을 적용할 대상(선택자)를 정하고, 속성을 사용해 다양하게 꾸며준다.선택자는 id, class, tag 등이 될 수 있고, 속성은 종류가 굉장히 많다.속성중에서 중요한 부..

요소 알아보기더 많은 요소 보러가기종류가 너무 많ㄷ ㅏ...        글자 태그 태그속성설명 ~  h1 > h6 이 순서의 크기로 제목 글자 생성 본문 문단 줄 바꿈 수평 줄href = "이동할페이지">하이퍼 텍스트href = #id>id로 이동href = "#">빈 링크 굵은 글자 기울어진 글자 아래 첨자 위 첨자 밑줄 글자 취소선이 그어진 글자        목록 태그 태그속성설명 unordered list ordered list 목록 요소         테이블 태그 태그속성설명border="value">표 삽입/ 표의 테두리 두께 지정 행 삽입 제목 셀 생성 일반 셀 생성 colspan="value">셀 가로로 병합 rowspan="value">셀 세로로 병합         미디어 태그 이..