본문 바로가기

분류 전체보기144

React - Phone book 만들기(3) Phonelist 파일에 직접 목록을 입력 했지만, 이것을 props 개념을 활용하여 App.js에서부터 받아오면 App.js 파일에 state를 만들고 render에서 information 변수로 PhonForm으로 상속 시켜준다. PhoneForm에서는 App.js에서 상속받은 데이터를 this.props로 상속받은 데이터를 또 Phonelist에 상속을 시켜준다. 여기에서 key값도 같이 상속을 시켜주는데 React 공식문서에서 배열을 렌더 할때는 그배열을 구분해주는 unique한 key값을 가져한다고 한다. key를 따로 지정안해도 React App에서는 잘 렌더 되지만, console에서는 error를 발생한다. phonelist에서 information을 상속을 받아서 넣고자 하는 곳에 넣어주.. 2020. 8. 7.
React - Phone book 만들기 (2) 아직 Hook을 배우지 않아서 기존에 있는 함수 형태의 App.js를 class 형태로 변환하고 기본적인 code를 설명하면 import는 from으로부터 모듈을 가져온다는 것이다. import './App.css'는 App.css파일을 읽어와서 웹을 꾸민다. 주석 처리된 함수형과 아래 있는 class 형태는 같은 동작을 하는 코드이다. export default App은 App이라는 함수를 내보낸다. 이것이 다른 파일에서 import로 불러와서 component로 사용이 가능하다. 주석처리한 부분을 지우고 파일 목록에서 component들을 한곳으로 모으는 폴더를 만든다. component 폴더 안에 있는 component는 실제로는 index.js에서 실행되기 때문에 index.js에 있는 App을 .. 2020. 8. 7.
React - Phone book 만들기(1) 이 예제는 아래 블로그에서 본 예제를 기반으로 만들었습니다. 참고 바랍니다. https://velopert.com/3613 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG 이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무 velopert.com react에서 제공하는 리액트 웹 만들기 도구를 활용하면 react로 웹을 만들기 편리하다. 만약에 도구가 없다면 필요한 모듈과 라이브러리를 각각 다운을 해야 하지만, react에서 제공해주는 도구를 활용하면 한번에 가능하다. create-react-app 이 도구를 활용하는 곳이고, phone.. 2020. 8. 6.
Server - 만들기 Server를 만들때 require를 통해서 http를 모듈을 가지고 온다. *http변수에 모듈을 가지고 오면, http.~~ 모듈 메소드를 사용을 할 수 있다. *http.createServer는 서버를 만드는 메소드이며, req(request)와 res(response) 매개변수를 받을 수 있다. *res.~~(응답) 응답을 해주는 것인데 res.writeHead는 첫번째 인자로 200(응답성공)을 받는다.(200~500 번호마다 응답 상태를 나타낸다. 찾고자 하는 사이트를 잘못 입력 했을 때, 주로 404를 사용하고 500번 때는 서버에서 오류 났을때 사용) *두번째 인자로 header가 오고 header의 방식이 온다. *res.end는 함수를 끝내면서 보낼 메세지를 인자로 넣어주면 된다. 여기.. 2020. 8. 4.
반응형

티스토리툴바