Front End
what is 𝒕𝒉𝒊𝒔?
this?JavaScript에서 this 바인딩화살표 함수() =>와 this의 상관관계화살표 함수는 만능이 아니다1. 메서드2. 생성자 함수3. addEventListener()의 콜백 함수this?this는 Object 내에서 해당 객체를 참조하는 키워드로, 보통 클래스를 만들 때 메소드를 호출한 객체를 참조하거나 이벤트 리스너를 호출한 DOM을 지정할 때 많이 사용한다. 전역에서 동작할 때는 전역 객체(window, global)을 참조하며, 함수 내부에서는 함수를 호출하는 방법에 따라 다르게 참조한다.JavaScript에서 this 바인딩Javascript의 this는 다른 언어와 달리 상황에 따라 다르게 바인딩 된다. 앞서 말했듯 전역 공간에서는 전역 객체를 참조하고, 메서드 호출 시 메서드 내..
배열, 객체
배열 (Array)다량의 데이터를 다룰 수 있는 데이터 타입.순서(index)에 대한 정보를 가진 자료구조대괄호[] 를 사용하며, 각각의 요소는 쉼표 , 로 구분한다.실제로 들어가는 값을 요소(element)라 부름순서는 인덱스(index)라 부르며, 0부터 시작한다.배열 내의 값으로도 배열이 들어 갈 수 있다.배열 활용법배열 내부의 값은 인덱스를 사용해 접근, 변경이 가능하다.let myNum = [73, 98, 86, 61, 96] myNum[3]; // 61 myNum[3] = 200; // 세번째 인덱스 값에 200 할당 myNum; // [73, 98, 86, 200, 96] let myNumber = [[13, 30], [73, 8], [44, 17]]; myNumber[0]; // [13, ..
반복문
반복문같거나 비슷한 코드를 여러번 실행 시켜야 할 때 단순한 반복을 보다 효율적이고 간결하게 할 수 있도록 하는 구문.for 구문반복 할 조건을 초기화, 조건식, 증감문 순으로 넣어서 작성한다.let sum = 1; for ( let i = 2; // 초기화 i
Flexbox
FlexboxFlexbox로 레이아웃을 구성한다는 것은 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법을 뜻함.display: flex; 분석display: flex;는 부모 박스 요소에 적용하여 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법임. box1 box2 box3 main { border: 1px dotted red; } div { border: 1px solid green; } * { margin: 10px; padding: 10px; }위의 예제처럼 요소들은 별다른 설정을 하지 않으면 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지한다. 이 때, 부모 요소인 에 display: flex; 속성을 적용하게 되면..자식 요소인 가 왼쪽부터 가로로 정렬됨과 동시에 내부 콘텐츠만..
변수와 타입
변수 (Variable)데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 데이터에 이름을 붙이는 것컴퓨터에는 데이터를 보관하는 보관함(메모리)가 존재보관함의 크기는 동일함각 보관함의 이름 = 변수보관함의 이름을 활용하여 데이터 처리프로그래밍 세계에서의 변수는 이름(Label)이 붙은 값 → 변수를 이용해 데이터를 다른 곳에서도 사용 할 수 있다변수 사용법선언 (declaration)보관함을 확보하는 것. let num할당 (assignment)보관함에 데이터를 저장하는 것 num = 12 이 때, 등호 기호는 ‘같다’ 가 아닌 할당(대입)을 한다는 의미.선언과 할당선언과 할당을 동시에 할 수도 있음 let num = 12 쉼표를 이용해 키워드를 한 번만 사용하여 여러 개의 변수를 선언하고 할당 할 수 있다...