본문 바로가기

컴퓨터 언어33

[JavaScript] 원시값의 메서드 자바스크립트의 자료형은 크게 원시형과 객체로 나눌 수 있습니다. 원시형은 string, number, bigint, boolean, symbol, null, undefined를 의미합니다. 객체는 아래 예시와 같이 여러 프로퍼티들이 { } 안에 선언된 형태를 의미하죠. 여기서 프로퍼티는 key:value 쌍을 의미하는데, name:'Jason'에서 name이 key, 'Jason'이 value입니다. const user={ name:'Jason', age:23, sayHi:()=>{console.log('hi!')} } 메서드란 객체 안에 선언된 프로퍼티 중 함수인 것들을 의미합니다. 위 객체에서 sayHi와 같은 프로퍼티들을 메서드라고 합니다. 일반적으로 메서드는 객체에서만 쓸 수 있는데요, javas.. 2021. 7. 29.
[JavaScript] 단락평가(Short Circuiting) {selectedFriendInfo&&} 제가 최근 회사에서 작업 중인 코드의 일부를 발췌해왔습니다. PetThumbnail은 펫의 썸네일(프로핑 사진)을 보여주는 컴포넌트인데요, uri값에 이미지 주소 값을 넣어주면 사진을 표시해줍니다. 이 때 uri 값에서 서버에서 받아온 값에 썸네일 주소가 있으면 썸네일 주소를 표시해주고, 없으면 원본 이미지 주소를 표시해주는 코드를 작성했습니다. 작성해보니 코드가 너무 길어 알아보기 힘들었는데요, javascript의 단락평가란 개념을 이용해 아래와 같이 변경해보았습니다. {selectedFriendInfo&&} 이렇듯 단락평가를 이용하면 삼항연산자를 이용해 유효성 검사를 하는 경우, 또는 if문 등의 조건문을 이용하는 코드를 짧게 바꿀 수 있습니다. 2021. 7. 7.
[Javascript] var보단 let을 쓰는 게 낫다..? 자바스크립트의 선언자는 var, let, const 이렇게 세 가지가 있습니다. 여기서 const는 한 번 할당하면 변하지 않는 값으로 주로 상수를 나타내거나 불변성을 유지하고 싶을 때 사용합니다. 즉 아래와 같은 상황이 되지 않는다는 것이죠. const a=1; a=2; // 2021. 6. 3.
[CSS] Flexbox 속성 정리 flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 위 사이트는 css의 flexbox 속성을 이용한 간단한 게임이 있는 사이트입니다. 위 사이트에 있는 속성을 중심으로 flexbox의 속성을 정리해보았습니다. 1. justify-content 주축에 대해서 항목들을 어디로 정렬할지 결정합니다. flex-start: 요소들을 컨테이너의 왼쪽으로 정렬 flex-end: 요소들을 컨테이너의 오른쪽으로 정렬 center: 요소들을 컨테이너의 가운데로 정렬 space-between: 요소들 사이에 동일한 간격을 둠 space-around: 요소들 주위에 동일한 간격을 둠 2. align-items 교차축에 대.. 2020. 12. 13.