728x90 반응형 전체 글404 리액트 라우터 1 : 셋팅이랑 기본 라우팅 보호되어 있는 글 입니다. 2024. 5. 18. 저번 시간 숙제 해설 (Card 컴포넌트 만들기) 보호되어 있는 글 입니다. 2024. 5. 17. 코드 길어지면 import export 하면 됩니다 보호되어 있는 글 입니다. 2024. 5. 17. 이미지 넣는 법 & public 폴더 이용하기 보호되어 있는 글 입니다. 2024. 5. 17. 새로운 프로젝트 생성 & Bootstrap 사용하기 오늘부터 쇼핑몰 프로젝트를 새로 만들어봅시다.그래서 새로운 리액트 프로젝트 생성부터 하면 되는데 CSS짜기 귀찮으니 react-bootstrap 라이브러리를 설치해서 레이아웃을 좀 쉽게 복사붙여넣기 식으로 만들어봅시다. 새로운 프로젝트 생성은 ▲ 1. 작업폴더에 shift + 우클릭해서 powershell/터미널 열고 2. 터미널에 리액트 프로젝트 생성 명령어 입력합니다.npx create-react-app shop그럼 shop이라는 프로젝트가 하나 하위폴더로 생성됩니다. 3. shop이라는 폴더를 VScode 에디터로 오픈한 뒤에 코드짭시다.4. App.js에 필요없는 html들은 지우고 div 하나만 남겨두고 시작합시다.import logo from "./logo.svg";import "./.. 2024. 5. 16. 만든 리액트 사이트 build & Github Pages로 배포해보기 보호되어 있는 글 입니다. 2024. 5. 15. class를 이용한 옛날 React 문법 보호되어 있는 글 입니다. 2024. 5. 15. [리액트] 암기할 것 = state / props / 컴포넌트 / UI State 만드는 방법 useState('보관할 자료') State 만드는 방법 예시)let [a,b] = useState('남자 코트 추천');a = state 에 보관했던 자료, 변수처럼 사용. {a}b = state 변경 함수. - 함수기 때문에 소괄호랑 같이 사용 . 어레이로 [ 남자코트추천, 함수 ] 이렇게 남음 let [글제목, set글제목] = useState([ "남자코트 추천", "강남 우동맛집", "파이썬 독학", ]);State 변경하는 방법= state 변경함수 사용= state변경함수(새로운state)let [ 따봉, 따봉변경 ] = useState(0);지금 state 에 0이 담긴 상태state를 변경하려면따봉변경(1) 이렇게 1로 변경해줄 수 있다. .. 2024. 5. 15. 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky (youtube.com) fixed예제포지션 fixed 부여 나머지 속성도 부여해줌.왼쪽과 위쪽에서 50px 떨어져 있는 것 확인 가능.stickysticky 적용sticky 는 일반적인 문서 흐름에 따라 배치함.저 위치가 자기 자리인 것.스크롤 되는 상위 요소에 대해서 오프셋을 적용근데 적용 안한 것처럼 보여짐.- 스크롤 이동이 이뤄질 때 그 속성을 발휘. 세부사항 top 수정문서 배치에는 정상적으로 위치해있는 걸 확인 가능스크롤 이동이 되다가 박스가 위에 붙어짐.top:0그리고 스크롤 내려도 고정이 됨.다시 스크롤 내리지말고 올라가게되면원래 문서 흐름대로 그 위치로 다시 되돌아감. 속성을 바꿔봄.bottom : 0스.. 2024. 5. 13. 이전 1 ··· 6 7 8 9 10 11 12 ··· 45 다음 728x90 반응형
