혼자 적어보는 노트

route들을 만들다보면 app.js파일에 너무 많은 route들이 생기게 되는데 use()를 통해 url이 겹치는 라우터들 다른 폴더로 분리할 수 있다. 일단 예시로 간단하게 작성해보았다. [app.js] const express = require("express"); const app = express(); const port = 8080; app.post("/video", (req, res) => { res.send("home"); }); app.post("/video/name", (req, res) => { res.send("Name"); }); app.post("/video/popular", (req, res) => { res.send("Popular"); }); app.listen(port, ..

이전에 express를 사용해 본 적 있었는데 그 때는 클론코딩을 하느라 제대로 머리 속에 들어오지 않은 것 같아서😓 이번에 서버에 api를 만들면서 다시 정리하며 익혀보기로 했다 👊👊 express express는 node에서 제공하는 http 모듈과 connect 컴포넌트를 기반으로 하는 웹 프레임워크이다. 즉 Node.js를 사용하여 서버를 쉽게 구성할 수 있게 만들어주는 장치이다. packge.json 생성하기 npm init 폴더 안에 위 명령어로 package.json 파일을 생성한다. express 설치 npm i express express route 코드 작성 폴더 안에 app.js폴더를 생성하고 코드를 작성한다. const express = require('express')'; // e..

이전에 Vanilla Javascript로 디바운싱을 구현해본 적 있었는데 이전에 만들고 있던 React 사이드 프로젝트인 todoList를 리팩토링 하면서 적용해보면 좋을 것 같아서 디바운싱을 간단하게 구현해보려고 한다. debounce 연속으로 호출되는 함수들 중 마지막 함수(or 처음 호출된 함수)만 호출하도록 하는 것 todoList의 step값이 onChange될 경우 변경한 값이 바로 데이터베이스에 저장되기를 원하는 상황이다. 현재 데이터베이스는 firebase의 realtime base를 사용하고 있었고 value가 변경될 때마다 데이터통신을 하는 것이 부담이 된다고 생각이 들었다. [코드의 일부] import React, { useCallback, useState } from "react"..

간단한 애니메이션들은 css의 transition을 사용하게 되는데 border에 애니메이션을 넣을 경우 예상처럼 되지 않는다. input { display: block; width: 100%; padding: 1em; margin-top: 1em; border-bottom: 1px solid #ddd; transition: all ease 0.5s; } input:focus { border-bottom: 2px solid #3844bd; } 위처럼 같이 transition을 사용하여 border-bottom: 1px solid #ddd 에서 border-bottom: 2px solid #3844bd 로 변경 할 경우 자연스럽게 border가 2px로 되면서 색상이 변경되는 것을 예상하였지만 컬러는 자연..

useRef()는 따로따로 하나씩만 선언해서 사용했었는데 검색을 하다 우연히 여러개를 지정해서 관리할 수 있다는 것을 알게되었다. const inputRef = useRef({}); 초기값에 빈 객체를 넣어준 후 아래와 같이 ref를 설정하면 해당 요소가 객체에 담기게 된다. (inputRef.current["text"] = el)} /> (inputRef.current["email"] = el)} /> 인덱스를 이용하여 배열처럼도 저장 가능하다. const listRef = useRef([]); {posts.map((post, index) => ( (listRef.current[index] = el)}> {post.content} ))}

여러개의 더미데이터 생성 방법 import React, { useEffect, useState } from "react"; import PostListItem from "./PostListItem"; import faker from "faker"; import { nanoid } from "nanoid"; const PostList = () => { const [postData, setPostData] = useState({ posts: [], loadPosts: false, }); const dummyPosts = (number) => { return Array(number) .fill() .map(() => ({ id: nanoid(), content: faker.lorem.paragraph(), i..

Manifest: Line: 1, column: 1, Syntax error 루트의 index.html에서 해당 부분을 삭제해주면된다. 처음 create-react-app 생성 후 세팅할 때 안지워줘서 생긴 일

리액트로 무언가를 만들 때 늘 CRA(create-react-app)을 사용하여 개발환경을 구축했었는데 궁금증이 생겨서 CRA없이 환경을 구축해보고 싶었다. 몇가지 검색을 해서 블로그 글을 보며 해보긴 했는데 특히나 웹팩 부분에서 각각 다르게 세팅을 해놓아서 뭐가 뭔지 이해하기가 어려웠다. 하나씩 이해를 하며 정리를 해보기로 했다. 폴더 및 package.json 생성 프로젝트 폴더를 생성하고 package.json 파일을 만들기 위한 초기화를 진행한다 npm init -y npm init -y 를 사용하면 default값으로 설정 된 pacage.json파일을 생성할 수 있다. 프로젝트 파일 안에 src, dist, public폴더를 생성한다. src : React로 작업할 폴더 dist : 번들링 결..