JiSoo's Devlog

양식 제출 처리 방법1. 분리된 독립형 백엔드 API양식 데이터를 포함한 요청을 받아들이고 그 데이터를 데이터베이스에 저장 2. 통합된 Next.js 애플리케이션 => 서버 액션양식을 직접 제출받고 데이터베이스에 데이터 저장  폼 액션 설정서버 액션 없이 그냥 formAction으로 제출 처리도 가능form에 action 프로퍼티를 사용해 함수 전달 가능action은 React를 쓰지 않고도 양식 요소에 설정 가능한 기본 속성양식 요소에서 React를 사용하지 않거나 formAction 기능을 지원하지 않는 React 버전을 사용할 경우에는 양식 요소에 설정되는 액션 속성이 URL을 정의한다NextJS를 사용하는 경우에 action 속성은 URL 대신 함수를 받아들이고 브라우저 기본 동작을 막아 URL로..

백엔드 API 웹 서버 시작npm start  백엔드 데이터 가져오기1. NextJS의 별도 API를 통해 클라이언트 측에서 처리useEffect(() => { async function fetchNews() { const response = await fetch("http://localhos:8080/news"); if (!response.ok) { setError("Failed to fetch news."); setIsLoading(false); } const news = await response.json(); setIsLoading(false); setNews(news); } fetchNews(); }..

병렬 라우트 설정별도의 경로를 가지는 라우트 두 개의 콘텐츠를 동일 페이지에서 렌더링병렬 라우팅 설정하려면 병렬 라우트를 포함하려는 경로에 레이아웃 파일 추가병렬 라우트마다 @로 시작하는 하위 폴더 하나 추가 -> 병렬 라우트가 두 개라면 폴더 두 개 추가app ㄴ archive ㄴ @archive ㄴ page.js ㄴ @latest ㄴ page.js 일반적으로 레이아웃 컴포넌트 함수는 {children} 프로퍼티를 받는다NextJS는 병렬 라우트 폴더와 인접해 있다면 해당 레이아웃 컴포넌트에 프로퍼티를 자동으로 추가한다@archive 라우트 콘텐츠 => archive 프로퍼티@latest 라우트 콘텐츠 => latest 프로퍼티export default fun..

프로젝트 생성npx create-next-app@latest    app 폴더 -> 다양한 페이지 설정                    새로운 폴더를 추가해 라우트로 취급하는 새로운 경로 생성 가능                     /about이라는 라우트 지원하고 싶으면 about 폴더 생성                     이 폴더만으로는 아무것도 할 수 없음! -> page.js 파일 추가 page.js 파일 -> NextJS에게 페이지를 렌더링해야 한다고 알려주는 것서버 컴포넌트 -> 컴포넌트가 서버에 렌더링 되고 컴포넌트 함수가 서버에 실행되는 것 보장                            서버 컴포넌트는 HTML로 렌더링 되고 전환되어 브라우저로 보내진다  페이지 간 이동Nex..

패턴이란 다른 기능에 따라 코드를 논리적으로 나누는 것을 의미한다 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')임포트한 파일 시스템 기능을 통해 사용 가능한 메서드로..

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 ..