타코딩

params 와 query string app.delete("/:id/:name/:address", (req, res, next) => { let { id, name, address } = req.params; // const id = req.params.id; // const name = req.params.name; // const address = req.params.address; res.send(`DELETE: /:id -->${id},${name},${address}`); }); //GET요청 --> http://localhost:8080/test/?keyword=bts&name=hong app.get("/test", (req, res, next) => { let { keyword, name ..

{ %> foreach 등 자바스크립트 문법으로 렌더링을 할 때 사용하면 된다 {%> 게시글을 반복적으로 생성하는 작업도 가능하다

express 익스프레스 미들웨어 익스프레스는 체이닝도 가능하다 path경로가 아직 정해지지 않을때는 주석처리하거나 입력하지 않아야 오류가 잘 안난다. const express = require("express"); const server = express(); const course = [ { name: "HTML" }, { name: "CSS" }, { name: "JavaScript" }, { name: "Node" }, { name: "Express" }, ]; server.get("/", (req, res) => { //console.log(req.headers); res.send("hello world"); }); server.get("/course", (req, res) => { //cons..

typescript npx create-react-app my-app --template typescript npm install --save typescript @types/node @types/react @types/react-dom @types/jest styled-component 가 6 버전이면 확장자면 tsx로 바꿔주면 된다 import React from "react"; import styled from "styled-components"; const Container = styled.div``; interface CircleProp { bgColor: string; } const Circle = ({bgColor}: CircleProp) => { return ; }; export defau..

Node.js Json const http = require("http"); const course = [ { name: "HTML" }, { name: "CSS" }, { name: "JavaScript" }, { name: "Node" }, { name: "Express" }, ]; //서버 생성 const server = http.createServer((요청, 응답) => { //url : /request.url const url = 요청.url; const method = 요청.method; if (url === "/course") { if (method == "GET") { const strCourse = JSON.stringify(course); 응답.writeHead(200, { "Cont..

styled-component vscode-styled-components 익스텐션다운로드 npm install styled-components 터미널 입력 import styled from "styled-components"; function App() { const Father = styled.div` display: flex; `; const Boxone = styled.div` background-color: teal; width: 100px; height: 100px; `; const Boxtwo = styled.div` background-color: tomato; width: 100px; height: 100px; `; return ( ); } styled-component를 이용해 컴포넌트..

node.js EJS문법 const http = require("http"); const fs = require("fs"); const ejs = require("ejs"); const name = "hong"; let courses = [{ name: "html" }, { name: "node.js" }, { name: "CSS" }, { name: "Javascript" }]; let scoreList = [ { name: "html", grade: "A" }, { name: "node.js", grade: "A" }, { name: "CSS", grade: "A" }, { name: "Javascript", grade: "A" }, ]; //서버 생성 : port - 3000 console.log(..

리액트 라우터 돔 react-router-dom 설치 npm install react-router-dom@6터미널 ndex.js에 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 브라우저 라우터 import 꼭해야함 app.js에서 route,routes,link,navigate,nested routes import하기 import { Routes, Route, Link } from "react-router-dom"; 상세페이지 { navigate("/"); }}> 홈

HTTP/HTTPS 1)HTTP/HTTPS -Hypertext Transfer Protocol (Request - Response Protocol) request(URL:http://www.naver.com/index.do) client ----------------> server server 브라우저

tmdb를 이용한 영화사이트 제작 중 n초 후 영화출력과 동시에 검색어가 자동저장되는 기능을 구현하기 위해 코드를 기록 검색기록삭제하는버튼 let arr = localStorage.getItem("input") ? JSON.parse(localStorage.getItem("input")) : []; let timeoutId; document.querySelector(".search-input").addEventListener("input", (e) => { let copy = [...arr]; clearTimeout(timeoutId); if (arr.includes(document.querySelector(".search-input").value)) return false; if (document.qu..