본문 바로가기
js destructuring assignment 한 객체의 프로퍼티들을 여러번 참조할 때에는 const student = { name : 'abc', age : 15}let name = student.name;let age = student.age; 이게 아니라 let { name, age } = student; 이렇게 줄일 수 있다.저장할 변수의 이름을 바꾸고 싶다면 let { real_name = name , real_age = age } = student;//real_name , real_age 변수에 저장된다 배열에서도 사용이 가능하다. const animals = [ 'dog' , 'cat' ];const [ first , second ] = animals; 2022. 1. 14.
js hoisting varconsole.log(a);a=4;var a;  위 코드상에선 a가 선언되지도 않아 에러가 나야하지만  var를 이용하면 undefined 가 뜬다(변수는 선언됐단 뜻)  변수를 어디에 선언하든 상관없이 끌어올려 선언시키는 hoisting이라는 것 때문에   소스코드 첫 번째 줄에서도 a를 참조할 수 있다.   hoisting으로 인해 편하게 소스를 작성할 수 있어서 좋아보이지만    단점도 확실히 존재함   1. if문 내의 scope    var는 let, const와 달리 if문에서 소스 코드를 작성할 시 전역변수와 같은 scope를 지님    그래서 scope관리에 더 신경써야 한다.   2. hoisting    var는 let, const와 같이 hoisting이 되지만    let, c.. 2022. 1. 14.
js 실행시점 조절 @Async@Defer​스크립트의 참조시점을 조절하는 방법이 있다.- async 방식은 html문서를 읽는 도중 js파일을 찾으면 비동기적으로 js파일을 다운로드 한다. 다운로드가 끝나는 시점엔 html문서 리딩을 멈추고 js파일을 실행한다.>> 실행 순서가 보장되지 않는다.​-defer 방식은 html문서를 읽는 도중 js파일을 찾으면 비동기적으로 js파일을 다운로드 한다. (일치) html문서 리딩이 끝날 시에 js파일을 실행한다.>> 실행 순서를 보장한다. 2022. 1. 14.
html 시멘틱 태그 시멘틱 태그를 쓰는 이유는 를 남발하는 것보단 그 레이아웃의 기능에 따라 등으로 작성을하면 코드를 볼 때 훨씬 직관적으로 보이게 됨 ​ 다만 저의 주관적 생각으론 밑의 주소에 있는 태그중 생소한 것들은 저뿐만 아니라, 다른 개발자들에게 오히려 불편함을 줄 것이라 생각해 생소한것들은 사용여부를 한번 생각해봐야 할 필요는 있음 ​ https://developer.mozilla.org/ko/docs/Web/HTML/Element HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN 이 페이지는 태그를 사용해 만들 수 있는 모든 HTML 요소의 목록을 제공합니다. developer.mozilla.org 2022. 1. 14.
css display,position display block : 한줄에 하나씩 배치 inline : 해당 엘리먼트 내부에 있는 컨텐츠 크기 만큼만 위치 inline-block : 해당 엘리먼트의 크기만큼 위치 flex flex박스 단계의 속성 - flex-direction : 요소들의 방향을 정해줌 [ row(기본값) / row-reverse(오른쪽>왼쪽) / column(위>아래) column-reverse(아래>위)​ ] - flex-wrap : 요소들이 많아질시 요소들의 처리 [ nowrap(기본값) : 요소들이 많아질시 요소들을 작게 만들어 빼곡하게 처리 / wrap : 요소들이 많아질시 지정된 크기를 바꾸지 않고 다음 줄로 넘어감 / wrap-reverse : wrap의 반대방향으로 ] - flex-flow : 위 directio.. 2022. 1. 14.
visual studio code 필수 확장프로그램 제가 사용하는 확장프로그램들 입니다. Material Theme : vscode의 테마를 설정 Material Icon Theme : 파일등 아이콘들의 테마가 변경 Bracket Pair Colorizer : 괄호 중첩등의 상황에서 구별을 쉽게 해줌 Auto Rename Tag : 앞에 태그를 바꿀 시 뒤의 태그를 자동으로 바꿔줌 Auto Close Tag : 앞에 태그를 생성 시 자동으로 닫는 태그 생성 Css Peek : html파일에서 css파일을 금방 찾게해줌 (컨트롤키를 누른 상태로 html요소를 클릭시 정의된 css파일로 이동) html css support : html에서 자동적으로 css관련 태그를 완성시켜줌 Live Server : 새로고침 없이 자동으로 브라우저화면을 업데이트 Color.. 2022. 1. 14.

티스토리툴바