요모조모

🍴 비교 연산자불린형 반환: true 반환-참, false 반환-거짓반환된 불린값은 변수에 할당 가능falsy 값 - 0, 빈 문자열"", null, undefined, NaN이 외의 값은 불린형으로 변환 시 true가 되므로 truthy 값문자열 비교: 사전 편집(lexicographical) 순으로 문자열 비교대소문자 따짐정확하게는 사전 순이 아니라 유니코드 순임 ex) a > A다른 형을 가진 값 간의 비교: 비교하려는 값의 자료형이 다를 때 숫자형으로 바꿈console.log('2' > 1); // trueconsole.log('01' == 1); // true/* 이상한 상황 */let a = 0;console.log( Boolean(a) ); // falselet b = "0";console..

🍰 오늘도 자바스크립트 진도를 잔뜩.🍴 자료형: 총 여덟 가지 자료형. 동적 타입(dynamicallyt typed) - 자료의 타입은 있지만 변수에 저장되는 값은 언제든지 바꿀 수 있음.1️⃣ 숫자형(Number): 정수 및 부동 소수점 숫자 나타냄 2**53 -1(9007199254740991)까지 안전하게 사용 가능 관련된 연산: +, -, *, /특수 숫자 값(special numeric value) : Infinity, -Infinity, NaN2️⃣ BigInt: 일반 숫자 뒤에 n 붙이기3️⃣ 문자형(String): string을 따옴표로 묶음" "' '` `(백틱) => 변수가 들어올 여지 있을 때 사용let nickName = '뫄뫄';let age = 20;`안녕 나는 ${nickN..

🍰 자바스크립트 이틀 차 진도!🍴 변수: 데이터 저장할 때 쓰는 '이름이 붙은 저장소'선언과 할당 구분나눠서 쓰는 일은 잘 없음var, let, const🍴 const: 변수를 상수로 선언, 변수에 할당된 값이 변경될 수 없음🍴 명명 규칙변수 명에는 문자, 숫자, $, _만 가능첫 글자는 숫자 사용 불가카멜 표기법을 흔히 사용🍴 엄격 모드ES5에 추가됨코드 실행을 엄격하게 제한해서 잠재적인 오류 발생시키기 어려운 개발 환경 만들기 위해ES6에 도입된 클래스와 모듈은 기본적으로 strict mode 적용됨"use strict";를 코드 맨 위 혹은 함수 맨 위에 추가하여 활성화🍴 전역 객체: 가장 최상위의 객체. 어디서나 사용 가능한 변수/함수 만들 수 있음자바스크립트가 실행되는 환경에 따라 다..

🍰 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..

🍰 오늘은 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..

🍰 새로운 진도 나간 날!🍴 Node와 NPM(Node Package Manager)Node.js - 자바스크립트를 실행할 수 있는 런타임 환경NPM - 자바스크립트 프로그래밍 환경에서 패키지를 설치하고 관리하는 도구(Node.js 설치 시 같이 다운로드 됨) 🍴 패키지 매니저 종류NPM - 가장 널리 사용됨Yarn - 페이스북이 NPM의 단점 보완하기 위해 개발. 빠른 속도와 안정성 제공.PNPM(Performant NPM) - NPM과 호환되면서 성능 개선함. 디스크 공간 절약, 빠른 설치 속도, 모노레포에 강점. 🍴 package.json은 어떤 파일?Node.js 프로젝트에서 사용되는 메타 데이터와 의존성 정보 담음의존성 정보: 프로젝트가 제대로 작동하기 위해 필요한 외부 라이브러리나 패키..

🍰 테킷 프론트 엔드 스쿨 시작한 지 벌써 4주째. 뭘 했다고...?🍴 배운 것반응형 웹, 그리드, svg 이미지, 스프라이트 이미지, 마스크 이미지, container-query 등등...🍴 아쉬운 점내 복습 속도가 진도를 따라가지 못했다.가끔 수업을 귀로는 듣는 데 머리로는 따라가지 못할 때가 많았다. 약간 멍 비슷한 걸 때릴 때 의식해서 집중하려고 노력했는데 잘 안됐다. 수업 때 하는 실습을 따라가고픈 욕심이 있어서 코드를 치면서 수업을 듣는 데, 선생님과 결과 화면이 다르면 원인 찾다가 수업을 놓칠 때가 굉장히 많았다. 필기를 포기하고 블로그에 매일 TIL 작성하는 것을 그만뒀음에도 복습을 열심히 하지 않았다.그렇게 수업 내용을 다 이해하지 못한 채 과제를 하니까 열 시간 넘게 걸리는 건데...

🍰 저번주 금요일 걸 지금 쓴다...🍴 BFC(block formatting context)주변 블록 배치에 영향을 주는 것들이 BFC를 만듦.(ex. float 사용 시 다음 줄 요소가 밀려나는 것)overflow도 독립적인 블록 형태로 포맷팅 형성🍴 float노멀 플로우를 벗어나서 화면에 뜨게 배치.노멀 플로우: 흘러가는 흐름. inline인지 block인지.🍴 네이밍 방법론BEM(Block Element Modifier)block: 기본 구성 요소. 독립적으로 존재하는 블록.element: 블록 안에서 구체적인 부분. ex. text, iconmodifier: 요소의 상태나 변형 정의. ex. 버튼 색상/크기 변경OOCSS(Object-Oriented CSS)CSS를 객체 지향적으로 접근하는..