본문 바로가기

javascript

 (56)
[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..
[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는 기본적으로 설치되어 ..
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api crud example (1) 2020/10/08 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example 2020/09/03 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 �� ukcasso.tistory.com 지난 시간엔 ejs를 활용해서 ejs 문법을 넣고 crud를 구현해보았다. 이번에는 fet..
[Express] express와 사용방법 Express란? Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크이다. 웹 서버를 만들 때 손쉽게 만들 수 있어서 사용하려고 한다. Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크이다. 그러한 컴포넌트를 미들웨어(middleware)라고 한다. 개발자들은 특정 프로젝트에 필요한 라이브러리를 어떤 것이든 자유롭게 선택할 수 있으며, 유연함과 수준 높은 맞춤식 구성을 보장한다. Express의 작동방식 1. 컨트롤러, 유틸리티, 도우미, 모델과 같은 자체적인 모듈을 비롯한 서드파티 의존 모듈을 포함한다. 2. 템플릿 엔진과 해당 템플릿 엔진의 파일 확장자와 같은 Express.js 앱 설정을 구성한다. 3. 오류 핸들러, 정적 파일 폴더, 쿠키 및 기타..
[axios] axios와 사용법 axios란? HTTP Cilent 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 할 수 있다. 또한 내부적으로는 직접적인 XMLHttpRequest를 다루지 않고 'Ajax 호출'을 할 수 있다. Ajax란? Asynchronous Javascript And XML의 약자로 jQuery의 비동기적인 웹 애플리케이션을 제작할때 사용하는 기법이다. 비동기식 자바스크립트 XML이라고 할 수있다. axios 설치방법 npm install --save axios axios 사용방법 설치 후 서버 파일이 될 js파일 상단에 선언해준다. const axios = require("axios"); GET API 호출 const axios = require('axios'); // Make a request fo..
[Sequelize] Sequelize와 사용법 그리고 sequelize query Sequelize Sequelize란 node.js에서 mysql등 관계형 데이터베이스를 쉽게 다룰수 있게 도와주는 라이브러리이다. Sequelize는 대표적인 node.js의 ORM(Object Relational Mapping)이다. ORM이란? 2020/09/28 - [학습노트/기초지식] - [ORM] Object Relational Mapping이란? [ORM] Object Relational Mapping이란? 프로그래밍을 하다보면 자신이 원하는 서비스를 만들고 싶을 때 많은 개념들을 접하게 됩니다. 저도 마찬가지로 프로젝트 진행중에 ORM이라는 개념을 보게되어 공부하고 정리하려고 합니다. 1. O ukcasso.tistory.com 위에 ORM을 정리해놓은 글을 보아도 좋지만 간단하게 말해서 ..
[MySQL2] MySQL과 MySQL2의 차이점 공부를 하다보면 DB와 node.js서버를 연결시킬 일이 생긴다. 그런데 우리는 지금까지 MySQL만 들어봤지 갑자기 MySQL2도 나오고 두 가지의 차이점이 무엇인지 알아보고 싶었다. 이번 포스팅은 정말 두가지의 차이점만 쓰고 끝낼 것이라서 간단한 글이 될것같다. MySQL과 MySQL2의 차이점은 바로 promise이다. mysql은 callback기반이기 때문에 promise를 사용하지 못하고 npm에 있는 promise-mysql 모듈을 따로 설치해서 사용해야한다. 하지만 mysql2는 promise를 지원하기 때문에 다른 모듈을 설치하지 않고 사용이 가능하다. promise란? promise로 구현된 비동기 처리 함수는 콜백을 예측 가능한 패턴으로 사용하도록 도와준다. 순차적이지 않은 비동기함수..
[ORM] Object Relational Mapping이란? 프로그래밍을 하다보면 자신이 원하는 서비스를 만들고 싶을 때 많은 개념들을 접하게 됩니다. 저도 마찬가지로 프로젝트 진행중에 ORM이라는 개념을 보게되어 공부하고 정리하려고 합니다. 1. ORM이란? Object Relational Mapping의 약자로 관계형 데이터베이스 관리 시스템(RDBMS, Relational Database Management System)와 객체 지향 프로그래밍 언어(OOP, Object Oriented Programming)간에 호환되지 않는 데이터를 맵핑해주는 프로그래밍 패러다임이다. 2. 사용 예 클래스로 스키마(Schema)를 매핑하고, 메소드(Method)로 쿼리(Query)를 작성하여 객체로 이뤄진 테이블을 가져온다. 3. ORM 장점 - SQL문을 사용하지 않고 ..
[MySQL] 관계형 데이터베이스 왜 관계형 데이터베이스가 필요한가. 중복이 되면 개선할 것이 있다고 본다. 그래서 중복 가능이 있는 데이터를 테이블로 다시 만들어서 관리한다. 그럼 유지 보수할 때에 만들어 놓은 테이블을 바꾸면 다 바뀐다. MySQL은 데이터를 분산해서 저장하고 보여줄 땐 합쳐서 보여준다. 우선, 만들어놨던 테이블은 이름을 바꿔준다. RENAME TABLE 테이블명 TO 바꿀이름; 1. 테이블 분리하기 CREATE TABLE article ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(30) NOT NULL, `description` text, `created` datetime NOT NULL, `author_id` int(11) DEFAULT NULL, PRIMAR..

티스토리툴바