괴발개발

🔎 정규화 DB 설계에 있어서 중복을 최소화 하기 위해 데이터를 구조화 하는 과정 크고 조직화 되지 않은 테이블을 작고 잘 조직화 된 테이블로 변경 데이터 추가 및 삭제 시에 이상 현상을 예방할 수 있음 🚩 제1정규형(1NF): 하나의 컬럼은 반드시 하나의 속성만을 가져야 함 🚩 제2정규형(2NF): 모든 컬럼에 대한 부분 종속이 없어야 함 🚩 제3정규형(3NF): 이행 종속성(A=B, B=C여서 A=C인 경우)이 없어야 함 🔎 Foreign Key(외래 키) 정규화를 하게 되면 테이블은 최소한의 단위로 쪼개지게 됨 하지만 데이터를 불러들일 때에는 한꺼번에 많은 값을 가지는 테이블을 JOIN 해서 가지고 와야 하는 경우가 많음 JOIN을 통해 테이블을 합치는데, 이 때 기준이 되는 값(서로 공유하고 있는..

🔎 SQL(Structured Query Language) 관계형, Relational DBMS(RDBMS) 키와 값의 관계를 테이블화 시킨 원칙을 토대로 DB를 구성 장점: 구조화가 명확하여 예외가 없음, 데이터 입출력 속도가 매우 빠름, 신뢰성이 높음 단점: DB 구조 변경이 매우 어렵기 때문에 빅데이터 등 새로운 키가 추가될 수 있는 것에는 사용이 어려움 구문 연습: https://www.w3schools.com/sql/trysql.asp?filename=trysql_select_all 🚩 DB에서 데이터 가져오기 SELECT * FROM 이름; SELECT * FROM Customers; 🚩 원하는 컬럼의 값만 가져오기 SELECT 컬럼명 FROM table; SELECT City, Country..

🔎 리액트 SPA(Single Page Application) 제작 [터미널] npx create-react-app mbti-app [터미널] npm i redux react-redux @reduxjs/toolkit styled-components prettier .prettierrc { "semi": true, "singleQuote": true } /.vscode/settings.json { "[javascript]": { "editor.maxTokenizationLineLength": 2500, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" } } 폴더 구조 세팅 🚩 redux 기초 세팅 // src/..

🔎 Redux 상태 관리 라이브러리 컴포넌트의 상태를 하나하나 props로 전달하는 것을 방지하고자 생김 컴포넌트의 상태를 store.js 에서 관리 1. dispatch 함수를 실행하면 2. action 발생 3. action을 reducer가 받아서 4. state를 변경 5. state가 변경되면 컴포넌트가 리렌더링 [터미널] npm i redux [터미널] npm i react-redux redux 적용을 위해서 컴포넌트를 import하고 을 감싸줘야 함 // src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import..

🔎 public 폴더 사용 상대 경로를 이용해서 src 폴더 이상으로 가서 다른 폴더에 접근하여 내려가는 방식, 절대 경로를 이용하는 방식 사용 불가 기존 백엔드에서는 public 폴더를 static이라는 express 메소드를 사용해서 특정 주소 값을 요청하면 연결이 되었음 npx create-react-app을 통해 만들어진 리액트 앱의 경우는 public 폴더가 자동으로 static 처리됨 따라서 어느 위치에서건 / 를 써서 접근하면 public 폴더를 호출할 수 있음 🔎 Composition(합성), Specialization, Containment 🔎 React Router 리액트에서는 컴포넌트별 라우팅이 가능 [터미널] npm i react-router-dom index.js 에서 App 컴포..

🔎 React HOOKS 기존 클래스형 컴포넌트에서 사용하던 편리한 기능을 함수형에 적용하려니 기존 것을 그대로 사용할 수 없고 새로운 것이 필요하여 탄생한 것 useState, useRef, useEffect, useContext, useMemo, useCallback, useReducer ... 🔎 React.Fragment 실제 리액트에서 컴포넌트를 조합할 때, 최상위에 div를 사용하지 않고 반환해야만 하는 경우가 생길 때 사용 React 라이브러리 추가 필요 를 로 대체 가능, 속성 값이 필요한 경우 빈 태그는 사용 불가 // src/components/ReactFragment.js import React from "react"; export default function ReactFragmen..

실습: 카운터 만들기 최상단에 태그로 0 인 숫자가 있고, 아래에는 +1, -1 이라는 버튼 +1 버튼을 누르면 숫자가 +1 이 되고, -1 버튼을 누르면 숫자가 -1 이 되도록 import React, { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); const onInc = () => { setCount(count + 1) }; const onDec = () => { setCount(count - 1) }; return ( {count} +1 -1 ) } 🔎 props 리액트에서 백엔드의 데이터를 프론트로 전달하는 방식 html의 속성을 부여하는 것처럼 props명과 전..

🔎 MVC 패턴(Model View Controller) 🚩 장점 역할이 명확히 구분되어 있어 유지보수, 기능 추가/확장이 쉽다 프론트와 백이 서로 독립적으로 개발 가능, 협업하기 좋음 🚩 단점 MVC 구조에 대한 이해를 바탕으로 설계가 필요함 MVC를 명확히 나누기 어려울 경우 구조상으로 복잡해질 수 있음 🚩 Model 어플리케이션의 데이터를 처리 사용자가 볼 수 없는 곳에서 DB로부터 데이터를 읽고, 삽입하고, 수정하고, 삭제하는 역할 Controller와 소통, View와는 소통하지 않음 🚩 Controller Model과 View의 상호작용을 컨트롤 Model로부터 전달받은 데이터를 가공하여 View에 전달 View로부터 들어온 사용자 요청을 Model에 전달 🚩 View Model로부터 받은 정..

🔎 koa express 팀에서 만든 프레임워크 express 대비 더 가볍고 빠름 미들웨어 레벨에서도 async/await를 제공하여 비동기 프로그래밍을 더 편리하게 사용 가능 프레임워크 설치: [터미널] npm i koa // @ts-check const Koa = require('koa'); const app = new Koa(); const PORT = 4500; app.use(async (ctx, next) => { console.log(ctx.request); console.log(ctx.response); ctx.body = 'Hello, koa world!'; }); app.listen(PORT, () => { console.log(`서버는 ${PORT}에서 작동 중입니다.`); }); 🚩..

🔎 multer 모듈로 이미지 업로드 모듈 설치: [터미널] npm i multer -s 🚩 board_write.ejs 파일 수정 input type="file" encrypt="multipart/form-data" 제목 내용 이미지 업로드 작성 🚩 board.js 수정 multer 모듈 불러오기 저장 설정: destination(업로드 할 폴더 설정), filename(파일 이름 설정) 한계 설정: 파일크기, 이름 등 글쓰기 요청 시, 폴더가 없으면 만들기 파일의 정보는 upload.single(' ')를 통해 req.file에 담겨서 들어옴 req.file이 있을 경우 img에 파일명 넣어서 DB 처리 // board.js const multer = require('multer'); const fs..