본문 바로가기

Programing

 (37)
[nodejs] socket.io 실시간으로 사용자들끼리 채팅을 주고받기 위한 기능으로 간단하고, 많이 쓰이는 라이브러리 socket.io 설치 npm i socket.io import express from "express"; import SocketIO from "socket.io" import http from "http"; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use('/public', express.static(__dirname + "/public")) app.get("/", (req, res) => res.render("home")); app.get("/*", (req, res) => res..
[javascript] default parameter / arguments / rest parameter default parameter function plus (a, b = 10){ console.log(a + b) } plus(1); b값을 안 넣었을 때, 기본값으로 적용 arguments function example(a,b,c){ console.log(arguments) } example(2,3,4); [2,3,4] 를 담은 Array 출력. 모든 입력된 파라미터를 배열안에 넣어주는 역할 rest parameter function example2(...paramter){ console.log(paramter) } example2(1,2,3,4,5,6,7); paramter 종류가 많을경우, 들어오는 paramter 들을 전부 보여줌. * resp paramter 는 1개만 사용가능, 그리고 여러개 ..
[javascript] Spread Operator 스프레드 연산자를 사용하면 배열, 문자열, 객체 등 반복 가능한 객체 (Iterable Object)를 개별 요소로 분리할 수 있습니다. let array = ['hello','world'] console.log(...array); console.log('hello','world'); 배열에 붙이면 대괄호를 제거해준다. let a = [1,2,3] let b = ...a 배열,오브젝트 합치기/복사 (deep copy) * ...a 가 아닌 a를 넣게되면 값을 공유하기때문에 b값을 변경하면 a값도 변경이댐 하지만 ...a(deep copy)를 하게 된다면 독립적으로 사용 가능. 함수 파라미터 넣을 때 function plus(a,b,c){ console.log(a + b + c) } var array = ..
[javascript] Template literals Tagged Lierals 라고해서 함수로 문자를 해체할 수 있다. var name = 'park'; function nameSeparat(str, name){ console.log(str); console.log(name); } nameSeparat`안녕하세요 ${name} 입니다`; 첫번째 값으로 문자를 배열로, 중간중간 변수값들은 따로 저장이된다. 이전에 str + 변수 + str 처럼 했던 것 보다 훨씬 간편해졌다.
[React] - Lifecycle, useEffect componets 생성 - mount 재렌더링 - update 삭제 - unmount "Detail 컴포넌트 등장 전에 이것좀 해줘" "Detail 컴포넌트 사라지기 전에 이것좀 해줘" "Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇게 코드좀 실행해달라고 간섭할 수 있는데 간섭은 갈고리를 달아서 합니다. 갈고리를 달아서 코드를 넣어주면 됩니다. 그럼 진짜 페이지 장착시, 업데이트시, 제거시 코드실행가능 갈고리는 영어로 hook이라고 합니다. 그래서 저걸 Lifecycle hook 이라고 부릅니다. import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ ... console.log('안녕') }, []); re..
[React] - styled-components npm install styled-components import styled from 'styled-components'; let Box = styled.div` padding : 20px; color : grey `; let YellowBtn = styled.button` background : yellow; color : black; padding : 10px; `; function Detail(){ return ( 버튼 ) } 장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있습니다. 장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다. 장점3. 페이지 로딩시간 단축됩니다. 단점1. JS 파일이 매우 복잡해집니다. 그리고 이 컴포넌트가 styled 인지 아니면 ..
[React] - react-router-dom npm install react-router-dom@6 npm 설치 세팅 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); app 감싸기 페이지 나누는 법 import { Routes, Route, Link } from 'react-router-dom' import Detail from './routes/Detail.js' import About from './roues/About.js' function App(){ return ( ... ) } 페이지 이동 버튼 홈 상세페이지 페이지 이동기능 useNavigate() ..
[React] - 이미지 넣는 법 import bg from '../bg.jpg'; const Test = () => { return ( ); } 리액트로 개발을 끝내면 build 작업이라는걸 하는데, 지금까지 짰던 코드를 한 파일로 압축해주는 작업입니다. src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다. 그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣으면 되는데 js 파일은 그럴 일은 거의 없고 이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다. public 폴더 안에 이미지가 있는 경우 나는 그냥 src 폴더안에 resource 폴더에 넣어서 사용한다.

티스토리툴바