20210605 React03 : CRA, ESLint, Prettier, Husky, Lint-staged, CRA코드 이해하기, React Developer Tools, React-Router-Dom, SPA 라우팅 과정, Router 구현하기
React 03 Create React App 본격적으로 App 만들기 Create React App -> 줄여서 CRA 라고 부름 create-react-app.dev : React app을 만드는 CLI 툴 소개 편하게 프로젝트를 생성할 수 있게 도와주고, 그외 여러가지 기능들을 제공함 CRA - 명령어 npx 명령어 : npm 5.2.0 이상부터 함께 설치된 커맨드라인 명령어 앱생성 명령어로 만들어진 프로젝트는 노드 (npm) 기반의 프로젝트임 npx create-react-app 프로젝트이름 : 프로젝트 생성 npm start : dev server 실행 (변경사항 바로 반영 됨) npm run build : build(compile) 해서 production을 만듦 (변경사항 반영안됨, 다시 빌..
20210604 React02 : Event Handling, Component Lifecycle, Lifecycle 변경된 사항 (16.3버전 이후), getDerivedStateFromProps, getSnapshotBeforeUpdate, ComponentDidCatch
React 02 Event Handling HTML DOM 에 클릭하면 이벤트가 발생하고, 그에 맞는 변경이 일어남 JSX에 이벤트를 설정할 수 있음 camelCase로만 사용가능 예) onClick, onMouseEnter 이벤트에 연결된 자바스크립트 코드는 함수임 이벤트 = {함수}와 같이 씀 실제 DOM요소들에만 사용 가능함 리액트 컴포넌트에 사용하면, 그냥 props로 전달함 Function Component 이벤트 연결 JSX에 바로 이벤트 적고, 해당 이벤트에 함수를 붙여줌 함수 컴포넌트에서는 state, 라이프 사이클을 사용하지 않기 때문에, 상태값을 활용할 수는 없다. function Component() { return ( { console.log("clicked"); }} > 클릭 );..
20210604 React01 : React 개념, Virtual DOM, CSR vs SSR, 리액트 라이브러리, Component(Class, Function), React.createElement, JSX, Props 와 State, Render함수
React 01 React Concepts Component src, class, name, props 밖에서 넣어주는 데이터 html, CSS, JS을 합쳐서 내가 만든 일종의 태그 재사용을 할 수 있는 개인이 커스텀한 완전한 묶음 Component Based Development 화면을 구성하는 부분인 component들이 새로운 component를 구성하면서 개발하는 방식 Component Tree Component Tree를 Dom Tree로 변환 되어 동작함 Dom Tree의 경우 브라우저에 내장되어 있는 표현의 목록임 Component Tree의 경우에는 개인이 내장되어 있는 태그의 조합, 스타일, 동작을 입혀서 재사용 가능 Virtual DOM DOM 을 직접 제어하는 경우 바뀐 부분만 정확..
20210602 Bundler01 : 번들러 개념, Parcel (프로젝트 초기 설정, 정적 파일 연결, CLI, PostCSS, Autoprefixer, Babel), Webpack(프로젝트 초기 설정, 구성 옵션 파일 작성(config), html기준 플러그인, 정적파일연결하..
Bundler01 여러가지 개발할 때 필요한 라이브러리, 프레임 워크 등의 결과를 브라우저가 인식할 수 있도록 변환해 줌 번들러 자체가 변환해주는 것은 아니고, 해당 라이브러리, 프레임워크등이 가진 변환 패키지들을 번들러가 관리해서 변환을 도와주고 웹에서 동작까지 시킴 Parcel vs Webpack Parcel 구성 없는 단순한 자동 번들링 소/중형 프로젝트에 적합 Webpack 매우 꼼꼼한 구성 중/대형 프로젝트에 적합 Parcel 프로젝트 생성 npm init -> 프로젝트 시작 npm i -D parcel-bundler -> 번들러 개발 의존성으로 설치 package.json 파일 script 수정 "dev": "parcel index.html" "build": "parcel build index..
20210601 Bootstrap01 : CDN 연결, Buttons & Buttons group, Dropdown, List Group, Form, Modal, Tootips, NPM연결, 테마 색상 커스텀, 성능최적화(트리 쉐이킹, Optimize, 단일 번들)
Bootstrap01 Bootstrap official site 여러가지 CSS, JS로 이미 만들어 져있는 UI(Components)를 가져다 사용 가능케 해주는 UI Framework 5버전 : SCSS , 트리쉐이킹을 지원함 트리 쉐이킹 (Tree Shaking) : 단일 번들을 최적화 할때 사용되는 필요하지 않은 코드를 제거하는 기술 연결하기 CDN CSS, JS 연결하기 Bootstrap : Quick Start JS CDN의 경우 Bootstrap에서는 Popper js에 의존하고 있어서, 묶여져 있는 Bundle이 있고 분리되어 있는 Seperate가 있음 Bundle : Bootstrap + Popper Seperate : Bootstrap , Popper (Popper를 따로 사용하는 경..
20210531 StarbucksClone05 : 배포(Netlify), 로그인 페이지, 모듈화 관리, Git(기본 명령어, reset, clone, branch 올리기), GitHub(pullRequest, 충돌, 로컬병합)
Starbucks Clone05 Netlify 배포 Netlify Official Site What is Netlify? by Heropy Blog 지속적인 배포(Continuous Deployment) github의 원격저장소를 연결해주면 Netlify가 원격저장소의 내용을 가지고 가서 사이트를 자동으로 만들어 줌 (Github에서 project가 수정되면 알아서 Netlify가 인자하여 사이트에 수정사항을 반영 함, 즉 지속적인 관리 까지 가능함) Netlify는 신뢰할수 있는 사이트라서 github 저장소 모두 연결해도 상관 없음 로그인 페이지 만들기 (JS, CSS 모듈 이원화) SignIn HTML 기본 작업 (head) signin 폴더에 index.html 만들고 원래 index.html을 ..
0210530 StarbucksClone04 : 반복 애니메이션(Gsap), 고정이미지 배경(background-attachment), 3D 애니메이션(rotateY, backface-visibility), 스크롤 위치 계산(ScrollMagic), 푸터, 특정 위치에 스크롤 위치 시키기(Gsap-scro..
Starbucks Clone04 유튜브 영상 배경 - 반복 애니메이션 유튜브 영상 배경위에 일정 하게 반복되는 애니메이션을 구현하고자 함 Gsap : easing Gsap : to 함수 사용법 (옵션 포함) HTML, CSS 반복되게 할 이미지를 inner에 추가함 CSS는 알맞은 위치에 배치 함 JS 반복 애니메이션 랜덤한 숫자를 생성하는 함수 각 애니메이션에 특정 옵션값을 랜덤하게 줌으로써 볼때마다 다르게 움직이게 하려고 함 function random(min, max) { return parseFloat((Math.random() * (max - min) + min).toFixed(2)); } floatingObject라는 함수느 선택자, 지연시간, y축 이동 거리를 인자로 받아서 gsap의 to ..
20210527 StarbucksClone01 : 오픈 그래프, fonts, Icons, 헤더 만들기( absolute를 활용한 정렬), 서브 메뉴(구분선, a태그 임시 href, JS로 요소 강제 focus 시키기, classList, setAttribute, 이벤트 함수로 CSS 제어)
Starbucks Clone01 기본 환경 만들기 사용할 images 따오기 (favicon 포함) HTML 파일 만들기 html lang 속성 ko title 변경 favicon 연결 하기 link 태그의 rel icon css reset 연결하기 css 연결하기 CSS 파일 만들기 오픈 그래프 (The Open Graph protocol) 웹페이지가 소셜 미디어 등으로 공유 될때 우선적으로 활용되는 정보를 지정(공유시 북마크 미리보기 같은 느낌) 검색엔진에게 제공하는 정보 (SEO) 오픈 그래프 작성하기 html meta 태그의 property 속성 값으로 "og:속성값 과 content 속성 값을 쌍으로 지정하여 작성함 og:type : 페이지의 유형 (website, video.movie) og:..
20210525 CSS03 : CSS 속성, (width, height) 관련 속성, 표현단위, margin, padding, border 관련 속성, 색상 표현
CSS03 CSS 속성(Properties) HTML 속성 : Attributes CSS 속성 : Properties JS 속성 : Properties 박스 모델 width , height 요소의 가로/세로 너비 기본 값 (property가 선언되지 않은 경우) auto : 브라우저가 너비를 계산 인라인 요소(auto 값) 콘텐츠 크기 만큼 width, height가 맞춰짐 (예. span 태그, 인라인 요소에서 특정 너비 값은 무시됨) 블록 요소(auto 값) width는 부모 요소의 크기 만큼 자동으로 맞춰짐 height는 내부의 콘텐츠 크기만큼 자동으로 맞춰짐 (예. div 태그) 지정 할 수 있는 값 px, em, vw 등 단위로 지정 max-width, max-height 요소가 커질 수 있는 ..
