whatisthis?

React.js Day 03 React Hooks + WebPack 💾 PART 1 220315 [TIL] Today I Learned 💯 React.js - (1) React.js Day 03 React Hooks + WebPack 1 / React Hooks 리액트에서 추천하는 것 = Hooks의 사용. Class Component를 자제하고, 함수형 프로그래밍을 위한 Hooks를 권고함. 클래스 컴포넌트 class Button extends.. mywebproject.tistory.com * 지금까지의 코드 📃 webpack.config.js const path = require("path"); module.exports = { name: "wordrelay-setting", mode: "devel..

React.js Day 03 React Hooks + WebPack 1 / React Hooks 리액트에서 추천하는 것 = Hooks의 사용. Class Component를 자제하고, 함수형 프로그래밍을 위한 Hooks를 권고함. 클래스 컴포넌트 class Button extends React.Component { // 생략 render () { return ( ) } 함수형 컴포넌트 const Button = () => { // 생략 return } 원래도 함수형 컴포넌트가 있었는데, 그전에는 state나 ref 등을 클래스에서만 쓸 수 있었다. 💡 함수형에서도 state랑 ref를 쓸 수 있게 만든 것 = React Hooks (+ useEffect) useState() React.useState()..

React.js Day 02 (=빈 태그)의 사용 리액트에서 단점이였던 것이 항상 컴포넌트를 로 감싸줬어야 했다. 그러면, reactDOM으로 렌더링 했을때 root>div>컴포넌트 이런식으로 쓸 데 없는 div가 생겨버리게 된다. 따라서, 이런 단점을 개선한 것이 바로 로 감싸주는 것. 1. 컴포넌트의 render 부분 return ( 💯구구단 게임💯 📃 {this.state.first} 곱하기 {this.state.second} 는? 입력 LOG 🔎 {this.state.line} {this.state.result} ); 2. ReactDOM의 render 부분 ReactDOM.render( , document.querySelector("#root") ); 이런식으로 div#root 하위 div들이 ..

React.js 선언형 코드를 예측 가능하고 디버그하기 쉽게 만들어줌. 컴포넌트 기반 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음. 💡 웹팩(webpack)의 기능 - 쪼개진 js 파일을 html이 실행할수 있는 하나의 파일로 합쳐준다. React 클래스 컴포넌트 HTML like-button.js const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); } render() { return e("button", null, "like"); } } 클래스형 컴포넌트 - class 클래스명 extends React.Co..

BookStore UI -codepen 🏆 KEY POINTS display: flex와 flex-shrink position: absolute FontAwesome 사용 - 다른 방법! @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); .rating > label::before { display: inline-block; font-size: 0.9em; font-family: FontAwesome; content: "\f005"; } transition과 가상클래스 overflow overflow와 text-overflow의 차이는? text-overflow: ellipsis 텍스트가 넘치면 ellipsis (..

Modal pop-up - without JS 📌 기본 원리 - 을 해서 해당 div#popup에 가상클래스 :target을 준다! - display block과 none 토글되게 - 닫기버튼에는 로 다시 되돌린다. HTML Open modal 닫기 CSS #popup { display: none; } #popup:target { display: block; } 🔻 응용 예제 위 원리를 이용해서 응용 예제를 만들어보자. div#popup에 class도 추가해서 스타일 하나를 가지고 여러개의 모달을 만들 수 있게. 또한, display: block이아니고 display: flex를 해서 가운데정렬도 덤으로 할수 있게. index.html Open Modal A Open Modal B Open Modal C..

Slide Page - only CSS - without JS - 📃 실습하면서 알게된 점 기록 여지껏 js로 복잡하게 하던 방식 대신, js를 하나도 안쓰고 오로지 css와 :checked 선택자 만으로 슬라이드를 구현할 수 있다고 한다. 📌 :checked - CSS 가상클래스 - 선택했거나 on 상태인 radio, checkbox, option요소를 나타냄 __ 📌 CSS sibling element 관련 결합자 ~ : 이후 형제요소 다같이~ 선택하는 느낌. + : 바로 다음에 위치하는 형제요소만 선택. >> 바로 다음 형제만 필요하면 + / 그 외가 필요하면 ~ 쓰기. p ~ span { color: red; }​ 이건 빨강이 아닙니다. 여기 문단이 있습니다. 그리고 코드도 있습니다. 이제 빨강입..

슬라이드 페이지 (2) 터치형(드래그) - 📃 실습하면서 알게된 점 기록 📌touch 이벤트 changedTouches The TouchEvent.changedTouches property is a TouchList object that contains one Touch object for each touch point which contributed to the event. >> 즉, touchList 객체이므로 첫번째 아이템인 [0]을 가져온것. (터치가 여러군데 되면 여러 값 존재) +) 그 외에도 TouchEvent.targetTouches TouchEvent.touches 등의 프로퍼티가 존재함. ++) 터치 이벤트에는 (event) touchstart, touchmove, touchend, t..

슬라이드 페이지 (1) 버튼형 index.html (style 내장) First Second Third ⬅Left Right➡ app.js // Div 사이즈 동적 조절 const outer = document.querySelector(".outer"); const innerGrp = document.querySelector(".inner-grp"); const inners = document.querySelectorAll(".inner"); let currentIndex = 0; inners.forEach(inner => { inner.style.width = `${outer.clientWidth}px`; console.log(outer.clientWidth); }); innerGrp.style.wid..

Tab Menu - Tab Menu 다양한 css skill을 터득. 📃 실습하면서 알게된 점 기록 background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-background-clip과 color 🔺mdn 문서 참고 (-webkit-text-fill-color 와 color의 차이는?) background-clip - CSS: Cascading Style Sheets | MDN CSS background-clip 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니..