자바스크립트의 자료형 Primitive Type(원시타입) let number = 12; 한번에 하나의 값만 가질 수 있음 하나의 고정된 저장 공간 이용 숫자형 let age = 25; // 정수 let tall = 175.9; // 실수 let inf = Infinity; // 무한대 let minus = -infinity; let nan = NaN; // 수학적인 연산에 대한 실패의 결과값 console.log(age + tall) 문자형 let name = “doyoung”; let name2 = ‘이도영; let name3 = 백틱; 백틱(``)을 사용하는 이유 let name3 = doyoung ${name2} // 이렇게 변수의 값을 넣을 수 있음 boolean형(참과 거짓) let isSwi..

1. 객체 지향 프로그래밍(Object-Oriented Programming, OOP) 이란? 객체 지향 프로그래밍이 있기 전 절차 지향 프로그램이라는 것이 있었다. 이는 프로그램을 순차적인 절차로 구성하는 방식인데, 작은 문제를 해결하기 위해 절차를 정의하고, 그 절차들을 조합하여 큰 문제를 해결하는 방식이다. 하지만 프로그램이 커지고 복잡해지면서 코드의 유지보수와 디버깅이 어려워지는 문제가 생겼다. 그리고 데이터와 그 데이터를 조작하는 함수들이 분리되어 있어 코드의 응집성이 떨어졌다. 이를 보완하기에 나온게 객체 지향 프로그래밍이다. 객체지향 프로그래밍은 객체라는 단위로 구성하는 방식이다. 객체는 데이터와 데이터를 조작하는 함수들을 하나의 단위로 묶어서 관리한다. 이를 통해 코드의 응집성을 높이며, ..

ajax 서버 서버에 데이터를 요청 서버 : 부탁하면 진짜로 들어주는 프로그램 ajax란 서버에 get, post 요청할 때 새로고침 없이 데이터를 주고 받을 수 있게 도와주는 간단한 브라우저 기능이다. ajax 사용해도 GET 요청 가능 ajax 이용한 GET요청은 axios.get(’url’) { axios.get('') }}>버튼 ajax 요쳥결과는 ajax.get(’url’).then() 서버가 보낸 실제 핵심 데이터 보려면 console.log(결과.data) { axios.get('') .then((결과) => { console.log(결과.data) }) 실제 결과 catch ajax 요청이 실패할 경우 catch로 이용해서 실패하면 띄울 코드 { axios.get('') .then((결과)..

Lifecycle/ hook 컴포넌트의 Lifecycle 페이지에 장착되기도 한다.(mount) 조작하면 업데이트(update) 필요 없으면 제거(unmount) useEffect 이 라이프 주기를 안다면 중간 간섭이 가능함. 간섭 - 코드실행 간섭할 때 코드를 중간중간에 갈고리 달아서 함 컴포넌트 갈고리 다는법 이거는 클래스형 - 안씀 class Detail extends React.Component { componentDidMount(){ //컴포넌트 mount시 여기 코드 실행 } componentDidUpdate(){ //컴포넌트 update시 여기 코드 실행 } componentWillUnmount(){ //컴포넌트 unmount시 여기 코드 실행 } } 함수형 이거를 주로 씀 function ..

styled-components js파일 안에 다 집어넣고 싶다. import styled from ‘styled-componets’ 장점 1. CSS파일을 안열어도 된다. let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; ` 장점 2. 스타일이 다른 js파일로 오염되지 않음 → 그 페이지에 사용된 것은 그 페이지에서만 사용이 가능 오염 방지하려면 컴포넌트.module.css 라고 지으면 된다. → 컴포넌트의 스타일에 종속되게 할 수 있다. ex) App.module.css 면 App에 종속됨 장점 3. 페이지 로딩 시간 단축 장점4. 기존의 스타일 복사 가능 let YellowBtn = styled.but..

URL 파라미터로 상세페이지 100개 페이지를 여러개 만들고 싶을 땐 :URL 파라미터 써도 된다. /detail/아무거나 유저가 URL 파라미터에 입력한 거 가져오려면 useParams function Detail(props) { let {id} = useParams(); url 파라미터 만들 때 여러개 가능