Illie

1. 서버 셋팅 1) npm init yarn으로 package.json 파일 생성 (버전 관리 편리) - "script" : 패키지의 생명주기에서 다양한 타이밍에 자주 사용할 commend를 alias(별칭)을 통해 지정해 둘 수 있는 dictionary - "dependencies" : 필드에 자동으로 install한 '패키지 이름과 '버전' - "devDependencies" : 개발시에만 필요한 의존 패키지 2) npm i nodemon -D - nodemon : 서버 코드를 변경할 때마다 자동으로 시작해 줌 3) npm i @babel/core @babel/cli @babel/node -D @babel/core : 핵심적인 동작이 담겨있는 바벨 코어 @babel/cli : 커멘드라인 명령어를 지..

1. express? 서버를 쉽게 짤 수 있게 도와주는 라이브러리 const express = require("express"); const app = express(); app.listen(8800, () => { console.log("Backend server is running~!"); }); 2. mongoose const mongoose = require("mongoose"); const dotenv = require("dotenv"); dotenv.config(); main().catch((err) => console.log(err)); async function main() { await mongoose .connect(process.env.MONGO_URL) .then(() => cons..

1. git에서 특정 브랜치만 clone 하기 git clone -b {branch_name} --single-branch {저장소 URL} - 뒤에 점(.)을 찍어준다면 파일들이 바로 생성되고, - 뒤에 점(.)을 찍지 않는다면 폴더가 들어온다 2. useState const [현재 상태, Setter 상태] = useState(__초기값__); const [isScrolled, setIsScrolled] = useState(false); Hook이라는 기능을 통해 함수형 컴포넌트에서 상태 관리를 한다 3. useRef useRef는 useState와 다르게 리렌더링 하지 않고, 컴포넌트의 속성만 수정, 저장한다 즉, 불필요한 렌더링을 막을 수 있다 예시1 const listRef = useRef();..

1. react-router-dom(6.3.0 버전) import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; const App = () => { return ( ); }; 5버전과 많이 달라서 찾는다고 조금 헤맸다 - Switch는 더이상 지원하지 않는다고 한다 대신 를 쓴다 - 1-1. user이 로그인 되어 있을 때와 로그인 되어 있지 않을 때의 경로 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; const App = () => { const user = true; return ( ); }; export default App; user이 로그인..

1. LOGIN auth.js router.post("/login", async (req, res) => { try { } catch { } }); 로그인 할 수 있게 "/login" 경로를 지정해주고 async, await로 비동기 처리 하고 try,catch 하자! 가독성을 위해 try, catch만 따로 빼서 보려고 했는데 가독성이 더 안좋아진 것 같다 try { const user = await User.findOne({ email: req.body.email }); !user && res.status(401).json("Wrong password or username!"); res.status(200).json(); } catch (err) { res.status(500).json(err); }..

1. 초기 셋팅 백엔드 부분이 필요하므로 폴더를 둘로 나눠준다! 기존에 했던 UI는 client로 넣고 터미널을 실행시킨다 > cd api (api 폴더로 들어가 줌) > npm init (package.json파일을 만들어준다; npm: 노드 패키지 매니저, 라이브러리 설치를 쉽게 도와주는 라이브러리) > yarn add express mongoose nodemon dotenv jsonwebtoken (필요한 것들을 설치해준다) 1. express 연동 express? 서버를 매우 쉽게 짤 수 있게 도와주는 라이브러리 api 폴더 안에 index.js를 만들고 거기에 express 패키지를 호출한다 (1,2줄) app.listen으로 서버를 실행하고 서버 실행이 잘 되었다는 의미로 "백엔드 이즈 러닝~..

1. 마우스를 오버했을 때 영상 재생하기 const [isHovered, setIsHovered] = useState(false); const trailer = "https://영상 주소 생략"; setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > {isHovered && ( 1 hour 14 mins +16 1999 Lorem ipsum ... Action )} 리액트는 참 신기한게 HTML 사이에 중괄호{}가 난무한다 여튼 마우스 오버 중이면 = setIsHover(true)이면 {중괄호 안의 비디오가 자동 재생된다} 2. register 페이지 구현하기 아래에 email을 적어 Get Started 눌러 이메일을 등록하고, 비밀번호를 또 ..

1. useRef를 활용 useRef는 useState와 다르게 리렌더링 하지 않고, 컴포넌트의 속성만 수정, 저장한다 즉, 불필요한 렌더링을 막을 수 있다 이정도만 알고 넘어가자, 어짜피 자주 나와서 자주 반복하게 될거다 1. 클릭 시, handleClick 함수가 활용될 수 있도록 하자 handleClick("left")}/> handleClick("right")}/> 왼쪽이 ArrowLeft, 오른쪽이 ArrowRight이다 저걸 누르면 왼쪽으로 이동하거나 오른쪽으로 이동해야 한다 (의도) 2. handleClick의 구성을 파헤쳐보자 const listRef = useRef(); const handleClick = (direction) => { if (direction === "left") { l..