Sumin's Blog

3.2 Component Life Cycle life cycle method 기본적으로 react가 component를 생성하고 없애는 것 mounting : component가 screen에 표시되는 것 constructor() 호출 render() 호출 componentDidMount() : component가 처음 render됐다는 것을 알려줌 (render() 이후 적용) updating : 사용자가 만든 함수에 의해 update (setState를 호출할떄마다 발생) render() 호출 componentDidUpdate () 호출 (setState 호출 -> component호출 -> renfer 호출 -> 업데이트 완료되면 componentDidUpdate 호출) unmounting : co..

3.1 All you need to know about State 목표: 매번 state의 상태를 변경할 때, react가 render function을 호출해서 바꿔주길 원함 this.setState() state는 object setState는 새로운 state를 받음 setState를 호출할 시, react는 state를 refresh하고 render function을 호출 setState를 사용하지 않으면 새 state와 함께 render function이 호출되지 않음 this.setState({count: this.state.count+1}); 이렇게 할 수도 있지만 state에 의존하는 것은 좋지 않음 this.setState(current=>({count: current.count+1}))..

2.4 Protection with PropTypes 목표 : father comonent로부터 전달 받은 props가 우리가 예상한 props인지 점검할 필요가 있음 각각의 요소에 추가할 것은 rating (number type) 점점 많은 props를 food object로 전달하고 싶기 때문 (component와 Food의 인자에도 추가시켜줌) prop-types : 내가 전달받은 props가 원하는 props인지 확인 import PropTypes from "prop-types"; 코드 추가해줘야함 Food.propTypes={ //이름은 무조건 propTypes 여야함 name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired..

2.3 map Recap map은 각각 item별로 function을 호출 function renderFood(dish){ return ; } function App(){ return ( {foodILike.map(renderFood)} ); } //map에 renderFood라는 함수를 인자로 줘서 renderFood 함수에서 별도로 return값을 정의 console.log(foodILike.map(renderFood))} error가 뜸 이유? 기본적으로 react component react의 item들은 모두 유일해야함 이들을 list안에 집어넣을 떄, 유일성을 잃어버리게 됨 해결방법 각각의 item에 id라는 속성을 추가 (각각 다른 name과 image를 갖고있지만 react는 똑똑하지 않아..

2.2 Dynamic Component Generation map: array의 각 item에 function을 적용 후, 그 result로 array를 반환 import React from 'react'; function Food({ob,picture}){ return I like {ob} } const foodILike = [ { name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg" }, { name: "Samgyeopsal", image: "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4..

#2.1 Reusable Components with JSX + Props JSX 장점 : 재사용 가능한 component를 만들 수 있음 component를 계속해서 반복 사용 가능 Food component에 정보를 보내는 방법 fav라는 이름의 property 를 kimchi라는 value로 줌 다양한 타입의 value를 가질 수 있음 console.log(props)를 출력하면 property: value 모두 출력됨 누군가가 food component로 정보를 보내려고 하면, react는 모든 property를 가져옴 그리고 food function component의 argument(인자)로 모든 property를 넣음 props 중 fav의 값 출력 하기 위함 probs.fav -> {fav..

2.0 Creating your first React Component 리액트 : 개발자가 쓰는 모든 요소들을 생성 Java Script로 만들고 HTML에 넣음 모든 요소들을 사이에 넣음 Virtual document object -> react는 virtual 이여서 빠름 npm start 를 콘솔에서 계속 실행해야 서버가 실행 가능 componenet : HTML을 반환하는 함수 ( react는 componenet와 함께 동작 ,모든 것이 component) ex) (component의 형태) component를 사용해서 HTML처럼 작성하려는 경우에 필요 HTML 과 JS 의 조합으로 jsx라고 불림 (react 사용 유일한 개념) potato.js import React from "react";..

graphQl graphql 로 해결할 수 있는 문제 over-fetching : 요청한 영역의 정보보다 많은 정보를 서버에서 받는 것 under-fetching : 어떤 하나를 완성하기 위해 다른 요청들을 해야할 때 발생 (하나를 완성하기 위해 많은 소스를 요청) query database에서 무언가를 요청하고 graphql 언어로 내가 원하는 정보를 알려줄 수 있음 schema 사용자에게 보내거나 사용자로부터 받을 data에 대한 설명 Schema : 데이터에 대한 기술. Query : 데이터베이스로 요청하여 받을 데이터. get data (Read) Mutation : 서버, 데이터베이스, 메모리의 데이터 변경 작업. mutate data. (Create, Upadate, Delete) GraphQ..

Node js URL http://opentutorials.org:3000/main?id=HTML&page=12 http = protocol : 웹브라우저와 웹서버가 데이터를 주고받기 위해 만든 통신규칙 opentutorials.org= host(domain) : 인터넷에 접속되어 있는 각각의 컴퓨터(특정한 인터넷에 연결되어있는 컴퓨터를 가리키는 주소) 3000=port : 접속할 때, 3000번 포트에 연결되어 있는 서버와 통신하게 됨(port 기본 값=80) main =path : 컴퓨터 안에 있는 어떤 디렉토리에 어떤 파일인지 가리킴 id=HTML&page=12=query string : 웹서버에게 보내고 싶은 데이터 전달 쿼리스트링의 시작은 ? 값과 값은 & 로 연결 값의 이름과 값은 = 로 구분..

NestJS nodejs 위에서 움직이는 framework (백엔드를 구성할 수 있도록 해줌) nest new를 통해 nest 프로젝트 create 가능 @Module({ imports: [], controllers: [AppController], providers: [AppService], }) decorator (클래스에 함수 기능을 추가할 수 있음) nestjs는 main.ts가 모든 것을 시작 main.ts : 하나의 모듈에서 applicaion을 생성 const app = await NestFactory.create(AppModule); AppModule -모든 것의 루트 module (Module: 어플리케이션의 일부분(한 가지의 역할을 하는 App)) Controller controller:..