패스트캠퍼스

\-> HTML,CSS,JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호 작용할 수 있도록 하는 것.즉, HTML,CSS,JS를 사용해서 웹페이지를 만들어서 그 페이지를 사용자에게 보여주는 것 그리고 사용자가 그 보여지는 페이

사용자는 자신의 컴퓨터에서 주로 사용하는 브라우저를 오픈을 합니다.브라우저에는 크롬,파이어폭스,엣지같은 여러가지 브라우저가 있습니다.그 중에 하나에서 주소창에 HTTP 혹은 뒤에 S를 붙이는 형태로 앞단에 프로토콜을 작성한 다음에 뒤쪽에다가 naver.com처럼 접속하

웹에서 사용할 수 있는 이미지는 크게 비트맵(Bitmap)과 벡터(Vevtor)라는 개념으로 나뉘게 됩니다.픽셀이 모여 만들어진 정보의 집합.레스터(Rester) 이미지라고도 부름.정교하고 다양한 색상을 자연스럽게 표현확대/축소 시 계단 현상, 품질 저하가 있다.ex)

html 코드 안에서 style의 내용으로 태그를 작성하여 스타일을 작성하는 방식입니다.내장 방식에 단점으로는 style의 범위가 커질수록 html파일이 난잡해지거나 구별해지기 힘들고 구별해서 관리하기 힘들다는 단점이 있습니다.요소의 style 속성에 직접 스타일을 작

max-width / max-height 는 기본값이 none이며min-width / min-height 는 기본값이 0이다em = 요소의 글꼴 크기 (1em이 기본값)rem = 루트(최상위) 즉 html 요소의 글꼴 크기vw = 뷰포트 가로 너비의 백분율vh = 뷰포

요소의 위치 지정 기준이다.(top,bottom,left,right,z-index) Static - 기본값, 기준이 없음 relative- 요소 자신을 기준으로 위치를 absolute - 위치 상 부모 요소를 기준으로 지정한다. fixed - 뷰포트(브라우저)를 기준

dash-case(kebab-case)snake_casecamelCase=거의 대부분 카멜케이스를 사용한다.ParcelCase= NEW생성자 사용 시 사용합니다.0기반 번호 매기기특수한 경우를 제외하고 0부터 숫자를 시작합니다.let , const , varlet은 재

버전 관리Git= 컴퓨터 파일의 변경사항을 추적하고 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS)입니다.

MarkDown장점문법이 쉽고 간결하다.관리가 쉽다.지원 가능한 플랫폼과 프로그램이 다양하다.단점표준이 없다.모든 HTML 마크업을 대신하지 못한다.position 속성 동해물과 백두산이 마르고 닳도록하느님이 보우하사 우리나라 만세

개발용과 실제 브라우저에서 동작할 배포용으로 우리가 설치하는 패키지들을 구분해야 하고, 개발용으로 설치시에는 뒤에 save-dev 혹은 패키지 이름 앞에다가 작성해주어야 합니다. ex) npm install parcel --save-dev === npm install

Nullish 병합 연산자= 0과 Nun말고 null 과 undefined 만 부정연산자로 축소해서 계산하는 연산 방식삼항연산자조건 ? 참 : 거짓ex) a < 2 ? '참!' : '거짓!'for문break 는 해당 반복및 순환을 종료하는 키워드continue 는

Getter, SetterGetter = 어떤 값을 얻는 용도의 메소드Setter = 어떤 값을 지정하는 용도의 메소드prototype 메소드 / 정적 메소드 차이점prototype 메소드는 일반 인스턴스에서 사용이 가능하고정적 메소드는 인스턴스에서는 사용 불가능하고

= 문자의 길이나 숫자를 반환합니다.ex) const str = 'Hello world!'console.log(str.length) // 12= 대상 문자에 주어진 문자가 포함되어 있는지(불린) 확인합니다.ex) const str = 'Hello world!'conso

= 숫자를 지정된 고정 소수점 표기(자릿수)까지 표현하는 문자를 반환합니다.ex) const num = 3.1415926535console.log(num.toFixed(2)) // 3.14(문자형)console.log(parseFloat(num.toFixed(2)))

= 주어진 숫자의 절댓값을 반환합니다.ex) console.log(Math.abs(2)) // 2 console.log(Math.abs(-2)) // 2= 주어진 숫자를 올림해 정수를 반환합니다.ex) console.log(Math.ceil(3.1415926535))

= 타임스탬프ex) const date = new Date() console.log(date) // 'Web Sep 28 2024 10:45:41 GMT+0900 (한국 표준시)'const d1 = new Date(2024(년도), 11(월), 16(일), 12(시)

= 대상 배열을 인덱싱합니다.= 음수 값을 사용하면 뒤에서부터 인덱싱합니다.ex) const arr = 'A', 'B', 'C'console.log(arr0) // Aconsole.log(arr.at(0)) // Aconsole.log(arrarr.length - 1)

= 대상 배열의 모든 요소를 구분자로 연결한 문자를 반환합니다.ex) const arr = 'Apple', 'Banana', 'Cherry'console.log(arr.join()) // Apple,Banana,Cherryconsole.log(arr.join(', '

= 하나 이상의 출처(Source) 객체로부터 대상 객체로 속성을 복사하고 대상 객체를 반환합니다.const target = { a:1, b:2 }const source1 = { b: 3, c: 4 }const source2 = { c: 5, d: 6 }const re

데이터 전달을 위한 표준 포맷!문자, 숫자, 불린, Null, 객체, 배열만 사용문자는 큰 따옴표만 사용후행 쉼표 사용 불가.json 확장자 사용= 데이터를 JSON 문자로 변환합니다.= JSON 문자를 분석해 데이터로 변환합니다.cosole.log(JSON.strin

export default 123export const str = 'ABC'export const arr = 'A','B','C'export const hello = (a,b) => { return a+b}

= 순차적으로 코드 실행ex) console.log(1)console.log(2)console.log(3)= 순차적으로 코드를 실행하지 않음ex)console.log(1)setTimeout(() => { console.log(2) }, 1000)console.log(3

예시1)예시2)콜백지옥보다 더 단순한 코드가 간결하다, 하지만 여전히 많은 데이터를 사용하면 지저분합니다.

예시1)

= DOM이란 HTML 문서를 객체로 표현한 것으로, JS에서 HTML을 제어할 수 있게 해줍니다.const element = document.querySelector('h1')console.log(element.textContent) // 'Hello wolrd!'=

= 메모리에만 존재하는 새로운 HTML 요소를 생성해 반환합니다.ex)const divEl = document.createElement('div')console.log(divEl)const inputEl = document.createElement('input')con

= 요소의 각 data- 속성 값을 얻거나 지정합니다.ex)const el = document.querySelector('.child')const str = 'Hello World!'const obj = {a:1, b:2}el.dataset.helloWorld = st

Java Event .addEventListener() = 대상에 이벤트 청취(Listen)를 등록합니다. = 대상에 지정한 이벤트가 발생했을 때 지정한 함수가 호출됩니다. ex) const parentEl = document.querySelector('.paren

= 비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우,= 단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용할 수 있습니다.ex)const parentEl = document.querySelector('.parent')const childEl = docume

= 콘솔에 메시지나 객체를 출력합니다.log = 일반 메시지warn = 경고 메시지error = 에러 메시지dir = 속성을 볼 수 있는 객체를 출력= 콘솔에 메소드 호출의 누적 횟수를 출력하거나 초기화합니다.console.count('이름')console.countR

= 현재 페이지 정보를 반환하거나 제어합니다..href : 전체 URL 주소.portocol : 프로토콜.hostname : 도메인 이름.pathname : 도메인 이후 경로.host : 포트 번호를 포함한 도메인 이름.port : 포트 번호.hash : 해시 정보(페

= 변경이 불가한 데이터로, 유일한 식별자를 만들어 데이터를 보호하는 용도로 사용할 수 있습니다.Symbol('설명')= '설명'은 단순 디버깅을 위한 용도일 뿐, 심볼 값과는 관계가 없습니다.const sKey = Symbol('Heool!')const user =

= 함수가 선언될 때의 유효범위(렉시컬 범위)를 기억하고 있다가,= 함수가 외부에서 호출될 때 그 유효범위의 특정 변수를 참조할 수 있는 개념을 말합니다.ex)ex2)

메모리 누수(Memory Leak)= 더 이상 필요하지 않은 데이터가 해제되지 못하고 메모리를 계속 차지되는 현상입니다.불필요한 전역 변수 사용분리된 노드 참조해제하지 않은 타이머잘못된 클로저 사용window.hello = 'Hello world!'window.hero

JS Call Stack(LIFO) -> Web APIs (setTimeout(),setInterval()등) -> Task Queue(FIFO) -> Event Loop -> Js Call Stack

컴포넌트(Component) 재사용 가능한 각각의 독립된 기능의 모듈 main.js App이라는 것을 하나의 컴포넌트로써, 화면에 출력할 하나의 ui개념으로 만들어서 현재 main.js에서 append로 출력하는 코드입니다. 그 전에 우선 컴포넌트를 만들겠습니다.

영화 프로젝트를 시작하기 전, 사용되는 heropy.js에 대해서 알아보겠습니다.heropy.js는 component,router,store 이렇게 3가지로 구분되어 작성되어 있는데 하나씩 살펴보겠습니다.살펴보기 전에 하나 알고 가야 하는 지식이 있습니다. 바로 exp

프로젝트 깃허브 1. 기본 설정 및 css 초기화 1. 터미널에서 npm init -y를 입력하여 프로젝트를 시작합니다. 이후 npm i -D parcel를 입력하여 설치합니다. 이것은 parcel번들러입니다. 이 번들러를 사용하는 이유는 2. package.js

프로젝트 깃허브 Headline 컴포넌트 Search 컴포넌트 상태 관리

main.css

프로젝트 깃허브 Moive List 컴포넌트 Moive Item 컴포넌트 영화 목록 추가 로딩 예외처리

프로젝트 깃허브 영화 상세정보 컴포넌트 상세정보 상태 관리 뒤로가기 및 검색어 초기화 스켈레톤 UI

프로젝트 깃허브 Header 컴포넌트 Footer 컴포넌트 내정보 페이지 컴포넌트 이슈 정리 및 보안

2012년 마이크로소프트에서 발표했으며, 자바스크립트 기반의 정적 타입 문법을 추가한 프로그래밍 언어입니다.그리고 타입스크립트는 브라우저나, Node.js 환경에서 동작하지 못하기 때문에 자바스크립트로 변환 즉, 컴파일하여 사용해야 하기 때문에 정적 타입의 컴파일 언어

타입스크립트의 종류

'추론' = 어떠한 판단을 근거로 삼아 다른 판단을 이끌어 냄.1) 초기화된 변수2) 기본값이 설정된 매개 변수3) 반환 값이 있는 함수타입스크립트가 타입 추론을 통해 num이 어떤 타입인지 작성해주지 않아도 number라는 타입으로 인식을 하고, 그아래 코드에서 문자

타입스크립트에서는 querySelector 메서드가 반환하는 값이 Element | null 타입으로 추론되기 때문에, null일 가능성을 고려해야 합니다. 이 경우, 타입 가드를 사용하여 null 여부를 확인한 후에 함수에 인자를 전달하는 방법으로 문제를 해결할 수

선택적 속성 - ?읽기전용 속성 - readonlyisValid 부분에 ? 즉 선택적 속성을 추가하면, 아래 예시 처럼 isValid 부분을 추가해도 되고, 생략해도 되는 선택을 할 수 있습니다. 또한 만약 ? 기호가 없다면 필수적으로 추가되어야 합니다.읽기전용 속성이

타입스크립트에서 함수를 작성할 때 this 키워드를 사용할 수 있는데 그랬을 때 this 키워드에 타입을 어떻게 명시할 수 있는지에 대한 방법입니다.해당 코드에서 결과값을 제대로 출력이 되지만 this 부분에 문제가 발생하는데 해당 내용은 'this'에는 형식 주석이

타입스크립트에서 클래스 필드(first, last, age 등)를 선언할 때, 해당 필드의 타입과 초기 값을 지정할 수 있습니다. 이는 자바스크립트와의 주요 차이점 중 하나입니다. 자바스크립트에서는 필드를 선언할 때 타입을 명시할 필요가 없으며, 초기화도 constru

타입스크립트의 제네릭(Generics)은 코드의 재사용성을 높이고, 다양한 타입을 처리할 수 있도록 해주는 강력한 기능입니다. 제네릭을 사용하면 코드에서 타입을 명시적으로 지정하지 않고, 코드가 실행될 때 타입을 지정할 수 있습니다. 제네릭은 함수, 클래스, 인터페이스

만약 타입스크립트에서 lodash라는 모듈을 사용하기 위해 npm i lodash를 설치하여 사용을 하려고 해봅시다.그런데 여기서 오류가 발생을 합니다. 해당 모듈을 찾을 수 없다는 오류가 나게 되는데 여기서 해결방법은 src폴더에서 lodash.d.ts 라는 파일을

스타벅스 랜딩 페이지(홈페이지)를 클론코딩하는 프로젝트 입니다.스타벅스 클론 코딩깃허브스타벅스 클론 코딩하기전 이미지 파일들은 깃허브에서 가져와서 사용했습니다.웹페이지가 화면(viewport)에 표현되는 방식을 설정합니다. 그리고 모바일 환경에서 적용됩니다.width=

스타벅스 헤더와 드롭다운 메뉴 로고 코드 우선 로고를 넣기위해 header라는 태그를 사용하여 img를 사용한 로고를 추가하는 코드를 작성했습니다. 여기서 header라는 태그는 시멘틱 태그라고 하는데 시멘틱 태그가 무엇일까요? > 시멘틱 태그 = 시멘틱 태그란