Today Hailie Learned

배열과 객체 : 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하..

논리연산자 NOT 논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 단, 피연산자가 반드시 불리언 값일 필요는 없다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환된다. !false // true !(3>2) // false !undefined // true (undefined를 false로 취급-falsy) !"hello" // false ("hello"를 true로 취급-truthy) !0; // true 기억해야 할 9가지 falsy 값 if 문에서 false로 변환되기 때문에, if 구문이 실행되지 않습니다. if (false) if (null) if (undefinded) if (0) if (-0) if (NaN) if ('') if ("") if (``) 선언과 호..

HTML(Hyper Text Markup Language) = 웹을 구성하는 가장 기초가 되는 뼈대 HTML을 구성하는 기본 단위는 태그입니다. 여는 태그와 텍스트 문구 그리고 닫는 태그를 이용하여 만든 것들을 하나의 element(엘레먼트 혹은 요소)라고 부릅니다. : 브라우저에게 HTML 코드가 해당 태그 내부에 존재한다고 알려줍니다. : 아직 여러분이 사용하지는 않겠지만, 주로 외부 소스를 참조해야할때 사용하곤 합니다. : 브라우저는 이 태그에 포함되어 있는 내용들을 화면에 보여주게 됩니다. 이미지 태그는 src라고 부르는 하나의 속성을 갖고 있습니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. 이미지 주소 얻는 방법 1. 웹에서..