민트코딩90 반복문은 map을! (중괄호 { } 안 for 역시 인식하지 못해) 1. .map 사용법 데이터.map(function(){ return ( ) }) 2. 활용 예시 import React, { useState } from 'react'; import './App.scss'; function App() { let [menuTit, menuTitFunc] = useState(['짜장면', '짬뽕', '울면']); return ( { menuTit.map( ( menu )=>{ return ( { menu } ) }) } ); } export default App; 3. 그래도 for문을 사용하고 싶다면 별도로 함수 선언하여 불어올 것. import React, { useState } from 'react'; import './App.scss'; function App() .. 2021. 10. 29. Toggle: 중괄호{ } 안 if는 안되니, 삼항연산자를 이용하자. Q. 버튼을 클릭시, 버튼 아래에 컴포넌트 Diary가 toggle이 되도록 바꾸어 보자. import React from 'react'; import './App.scss'; function App() { return ( show diary // 다이어리 위치 ); } function Diary(){ return( 제목 날짜 상세내용 ) } export default App; A. 1. 먼저 Diary의 상태를 변수로 담는다. import React, { useState } from 'react'; let [diaryState, diaryStateFunc] = useState(false); 2. 삼항연산자를 이용하여, diary 상태에 따라 삽입여부를 결정하게 한다. { diaryStateFunc( !.. 2021. 10. 29. Component 2, 파일 분리 (모듈화) Component 1, function 컴포넌트() Q. 아래 코드 중 .diary 영역을 function()을 이용하여, 컴포넌트화 해보자. import './App.scss'; function App() { let title = 'Blog'; function thisYear(){ let now = new Date(); return now.getFullYear();.. fresh-mint.tistory.com 위 글에서 컴포넌트 를 새파일로 분리 해보자. 1. 파일 생성, 컴포넌트.js 일반적으로 파일명은 컴포넌트명과 동일하게 주어지고, 역시 동일하게 첫문자는 대문자로 작성한다(Diary.js). 2. function Diary(){} 를 삽입하고 리액트 기본 설정 값을 추가 import React f.. 2021. 10. 29. W3C가 어려우면 게임으로 이해하면 되지, CSS 게임! 1. FLEX Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. GRID Grid Garden A game for learning CSS grid layout cssgridgarden.com 3. CSS selector CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 2021. 10. 29. Component 1, function 컴포넌트() Q. 아래 코드 중 .diary 영역을 function()을 이용하여, 컴포넌트화 해보자. import './App.scss'; function App() { let title = 'Blog'; function thisYear(){ let now = new Date(); return now.getFullYear(); } return ( { title } { thisYear() } 제목 날짜 상세내용 ); } export default App; A. 컴포넌트 function의 첫 문자는 대문자! 1. 먼저 function()을 생성하여, 처럼 함수에 컴포넌트를 담는다. 이전글에서 설명했듯이, return() 바로 안에는 한 개 이상의 태그가 들어갈 수 없다. 전체를 감싸는 태그, 하나만 삽입되어야 한다(역.. 2021. 10. 29. + MEMO: 배열 state를 변경할 때, 변경함수 기본 활용방법! function 함수명() { let 새로운변수명 = [...기존변수명]; 새로운변수명[0] = '교체될 값'; 변경함수( 새로운변수명 ); } [v2021] state를 이용한 데이터 바인딩 새로고침 없이 데이터를 변동하고 싶을 경우, 해당 데이터는 useState( )를 이용하여 바인딩되어야 한다. 그 방법은 다음과 같다. import React, { useState } from 'react'; import './App.css'; function App().. fresh-mint.tistory.com 2021. 10. 29. state를 이용한 데이터 바인딩 새로고침 없이 데이터를 변동하고 싶을 경우, 해당 데이터는 useState( )를 이용하여 바인딩되어야 한다. 그 방법은 다음과 같다. import React, { useState } from 'react'; import './App.css'; function App() { let [title, setTitle] = useState('state 바인딩이란?'); let [liked, setLiked] = useState(0); return ( { title } { setLiked( liked + 1 ) } }>♥ { liked } ); } export default App; 1. useState( )를 사용할 것임을 선언 import React from 'react'; // before import Re.. 2021. 10. 29. JSX로 html 작성하기 import logo from './logo.svg'; function App() { let title = 'Blog'; function thisYear(){ let now = new Date(); return now.getFullYear(); } return ( { title } { thisYear() } ); } export default App; 1. class → className javascript 기반에서 작업하는 것이기 때문에, javascript에 선언되어있는 class는 사용할 수 없다. 이에 react에서는 class가 아닌 className으로 클래스명을 지정해야 한다. 2. style은 camelClass 프로퍼티 명명 규칙을 사용 태그 안에 직접 style을 지정할 땐 이중 중괄호.. 2021. 10. 29. App.js가 메인 페이지 funtion App(){retrun ( @@ )}, @@ 안에 들어있는 html이 main페이지의 html이 된다. 그 이유는 index.js가 App.js를 읽고 public > index.html에 넣어주기 때문. 2021. 10. 29. node-sass를 이용해, scss로 변경 1. node-sass 설치 아래 두 코드 중 원하는 방법으로 설치 ~ yarn add node-sass npm install -s node-sass 2. src에 있는 '.css' 파일을 '.scss'로 변경 3. import '파일명.css'를 '.scss'로 변경 4. 끝 간혹 위와 같은 오류 메시지가 뜨는데, 설치된 Node Sass 6.0.1가 호환되지 않는다는 의미이다. 해결방법은, node-sass v6 미만의 버전으로 재설치 하면 된다. yarn remove node-sass yarn add node-sass@5.0.0 npm uninstall node-sass npm install node-sass@5.0.0 2021. 10. 29. [slide] slick 아이템에 여백 추가하는 방법 How add spaces between Slick item .slick-slide { margin: 0 30px; // space(여백)/2 } .slick-list { margin: 0 -30px; // space(여백)/-2 } Parameter for space between slides · Issue #582 · kenwheeler/slick I noticed that all your demos are applying no space between the slides but rather you are creating the appearance of space by using heading tags as the content in each slide, which have equal margi... github.com [slide] slick 사용법(+반응형.. 2021. 10. 23. [e.g.] Drag and drop element in a list (+placeholder, clone item) See the Pen Drag and drop element in a list (+placeholder, clone) by plancktime_ (@plancktime_) on CodePen. 1. structure A B C D E 2. css .opacity { /* */ opacity: 0.5; } .drag { /* */ position: fixed; box-shadow: 0 8px 12px rgba(0, 0, 0, 0.16); } .placeholder { /* */ margin-bottom: 10px; height: 4px; margin-top: -14px; /* default space + placeholder height */ transform: translateY(7px); /* plac.. 2021. 10. 23. [PC] Gradient Doughnut 2 / Loading See the Pen Untitled by plancktime_ (@plancktime_) on CodePen. .loading { display: flex; height: 100px; width: 100px; animation: spin 1s infinite linear; position: relative; } .start-point { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; border-radius: 50%; background-color: #00dbde; z-index: 1; } .doughnut { width: 50%; height: 100%; box-sizing: b.. 2021. 9. 25. [PC] Gradient Doughnut 1 See the Pen Gradient Doughnut 1 by plancktime_ (@plancktime_) on CodePen. .doughnut { display: inline-block; width: 100px; height: 100px; border-radius: 50%; padding: 20px; // doughnut width background:linear-gradient(45deg,#00dbde,#fc00ff); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; } 2021. 9. 24. [PC/MO] Pie Chart See the Pen Untitled by plancktime_ (@plancktime_) on CodePen. $pieBg: #ddd; $piePoint: #fc595d; .pie-chart { position: relative; width: 80px; height: 80px; border-radius: 50%; background: $pieBg; } .pie { position: absolute; top: 0; left: 0; width: 100%; height: 100%; &.less { clip: rect(0px, 80px, 80px, 40px); } &.more { clip: rect(0, 80px, 80px, 0); } } .pie-piece { position: absolute; top: 0.. 2021. 9. 24. 이전 1 2 3 4 5 6 다음
