내가 보려고 쓰는 기록

서버란 유저가 데이터 달라고 요청을 하면 데이터 주는 프로그램 네이버웹툰 서버 : 유저가 웹툰 달라고 하면 웹툰 보내주는 프로그램 유튜브 서버 : 유저가 영상달라고 하면 영상 보내주는 프로그램 → 서버개발 : "누가 A를 요청하면 A를 보내주세요"라고 코드 짜는 것 유저가 그냥 데이터 달라고 하면 서버가 보내주는 것은 아님 서버에 데이터를 요청할때는 정확한 규격에 맞게 요청해야됨 1. 어떤 데이터 인지(URL 형식으로 요청) 2. 어떤 방법으로 요청할지(GET, POST) 데이터를 서버에서 가져올때는 보통 GET 데이터를 서버에 보낼때는 보통 POST 어떤 데이터를 보내고 싶은지 URL만 잘 기재하면 됨 GET / POST 요청하는 법 서버에 GET 요청 하는 가장 쉬운 방법은 브라우저 주소창 주소창에 ..

useEffect 실행조건 공부하기 전에 2초후에 사라지는 박스 만들보기 display:none; 가진 클래스 하나 만들고 2초 후에 클래스 붙여서 사라지게 코드 짜려고 했는데 노노.. 리액트는 state 만들어야함 setTimeout(()=>{ 1초 후 실행할 코드 },1000); 1. UI 상태 저장할 state 만들고 2. 삼항연산자로 true 일때 창 보이게, false 일때 안보이게 3.setTimeout 에 코드 넣기 useEffect 실행조건 넣을 수 있는 곳은 [ ] (*[ ] 안에 변수, state 넣을 수 잇음) [ ] 없을땐 mount(생성) 되거나 update(재렌더링) 될때 마다 코드 실행되는데 [ ] 추가하면 첫 mount 이후 [ ] 안에 있는 state가 update 되어야 ..

컴포넌트의 Lifecycle : 생명주기(컴포넌트도 인생이 있음, 사람처럼 태어나고 죽는다) 1.컴포넌트는 생성될 수 있고(mount) 2.재렌더링 될 수도 있고(update) 3.삭제 될 수도 있음(unmount) 우리는 컴포넌트 인생에 간섭할 수 있음 땡땡 컴포넌트 등장 전에 이것 좀 부탁함 땡땡 컴포넌트 사라지기 전에 이것 좀 부탁함 땡땡 컴포넌트 업뎃되고나서 이것 좀 부탁함 컴포넌트 인생 바뀔때마다 코드 넣어주면되는데 그걸 Lifecycle hook이라고 함 Lifecycle hook 쓰는법 useEffect() 기본적으로 useEffect는 매 렌더링될때마다 실행됨 컴포넌트가 mount, update, unmount 될때마다 useEffect 안의 함수가 실행됨 근데 왜 두번 출력됨? 원래 us..

생활코딩보고 따라했는데 Mui로 쉽게 만들 수 있다 https://mui.com/material-ui/getting-started/templates/ 9+ Free React Templates - Material UI A selection of free react templates to help you get started building your app. The collection contains react dashboard, react admin, and more. mui.com 원하는 템플릿 들어가면 깃허브 소스 코드도 다 있어서 복붙만 하면 완성된다! https://github.com/mui/material-ui/blob/v5.11.8/docs/data/material/getting-started..

같은 목록 페이지 여러개 만들고 싶으면 :URL 파라미터 props로 state 전송하기 귀찮아서 각각 컴포넌트에 state 만들면 과연 편할까? 놉! 나중에 수정사항 생겼을때 여러곳을 수정해야돼서 더 귀찮아짐 :URL 파라미터 문법 사용 path 작명할때 /:URL 파라미터(자유롭게 작명) ex) /cart/:id => /cart/0, /cart/1, /cart/2, /cart/sdfiuewj 등 아무거나 입력해도 컴포넌트로 접속됨 But 페이지는 여러개인데 똑같은 컴포넌트만 보여줌 다른 페이지 보여주려면 각각 다른 컴포넌트를 수십개 만들기 or 하나의 컴포넌트로 각각 다른 내용을 보여주기 똑같은 컴포넌트(페이지) 안나오게 하기 /cart/0 으로 접속하면 0번 상품 /cart/1 으로 접속하면 1번 ..

*️⃣ 페이지 이동 도와주는 useNavigate() 1. useNavigate 변수에 따로 저장 2. onClick에 navigate('/라우터에서 만든 경로') 넣어줌 *️⃣ navigate로 뒤로가기 버튼 만들기 navigate(-1) (*-2 넣으면 두 페이지 뒤로감) *️⃣ 404 페이지 설정(이상한 페이지로 접속했을 때) 의 path에 "*", element에 출력할 코드 입력 *️⃣ Nested Routes란 Route 태그 안에 Route 태그 있는 것 nested routes는 여러 유사한 페이지 만들때 사용多 ✨ Nested Routes 장점 1. route 작성이 약간 간단해짐 2. nested routes 접속시엔 element 2개 보여줄수있음 /about/member로 접속했을때..

리액트는 html 파일을 index.html 하나만 사용함 리액트에서 페이지 나누는 법 1. 컴포넌트 만들어서 상세페이지 내용 채움 2. /detail 으로 접속하면 그 컴포넌트 보여줌 react-router-dom 라이브러리 사용 라우터 기본 셋팅 1️⃣ 터미널에서 react-router-dom 버전6 설치 2️⃣ index.js 가서 태그 로 감싸고 import BrowserRouter 하기 💡 내가 만든 js 파일들은 경로가 ./ 로 시작, 경로가 없는 것들은 대부분 라이브러리 3️⃣ App.js로 가서 Routes, Route, Link -> import 하고 안에 입력 Route의 path는 페이지 경로, element는 경로로 들어갔을때 보여주는 내용 페이지 이동버튼 만들기 로 이동버튼 만들음..

useState( )에 담을 데이터가 너무 길고 복잡할 때 다른 파일에 보관했다가 import 해올 수 있음 다른파일에 있던 자료 가져오려면 import / export 문법 써야함 1) data.js 파일 만들어서 데이터 담아두고 export (내보내기) export default 변수명 2) app.js에서 import(가져오기) import 작명 from '파일경로' 3) import 해온 데이터 state에 담기 * data.js에 저장한 변수가 두개일때 변수 이름들을 중괄호에 넣어서 export import 할때도 중괄호 * 저장한 자료가 array 일때 → 인덱싱 * object 일때 → 점찍고 키값 * array 안에 object 일때 맨처음 시작 기호가 대괄호 이므로 array에서 데이터 ..