Today Hailie Learned

splice 와 slice 차이 => splice는 원본 배열을 변경하고, slice는 원본 배열은 변경하지 않는다. 배열의 중간에 요소를 추가하거나 제거하기 .splice(_, _, _) push, pop, unshift, shift 매서드와 마찬가지로 모두 원본 배열을 직접 변경하는 매서드이다. 매개변수는 3개 갖는다. ✔️ start: 원본 배열의 요소를 제거하기 시작할 인덱스. start만 지정하면 원본 배열의 start부터 모든 요소를 제거한다. 음수인 경우, 배열의 끝에서의 인덱스를 나타낸다. (-1: 마지막 요소, -n: 마지막에서 n번째 요소) 필수매개변수 ✔️ deleteCount: 제거할 요소의 개수, 0인경우 제거되지 않는다. 옵션매개변수 ✔️ items: 제거한 위치에 삽입할 요소...

희소배열은 length와 배열 요소의 개수가 일치하지 않는다. 희소 배열의 length는 희소 배열의 실제 요소 개수보다 언제나 크다. 자바스크립트는 문법적으로 희소 배열을 허용하지만, 희소 배열은 사용하지 않는 것이 좋다. 성능에도 좋지 않다. 배열에는 같은 타입의 요소를 연속적으로 위치시키자! 위 예제의 arr은 인덱스 1인 요소를 갖지 않은 희소 배열이다. arr[1]이 undefined인 이유는 객체인 arr에 프로퍼티 키가 '1'인 프로퍼티가 존재하지 않기 때문이다. 존재하지 않는 요소를 참조하면 undefined가 반환되고, 그 배열에는 empty라고 반환된다. ⭐️참고 Array.from에 length만 존재하는 유사 재열 객체를 전달하면 undefined를 요소로 채운다. Array.fro..

배열과 객체 : JavaScript에서 대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입. 배열이나 객체를 사용하면 여러 번의 선언과 할당을 해야만 했던 작업을 단 한 번의 선언으로 해결할 수 있다. 배열 : 순서가 있는 값. 여기서 순서는 인덱스(Index)라고 부른다. 0부터 번호를 매긴다. 여기서 값은 요소(element)라고 부른다. 값은 인덱스를 이용해 접근한다. 배열의 인덱스 값은 할당을 통해 변경할 수 있다. 존재하지 않는 요소를 참조하면 undefined가 반환되고, 그 배열에는 empty라고 반환된다. 👇추가공부 참고👇 2022.05.10 - [JavaScript] - TIL) 희소배열, 배열 empty, 배열 undefined let myNumber = [[13, 58], [7, ..

CLI 에디터 종류 vim(vi), emacs, nano, VScode 등등 👇CLI 환경에서 hello.js를 VScode로 여는 방법 👇 code hello.js 👇텍스트 에디터 nano를 실행하는 방법👇 nano hello.js # hello.js 를 nano에서 엽니다. nano # 그냥 실행할 수도 있습니다. 패키지 안에는 하나의 프로그램이 정상적으로 설치되고 동작하기 위한 모든 파일이 압축되어 있다. 패키지 매니저는 패키지의 설치, 변경, 삭제 등 관리를 편리하게 해주는 도구이다. ex) 리눅스의 패키지 매니저 => apt, macOS의 패키지 매니저 => brew node.js 생태계의 패키지 매니저 => npm 홈브류Homebrew는 맥OSmacOS 용 패키지 매니지 애플리케이션이다. br..

와이어프레임(Wireframe)이란? 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계이다. 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이고, 전환 효과나, 애니메이션, 사용자 테스트 같은 스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다. 목업(Mock-up)이란? 웹 또는 앱을 제품이라고 할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것. => 와이어프레임과 목업 작업은 js로 넘어가기 전, 설계도와 같다. 키포인트 display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야한다. flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다. justify-content 와 ali..

Logical OR Operator (||) 연산방식 연산자를 기준으로 왼쪽부터 Truthy 값을 찾습니다. Truthy 값을 찾은 경우, 연산을 중지하고 해당 값을 반환합니다. 마지막까지 Truthy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환합니다. Logical AND Operator (&&) 연산방식 연산자를 기준으로 왼쪽부터 Falsy 값을 찾습니다. Falsy 값을 찾은 경우, 연산을 중지하고 해당 값을 반환합니다. 3. 마지막까지 Falsy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환합니다. ! (NOT) NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행됩니다. alert() 메소드의 리턴값은 undefined!!

CSS (Cascading Style Sheets)란? 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다. CSS는 웹사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할을 한다. 즉, 웹 애플리케이션에 접근할 수 있는 사용자 인터페이스(user interface)를 만든다. 직관적이고 쉬운 UI 제작은 (user interface: 사용자 인터페이스) 프론트엔드 개발자의 기본 소양이다. 웹 프론트엔드 개바자는 웹 개발 기술을 기반으로 사용자와 소통할 수 있는 웹 페이지 제작을 담당한다. 그래서 애플리케이션과 소통에 필요한 UI제작은 프론트엔드 개발자의 기본 소양이다. 버튼을 만들고, 콘텐츠가 더욱 잘 보이게 레이아웃을 적절히 디자인하는 것 모두 프론트엔드 개발자가 ..

삼항 조건 연산자 (ternary operator)는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 조건식 ? 조건식이 true 일 때 반환할 값 : 조건식이 false일 때 반환할 값 const result = score >= 60 ? 'pass' : 'fail'; 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자를 반환하고, 첫 번째 피연산자가 false로 평가되면 세 번째 피연산자를 반환한다. 물음표 (?) 앞의 첫 번째 피연산자는 조건식, 즉 불리언 타입의 값으로 평가될 표현식이다. 만약 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환된다. const x = 2; const result = x % 2 ? '홀수' : '짝수'; console.log(result)..

HTML = 웹페이지 구조를 담당하는 마크업 언어, tag들의 집합 (*tag = 부등호로 묶인 html의 기본요소) CSS = 디자인 요소를 시각화하는 스타일시트 언어 Javascript = 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용할 수 있게 해주는 프로그래밍 언어 = 한 줄 모두 차지 = 컨텐츠 크기만큼 차지 이미지 삽입하기 **이미지 주소는 마우스 우클릭 후 따올 수 있다. (크롬 기준) 링크 삽입하기 리스트화 시키기 ul - il (unordered)/ 순서가 없는 리스트를 작성할 때 사용 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없는 소스 ol - il (ordered) / 순서가 있는 리스트를 작성할 때 사용 리스트1 리스트2 리스트3 HTML 삽입 미리보기할 수 없..

반복문 for 반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다. for (변수 선언문 또는 할당문; 조건식; 증감식) { 조건식이 참인 경우 반복 실행될 문; } ex1) for (var i = 0; i = 0; i--){ console.log(i); } 위 식은 i가 1부터 시작해서 0이상일때까지 console 창에 i를 log하..