Develope Me!

디자인 패턴※ 라이브러리와 프레임워크둘은 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미하며 프레임워크는 라이브러리를 포함한 상위의 개념이다. 라이브러리와 프레임워크의 차이점은 '제어 흐름'이 어디에 있는 가에 따라 차이가 있다. 라이브러리는 개발자에게 제어 흐름이 있으며 필요할 때 라이브러리를 호출하여 사용할 수 있다. 반면 프레임워크는 '제어의 역전(Inversion of Control)'의 개념이 적용되어 프레임워크에게 제어의 흐름을 넘겨서 짜놓은 틀에 맞춰 수동적으로 동작한다. 라이브러리는 폴더명/파일명 등에 대한 규칙이 없고 자유로운 반면 프레임워크는 폴더명/파일명 등에 대한 규칙이 있고 라이브러리에 비해 엄격한 특징을 가지고 있다.   ※ 디자인 패턴프로그램을 설계할 때 발생했던 ..

문제 상황/에러메시지 Node.js 환경에서 다중 쿼리를 실행하고 나서 발생한 오류다. 쿼리를 한 문장으로 실행되지 않게 하기 위해서 두 개의 쿼리를 세미콜론으로 구분해줬는데도 왜 이런 에러가 발생한 걸까? 문제 해결 const mysql = require("mysql"); const db = mysql.createConnection({ host: "호스트", port: "포트번호", user: "유저", password: "패스워드", database: "db", multipleStatements: true, }); db.connect(); module.exports = db; 다중 쿼리를 실행하기 전에 db 옵션에서 multipleStatments : true (다중 쿼리 사용)를 추가해준다. con..

SpringSecurity로 로그인을 구현했던 경험이 있는데 이번엔 Node.js를 학습하면서 Express로 Session을 이용한 인증을 정리해보려고 한다.포스팅은 생활코딩 'Express-Session-Auth'을 기반으로 내용을 정리할 것이다. https://opentutorials.org/module/3648 WEB4 - Express-Session-Auth 수업소개 이 수업은 Node.js 웹프래임웍인 Express에서 Session을 이용해 인증을 구현하는 방법을 알려드리는 수업입니다. 수업대상 로그인/로그아웃/접근제한과 같은 인증 기능을 구현하고 싶은 분 opentutorials.org 인증을 구현하는 방법을 떠올릴 때 보통 쿠키나 세션을 통한 방법을 떠올릴 수 있다. 하지만 쿠키는 브라우..

문제 상황 server.js // express 모듈 호출 const express = require("express"); const api = require("./routes/index"); const app = express(); const port = 3001; // api 처리는 './routes/index'에서 일괄처리 app.use(api); // server port 3001 할당 // 클라이언트와 다른 번호로 충돌나지 않도록 app.listen(port, () => { console.log(`Server run : http://localhost:${port}/`); }); index.js const express = require("express"); const router = expres..

props는 properties의 약자로 속성 값을 의미한다. 예제를 통해서 props를 알아보자. App.js import "./App.css"; import PropsStudy from "./component/PropsStudy"; function App() { return ( ); } export default App; PropsStudy라는 컴포넌트를 만든 후 App.js에 해당 컴포넌트를 3개 추가하고 컴포넌트에 값을 전달해보자. PropsStudy.js import { useState } from "react"; const PropsStudy = function (props) { const name = props.name; const age = props.age; const [weight, s..

State는 컴포넌트가 갖고 있는 속성 값으로서 리액트에서 이벤트에 의해 변경되는 동적인 값이다. const StateStudy = function () { let name = "Mike"; function changeName() { name = name === "Mike" ? "Jane" : "Mike"; console.log(name); } return ( State Test {name} Change ); }; export default StateStudy; StateStudy 컴포넌트를 생성해주고 버튼 태그에 name을 확인해서 Mike일 때 Jane으로 변경해주고 Jane일 때는 Mike로 변경해주는 changeName 함수를 추가했다. 하지만 버튼을 눌렀을 때 콘솔에서는 이름이 업데이트 됐지만 ..