JiSoo's Devlog

패턴이란 다른 기능에 따라 코드를 논리적으로 나누는 것을 의미한다 MVC란?MVC는 Model View Controller의 약자로 모델, 뷰, 컨트롤러와 관련되어 있다모델은 객체나 데이터를 나타내는 코드의 한 부분으로 데이터 관련 작업을 할 수 있게 한다뷰는 사용자가 보게 되는 화면을 책임지는데 애플리케이션 코드와 분리되어 있고 뷰를 생성하기 위해 템플릿 엔진에 주입하는 데이터와 아주 조금만 통합되어 있다컨트롤러는 모델과 뷰 사이의 연결점으로 모델과 함께 데이터를 저장하거나 저장 프로세스를 유발하거나 뷰에서 가져온 데이터를 전달한다 라우트는 어떤 경로에 따른 http 메서드에 따라 어떤 컨트롤러 코드를 실행할지 정의한다컨트롤러는 작업할 모델과 렌더링할 뷰를 정의하는 역할을 하는데 이게 바로 패턴!  컨..

요청 및 사용자 간의 데이터 공유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..

Next.js는 app 폴더 안의 page라는 파일을 참조한다컴포넌트 이름은 중요하지 않지만 그 컴포넌트가 default 컴포넌트로 export 되어야 한다는 게 중요!React를 따로 import 하지 않아도 된다  Defining Routesreact-router는 기본적인 리액트 애플리케이션에서 라우팅 하는 방법url을 지정하고 컴포넌트 render를 요청 Next.js는 폴더를 사용해 경로를 정의하는 파일 시스템 기반 라우터를 사용한다중첩된 경로를 만들려면 폴더를 중첩하면 된다 1. 파일 시스템을 통해 경로를 표시2. page파일을 해당 디렉토리 안에 생성 실제로 보여지는 페이지를 만들려면 page.tsx나 page.jsx 파일을 폴더 내부에 생성해야 한다직접적인 page파일이 없는 폴더는 실제 ..

☆ React는 라이브러리 Next.js는 프레임워크 라이브러리는 코드 내에서 사용하려고 설치하는 것이지만 사용의 주체는 우리우리가 모든 결정을 내리고 필요할 때 사용할 수 있다React는 UI 인터페이스를 빌드하는 데 사용하는 라이브러리  프레임워크에서는 우리의 주도권이 없다프레임워크는 여러 결정을 우리 대신 해주고 자동화하도록 할 수 있다Next.js에서 뭔가를 export하면 Next.js가 그걸 받아와서 모양, 이름이 맞다면 페이지의 title을 바꿔준다  설치 방법수동설치방법npm init -ypackage.json 파일 생성 npm install react@latest next@latest react-dom@latest  app 폴더 안에 page 파일 생성page.tsx 혹은 page.jsx..

Redux Toolkit간단하게 말하면 많은 지름길들이 있는 Package라고 보면 된다적은 양의 Redux 코드로 같은 기능을 하도록 도와주는 것 ! npm install @reduxjs/toolkitoryarn add @reduxjs/toolkit  createActionconst ADD = "ADD";const DELETE = "DELETE";const addToDo = text => { return { type: ADD, text };};const deleteToDo = id => { return { type: DELETE, id: parseInt(id) };};↓ ↓ ↓ ↓const addToDo = createAction("ADD");const deleteToDo ..