FE BE 개발 메모장
SQL의 연산자와 데이터 타입(MySQL 기준)
데이터 타입의 정의 데이터 타입(자료형)은 컴퓨터 시스템과 프로그래밍 언어에서 실수, 정수, 소수 자료형 등 여러 종류의 데이터를 식별하는 타입으로해당 자료형에 대한 가능한 값, 수행을 할 수 있는 명령어, 데이터의 형태, 의미, 크기와 해당 자료형의 값이 저장되는 방식이다. 데이터 유형 정의 CHAR(n) 고정 길이 데이터 타입(최대 255byte), 지정된 길이보다 짧은 데이터 입력 시 나머지 공간은 공백으로 체워진다. VARCHAR(n) 가변 길이 데이터 타입(최대 65535byte), 지정된 길이보다 짧은 데이터 입력 시 나머지 공간은 채우지 않는다. TINYTEXT(n) 문자열 데이터 타입(최대 255byte) TEXT(n) 문자열 데이터 타입(최대 65535byte) MEDIUMTEXT(n) ..
Database와 관계형 데이터베이스, SQL을 알아보자
SQL이란? Structured Query Language 의 약자로 구조화 된 Query 언어를 말한다. Query란? 번역하면 질의문을 뜻한다. 저장되어 있는 정보를 필터링 하기 위한 질문이다. 결국, SQL은 데이터베이스용 프로그래밍 언어이고, 데이터베이스에 Query를 보내 원하는 데이터를 가져올 수 있다. 데이터베이스는 왜 필요할까? In_Memory DB를 사용하기 전에는 데이터를 클라이언트나 서버에 저장해 두게 된다. 만약 서버나 클라이언트가 종료되면, 안에 저장되 있던 정보들은 모두 사라진다. File I/O 원하는 데이터만 가져올 수 없고, 항상 모든 데이터를 가져온 뒤 서버에서 필터링이 필요하다. for loop문을 사용해 필터링을 하게 되면 서버의 부하가 많이 걸리게된다. Databa..
REACT 데이터의 흐름과 사고
REACT로 사고하기 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작하는 특징을 가지고 있다. React API 공식문서에서 등록된 내용으로 어떻게 흘러가는지 자세히 확인해 보려고 한다. 아래의 목업을 디자이너로 부터 받았다고 가정해보자. 가장 먼저 컴포넌트를 어떻게 나누어야 할지 찾는 것이다. 이럴 때는 단일책임원칙으로 하나의 컴포넌트에 한 가지 일을 하는 방법으로 고려를 해본다. 하나의 컴포넌트가 커질 경우 보다 작은 하위 컴포넌트로 분리해줘야한다. 컴포넌트를 쪼개면 아래처럼 나눌 수 있을 것 같다. A (초록색) : 하위 컴포넌트를 담고있는 최상위 컴포넌트이다. B (빨간색) : 모든 유저의 입력(input)을 받는다. C (검은색) : 모든 상품을 보여주거나유저..
State와 Props에 대해서
우선 리액트를 사용할때는 없어선 안되는 필수적인 존재들이 state와 props이다. 리액트에서 데이터를 다룰 때 사용하는 개념이기 때문이다. props React에서 props는 읽기 전용, 즉 변하지 않는 데이터이다. 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용한다. 아래의 예제를 살펴보자 import React, { Component } from 'react'; import MyName from './MyName'; function App() { return ( ); } function Hello(props) { return 오늘도 하는 {props.name} } export default App; 우선 App라는 최상위 컴포넌트를 작성해주었다. 그리고 App()안에는 ..
컴포넌트(Component)란?(좀더 이해하기 쉽게 수정해야함)
컴포넌트(Component) 컴포넌트는 개념적으로 props라는 input값을 받고나서, UI, 즉 View(state) 상태에 따른 화면에 어떻게 출력이 되는지 Output을 React Element로 보여주는 함수를 뜻한다. 그래서 합성을 통해 UI를 재사용할 수 있고, 독립적인 단위로 쪼개어 생각할 수 있게 한다. React API 공식문서에 따르면 상속을 따르는 대신 모듈로 따로 분리해 합성을 사용하길 권장한다. 함수 형 컴포넌트와 클래스형 컴포넌트 1. 함수형 컴포넌트 import React from 'react'; function ReactFunc(props) { //...statements } 2. 클래스형 컴포넌트 import React from 'react'; class ReactFunc..
JSX 문법
JSX란? 우선 JSX의 가장 기본적인 변수를 선언해 보았다. const element = Hi, Kim; 변수 element에 문자열도 HTML도 아닌 문법을 담아주었다. 이런 코드를 JSX라고하며, JavaScript를 확장한 문법을 뜻한다. JSX는 자바스크립트의 모든 기능이 포함되어있고, 필수적인것은 아니지만 자바스크립트코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다고 생각되는 문법이다. JSX문법 JSX의 문법은 다음과 같은 규칙을 가진다 반드시 태그를 열었으면 닫아줘야하며, 하나의 태그안에 담아줘야한다. render() { X render() { O return( return( ); ); } } Error 이렇게 작성하게 될 경우 반드시 오류를 발생시킨다. 아래는 기본적인 문법이..
React, React를 시작하기
React란? 현재까지 프론트엔드에서 쓰이고있는 React는 페이스북이 만든 사용자 UI구축을 위한 JavaScript 라이브러리이다. React 시작하는 방법 만약 node.js가 설치되있지 않다면 설치부터 하고 진행한다. 터미널을 열어 다음과같이 입력하면 설치를 시작한다. npx create-react-app my-app 설치가 끝나게되면 다음과같이 입력해주고 웹페이지를 실행시켜본다. cd my-app npm start 기본(default)로 설정된 브라우저가 뜬다면 가운데에 적힌 문구대로 app.js를 수정해주면 된다. App.js를 보게되면 위의 브라우저에서 보여주는 코드가 작성되었다. 모두 지워주고 0아래 이미지 처럼 작성 후 시작하면된다.
ES-6 문법 정리
1. 변수(variable) const는 블록 범위이며 값이 지정되면 재선언 되거나 바꿀 수 없는 상수이다.(읽기전용) const variable = 'immutable(Constants), Block Scope' variable = "crytek"// Error let은 블록 범위이며 재선언 및 재할당이 가능하다. let variable = 'mutable, Block Scope' variable = 'Infinity Word' //'Infinity Word' 2. 지역 스코프 변수와 함수 for(let idx of arr){ console.log(idx) } for(let idx = 0; i < arr.length; i++){ let x = arr[idx] } x = 5; console.log(x) ..