신입개발자_장민기

app.get("/selectById", function(req, res){ getSelecteById(req, res); }) app.get("/insert", function(req, res){ getInsert(req, res); }) //3. 브라우저에서 불러오기 위한 코드 async function getSelection(req, res){ let connection; try { connection = oracledb.getConnection({ user: dbconfig.user, //DB 아이디 password: dbconfig.password, //DB 비밀번호 connectString: dbconfig.xid, //localhost: 1521/xe }) const result = (awa..

const express = require("express"); const app = express(); //서버 listen const server = app.listen(3004, ()=>{ console.log("Start Server: loocalhost: 3004"); }); //__dirname: 현재 디렉토리 //page 경로 설정 app.set("views", __dirname + "/views"); app.set("view engine", "ejs"); app.engine("html", require("ejs").renderFile); app.get("/", function(req, res){ res.render("index2.html"); //index2.html }) //1. data..

dbconfig.js module.exports={ user: "", password: "", xid: "localhost:1521/xe", externalAuth: false, } main.js const express = require("express"); const app = express(); //서버 listen const server = app.listen(3003, ()=>{ console.log("Start Server: loocalhost: 3003"); }); //__dirname: 현재 디렉토리 //page 경로 설정 app.set("views", __dirname + "/views"); app.set("view engine", "ejs"); app.engine("html", requ..

Node 버전 확인 node –v npm –npm npm init : yes 나올 때까지 엔터 -> Pakage.json 생성 Exit로 종료 폴더에서 js파일 생성 https://www.npmjs.com/ express검색 /* NodeJS는 자바스크릅티를 브라우저 밖에서 사용하게 해주는 프로그램 express는 서버를 개발하고자 하는 개발자를 위해 서버를 쉽게 구성할 수 있게 만든 프레임 워크 npm install express --save로 설치 !!서버 가동된 상태에서는 코드를 수정해도 반영되지 않음!! -> 서버 껐다가 다시 킬 것 */ const express = require("express"); const app = express(); const server = app.listen(3000..

import Button from "./Button"; import styled from "styled-components"; const StyledH1 = styled.h1` color: red; `; export default function App(){ const text_color="purple"; const text_font_size = "16px"; return( App A B ) } import styled from "styled-components" //1. html태그에 스타일 적용 ==> styled.태그명 ``형식 const StyledButton = styled.button` color: ${(props) => props.button_color || "blue"}; backgroun..

import Button from "./Button"; import styled from "styled-components"; const StyledH1 = styled.h1` color: red; `; export default function App(){ const text_color="purple"; return( App A B ) } import styled from "styled-components" //1. html태그에 스타일 적용 ==> styled.태그명 ``형식 const StyledButton = styled.button` color: ${(props) => props.button_color || "blue"}; background-color: yellow; font-size: 16p..

import Button from "./Button"; import styled from "styled-components"; const StyledH1 = styled.h1` color: red; `; export default function App(){ return( App A B ) } import styled from "styled-components" //1. html태그에 스타일 적용 ==> styled.태그명 ``형식 const StyledButton = styled.button` color: blue; background-color: yellow; font-size: 16px `; export default function Button({children}){ return( {childre..

내부파일 import "./App.css"; export default function App(){ //css설정, json, camel표기법 const btnStyle = { color: "while", backgroundColor: "teal", border: "1px solid teal", fontSize: "16px", } return( App Inline ) } 외부파일 import "./App.css"; import "./Button.css" export default function App(){ //css설정, json, camel표기법 return( App Inline ) } .btn{ color: "while"; background-color: "teal"; border: "1px sol..

import { useState } from "react"; export default function Login() { const [inputs, setInputs] = useState({ email: "", password: "", }); //유효성 체크 const [didEdit, setDidEdit] = useState({ //입력상태 저장 상태변수 email: false, password: false, }) //유효성 조건 지정 const emailIsInvalid = didEdit.email && !inputs.email.includes("@"); //이메일에는 @가 반드시 포함 const passwordIsInvalid = didEdit.password && !(inputs.password...

export default function Login() { function handleSubmit(event){ event.preventDefault(); const fd = new FormData(event.target); const email = fd.get("email"); const password = fd.get("password"); const address = fd.get("address"); console.log(email, password, address) } return ( Signup Email password address address2 Login ); }