![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/NZRFV/btrYQZu68tJ/1cIJ39CSy8FBT1PK6UZE8K/img.png)
같은 목록 페이지 여러개 만들고 싶으면 :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번 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/n4fSO/btrYMPs4TEW/kr3PZbnkZMVRXg0NrKVlEk/img.png)
*️⃣ 페이지 이동 도와주는 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로 접속했을때..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/bjMNkm/btrYjyRLN7K/BN3A0wUXIDL9t4JN2YCru1/img.png)
리액트는 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는 경로로 들어갔을때 보여주는 내용 페이지 이동버튼 만들기 로 이동버튼 만들음..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cuNp5y/btrXVqIiNCe/IPlaCGbFFHO6k4kNKOZCKk/img.jpg)
작년 2월 이후로 거의 1년 만에 부산 갔다 취업도 잘 안되고 마음이 착잡해서 잘 놀 수 있을까 걱정했는데... 응 잘 놀음 설렌얼굴? 부산갈때마다 무조건 첫끼로 먹었던 해운대밀면이 문을 닫았다 ㅈ ㅣㄴ짜 절망적이였음 동생이 급 돼지국밥집 찾아서 오복돼지국밥집으로 갔는데 밀면 생각 안날 정도로 진짜 맛있었다 깍두기도 맛있고 소면도 무한리필(중요)이고 고기도 부드럽고 냄새도 안나고 국물도 맛있고... 우리랑 상관없지만 사장님이 원어민 급으로 영어를 잘 하셔서 신기했다 다음에 또 갈거심 국밥 먹고 바다 한 컷 건져야 된다고 계속 찍어달라길래 다 비슷한디 입꼬리 올려보아영 먼산 보아영 살짝 웃어보아영 머리카락 먹어보아영 이제 내 차례 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ왜저래 웃는데 무서웡 네 우..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/cb2yPF/btrXOU2CkxB/zb2c4iVKYsGkgK5z4DhND1/img.jpg)
작년 말 ~ 올해 초 앨범 구경이다 이번 앨범은 또 얼마나 재미있을까^^?? 한번 쓸 때마다 나름 오래 걸려서 미루고 미루고 또 미루고 미ㄹ 자주 가는 카페 옆 분식집인데 초딩핫플이라 기분이 너무 좋았음 타코오약히이 BAAM 오랜만에 엄지랑 은지 만나서 맛있는 거(이거 진짜 맛있음) 조지고(이것도 ㅇㅇ) 조지고(다 맛있음) 또 조졌는데 갑자기 혼자만 장염 걸려서 며칠을 고생했다 셋 중에 나만 ^^+ 컴터 안 켜졌는데 혼자 고쳐 버림 올 집에서 집중안될때마다 카페갔다 출발하기 전에 더 맛있는 음료 있는 카페를 너무 심각하게 고민해서 킹받음 식사..? 판교로 면접 보러 간 김에 현진이한테 맛집 물어봤다 취업해서 고등어소바 맨날맨날 먹고 싶음^^♡ 두입컷 새해맞이로 3년 만에 목욕탕갔다 목욕 끝나고 뭐 먹을 ..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/rGyFm/btrXM3SWKOw/TelfYpz9lQRkYNkW2DcLy1/img.png)
sass 셋팅하기 1. 비주얼 스튜디오 코드에서 5버전 이상으로 설치 2. sass 파일 만들기 파일명.scss 💡 웹브라우저는 .css만 읽을 수 있다. scss → css 변환해야 사용 가능 3. 비주얼스튜디오 맨 밑에 Watch Sass 누르면 css로 변환되고 두가지 파일 생성됨 💡 .map파일의 용도 : 크롬에서 작업관리자 창에 css가 아니라 scss 파일로 분석해준다 변수 만들기 어려운 단어 기억해야할 땐 변수문법 사용 (변수는 데이터를 잠깐 보관하는 통) $변수명 : 저장해서 쓸 코드; ex) 자주쓰는 색상코드가 너무 어려워서 기언 안날때 $변수명 : 컬러코드; $변수이름 으로 불러와서 사용 가능하다. 사칙연산 가능 💡 사칙연산할 때 +, - 는 같은 단위끼리 * , / 는 정수만