봉보로봉봉

객체 프로퍼티의 키는 문자형 심볼(Symbol) 유일성 보장 유일한 식별자를 만들 때 사용 const a = Symbol(); // new를 붙이지 않음 const b = Symbol(); console.log(a); // Symbol() console.log(b); // Symbol() 콘솔로 찍어보면 똑같은 값이 나옴 // 그러나 // a === b; false // a == b; false 임 const id = Symbol('id'); // 'id'와 같은 설명을 붙여줄 수도 있음 문자형으로 설명을 붙여줄 수도 있음 > 디버깅할 때 편함 설명은 Symbol 생성에 영향을 미치지 않음 const id = Symbol('id'); const user ={ name : 'Mike', age : 30, ..

계산된 프로퍼티(Computed property) let a = 'age'; const user = { name : 'Mike', [a] : 30 // age : 30 } [a]와 같이 대괄호로 묶어주면 a라는 문자열이 아니라 a에 할당된 값이 들어감 const user = { [1 + 4] : 5, ['안녕' + '하세요'] : 'Hello' } // user = { 5: 5, 안녕하세요: 'Hello'} 가 출력됨 식 자체를 넣는 것도 가능 객체 메소드 (Object methods) Object.assing() : 객체 복제 초기값에 복제할 객체가 병합 됨 키가 같다면 덮어쓰게 됨 Object.assign({}, user) // Object.assign({초기값}, 복제할 객체) 2개 이상의 객체도 ..

객체 리터럴 let user = { name : 'Mike', age : 30, } 비슷한 객체를 여러개 만들어야 할 때가 생김 (예 : 유저, 상품) 생성자 함수를 쓰면 편리함 함수 첫글자를 대문자로 생성자 함수를 사용할 때는 잊지말고 new를 붙여야함 function User(name, age){ // 함수 첫글자는 대문자로 this.name = name; this.age = age; } let user1 = new User('Mike', 30); // new 연산자를 사용해서 호출 let user2 = new User('Jane', 24); let user3 = new User('Tom', 17); 이렇게 객체를 만들면 일일이 객체를 만드는 것보다 훨씬 빠르고 일관성 있게 만들 수 있음 functi..

호이스팅 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동 var는 에러는 나지않고 undefined가 나옴 console.log(name); // undefined var name = Mike; let은 에러가 남 console.log(name); // ReferenceError let name = Mike; 이는 TDZ(Temporal Dead Zone) 때문 스코프의 시작 지점부터 초기화 시작 지점까지의 구간 초기화되지 않은 변수가 저장되는 곳 let은 TDZ의 영향을 받아 코드가 존재하는 위치 전에는 사용할 수 없음 코드를 예측 가능하게 하고 잠재적인 버그를 줄일 수 있음 console.log(name); // TDZ const name = 'Mike'; // 함수 선언 및 할당 c..

어떤 CSS 단위를 사용해야할까? 부모요소에 따라서 바뀔 때 %나 em 브라우저에 따라서 바뀔 때 vw나 vh rem 미디어쿼리에서 min-width나 max-width의 값도 rem을 사용하는 것을 추천 요소의 너비와 높이에 따라 바뀔 때 %나 vw vh 폰트의 크기에 따라 바뀔 때 em나 rem em과 rem의 사용 어떤 컴포넌트를 어디에 사용하는지에 따라 크기가 유동적으로 변해야한다면 em (좋아요 버튼을 body에도 쓰면서, article의 자식요소로도 사용할 때) 어디서 사용하든 동일한 크기를 원할 땐 rem depth가 많은 복잡한 코드에서 em을 사용하면 크기 계산이 어려움 > 폰트 사이즈는 rem 추천 반응형에서 폰트 사이즈가 줄어들면 패딩도 맞춰서 줄어들 수 있도록 패딩에 em 추천 하지..

요즘은 기기가 다양해져서 정확히 구분 짓기 어렵지만 모바일 320 - 480 px 태블릿 768 - 1024 px 데스크탑 1024px ~ 사이즈로 하면 무난하게 반응형을 만들 수 있음

CSS Diner CSS 선택자를 학습할 수 있는 게임 CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 12번 13번 16번 19번 22번 나중에 다시 풀어보기 해답 CSS Diner 완료(답안/요점정리) (1/3) CSS selector 연습에 좋은 자료인 CSS Diner를 완료하고 요약 및 답안을 정리하려고 한다. CSS Diner는 코드로만 보면 이해가 쉽게 되지 않는 부분을 visual aid를 가미하여 좀 더 쉽고 재미있게 CSS selector를 velog.io Flexbox Froggy 플렉스 박스를 학습할 수 있는 게임 Flexbox Froggy A game for learning C..

AJAX (Asynchronous Javascript And XML) 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술 XMLHttpRequest 객체를 사용해 구현하는 비동기 통신 방법 요청 / 응답 과정을 통해 불필요한 부분까지 처리하지 않는다 필요한 부분만 별도로 요청하고 응답 받아 처리할 수 있다 불필요한 대역폭 감소가 가능 > 비용 절감 페이지를 새로고침 하지 않고도 필요한 데이터만 받아와서 내용을 업데이트 할 수 있음 = 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음 = 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있음 (예 : 티켓예매 사이트, 검색어 자동 완성) >장점 새로고침이 없으니 페이지전환이 부드러움 JSO..