JavaScript20 [React] tailwind 설치하기 Tailwind 설치 1. 리액트가 작동되고 있는 터미널 외에 새로운 터미널을 연다 (cmd) 2. 설치할 리액트 폴더로 이동 3. 터미널에 차례로 입력 npm install -D tailwindcss npx tailwindcss init 4. 생성된 tailwind.config.js 파일에 들어가서 content의 대괄호 안에 "./src/**/*.{js,jsx,ts,tsx}" 입력 5. index.css 안의 내용을 모두 지우고 입력 @tailwind base; @tailwind components; @tailwind utilities; 6. 기존 터미널들 모두 종료(ctrl + c) 후 프로젝트로 이동 및 재시작 npm run start 자세한 내용은 구글에 tailwindcss create-rea.. 2023. 1. 29. [React] 라우터, useEffect # 리액트 라우터란? - 요청(특히 url)에 적합한 작업을 수행하는 것 - 리액트 라우터 모듈 설치 1. vs code에서 새로운 cmd 터미널을 열어 프로젝트로 이동 2. npn install react-router-dom (npm install + 설치할 패키지) 3. App.js 제일 위쪽에 import import { BrowserRouteer as Router, Routes, Route, Link, Outlet, useParams } from "react-router-dom" # 라우터 사용 / useParams - Router 컴포넌트로 전체를 감싸주고 Route를 Routes로 묶어준다 - Link태그를 이용하여 텍스트에 주소를 연결한다 - Route 컴포넌트로 각각의 컴포넌트와 주소를 연.. 2023. 1. 25. [React] 컴포넌트와 props # 컴포넌트 - UI를 설계하는데 쓰이는 독립적이고 재사용 가능한 부품 - 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트가 있다. - 컴포넌트 내에서 다른 컴포넌트를 호출하여 합성한다. function App() { return( Youtube // 컴포넌트 ) } function Content() { return ( 고양이는 액체일까? ) } #props - 컴포넌트에 전달되는 인자 function App() { const irishBeer = {name: 'Guinness', origin: 'Ireland', available: false} return ( 맥주 // 지역변수인 irishBeer를 Beer 컴포넌트에 전달 ) } function Beer(props) { console.log(props.b.. 2023. 1. 20. React 1일 # React 설치 1) Visual Studio Code terminal에서 react 설치를 원하는 위치로 이동 ex) C:\Users\user\Documents\frontendReview에서 내부에 있는 basic폴더로 이동을 원할 경우 >> cd basic ++ 상위 폴더로 이동을 원할 경우 >> cd .. npm install -g create-react-app 먼저 입력 2) npx create-react-app react-basic 입력 terminal 꺼내기 단축키: Ctrl + j npx: npm과 유사한 패키지 매니저 create-react-app: 리액트 프로젝트를 만들 때 필요한 명령어 react-basic: 생성할 프로젝트 폴더 이름 3) 생성한 폴더로 이동 cd react-bas.. 2023. 1. 17. JS 10일차 # Drag and Drop - addEventListener에서 'dragover'(드래그실행), 'drop'(파일드롭) 이벤트 사용 - Array.from() 메서드를 사용하여 fileList를 Array형태로 바꾸어준다. - dragOverHandler 함수와 dropHandler함수 모두 안에 e.preventDefault();를 사용하여 브라우저의 기본설정인 파일열기를 실행하지 않도록 한다. - dataTransfer는 드래그 되고 있거나 드랍되는 데이터를 표시한다. - dataTransfer.files는 해당 데이터를 fileList로 표시한다. 여기에 파일을 드래그 앤 드랍 하세요 # Top button - 특정 위치까지 스크롤하면 Top버튼의 hidden클래스를 지우고, Top버튼을 클릭하.. 2023. 1. 3. JS 9일차 # Contact - formData 클래스를 객체화하여 absolute를 통해 값에 접근한다. - alert 대신에 try~catch, throw를 사용하여 에러를 유도해 알림창을 띄운다 보내기 # Gallery - container 부분의 사진들을 클릭했을 시 main의 src가 해당 사진의 src로 교체된다. # Carousel - container의 display를 inline-flex로 하여 item들을 가로로 나열한다. - wrap에 overflow를 hidden으로 지정하여 첫번째 item 외에 보이지 않게 한다 - item의 shrink를 0으로 하여 축소되지 못하게 하고 wrap에 relative, button과 indicator를 absolute하여 wrap안에 위치시킨다 - 오른쪽 b.. 2023. 1. 3. 이전 1 2 3 4 다음
