React

static 파일 모아놓는 곳코드 짜는 곳 (소스코드 보관함)라이브버리 코드 보관함메인 페이지프로젝트 정보리액트의 장점은 새로고침을 안해도 코드를 변경하면 실시간으로 확인할 수가 있다는 것!!App.js 에 있는 코드들을 index.html로 보내준다. 그래서 inde

let post = "강남 우동 맛집"object 형식으로 작성해주어야 함원래 css코드랑 조금 다르기 때문에 구글링하기

return () 안에는 병렬로 태그 2개 이상 기입 금지자료 잠깐 저장할 땐 변수(let, const)자료 잠깐 저장할 때 state 써도 됨a : state에 보관했던 자료 나옴 >> 남자 코트 추천이 나옴(작성은 { a })b : state 변경 도와주는 함수Q.

ERROR는 에러라 중요WARNING은 무시 가능function 함수() {}태그 내부에 함수 그냥 넣기태그 내부에 arrow function 넣기 ( ) => { }onClick={}안엔 함수이름을 넣어야 함등호로 변경금지 !! 반드시 state 변경함수를 써야한다.

array/object 다룰 때 원본은 보존하는게 좋다. 나중에 필요할 수도 있기 때문에즉, 무조건 복사본을 만들고 복사본을 고치자!!기존state == 신규 state의 경우 변경 안해줌 (자원절약차원) array/object 담은 변수엔 화살표만 저장됨이 때, ar

컴포넌트 만드는 법1\. function 만들고2\. return() 안에 html 담기3\. <함수명></함수명> 쓰기 or <함수명 />다른 function의 바깥에 만들어야함영어는 대문자로 써야함한 return문 안에는 하나의 큰 부모 div만 있

Redux 쓰는 이유1\. props 문법 귀찮을 때 쓴다. 모든 Component가 props없이 state 직접 꺼낼 수 있음. 2\. 상태관리가 용이 (state관리가 용이)Redux에다가 state다 넣어놓기!props 문법 귀찮을 때 쓴다. 모든 Compone

Route를 작성할 때 반드시 Routes로 Route를 감싸주어야 한다...즉, 가장 큰 부분은 BrowserRouter로 감싸고, 그 안에 Routes로 감싸고 그 안에 Route를 써야하는 것이다. 또, component 대신에 element를 써줘야 하고, 예전

Kakao.jsApp.jsindex.html<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=내javascript키"></script>이 부분만 작성하면 된다.github :

Kakao.js\`const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667); const marker = new kakao.maps.Marker({ position: markerPosition});ma

Kakao.js clickable을 true로 설정한다.이부분만 작성하면 클릭하면 내가 원하는 것을 띄울수있다.

onClick={함수} state변경함수(새로운state) 내용 변경하는법 copy본 만들어서 변수에 저장 바꾸고 싶은 부분에 수정할 내용 저장 state변경함수(변경할내용) 1. state 변수 만들기 → 따봉변경 함수를 써야 재랜더링이 잘 됨 2. state 변수 사용 : { state변수 } 3. onClick={ 함수명 } arrow f...

숙제 : 버튼 누르면 첫 글이 ‘여자코트 추천’으로 바뀌는 기능 만들기 array/object 자료형 state 수정하는 방법 🎤 array/object 다룰 때 원본은 보존하는게 좋음 → 원본은 copy본(shallow copy) 만들어서 그걸 수정하자 → 왜냐하면 array/object는 reference data type이므로 array/o...

스프레드 연산자는 JavaScript에서 배열이나 객체의 내용을 펼쳐서 복사하거나 결합하는데 사용되는 문법입니다. 배열에서는 ...를 사용하여 스프레드 연산자를 적용하며, 객체에서도 마찬가지로 ...를 사용하여 스프레드 연산자를 사용할 수 있습니다. 배열에서의 스프레드 연산자 예시: 객체에서의 스프레드 연산자 예시: 스프레드 연산자는 원본 배열 또는 ...

스프레드 연산자를 활용해 원본의 복사본 만들기 내가 구현하고 싶은 기능 구현! state함수(복사본명)

Q. 버튼 누르면 글 하나 추가되는 기능 만들기 → 글제목이라는 state에 추가 html 직접 하나 만들 필요는 없음. state 하나 추가해주세요~ 스위치만 건드리면 UI는 알아서 바뀜 2번(사용할 함수)만 바꾸면 된다!! 1. copy 만들기 → 우리가 건들 글제목state와 글제목변경 state변경함수는 array를 가지고 있기 때문에 2....

→ state에 글 추가해주세요~ (스위치만 건들기) → 원하는 자료 딱 하나만 지우면 됨 → splice(i, 삭제하고싶은 글 개수) → 2번(사용할 함수)만 변경하면 됨!! 1. copy 만들기 2. n번째 array항목 1개 삭제 : splice(i,1); 3. 글 삭제 array자료에서 x번째 데이터 삭제

Q. html 에서 src폴더 이미지 사용할 땐 import부터 해와야하는데, 만약 이미지가 100개가 넘어가면 어떻게 할까? → public 폴더에도 이미지 보관 가능 → 리액트는 사이트발행 전에 html, js, css 파일을 압축함(bundling) → public 폴더에 있던건 압축안됨(온전히 파일이름을 보존함) → 그래서 html에서 pub...

Q. 모달창 안에 첫 번째 글제목을 넣어보자 → 모든 변수는 함수 탈출 불가!! → A함수에서 만든 변수는 B함수에서 사용할 수 없음 → 이럴 때는 props 문법을 사용해서 state를 전송!! 부모 컴포넌트에서 자식 컴포넌트로는 props를 사용해서 state를 전송할 수 있음 props 전송은 부모→자식만 가능!! ![스크린샤...

서버에서 상품 데이터 가져와주세요~ useState import 해오기 변수에 state 저장 src 폴더 안에 data.js 파일 만들기 → data.js에 데이터 object 자료들 모두 저장 다른 파일에 있던 변수(자료) 가져오려면 import/export 문법 사용해야함 (1) 변수가 1개일 때 : export default 변수명 변수...

1. props 작명 2. props 넣어서 컴포넌트 만들기 shoes는 App에 있으니 App→ Card로 전송하면 될듯 3. 컴포넌트 쓸 때마다 살짝 다른 내용 보여주고 싶으면 함수 파라미터 문법 사용하자 (props 잘 쓰십쇼) → shoes라는 state변수를 각각 shoes[0]. shoes[1], shoes[2] 로 저장을 해놨으므로 위...

/detail로 접속하면 상세페이지 보여주고 /cart로 접속하면 장바구니페이지 보여주고 페이지 나누는 법(리액트 미사용) html 파일 만들어서 상세 페이지 내용 채움 누가 /detail로 접속하면 html 파일 보내줌 페이지 나누는 법(리액트 사용) - single page html(index.html만 사용 컴포넌트 만들어서 상세페이지 내용 ...

🎤 페이지 이동 도와주는 useNavigate() → Link 태그 말고 useNavigate() 함수 사용하자~ 1. App.js에 import 해오기 2. 변수에 저장 페이지 이동하는 Link 태그를 사용하면 그냥 a태그로 오는거라서 안예쁨 → 그래서 react-bootstrap에서 가져온걸로 useNavigate를 줘보자 페이지 이동 도...

🎤 /path 안에 또 다른 path를 만들고 싶을 경우에 사용 Route안에 Route를 만들자 → /about/member 접속시 & 둘 다 보임 → Route 안에 Route가 오도록 할 때, path에 / 넣으면 안됨!!! Nested Routes 사용방법 부모 컴포넌트를 작성( 이 때, 자식 컴포넌트가 나올 곳에 **을 꼭 작성!...

페이지 여러개 만들고 싶으면 :URL파라미터 사용 🎤 /detail/아무거나 라는뜻 → /detail/아무거나에 접속하면 이 페이지 보여주세요~ ex) /detail/0으로 접속하면 0번상품 /detail/1로 접속하면 1번상품 나오도록 Q. 페이지는 여러개인데 보이는 내용이 똑같아요 각각 다른 컴포넌트를 100만개 만들든가 (하지마!) 하나...

유저가 URL 파라미터에 입력한거 가져오려면 useParams() → id라고 작명한 URL파라미터에서 유저가 :id자리에 적은걸 가져와줌

💡 styled-components 쓰면 JS 파일에서 CSS 전부 해결가능 1. styled component 설치 2. import 해오기 3. Component 생성 💡 function 바깥에 컴포넌트 생성 4. Component 사용 Styled-component 장점 장점1. CSS 파일 안열어도 된다 장점2. 스타일이 다른 j...

🎤 mount, update시 코드 실행해주는 useEffect() 🎤 처음실행시, 업데이트시 코드 실행해주는 useEffect() 1. useEffect import 해오기 2. useState 사용 3. useEffect 사용 (아래에서 사용한 console.log 예시는 그냥 독립적인 거로 사용됨) 4. 버튼을 누르면 숫자가 하나씩 증...

Q. 그래서 타이머제거 어떻게함? ⇒ clearTimeout(a) 사용

서버에 데이터를 요청할건데… 💡 서버 : 데이터를 요청하면 데이터를 보내주는 프로그램 ex. Youtube 서버 : 동영상 요청하면 진짜 보내주는 프로그램 네이버웹툰 서버 : 웹툰 요청하면 진짜 보내주는 프로그램 서버 개발시 짜는 코드 : 누가 이 URL로 GET/POST 요청하면 data 보내주세용 방법(GET : 서버에서 데이터 가져올 때/P...

애니메이션 동작 전 className 만들기 애니메이션 동작 후 className 만들기 className에 transition 속성 추가 원할 때 2번 className 탈부착 1. css파일에서 부착하면 애니메이션 나오는 className 하나 만든다. (1) 애니메이션 동작 전 className만들기 → fade-in 되는 애니메이션(투명도 0 ...

재고 state 생성 위의 state를 Detail(자식), TabContent(손자)에서 쓰려면(props말고) Context API사용 🎤 Context API를 쓰면 자식은 props없이 state 사용 가능 Context API 셋팅 1 . createContext import 해오기 2. 변수에 createContext() 저장 -> ...