[패스트 캠퍼스 FE]
1.[패스트 캠퍼스 FE] Bundler
Bundler > 여러개의 파일을 하나의 파일로 묶어주는 역할을 함. > 참고 블로그 > Webpack vs Rollup vs Parcel > 위 세가지가 가장 많이 쓰이는 번들러임. > * Webpack ➡️ 다양하고 복잡한 프로젝트에 추천 (대부분이 선호)
2.[패스트 캠퍼스 FE] VS Code 단축키 및 확장 프로그램
이강의는 패스트캠퍼스의 Part 1. HTML/CSS/JS로 만드는 스타벅스 웹사이트라는 강의를 들으면서 정리한 글이다.앞부분이 전반적인 HTML/CSS/JS를 정리한 강의라서,프론트엔드를 처음 접하는 분들은 참고하시면 많은 도움이 될 것 같다. (나도!)그럼 시작해보
3.[패스트 캠퍼스 FE] HTML 무작정 시작하기
Html 파일에서 자동완성을 누르면 딱 보이는, 요녀석들이 뭔지 먼저 알아보자!이게 당최 무슨 그림이냐고? 아래에서 설명하겠다!<!DOCTYPE html> 현재 html의 버전을 의미함 <html> ~ </html> 문서의 전체 범위👉 HTML
4.[패스트 캠퍼스 FE] HTML 개요 & 핵심 정리
HTML 개요 기본 문법 >내용 (내용 - 요소(element)) 부모요소와 자식요소의 관계 코드는 항상 협업하는 사람들을 위해 모두가 보기 좋은 형태로 만들어야 한다. (객관화) 부모요소 자식요소 아래, 위로 한 단계를 부모 , 자식 요소라고 부름 > 상
5.[패스트 캠퍼스 FE] CSS 개요
CSS 개요 기본 문법, 주석 CSS의 기본 문법 알아보기 편하게 그림을 바탕으로 각 요소들을 설명하겠다 >선택자 스타일 (CSS)을 적용할 대상 (Selector) > 속성 스타일 (CSS)의 종류 (Property) > 값 스타일 (CSS)의 값 (Value)
6.[패스트 캠퍼스 FE] CSS 속성
CSS 속성 CSS속성의 역할 화면에 예쁘게 나오도록 만드는 역할을 한다. > CSS 속성의 종류 > * 박스모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 박스모델 너비 (width,height) > ` 인라인 요소`
7.[패스트 캠퍼스 FE] JS 선행
JS 선행 스타벅스 클론 코딩을 본격적으로 들어가기에 앞서 필요한 개념들을 정리해보겠다! 목차 >1. 표기법 데이터 종류 변수, 예약어 함수 조건문 DOM API 메소드 체이닝 질의응답 표기법 >* dash-case(kebaba-case) HTML, CSS
8.[패스트 캠퍼스 FE] JS 시작하기
JS 시작하기 개요(ECMAScript) 및 프로젝트 초기화 ECMA 스크립트란? >ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.
9.[패스트 캠퍼스 FE] JS 함수
JS 함수 함수 복습 > 함수의 결과가 반복적으로 사용될 때 -> 변수에 담아서 쓰는 것이 좋음 단일로만 사용될 때 -> 함수의 결과가 사용되는곳에서 호출하는게 좋음 >❗️ 함수 표현과 함수 선언의 차이 >함수 선언은 그 함수를 반환하는 변수를 만들고 >함수 표현
10.[패스트 캠퍼스 FE] JS 클래스
JS 클래스 ❗️ 생성자 함수(prototype) 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 있다. 이때, new연산자와 생성자 함수를 사용하면, 유사한 객체 여러개를 쉽게 만들 수 있다. > > 생성자 함수 만드는 법 함수 이름의 첫글자는 대문자로 시
11.[패스트 캠퍼스 FE] JS 데이터
JS 데이터 목차 >1. 문자 숫자와 수학 배열 객체 구조 분해 할당 전개 연산자 불변성 얕은 복사와 깊은 복사 문자 (string) >String 전역 객체는, 문자열(문자의 나열)의 생성자이다. 종류 String.length 문자열의 길이 반환 Strin
12.[패스트 캠퍼스 FE] JS 데이터 실습
JS 데이터 실습 가져오기, 내보내기 자바스크립트에서 데이터를 내보낼때, 기본 통로와 이름을 지정하는 통로 두가지가 있음. > 기본 통로의 경우 (default) > > 기본 통로 예시 > > > 이름을 지정하는 통로 > 사용 예시 > > >📌 기본
13.[패스트 캠퍼스 FE] TypeScript
TypeScript TypeScript 시작하기 TypeScript 란 무엇인가? > VS Code 설치 및 설정 > >1. "test.ts" 파일 생성 터미널에 npm init -y 입력 (현재 폴더를 npm project로 만듬) 터미널에 npm i ty
14.[패스트 캠퍼스 FE] 리액트 맛보기 -1 (초격차 패키지)
😋 리액트 맛보기 🤨 리액트를 시작하기에 앞서... 리액트는 라이브러리의 구조를 가지고 있다. > 라이브러리 vs 프레임워크 > 라이브러리는 개발 편의를 위한 도구의 모음 프레임워크는 기반 구조까지 잡혀있음 > -> 라이브러리는 공구 -> 프레임워크는 공장
15.[패스트 캠퍼스 FE] 리액트 맛보기 - 2
리액트 맛보기 2 리액트의 리렌더링 알아보기 >1️⃣ React는 변경된 곳만 렌더링한다. > >➡️ 굉장히 효율적이다! > >2️⃣ React는 불변객체(immutable)이다. >
16.[패스트 캠퍼스 FE] 리액트 맛보기 - 3
1️⃣ 컴포넌트 상태 다루기2️⃣ 컴포넌트 사이드이펙트 다루기3️⃣ 커스텀 훅 만들기4️⃣ Hook Flow 이해하기공식문서useState는 state의 초기값을 정할 수 있고, return 값으로 state, setState를 돌려주는 hook이다. 예제: useSt
17.[패스트 캠퍼스 FE] 리액트 맛보기 - 4
1️⃣ 리액트 Element에 스타일 입히기2️⃣ Ref로 DOM 다루기3️⃣ Form 다루기4️⃣ Error 다루기이런식으로 입력받는 값을 <button> 태그와 백틱으로 묶어서 return함!잔여 연산자➡️ 입력받는 값들을 모두 태그 안에 설정해줌특정 DOM을
18.[패스트 캠퍼스 FE] 리액트 맛보기 - 5
1️⃣ Key와 리랜더링 알아보기2️⃣ 상태 끌어올리기3️⃣ 데이터 Fetch 해보기Key는 Value를 특정하는 이름완료 버튼 클릭시 해당 항목이 사라지고, 복구 버튼을 누르면 사라진 항목이 표시됨.코드공식 문서(https://developer.mozilla
19.[패스트 캠퍼스 FE] 리액트 - 공식문서로 디테일 잡기 (초급)
리액트 - 공식문서로 디테일 잡기 목차 > 1️⃣ 공식문서를 보는 이유 2️⃣ 개발 환경 설정 3️⃣ JSX 4️⃣ Props 5️⃣ State 6️⃣ 컴포넌트 생명주기 7️⃣ 이벤트 8️⃣ 9️⃣ 🔟 1️⃣ 공식 문서를 보는 이유 > 라이브러리도 결국 사람이
20.리액트 - 공식문서로 디테일 잡기 (고급)
리액트 - 공식문서로 디테일 잡기 (고급) 목차 > 1️⃣ Hooks 2️⃣ Composition 3️⃣ HOC 4️⃣ Memoization 5️⃣ Context 6️⃣ 7️⃣ 8️⃣ 9️⃣ 🔟 🧑🏻💻 오늘의 회고 1️⃣ Hooks Hook 이란? 공식