일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 티스토리챌린지
- H-index
- userecoilvalue
- Recoil
- Typescript
- useoutletcontext
- 프로그래머스
- Outlet
- 오블완
- 138476
- React
- 노마드코더
- usesetrecoilstate
- Helmet
- 42747
- programmers
- 귤 고르기
- Today
- Total
목록분류 전체보기 (34)
오늘도 코딩하나
parseInt(), Number() 두 함수 모두 숫자 변환시 많이 사용했지만정확한 차이점에 대해 궁금해져 찾아보았다. parseInt()문자열로 된 부분에서 숫자(정수)만 뽑아서 변환문자열이 숫자로 시작하는 경우 숫자가 끝날 때까지만 형변환parseInt('2020년도'); // 2020parseInt('2020년도 1번째'); // 2020parseInt('제1회'); // NaNparseInt('10.12345'); // 10 Number()문자열 전체가 숫자일때 소수점까지 숫자타입 변환문자열이 숫자가 아닌 경우 NaN 반환Number('2020년도'); // NaNNumber('제1회'); // NaNNumber(10.12345'); // 10.12345 ### 참고한 블로그https://ve..
props 전송 없이 state 공유하기!App에 있던 state를 TabContent 컴포넌트에서 사용하고 싶어지면,App → Detail → TabContentprops 전송을 2번 해야함 ⇒ Context API나 Redux같은 외부 라이브러리 사용하면 쉽게 사용가능~! 1. Context API(1) Context API 사용법- App.jsexport let Context1 = React.createContext();function App() { let [inven, setInven] = useState([10,11,12]); return ( )} - Context1로 원하는 곳을 감싸고 공유를 원하는 state를 value 안..

1. 서버란?- 유저가 데이터를 요청하면 데이터를 보내주는 간단한 프로그램** 서버에 데이터 요청시 정확한 규격 - 어떤 데이터인지(URL형식으로) - 어떤 방법으로 요청할지(GET / POST) * 보통 데이터를 가져올 때는 GET, 서버로 보낼 때는 POST -> 하지만 GET, POST의 단점은 브라우저가 새로고침됨=> AJAX 2. AJAX란?- 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 간단한 브러우저 기능 ** AJAX로 GET/POST 요청하는 방법 ① XMLHttpRequest라는 옛날 문법 쓰기 ② fetch() 라는 최신 문법 쓰기 ③ axios같은 외부 라이브러리 쓰기 (1) axios- axios 설치npm install ..

1. 컴포넌트 Lifecycle- Detail.jsfunction Detail(props) { let {id} = useParams(); let idx = props.shoes.find((x) => x.id == id); return ( {idx.title} {idx.content} {idx.price}원 주문하기 )}=> D..
1. 리액트 라우터?리액트 라우터 = 라우팅 관련 라이브러리 (페이지 이동)-> 신규 페이지를 불러오지 않는 SPA에서 각각의 url에 따라 선택된 페이지를 렌더링 해주는 라이브러리 ** 리액트는 CSR을 통해 하나의 페이지에서 유저의 요청에 따라 컴포넌트들을 재구성하여 화면을 렌더링하는 SPA 방식 CSR, SPA에 대한 자세한 설명은 여기를 참고하자https://coding-hana.tistory.com/15 CSR, SSR, SSG 정리https://youtu.be/iZ9csAfU5Os?si=dWfuGRQuhMFz9jUQ드림코딩 유튜브 영상을 본 후 정리한 내용이다.1990년 중반까지는 Static Sites로, 클릭할 때마다 html을 서버에서 불러와서 페이지 전체가 update 1996년 도입 ..

https://youtu.be/iZ9csAfU5Os?si=dWfuGRQuhMFz9jUQ드림코딩 유튜브 영상을 본 후 정리한 내용이다.1990년 중반까지는 Static Sites로, 클릭할 때마다 html을 서버에서 불러와서 페이지 전체가 update 1996년 도입 - 문서 내에서 또 다른 문서를 담을 수 있는 태그 - 부분적 update 가능 1998년 - XMLHttpRequest API(fetch API의 원조) - HTML 문서 전체가 아니라 JSON과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있음. - Data는 JS를 이용해서 동적으로 HTML 요소 생성 => 2005년 ..

1. 데이터 가져오기- data.jslet data = [ { id : 0, title : "나이키", content : "우먼스 나이키 인터랙트 런", img : "./img/shoes1.png", price : 99000 }, { id : 1, title : "아디다스", content : "그라다스", img : "./img/shoes2.png", price : 79000 }, { id : 2, title : "반스", content : "올드 스쿨 - 블랙/블랙 (CANVAS)", img : "./img/shoes3.png", pr..