리액트 carousel

https://www.youtube.com/watch?v=CF1Ht5ahhB0&t=1222s

리액트 컴포넌트

컴포넌트란 사용자 인터페이스에서 재사용 가능한 블록을 의미한다. 리액트는 이러한 컴포넌트 개념을 허용하는데 이러한 재사용성 측면때문에 반복을 피할 수 있다. 구성요소는 어떻게 구축될까? react에서는 html css javascript 구성요소들을 함께 결합한다. 이로써 전체 사용자 인터페이스를 구축한다.

코드샌드박스

아니 이거 무슨오류여.. 모르겠다.. 이유는 잘 모르겄다.. 버전을 조금 낮추니까 되네. https://velog.io/@yukyung/codesandbox-%EC%97%90%EC%84%9C-auto-closing-%EA%B8%B0%EB%8A%A5-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 codesandbox를 사용할 때 알면 좋은 작고 소소한 팁 ✨ 라이브러리 다운 / 템플릿 자동완성 / 자동 태그 닫기 / 프리티어 설정 값 변경 velog.io 생산성을 높일 수 있는 방법

JSON (2)

JSON

JSON 형식은 Javascript Object Notation 의 약자이다. Json은 자바스크립트 객체를 문자열로 축소해서 데이터를 전송하는 것이다. Json문자열은 큰따옴표, 쉼표로 구분되어 있어 원본으로 빌드하기 쉽다. JSON 말고 데이터를 수신할 수 있는 여러 형식이 있는데, xml 이나, html 의 형식으로 수신할 수 있다. 하지만 JSON이 가장 가벼워서 많이 사용되고 있다. 또한 자바스크립트 객체로 되돌리기가 쉽기 때문이다. JSON을 더 알아보기 쉽게 만들기위에 아래의 확장프로그램을 사용해보자. 이런식으로 보기 편안해졌다. weather[0].icon weather 객체에 첫번째 아이템중 icon 값을 뜻한다.

API

요청 -------> 나의 서버 API 서버

크롬 검사기 네트워크 오류부분

서버 초기 설정

express

https://expressjs.com/en/starter/installing.html Installing Express Installing Assuming you’ve already installed Node.js, create a directory to hold your application, and make that your working directory. $ mkdir myapp $ cd myapp Use the npm init command to create a package.json file for your application. For more inform expressjs.com express를 사용하기 위해서는 우선 폴더를 생성해주고 js 파일을 생성해주어야한다. npm init을 해주..

npm

npm은 node package manager의 약자이며 다른사람이 만든 코드를 npm을 사용하여 나의 코드에 통합할 수 있게 해준다. 자 시작해보자! npm init을 쳐준다. 아무것도 입력하지 않은 칸에는 그냥 enter를 치면 된다. https://www.npmjs.com/search?q=superheroes superheroes - npm search www.npmjs.com npmjs에 들어가서 superheroes를 검색했다. superheroes를 다운로드 해준다. 잘 추가된것을 알 수 있다. 이제 document의 usage를 참고해서 코드를 복사한다. 이런식으로 영웅들의 이름이 잘 나온다. code . 입력하면 해당 폴더를 vsc로 열게된다.