본문 바로가기

인공지능
블록체인
정보보안

코딩 알로하 :: one/react.js10

리액트 To-do 리스트 만들기 (7탄) # 완성된 앱을 인터넷에 배포하기 지금까지 우리가 개발 서버에서 사용한 파일들은 루트 경로의 src 와 public 폴더 안에 있는 파일들이었다. 개발 서버는 실시간으로 코드 변화를 감지해 컴파일하고 브라우저에 렌더링 하는 기능을 가지고 있기 때문에 매우 편리하지만, 실제 서비스로 사용하기에는 성능 면에서 적절하지 않다. 실제 프로덕션 환경에서는 자바스크립트와 CSS파일을 최적화하는 Build 단계를 거치게 되는데, 이를 Create-react-app 으로 리액트 앱을 만들때 같이 설치되었던 Webpack 이 수행하게 된다. npm run build # 배포 준비하기 노드 서버 셋팅하기 Node API 서버 프레임워크로 유명한 express 를 비롯한 패키지들을 설치해준다. 이전에 글로벌로 설치했던 js.. 2022. 6. 3.

Wappalyzer - Technology profiler (웹기술 식별 프로그램) Wappalyzer는 웹사이트에서 사용되는 기술을 알아내는 유틸리티이다. 콘텐츠 관리 시스템, 전자 상거래 플랫폼, 웹 프레임워크, 서버 소프트웨어, 분석 도구 등을 감지한다. https://chrome.google.com/webstore/search/wappalyzer?hl=ko Chrome 웹 스토어 Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요. chrome.google.com https://www.wappalyzer.com/installed?utm_source=installed&utm_medium=extension&utm_campaign=wappalyzer Installation successful - Wappalyzer Wappalyzer has been insta.. 2022. 6. 3.

react 공식 문서 https://ko.reactjs.org React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 리액트는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 라이브러리 vs 프레임워크 - 라이브러리는 개발 편의를 위한 도구의 모음 - 프레임워크는 기반 구조까지 잡혀 있음 - 라이브러리는 공구 - 프레임워크는 공장 2022. 6. 3.

Stack Overflow Developer Survey 2021 https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-web-frameworks Stack Overflow Developer Survey 2021 In May 2021 over 80,000 developers told us how they learn and level up, which tools they’re using, and what they want. insights.stackoverflow.com 2022. 6. 2.

리액트 To-do 리스트 만들기 (6탄) # 데이터를 만들어 넣고 리액트 화면에 할일이 나오도록 json-server를 실행 // data.json { "items": [ { "id": 1, "task": "자기", "due": "20210901", "status": "done" }, { "id": 2, "task": "청소하기", "due": "20210902", "status": "done" }, { "id": 3, "task": "공부하기", "due": "20210903", "status": "done" }, { "id": 4, "task": "달리기", "due": "20210904", "status": "done" }, { "id": 5, "task": "숙제하기", "due": "20210905", "status": "todo" }.. 2022. 6. 1.

리액트 To-do 리스트 만들기 (5탄) # 투두 리스트 앱의 데모 # 요구사항 정의 - header : todo list application 이름 출력 - 체크 콤보 : 해야되는 일과 끝난 일 (체크를 한 상태가 유지되어야 함) - task : 해야할 일 - Due : 완료해야 할 날짜 - Delete : 삭제 기능 - Todo 클릭시 : 해야할 일 목록을 보여줌 - Add 클릭시 : 할일을 입력하기 # 뼈대 만들기 DB - data.json Componets - CreateItem.js - Header.js - Item.js - Items.js App.js index.js index.css # 메인 페이지 만들기 //App.js import React from "react"; import Items from "./components/Ite.. 2022. 6. 1.

리액트 To-do 리스트 만들기 (4탄) # API 란? 우리가 만든 로직을 사용하기 위해 인터페이스를 만드는 것이다. # JSON 서버 만들기 프론트엔드는 데이터베이스에 직접 접근할 수 없기 때문에 필연적으로 백엔드에서 제공하는 API 를 사용해야 한다. 그런데 지금 하고 있는 프로젝트 처럼 간단한 프로젝트의 경우 별도 API를 만드는 것이 번거롭다. 따라서 json-server 라는 노드 패키지를 사용해 .json 파일에 저장된 데이터를 API를 통해 제공할수 있도록 할 것이다. # REST API란? 자원을 URI로 표현하고, 자원에 대한 행위를 HTTP Method(GET, POST, PUT, DELETE)로 표현한다. - Create : POST - Read : GET - Update : Put - Delete : Delete # Js.. 2022. 6. 1.

리액트 To-do 리스트 만들기 (3탄) # React State와 useState 지금까지는 페이지를 렌더링할때 정적인(Static)요소들만 사용했다. 그런데 웹에서는 사용자와의 상호작용을 통해 화면이 바뀌는 경우가 많다. 이럴때 useState 를 사용하면 "상태 관리"가 가능하다. return 부분을 자세히 보면 JSX 에 onClick={onIncrease} 와 같은 애트리뷰트를 볼수 있다. onIncrease는 counter컴포넌트에 정의된 함수이다. 이 함수가 하는 일은 useState의 결과 값인 number의 값에 1을 더하는 것이다. 그럼 useState가 하는 일이 뭘까? useState는 기본값을 입력으로 받아 배열을 리턴하는데, 첫 번째 원소는 현재 상태를 나타.. 2022. 6. 1.

리액트 To-do 리스트 만들기 (2탄) # VScode - Visual Studio Code는 마이크로소프트에서 만든 오픈 소스 코드 편집기이다. 미려한 디자인과 강력한 성능을 모두 갖추고 있어서 많이 사용하고 있다. 2021년 프로그래머스 설문조사에서도 선호도 1위를 차지했다. # VSCode 설치 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favo.. 2022. 6. 1.

리액트 To-do 리스트 만들기 (1탄) # 리액트는 왜 탄생했을까? 인터넷 브라우저(clients) 에서 화면이 나오려면, 서버로 데이터를 요청하고, 데이터에 대한 응답을 보내주고, 응답을 브라우저가 해석해서 우리에게 보여준다. # 구조의 이해 HTML : 데이터, 뼈대 CSS : 스타일 JavaScript : 동적인 요소, DOM을 조작을 해서 화면에서 사용자와 상호 작용하게 만들어 준다. # HTML에서 화면 출력 HTML은 데이터를 구조적으로 계층적으로 나타남 브라우저는 이 HTML 태그를 트리구조(계층적) 자바스크립트 객체로 변환하여 화면 구성 한다. (DOM) 서버에서 HTML 을 보내주면, DOM 으로 만들어주고, 웹브라우저에서 화면을 그려준다. (화면 뿌림 = 렌더링) # 화면 동작 설명 서버에서 응답으로 받은 HTML 코드를 브.. 2022. 6. 1.

이전 1 다음

티스토리툴바