티스토리

on your mark
검색하기

블로그 홈

on your mark

devolive.tistory.com/m

dev-olive 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • 리액트 시작하기4 - 리액트 기초 styled-components 컴포넌트가 많은 경우 css 스타일링 하기 어려운 점이 있다. 컴포넌트 제작 시 스타일을 바로 입혀서 컴포넌트를 만들 수 있는데, (styled-components)를 이용하면 된다. import React, { useState } from 'react'; import styled from 'styled-components'; //padding이 20px인 div를 만들자 let Box = styled.div` padding : 20px; `; function Detail(){ return ( ) } props로 스타일링도 가능하다. let title = styled.h4` font-size: 25px; color: ${props => props.colors} `; ..... 공감수 0 댓글수 0 2022. 5. 4.
  • 리액트 시작하기3 - 리액트 기초 리액트 기초1 react bootstrap에서 react전용 bootstrap 사용가능하다. 그 외 다른 css프레임워크도 많으니 필요하면 찾아보는 걸 추천한다. Import & export export default 문법 (data.js) var name = 'Kim'; var name2 = 'Park'; export default name; //여러개의 변수를 내보내고 싶다면 //export {name, name2}; App.js와 별개로 data.js 파일을 생성한다. 이 파일에서 중요한 변수를 export하고 싶을 땐 export default 변수명 으로 사용 가능하다. 변수명, 함수명, 자료형 전부 배출 가능하다. 파일마다 export default 라는 키워드는 하나만 사용가능하다. expo.. 공감수 0 댓글수 0 2022. 5. 4.
  • 리액트 시작하기2 Component component 들어가기 앞서 return 안에는 2개의 html 태그를 나란히 적을 수 없다. 하나의로 감싸거나 로 감싸자 function App(){ return( ) }Component 만들기 긴 HTML은 함수화 할 수 있다. function App(){ return( ) } function Comp(){ return( ... ) }component를 만들 때 유의할 점 component안에 component를 만들지 않는다. (App도 하나의 컴포넌트) 로 사용해도 되고 로 사용해도 됨 arrow function 사용 가능 function Comp(){ return (...) } let Comp = () => { return (...) } Component는 언제 쓸까 사이트.. 공감수 0 댓글수 0 2022. 5. 4.
  • 리액트 시작하기1 리액트 입문 인강들으면서 필요한 부분 및 복습하고자 하는 부분만 작성한 것이기에 전체 내용을 알고 싶으면 인강 수강 권장 최대한 쉬운 표현을 사용하려고 한다. 리액트 입문 독학하면서 느낀 점 인강 수강하면 훨씬 이해가 빠르다. 리액트 가이드문서 읽으면 좋긴한데, 구버전이라 초보는 참고하기 어려울 수 있다. 인강 수강하고-> To do app 등 기초 앱 제작을 따라하는 것도 좋다. 개인 프로젝트 아무거나 하면서 체득하자 기타 참고 자료는 업데이트 할 예정 개발환경 setting download plz nodejs vsc 시작하기 작업용 폴더 생성 후 해당 폴더에 npx create-react-app [프로젝트명] 으로 프로젝트 생성해준다. vsc 에서 file-open folder 후 [프로젝트명] 폴더.. 공감수 0 댓글수 0 2022. 4. 29.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.