합니다, 개발공부📝 합니다, 개발공부📝

리액트 학습하는 가장좋은 방법이라는 클론코딩 강의를 보면서 따라하기 시작! 강의는 유튜브를 참고했다. 트위터, 틱톡, 페이스북, 인스타그램등 많이 접해본 앱을 바탕으로 강의를 진행해서 컨텐츠가 매우 다양하고 좋다! https://www.youtube.com/watch?v=B-kxUMHBxNo&t=1424s npm create-react-app fb-clone을 하고, npm start 해서 코딩을 시작하면 되는데, 불필요한 파일들은 강의에 따라서 지우면 된다. 이 클론 코딩은 firebase(구글)을 이용하니 강의에 따라 만들면 되고, firebase구성을 가져다가 복사 붙이기 하면 된다. http://firebase.google.com Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈..

홈페이지의 맨 아랫부분에 적용될 footer를 만든다. 1. Footer.js components폴더에 파일 생성한다. import React from 'react' import { Link } from 'react-router-dom'; import {Button} from './Button'; import './Footer.css'; function Footer() { return ( Join the Adventure newsletter to receive our best vacation deals You can unsubscribe at any time. Subscribe About Us How it works Testimonials Careers Investors Terms of Service C..

홈페이지에서 products, services, signup 파트를 누르면 나올 홈페이지를 구현한다. 1. Products.js, Services.js, SignUp.js components폴더의 pages폴더에 각각의 파일을 만들고 구현해 놓는다 . import React from 'react'; import '../../App.css'; export default function Products() { return PRODUCTS; } import React from 'react' import '../../App.css'; export default function Services() { return SERVICES; } import React from 'react' import '../../App...

홈페이지의 글목록을 담당하는 영역을 만든다. 1. Carditem.js components폴더 안에 만든다. 여기서 prop의 구현은 card.js에서 할 것이다. import React from 'react'; import { Link } from 'react-router-dom'; function CardItem(props) { return ( {props.text} ); } export default CardItem; 2. Card.js 여기서 ul로 묶은 파트별로 갯수가 다르다는 것을 유의! 몇개씩 한 줄에 나타낼 것인지를 구분한 것이다. 여기서의 path, text, label에 따라서 CardItem의 구성에 따라서 나타나는 파트가 달라진다. import React from 'react' im..

1. Home.js components 안에 pages 폴더를 만들고 home.js 파일을 만든다. import React from 'react' import '../../App.css'; import HeroSection from '../HeroSection'; import Cards from'../Cards'; import Footer from '../Footer'; function Home() { return ( ) } export default Home; 2. HeroSection.js components 폴더 안에 HeroSection.js파일을 만든다. 홈페이지 안에 버튼과 제일 먼저 보이는 문구를 적용한다. import React from 'react' import '../App.css'; ..

리액트 프로젝트는 처음이라 😅 따라하기 시작! https://www.youtube.com/watch?v=I2UBjN5ER4s&t=411s 아이콘이나 다운받을 자료들은 영상에 자세히 나와있다. fontAwesome CDN은 여기서서 바로 복사해서 적용할 수 있다! https://fontawesome.com/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 1.index.html 구글 폰트와 fonta..