본문 바로가기

전체 글

(40)
[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 처럼 했던 것 보다 훨씬 간편해졌다.
프론트엔드 면접대비 예상질문 브라우저의 동작 방식을 설명해보세요. 브라우저는 사용자가 요청한 웹 페이지의 HTML, CSS, JavaScript 등의 리소스를 서버로부터 다운로드하고 파싱합니다. 그 다음 렌더링 엔진을 사용하여 문서 객체 모델(DOM)을 구성하고, 스타일 시트(CSS) 정보를 이용하여 렌더 트리(Render Tree)를 생성합니다. 마지막으로 렌더 트리를 기반으로 레이아웃을 수행하고, 화면에 픽셀 단위로 출력합니다. HTML, CSS, JavaScript의 차이점을 설명해보세요. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어입니다. CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 스타일 시트 언어입니다. JavaScript는 웹 페이지의 동적인 기능을 구현하는 스크립트 언어입니다. CSS의 박스 모델..
[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() ..