본문 바로가기

All

 (103)
[React] (10) Create 기능 구현 (CRUD) - shouldComponentUpdate 설명 1. 누르면 mode가 변하는 작업 미리 진행되어 있는 작업에 components를 추가하려고 한다. components 파일의 하부에 Control.js를 만들어서 아래 코드를 삽입한다. import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에 아래처럼 Control을 넣어준다. {/* 자식 */} 코드를 적용하게 되면 아래 그림처럼 create와 update 그리고 delete가 생길 것이다. 각 버튼을 클릭하게 되면 mode가 바뀌는..
[React] (9) 이벤트 state, props, event 만들기, render function, bind 함수, setState 우리의 어플리케이션을 역동적으로 만들어주는 기술이 이벤트다. state, props, event 3개가 어울어져 만들어진다. react는 props나 state가 바뀌면 render 함수가 다시 호출된다. 따라서 그 render에 포함된 모든 것들이 다시 호출된다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시..
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api crud example (2) 2020/10/13 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api crud example (1) [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api cr 2020/10/08 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express.. ukcasso.tistor..
[React] (8) Key - Warning: Each child in a list should have a unique "key" prop. 오늘은 State를 반복문으로 자동생성할 때 주어져야하는 key값이라는 것에 대하여 알아보겠다. 우선 아래 코드는 key값을 주지 않고 만든 반복문 데이터이다. this.state에 contents를 넣어주고 TOC에 data라는 값으로 this.state.contents를 넣어주었다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저..
[React] (7) State 사용 앞에 State란 무엇인지 알아보았다. 이제 State를 사용하는 방법에 대해서 알아보자. 지금까지 만들었던 파일들 중에 App.js가 있을 것이다. 이곳에 state를 만들고 사용할 것인데 코드로 보면 알기 쉬울 것이다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다..
[React] (6) State란 (props 와 state의 차이) State란? state를 이해하기 위해선 props와 비교해보는 것이 좋다. props state 사용자가 Component를 사용하는 입장에서 중요 props의 값에 따라 내부 구현에 필요한 데이터 (사용자가 알필요도 없고 알아서도 안된다.) 사용자가 조작하는 버튼 외부 조작버튼이 사용되기 위해 내부에서 조작되는 장치들 Props와 State는 철저하게 분리되어 있어야 한다. 양쪽의 편의성을 각자 도모하는 것이 좋다. props vs state
[React] (5) React Developer Tools 사용방법 React Developer Tools는 React를 사용하기에 필수적으로 설치해야 하는 프로그램은 아니지만 React 개발자로서 다른 React 웹 사이트나 자신이 만든 React 웹 사이트의 Component를 쉽게 탐색할 수 있도록 돕는 프로그램이다. 설치방법 chrome 웹 브라우저의 웹 스토어에서 react developer tools를 탐색하여 찾는다. 사용방법 자신이 탐색하고 싶은 웹사이트에서 F12 또는 개발자도구에 들어가서 Components라는 탭을 클릭하여 아래 그림과 같이 Component를 찾을 수 있다. Component의 props까지 찾을 수 있고 직접 그 자리에서 값을 변경하여 넣어볼 수도 있다.
[React] (4) Component 만들기 이번 포스팅에서는 Component를 제작하는 것을 설명할 것이다. 지난번 포스팅에서 App이라는 component를 제작했는데 이번엔 다양한 Component를 만들고 src/components에 넣어 사용하는 방법과 props라는 것에 대해서도 알아볼 것이다. 우선, src폴더에 components라는 폴더를 생성한다. 그리고 아래와 같이 세 가지의 파일을 만들고 코드를 넣는다. /src/components (새로 생성한 폴더) /Content.js import React, { Component } from 'react'; class Content extends Component { render() { return ( {this.props.title} {this.props.desc} ); } } ex..
[제품 리뷰] 애플워치 6 스페이스그레이 나이키 40mm GPS 개봉기 + ATTIZ 애플워치 40mm 보호필름 근 한 달간 유튜브에서 애플워치 개봉기만 보다가 드디어!! 구매를 하게 되었습니다! 원래 구매하고 싶었던 제품은 애플워치se 나이키 40mm였으나 이왕 사는 김에 제일 최신으로 사자는 마음을 먹고 애플워치6를 구매하게 되었습니다. 또 AOD(Always On Display) 기능이 너무 이뻐 보여서 포기하지 못했던 점도 있습니다... 아래는 애플워치6와 애플워치se의 스펙 비교 사항입니다. 간단하게 나와있지만 크게 3가지가 다릅니다. 첫번째, 혈중 산소 체크 기능 두 번째, 심전도(ECG) 기능 세 번째, AOD기능 아무튼 이러한 이유로 구매를 하였습니다. 이제 구매 샷을 보시죠. 고양 스타필드에서 539,000원 원가 주고 구매하였습니다. 그리고 3개 들어있는 보호필름은 12,900원에 구매하였습니다...
[React] (3) 배포의 의미(Release, Deploy, Distribute)와 배포(Deploy)해보기 배포의 의미 프로그래밍에서 배포는 3가지의 단어로 나뉘어져있다. Release: 같은 제품을 새롭게 만드는 것(예: 새로운 버전을 배포, 새로운 아이피 번로 부여) Deploy: 프로그램 등을 서버와 같은 기기에 설치하여 서비스 등을 제공하는 의미 Distribute: 제품을 사용자들이 사용할 수 있도록 서비스 등을 제공하는 의미 이번 포스팅에서는 React를 Deploy하는 방법을 배워볼 것이다. 1. npm run build 아래 명령어를 입력하게 되면 build 파일이 생긴다 이곳에는 2장에서 여러개로 나뉜 파일들이 필요한 것들만 하나로 소스코드까지 줄여주면서 컴팩트하게 만들어준다. npm run build 알아보기는 힘들지만 이렇게 줄여준다. 2. nxp serve -s bulid 아래 명령어의 ..
[React] (2) 생성된 폴더 각 활용 방법과 Component 변경 방법 앞선 포스트 1장을 잘 따라오셨다면 이번 장에서는 생성된 폴더의 각 파일들이 어떠한 역할을 하는지 알아보려고 한다. 위에서 보면 생선된 폴더들을 볼 수가있다. 각각 어떠한 역할을 하는지 알아보자. 언급하지 않은 파일은 현재 중요하지 않으니 넘어가도록한다. 1. /src/app.js 보시면 기본적으로 App.js가 화면을 구성하는 html역할을 App()이라는 함수에서 return하여 뿌려준다는 것을 알 수 있다. 각 내용들을 바꾸고 저장하면 localhost:3000 페이지의 내용도 바뀔 것이다. 2. /public/index.html 사실 진짜 html파일은 이곳에 저장되어 있다. 여기 보면 라는 곳이 있는데 이곳을 통해 뿌려주는 것이다. 뿌려주는 것을 정의해 주는 곳이 바로 /src/index.js ..
[React] (1) React란 무엇인가, React 개발 환경 조성 이번 카테고리에서는 React라는 것이 무엇인지 알아보고 React개발 환경 조성과 사용방법을 차례대로 포스팅할 예정이다. React란? 간단하게 정의해서 프론트엔드 라이브러리이다. Angular, Vue.js와 같은 역할을 한다고 보면 된다. React는 페이스북에서 제공하고있다. 그리고 React로 만든 웹사이트는 html 태그가 있지만 내용물은 다른 저장소에 있어서 사용자들에게는 소스코드를 보이지 않게 할 수도있다. React는 기본적으로 Component기반이다. 이 뜻는 각 Component를 만들어 놓고 조립하듯 웹 페이지를 구성할 수 있다는 뜻인데 포스팅 뒤로 가면 그 뜻을 이해할 수 있을 것이다. React 개발 환경 조성 1. Node.js 설치 우선 node.js는 기본적으로 설치되어 ..

티스토리툴바