웹
사용자가 브라우저에서 요청하면 서버가 응답해 콘텐츠들을 보내주는 형식이다
인터넷도 항상 연결되어 있어야 하고 절대 꺼지지 않는 컴퓨터가 필요하다 그런것을 담당하는 서비스가 있다 (웹 호스팅 서비스 AWS ec2/S3, cafe24 호스팅센터 등)
IP
인테넷으로 통신하는 모든 장비에 부여된 고유한 값(IPv4 의 방식으로 보여진다)
서로 ip 주소를 가지고 찾는다
Domain
IP 주소만으로 찾기는 힘들다 그래서 나온게 domain(문자로 된 주소)
ex) www.wecode.com
DNS (Domain Name System)
브라우저에서 전달받은 도메인을 DNS에서 IP로 바뀌서 보내주고 브라우저는 그 IP로 호스트서버와 연결한다
배포
개발하던 것을 인터넷에 공개하는 것
javascript
Spread
구성은 ...이며 spread 는 배열이나 문자열을 키-값의 쌍으로 사용할 수 있게 한다 배열을 각각의 개별적인 요소로 나눈다 객체 안에서도 사용할 수 있다
const arr = ['a', 'b', 'c'];
const arrB =['d', 'e', 'f'];
console.log(...arr); // 'a', 'b', 'c'
console.log([...arr, ...arrB]); // ['a', 'b', 'c', 'd', 'e', 'f'];
//
const info1 ={
name: 'jake'
};
const info2 ={
...info1,
age: 25
};
const info3 ={
...info2,
hobby: 'basketball'
};
console.log([info1, info2, info3]);
// 결과
[
{ name: 'jake' },
{ name: 'jake', age: 25 },
{ name: 'jake', age: 25, hobby: 'basketball' }
]Rest
spread 의 반대의 기능을 한다 rest는 나머지 argument를 배열로 만들어준다
객체에서의 rest
const info3 ={
name: 'jake',
age: 25,
hobby: 'basketball'
};
const { age, ...rest } = info3; // info3 에서 age 를 제외한 나머지를 배열로 묶음
console.log(rest); //{ name: 'jake', hobby: 'basketball' }추출한 값의 이름이 꼭 rest 일 필요는 없다
const { age, ...details } = info3;
console.log(details); // { name: 'jake', hobby: 'basketball' }
// hobby 만 가진 객체를 만들고 싶다면
const {name, ...part} = details;
console.log(part); // { hobby: 'basketball' }배열에서의 rest
const aa = [1,2,3,4,5];
const [y, ...rest] = aa;
console.log(y); // 1
console.log(rest); // [ 2, 3, 4, 5 ]함수에서의 rest
const info = (a, ...infos) => {
console.log(infos);
}
info(1,2,3,4,5,6); // [ 2, 3, 4, 5, 6 ]class
React
컴포넌트는 class 나 함수로 만들 수 있는데 상황에 따라 사용하면 된다
// 함수로 만든 컴포넌트
function App() {
return (
<div>
<h1>Hello</h1>
<Potato />
</div>
);
}class로 컴포넌트를 만드려면 React.Component 를 extend 해야 한다
함수와는 다르게 render() 가 들어가고 return 도 해주어야한다
// class 로 만든 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}컴포넌트는 태그처럼 사용한다
<Welcome />