라쿤의 끄적끄적

React 07 HOC (Higher-Oder Components) 고차 컴포넌트 Hook이 나오면서 사용성이 줄어들고 있음 컴포넌트를 재사용 할수 있는 기술 React 에서만 있는 기술이 아닌 일종의 패턴 개념임 HOC는 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수 컴포넌트 vs HOC input : props -> 컴포넌트 -> output : UI input : 컴포넌트 -> HOC -> output : 새로운 컴포넌트 사용법 cross-cutting concerns (횡단 관심사)로 사용함 여러 페이지에서 지속적으로 일어 날수 있는 일 (ex. 로그인, 인증, 로깅) 그런 일을 전문적으로 하나로 분리하여 관리하여 여러 페이지에서 사용함 HOC에 인자로 들어가는 컴포넌트를 변경하지 말아야..

React 06 Styled Components react, CRA를 통해서가 아닌 별도의 라이브러리를 이용해서 편하게 사용하는 방법 Styled-Components Official Site styled Components : 컴포넌트 자체에 style이 있어 별도의 css, css module 필요 없이 하는 방식 styled components, emotion 등이 있음 설치 : npm i styled-components 기본 사용법 styled-components를 import로 연결하여 styled객체를 가져와서 사용함 ES6에서 제공하는 Tagged Template Literals 기능을 활용함 styled-components : Tagged Template Literals more explai..

React 05 React Component Styling Style Loders Style을 적용하기 위한 파일들이 동작하기 위함 배포용 파일로 변화시키기 위한 설정들로 4가지 방식이 있음 CSS, CSS Module, Sass, Sass Module 위의 4개의 type에 webpack에서 loader를 붙이고 설정하여 사용하게 됨 // webpack.config.js // style files regexes const cssRegex = /\.css$/; const cssModuleRegex = /\.module\.css$/; const sassRegex = /\.(scss|sass)$/; const sassModuleRegex = /\.module\.(scss|sass)$/; CSS, SASS 기..

React 04 Dynamic Routing URL을 동적으로 입력하는 방법 Path에 id값 사용 방식 Router에서 Route에 연결한 라우트 Component의 경우 path에 :이름을 붙여서 url을 표현 하게 되면 해당 Component 함수에서 받아오는 인자 (props)의 경우 객체이다. 그 객체는 해당 객체의 match에 params 안에 path로 지정한 이름으로 key를 가지는 key-value의 구조로 가지게 됨 자동으로 params 객체에 이름: '1' 의 item을 가지게 됨 :를 사용하는 경우 필수 요소라서 /profile/:id의 표현인 경우 /profile를 포함한다고 인식하고, 이처럼 따로 라우트 처리를 해줘야 함 // id라는 이름으로 path를 붙인 경우..

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을 만듦 (변경사항 반영안됨, 다시 빌..

React 02 Event Handling HTML DOM 에 클릭하면 이벤트가 발생하고, 그에 맞는 변경이 일어남 JSX에 이벤트를 설정할 수 있음 camelCase로만 사용가능 예) onClick, onMouseEnter 이벤트에 연결된 자바스크립트 코드는 함수임 이벤트 = {함수}와 같이 씀 실제 DOM요소들에만 사용 가능함 리액트 컴포넌트에 사용하면, 그냥 props로 전달함 Function Component 이벤트 연결 JSX에 바로 이벤트 적고, 해당 이벤트에 함수를 붙여줌 함수 컴포넌트에서는 state, 라이프 사이클을 사용하지 않기 때문에, 상태값을 활용할 수는 없다. function Component() { return ( { console.log("clicked"); }} > 클릭 );..

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 을 직접 제어하는 경우 바뀐 부분만 정확..

보호되어 있는 글입니다.

Bundler02 Babel npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-env : js의 기능을 한번에 지원하는 패키지 (배열 형태로 넣음) plugins : (2차원 배열로 넣어야 함, 배열안에 배열이 들어 있는 형태) @babel/plugin-transform-runtime : 비동기 처리를 위한 패키지 .babelrc.js 파일 module.exports = { presets: ["@babel/preset-env"], plugins: [["@babel/plugin-transform-runtime"]], }; webpack.config 파일에 rules에 js 파일에 대한 로더를 붙여 줘야 함..

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

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를 따로 사용하는 경..

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

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

Starbucks Clone03 Notice (공지) : 수직 슬라이드 슬라이드가 되는 공지사항을 구현하는 것이다. HTML 새로운 영역을 만드는 것이기 때문에 section 태그를 사용한다. notice section의 경우 좌우로 나뉘어서 영역을 차지하고 있고, 6:4 비율을 가지고 있다. 배경 색깔만 지정하는 bg-left class, bg-right class 요소가 있고 본격적인 내용은 앞에서 정의한 inner class 요소를 사용하여 중앙 정렬을 유지한다. inner class 요소 안에서도 좌우를 나누어 inner__left 와 inner__right가 존재함 inner__left 의 경우 공지사항 글자 부분 swiper-container라는 공지가 슬라이드 되는 부분 notice-line..

Starbucks Clone02 메인 메뉴 (드롭다운 메뉴) 드롭다운 메뉴 : 메뉴에 커서를 올리면 하위 메뉴가 보이는 메뉴 핵심 포인트는 드롭다운 하위 메뉴들을 평소에 display: none 으로 하고, 메인 메뉴의 item이 hover되는 때 display: block처리를 해서 보이게 하는 것이다. 또한, 스크롤 시에도 계속 따라 보이게 하기 위해서 position: fixed;를 사용함 html 구조 COFFEE 음료 콜드 브루 브루드 커피 에스프레소 프라푸치노 블렌디드 음료 스타벅스 피지오 티(티바나) 기타 제조 음료 스타벅스 주스(병음료) COFFEE item__name 부분은 메인 메뉴에서 원래 보이는 부분 item__contents 부분은 메인 메뉴 hover시 보이는 부분 inner 부..

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