JiSoo's Devlog

요청 및 사용자 간의 데이터 공유const products = [];// admin/add-product => POSTrouter.post("/add-product", (req, res, next) => { products.push({ title: req.body.title }); res.redirect("/");});exports.routes = router;exports.products = products;객체나 배열 같은 참조 유형을 내보내기 하면 다른 파일에서 변경하면 저절로 업데이트된다→ 데이터 공유  템플릿 엔진html 페이지에 동적 콘텐츠를 넣기 위해 사용한다 · EJS일반 HTML을 사용하고 단순한 JavaScript를 사용할 수 있게 하는 플레이스홀더가 있어 for 루프, if 문 작..

Express.jsExpress는 파싱을 대신해 주기 위한 프로젝트 내부에 쉽게 연결하는 다른 패키지를 쉽게 설치하도록 도와준다매우 유연하며 특별한 기능들을 과도하게 추가하지 않는다애플리케이션을 구축하거나 유입되는 요청들을 처리함에 있어 특정 방식을 제공함으로써 높은 확장성을 지닌다Express를 대상으로 구축된 제3자 패키지 수가 수천 가지에 달하고 크게 새로 구성할 필요 없이도 쉽게 Node Express 애플리케이션에 추가할 수 있다 Express.js 설정npm install --save express--save dev가 아닌 --save인 이유는 프로덕션 의존성이기 때문프로덕션은 사용자에게 실제로 제공되는 환경개발환경은 개발자들이 개발하고 테스트하는 환경 프로덕션 의존성: 실제 서비스가 돌아갈 ..

NPM: 노드 패키지 매니저npm을 사용하면 노드 프로젝트라 불리는 작업의 초기 내용을 설정할 수 있다npm initpackage.json 파일 생성 개별 설정된 이름이 있는 일반 스크립트의 경우 npm run 입력 후에 스크립트 이름을 입력해야 한다"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node app.js", "start-server": "node app.js" },start-server의 경우 npm run start-server라고 입력해야 서버가 시작된다  제3자 패키지 설치직접 작성하지 않은 어떤 기능이나 코드를 사용하고 싶지만 Node.js에도 포함되지 않은 경우 패키지들을 ..

Node.js는 JavaScript를 다른 환경에서 구현한 것Node.js를 사용해 JavaScript를 브라우저 밖에서도 실행할 수 있다  Node를 시작하는 방법 중 하나는 Node.js가 제공하는 대화형 모드로 진입하는 REPL사용자 입력값을 읽고 평가하고 결괏값을 출력하고 돌아가 새로운 입력값을 기다린다$ node이렇게 실행하면 터미널이나 명령 프롬프트의 새로운 모드에 진입 node 다음에 파일명을 추가로 입력하면 대화형 모드에 진입하는 대신 자바스크립트 코드 파일을 Node.js 파일로 실행하게 된다 파일 실행const fs = require('fs')fs.writeFileSync('hello.txt', 'hello from Node.js')임포트한 파일 시스템 기능을 통해 사용 가능한 메서드로..

CSS ModulesNext.js에서는 어떤 설정을 따로 하지 않아도 바로 CSS 모듈을 사용할 수 있다styled components, tailwind, chakra 등.module.css 확장자를 사용해 CSS 모듈을 기본적으로 지원한다CSS 모듈은 고유한 클래스 이름을 자동 생성해 CSS범위를 로컬로 지정하기 때문에 다른 파일에서 동일한 클래스 이름 사용 가능 global CSS 파일 → 애플리케이션 전체에 적용 import styles from "../styles/navigation.module.css";export default function Navigation() { const path = usePathname(); console.log(path); return (  .nav { ..

client에서 모든 것을 fetch 하려면 보안을 위해 항상 API를 중간에 만들어 요청하고 API가 안전한 환경에 있다면 그 뒤에 데이터베이스에 요청을 보낸다useState를 사용하면 metadata도 사용하지 못한다  Server Side어떤 일이 발생하기를 기다리려고 await를 사용할 때 async를 무조건 써야 한다!useEffect, useState를 쓰지 않아도 되고 로딩 상태를 구현하지 않아도 된다export const metadata = { title: "Home",};const URL = "https://nomad-movies.nomadcoders.workers.dev/movies";async function getMovies() { const response = await fet..