react 썸네일형 리스트형 [React] styled-components 안녕하세요 오늘은 React에서 css를 사용하는 방법 중 하나인 styled-components에 대해 포스팅하겠습니다. styled-components 는 app.css에서 작성하는 것도 아니고 , jsx 파일내에 태그들에 직접 작성하는 것도 아닙니다. 기본 html 구조에서 태그에서 작성했던 태그처럼 페이지 상단에서 작성하는 방식입니다. 1) 설치 터미널을 열고 npm install styled-components 를 실행합니다. 2) styled-components import import styled from 'styled-components'; 상단에 import 해줍니다 3) 변수를 생성하여 style 작성하여 담기 let Btn = styled.button` background : ${ p.. 더보기 [React] 파일import , export 코드를 작성하다 보면 코드가 길어져서 가독성이 떨어지는 경우가 발생합니다. 이럴 경우 다른 파일에 생성해둔 코드를 import 하여 그 파일의 변수,함수 등등을 사용합니다. 재직중인 회사에서 사용하는 jsp에서는 이런식으로 태그를 사용했고 , 자바스크립트도 마찬가지로 태그()를 이용하여 import 했습니다. React에서 사용하는 import,export와 개념자체는 비슷하지만 , 하나 다른 점은 현재 페이지 기준으로 , 불러올 페이지에서 export를 해줘야 한다는 점입니다. data1이라는 변수를 App.js에서 사용하는 방법입니다. ex) data.js를 App.js 로 import하기 export는 하단에 작성 let data1 = 10; export default data1; App.js 상단.. 더보기 [React] map함수, props 안녕하세요 저번주부터 공부중이던 React를 복습해보겠습니다. 저는 코딩애플님의 강의로 학습중입니다. 간결한 강의와 어렵지 않게 설명해주시는듯한 느낌이 있어서 초보자들이 배우기에 좋다고 생각해요 ! 유튜브 무료강의 몇강 보다가 유료로 결제하여 공부중입니다 지난 포스팅때는 state를 이용하여 component를 생성하여 모달창을 하나 만들었는데요 이번에는 각 state들을 보여주는 부분을 map 함수를 이용하여 state가 추가될 때 마다 자동으로 state 수를 체크하여 생성되도록 하였습니다 ! App.js(React의 메인개념)에서 진행 let [list,setList] = useState(['남자 코트 추천','정보처리기사 공부방법','군포 고기 맛집']); let [good,setGood] = u.. 더보기 [Bootstrap] 간단한 사용 방법(React) 오늘은 부트스트랩에 대하여 포스팅 해보겠습니다 부트스트랩은 css 및 html(버튼,메뉴,레이아웃) 등을 디자인적으로 생성할 수 있도록 보조해주는 라이브러리 입니다. 1) React-Bootstrap 설치 Bootstrap이 원조 , React에 맞게 변형한 라이브러리입니다. https://react-bootstrap.github.io/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app [Get Started] 버튼을 클릭하고 , Installation 항목에서 npm install react-bootstrap bootstrap 명령어를 VSCo.. 더보기 [React] 공부시작 안녕하세요 ! 저는 이번주부터 React 라는 자바스크립트 라이브러리를 공부중에 있습니다. 목적은 이직준비입니다. 현재는 그룹웨어 엔지니어로써 근무중이지만 , 추후 이직시에는 프론트엔드 개발자(기회가 된다면 풀스택 개발자)로 일하고 싶어서 근무 기간동안 충분히 내실을 갖추려 합니다.(소개글에 이직준비는 내년 상반기로 미뤄질 듯 합니다. 대표님께서 부서를 계속 이끄실 계획이셔서요.) 우선 근본적으로 백엔드 , 프론트엔드 중 하나를 먼저 골라야 한다는 생각이 앞섰는데요. 사내에서 프로젝트를 진행해가며 jQuery , Ajax 를 쓰면서 프론트엔드에 대한 매력을 많이 느끼고 디버깅도 백엔드에 비해 직관적이고 빠르다는점에서 프론트엔드쪽으로 맘이 더 기운 것 같습니다. 성격이 좀 급한 성격이라 바로 컨펌되는 시스.. 더보기 이전 1 다음
