sprint Mini Node Server_Sprint HTTP module Web Server란 HTTP 요청을 처리하고 응답을 보내주는 프로그램을 말한다. HTTP 모듈을 사용하면 node.js 환경에서 HTTP 요청을 보내거나 응답을 받을 수 있게 해준다. 서버 생성 require("")를 사용하여 http모듈을 불러올 수 있다. createServer를 사용하여 웹 서버 객체를 만든다. 포트와 ip를 지정하고 listen 메소드를 사용하면... node서버sprintmininodeservermininodeserver Sprint - Chatterbox Server http서버를 시작하기 위해서 NodeJS를 어떻게 사용하는지 학습하고, 어떻게 브라우저에서 서버를 연결 하는지 확인 하세요.(http 서버의 베이스 코드는 server/basic-server.js에 작성 되어 있습니다.) handler를 basic-server에서 활용 할 수 있도록 export와 require를 활용해서 코드를 작성 하세요. (예를 들어 socket.io를 이용한 요구사항... TILsprintTIL 리엑트 JS로 만들기 - 검색 결과 구현 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다 검색하기 전에는 검색 결과가 안 나오고, 검색을 한 경우에는 검색 결과가 나와야 한다. 검색 결과를 모아두기 위해서, state 객체에 searchResult 라는 빈 배열을 만들었다. 현재는 searchResult가 빈 배열이기 때문에, "검색 결과가 없습니다"로만 표기된다. 이제, 검색 결과가 있을 시에, ... TILReactsprintReact 리엑트 JS로 만들기 - 최근 검색어 구현 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 최근 검색어 데이터를 저장하고 있는 historyData를 받아오는 getter와 가장 최근 시간대가 최상위 리스트로 올라가게 하기 위한 sort()를 하나 만들어주자!! state 에 최근 검색어를 다룰 state값을 추가해주고, componentDidMount()에서도 최근 검색어 데이터를 받아오도록 하자!! 그러나... TILReactsprintReact 리엑트 JS로 만들기 - 리펙토링(추상화) 아마 App 컴포넌트 안에서 검색에 관련된 모든 곳들을 찾아보고, 코드를 이해해야 비로소 어떻게 수정할 수 있을지에 대한 로드맵이 세워질 것이다. 서랍을 용도에 맞게 칸막이로 나누듯, 컴포넌트도 역할에 따라 더 작은 컴포넌트로 나눌 수 있다. 여러 속성과 동작을 표현하는 코드를 클래스로 분리하고 "User"라는 이름표를 붙여주면 이 때부터 이름표만 보고도 사용자를 기술한 코드인 것을 알 수 ... TILReactsprintReact print 8 - React Part 1 React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다. JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다. 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다. props의 특징과 규칙을 이해할 수 있다. props와 state와의 차이점을 이해할 수 있다. 상태 변경 방법과, 그 이유를 이해할 수 있다. 이벤트를 처리할 수 있다. li... ReactJSXsprintJSX
Mini Node Server_Sprint HTTP module Web Server란 HTTP 요청을 처리하고 응답을 보내주는 프로그램을 말한다. HTTP 모듈을 사용하면 node.js 환경에서 HTTP 요청을 보내거나 응답을 받을 수 있게 해준다. 서버 생성 require("")를 사용하여 http모듈을 불러올 수 있다. createServer를 사용하여 웹 서버 객체를 만든다. 포트와 ip를 지정하고 listen 메소드를 사용하면... node서버sprintmininodeservermininodeserver Sprint - Chatterbox Server http서버를 시작하기 위해서 NodeJS를 어떻게 사용하는지 학습하고, 어떻게 브라우저에서 서버를 연결 하는지 확인 하세요.(http 서버의 베이스 코드는 server/basic-server.js에 작성 되어 있습니다.) handler를 basic-server에서 활용 할 수 있도록 export와 require를 활용해서 코드를 작성 하세요. (예를 들어 socket.io를 이용한 요구사항... TILsprintTIL 리엑트 JS로 만들기 - 검색 결과 구현 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다 검색하기 전에는 검색 결과가 안 나오고, 검색을 한 경우에는 검색 결과가 나와야 한다. 검색 결과를 모아두기 위해서, state 객체에 searchResult 라는 빈 배열을 만들었다. 현재는 searchResult가 빈 배열이기 때문에, "검색 결과가 없습니다"로만 표기된다. 이제, 검색 결과가 있을 시에, ... TILReactsprintReact 리엑트 JS로 만들기 - 최근 검색어 구현 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 최근 검색어 데이터를 저장하고 있는 historyData를 받아오는 getter와 가장 최근 시간대가 최상위 리스트로 올라가게 하기 위한 sort()를 하나 만들어주자!! state 에 최근 검색어를 다룰 state값을 추가해주고, componentDidMount()에서도 최근 검색어 데이터를 받아오도록 하자!! 그러나... TILReactsprintReact 리엑트 JS로 만들기 - 리펙토링(추상화) 아마 App 컴포넌트 안에서 검색에 관련된 모든 곳들을 찾아보고, 코드를 이해해야 비로소 어떻게 수정할 수 있을지에 대한 로드맵이 세워질 것이다. 서랍을 용도에 맞게 칸막이로 나누듯, 컴포넌트도 역할에 따라 더 작은 컴포넌트로 나눌 수 있다. 여러 속성과 동작을 표현하는 코드를 클래스로 분리하고 "User"라는 이름표를 붙여주면 이 때부터 이름표만 보고도 사용자를 기술한 코드인 것을 알 수 ... TILReactsprintReact print 8 - React Part 1 React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다. JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다. 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다. props의 특징과 규칙을 이해할 수 있다. props와 state와의 차이점을 이해할 수 있다. 상태 변경 방법과, 그 이유를 이해할 수 있다. 이벤트를 처리할 수 있다. li... ReactJSXsprintJSX