요모조모

🍰 23일차가 없는 이유 => VOD 강의를 8시간 동안 시청했는데 실습 하면서 듣느라 필기는 따로 안 함.🍴 자바스크립트의 역사Nescape사의 Brendan Eich가 만듦 Mocha → LiveScript → JavaScript 순 이름 변경당시 유명했던 Java의 유명세에 편승하고자 JavaScript로 이름 변경🍴 표준ECMA(European Computer Manufacturers)에 등록된 JavaScript의 표준 이름: ECMAScriptJavaScript - 언어/구현ECMAScript - 언어 표준/버전🍴 ECMAScript 표준 버전https://ecma-international.org/publications-and-standards/standards/ecma-262/ ECM..

🍰 template literal: ES6에 도입된 새로운 문자열 표기법. 편리한 문자열 처리 기능 제공. 런타임에 일반 문자열로 변환되어 처리됨.멀티라인 문자열(multi-line string)표현식 삽입(expression interpolation)태그드 템플릿(tagged template)🍴 멀티라인 문자열: 여러 줄에 걸친 문자열 쉽게 작성 가능. 기존 방식에서는 백슬래시(\) 사용함.// 기존 방식var str = "이것은 첫 번째 줄\n" + "이것은 두 번째 줄";// 템플릿 리터럴let str = `이것은 첫 번째 줄이것은 두 번째 줄`;🍴 표현식 삽입: 변수나 표현식을 문자열 안에 간편하게 삽입let name = 'Alice';let age = 25;// 기존 방식l..

🍰 세미콜론: 문의 종료 나타냄자바스크립트 엔진은 세미콜론(;)으로 문의 종료 위치 파악하고 순차적으로 문을 실행함단, 중괄호({})로 묶은 코드 블록 뒤에는 붙이지 않음 => 코드 블록은 자체 종결성(self closing) 가짐 🍴 세미콜론 자동 삽입 기능(ASI - automatic semicolon insertion)문의 끝에 붙이는 세미콜론은 옵션임자바스크립트 엔진이 소스코드 해석 시 문 끝이라고 예측되는 지점에 세미콜론 자동으로 붙여주는 기능이 수행되기 때문붙이는 걸 권장

🍰 식별자(identifier): 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름특수문자 제외한 문자, 숫자, 언더스코어(_), 달러 기호($) 포함 가능특수 문자 제외한 문자, 언더스코어, 달러 기호로 시작해야 함. 숫자로 시작 X예약어는 식별자로 사용할 수 없음예약어(reserved word)에는 뭐가 있을까? =>https://www.w3schools.com/js/js_reserved.asp🍴 네이밍 컨벤션(naming convention): 하나 이상의 영어 단어로 구성된 식별자 만들 때 가독성 좋게 단어를 한 눈에 구분하기 위해 규정한 명명 규칙일관성만 유지하면 어떤 네이밍 컨벤션 사용해도 좋음일반적으로 변수, 함수 => 카멜 케이스생성자 함수, 클래스 => 파스칼 케이스객체, 함수 => ..

🍰 변수 호이스팅: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 JS 고유의 특징이로 인해 변수 선언 위치와 관계없이 변수를 참조할 수 있게 됨자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행됨=> console.log(value);가 실행되는 시점에는 아직 value 변수의 선언이 실행되지 않았음참조 에러가 발생하지 않고 undefined가 출력됨=> 변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 시점인 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문소스코드 실행 전에 먼저 소스코드의 평가 과정을 거침🍴 평가 과정: 자바스크립트 엔진이 변수 선언 포함한 모든 선언문(변수, 함수 선언문 등)을 소스코드에서 찾아내 먼저 실행함소스코드 평가 과정이 끝나면 변수 선언을 ..

🍰 Live Server로 잘 동작하던 html 파일이 갑자기 내용이 하나도 보이지 않게 되었다... 텍스트들 빼고. 검색 해보니 파일 경로를 잘못 설정해서 발생한 문제라고 한다.열심히 작성했는데 문제가 생겨서 잠시 당황했지만... console 창을 확인했을 때 내가 사용한 이미지에 문제가 있다는 건 짐작했다.그래서 이미지 파일들 경로를 전부 제대로 수정해주고 해결!!끝 🍽

🍰 오늘은 HTML/CSS 수업을 하시는 슬비쌤과의 마지막 수업... 안돼요...(바짓가랑이 잡기) 아직 자바스크립트를 받아들일 공간이 없는데... 어쨌든 오늘도 Tailwind 수업!🍴 Arbitrary Value: 프로그래밍이나 데이터베이스 등에서 특정 조건을 만족시키기 위해 임의로 선택된 값Tailwind에서 특정 값들은 직접 지정해서 사용해야 될 때가 있음🍴 peer: 형제 요소의 상태에 따라 요소의 스타일 지정해야 하는 경우 사용. 형제를 클래스로 표시하고 대상 요소의 스타일을 지정하는 peer 사용아래 코드에서 input 요소에 peer 클래스를 주어 다른 요소들이 이 입력 필드의 상태를 기반으로 스타일을 적용할 수 있게 함span 아이디 아이디는 이메일 형식..

🍰 Tailwind 첫 진도!(지만 내일이 마지막 Tailwind 수업)🍴 Tailwind: 순풍 - 뒤에서 부는 바람. 유틸리티 클래스로 이루어진 CSS 프레임워크=> 유틸리티가 무엇인가? https://kellyjs.tistory.com/36 Pre Built-in과 Utility-first🍰 Pre Built-in과 Utility-first는 뭐고 차이는 무엇인가?: CSS 프레임워크와 스타일링 접근 방식에서 중요한 개념🍴 Pre Built-in: CSS 프레임워크가 미리 정의된 스타일과 컴포넌트 세트를 제공하는 접kellyjs.tistory.com유틸리티 기반 개발 방식클래스 방식으로 조립 - 모듈처럼 동작커스터마이징 용이로우레벨 프레임워크(속성 별로 쪼개져 있음)🍴 설치하기 - 공식 홈..

🍰 어제에 이어 Sass 수업!🍴 @extend : 연관성 있는 규칙 만들기 위해 사용특정 상속자 상속할 때 사용여러 선택자가 스타일 상속받도록 할 수 있음하나의 컴포넌트가 여러 스타일 갖는 경우 => 그걸 하나의 스타일 시트에서 관리할 때 적합선택자끼리 연관성 높아서 꼬일 염려 없고 관리 용이🍴 플레이스 홀더 선택자 %: 확장만을 위해 스타일 선언하고 싶을 때 사용%가 포함된 선택자는 @extend로 불러와 쓰기 위해 사용됨컴파일 된 CSS에 포함되지 않음🍴 Partials: 재사용 가능한 코드 조각을 담은 파일보통 파일명 첫 글자로 _(언더스코어)를 붙여 구별CSS로 컴파일 안 됨다른 Sass 파일에서 @use를 통해 불러와 사용됨* 멤버명 앞에 '_'가 붙는 경우는? : 변수가 private..

🍰 Pre Built-in과 Utility-first는 뭐고 차이는 무엇인가?: CSS 프레임워크와 스타일링 접근 방식에서 중요한 개념🍴 Pre Built-in: CSS 프레임워크가 미리 정의된 스타일과 컴포넌트 세트를 제공하는 접근 방식미리 정의된 스타일과 컴포넌트 - 버튼, 폼, nav바 같은 UI 요소들이 미리 스타일링 되어 제공됨일관된 디자인 - 프레임워크 내의 모든 컴포넌트가 동일한 디자인 패턴 따름쉽고 빠른 개발 - 미리 준비된 것들을 사용하여 개발 속도 높임ex) Bootstrap, Bulma, Foundation🍴 Utility-first: CSS 클래스를 통해 작은 스타일 단위(유틸리티 클래스) 제공, 이들을 조합해 원하는 스타일 만들어감작은 단위의 클래스 - 각 클래스는 하나의 특..