Minzzi야

[Next.js] 프로젝트 생성

Next.js는 서버사이드렌더링을 지원해주는 프레임워크이다.서버사이드 렌더링의 장점은 아래 포스팅에 정리해놓았다. SSR의 경험을 쌓고 싶어서 Next.js를 사용해보려고 한다.2024.05.30 - [Front-end/React] - [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리 [React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPAworld-developer.tistory.com프로젝트 생성하기npx create-next-app@latest 만약 typescript를 사용하고..

TypeError: Cannot destructure property '변수명' of 'req.body' as it is undefined.

request body에 올바른 json 형식으로 값을 보내줬음에도 불구하고 아래와 같은 오류가 났다.TypeError: Cannot destructure property 'user_id' of 'req.body' as it is undefined. 해당 오류는 body값에 있는 user_id를 인식하지 못한다는 의미인데, body를 파싱할 수 있도록 미들웨어를 추가해주어야 한다. express를 사용한다면 아래 코드를 추가하자. const express = require('express')const app = express();app.use(express.json()); 해당 오류는 app.use(express.json());이 없기 때문에 발생하는 오류이다. app.use(express.json())..

[React] 모던 리액트 딥다이브 4. 서버 사이드 렌더링 주요 정리

1. 싱글 페이지 애플리케이션이란?싱글 페이지 애플리케이션의 약자인 SPA는 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPA는 말 그대로 하나의 페이지로 구현되며 새로운 페이지를 받아오지 않는다. 최초에 첫 페이지에서 데이터를 모두 불러온 이후에 페이지 전환 단계에서는 자바스크립트와 브러우저의 history.pushState와 history.replaceState로 이뤄지기 때문에 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. SPA는 최초 첫 페이지를 받을 때는 SSR을 사용할 수 있으며 이후에는 CSR을 이용하여 렌더링을 진행해야 한다. 1.1 SPA에서 페이지 전환이 일어나는 과정을 설명하시오페이지 전환 시..

[React] SPA, CSR은 같을까 다를까

답부터 이야기 하자면 SPA, CSR은 같지 않다. 애초에 비교 대상이 아니다. CSR(Client Side Rendering)사용자가 웹 브라우저에 주소를 입력하면 데이터가 없는 빈 HTML만 받아오고, 데이터는 여러 static 파일들이 로드된 이후에 요청해서 받아오는 방식으로 진행됨SSR(Server Side Rendering)CSR과 반대로 데이터까지 모두 삽입하여 완성된 HTML을 받아오는 방식으로 진행됨SPA(Single Page Application)서버로부터 첫 페이지만 받아오고 이후에는 동적으로 페이지를 구성하여 새로운 페이지를 받아오지 않는 웹 어플리케이션을 말함데이터를 수정하거나 조회할 때 페이지가 새로고침 되지 않고 다른 페이지로 넘어가지 않음MPA(Multiple Page Appl..

express에서 API 구현시 URL parameters 받는 방법

문제 해결 요약URL parameters 가져올때는 아래 방법으로만 가져와야 한다.API 주소는 /games/:gameId로 한다.const id = req.params.gameId;const game_id = req.params.gameId;const {gameId} = req.params;API 구현 공부를 하다가 URL parameters을 인식하지 못하는 문제가 발생했다. 아래 코드가 GET method를 사용하여 gameId를 가진 게임의 상세 정보를 가지고 오는 API 구현 코드이다. // games.jsconst express = require("express");const router = express.Router();const {gameDetail} = require('../control..

Node.js에서 .env 변수 안불러와짐

express를 사용해서 서버를 구성하던중 port번호는 env에 저장해서 사용하려고 했다.그런데 계속 localhost:3000이 오류가 발생했다. 실행했던 코드는 아래와 같다.// app.jsconst express = require("express");const app = express();const dotenv = require("dotenv");dotenv.config();app.listen(process.env.PORT);발생할 수 있는 원인은 아래와 같다.1. PORT번호 다름//.envPORT=3000포트번호는 잘 들어갔으니 문제가 되지 않는다. 2. 모듈이 정상적으로 다운로드가 안됨//package.json{ "dependencies": { "dotenv": "^16.4.5", ..

두드리면 열리더라

취업 준비로 고민과 걱정이 많을 시기에 파드1기 회장님이신 현종오빠랑 커피챗을 할 수 있는 기회가 생겼다. 커피챗을 해본적이 없어서 약간의 두려운 마음을 가지고 오빠에게 질문하고 싶은 것을 준비해서 대략 1시간 정도의 커피챗에 참여했다. 앞으로의 커리어에서 사람들과 만나는 일들이 많아질텐데 현종오빠와의 커피챗이 아주 좋은 첫 단추였다고 생각한다. 실제로 오빠로부터 피가되고 살이되는 조언만 들을 수 있었다. 그리고 좋은 사람들도 추천을 받을 수 있었다. 그 중 한 분이 능력있고 실력 좋으신 CTO님이신데(일부러 성함 언급은 안하겠다), 이분을 만나려면 원래 1시간 당 30만원을 내고 만날 수 있는 분이고 인지도도 높으셨다. 개발에 대한 경험도 별로 없는 내가 과연 이 분께 커피챗 연락을 드리는 것이 가능할..

[Crop] 프로젝트 팀스페이스 생성!

프로젝트 시작 계기SSR에 대해 경험을 쌓고 싶어서 Next.js를 사용해봐야겠다는 생각을 했다.또, 그냥 "화면상으로 표시하고 완성!" 으로 끝났던 이전 프로젝트와는 다르게 긍정적인 사용자 경험을 만들어주기 위한 노력을 해보고 싶었다. 렌더링이 오래걸리는 페이지에서 시간을 줄여보고 싶었고,,,그니까 결국 성능 올리기 위한 경험의 갈급함이 커서 이를 중점으로 둔 프로젝트를 기획했다. 또 파드에서 프로젝트를 진행할 땐 오류해결을 기록할 시간이 정말 부족해서 하나하나 다 기록해놓지 못했다(아주 큰 실수였다)그때로 다시 돌아가 어떤 오류가 있었는지 살펴보는게 더 오래 걸릴 것 같아서 해당 프로젝트를 현재 시점에서 리팩토링을 진행하려고 하고,이번 프로젝트를 통해서 오류에 대해 깊게 공부하고 고민해서 기록해보려고..

[회고] 프로그래머스 풀스택 데브코스 단위 1차

프로그래머스 데브코스 과정의 첫 한 달이 끝났다.데브코스는 전반적으로 알찬 구성으로 준비되었고, 따라가기에 부족함은 없었다. 2차 단위기간때는 좀 더 밀도있고 알차게 배운 내용들을 머릿속에 집어 넣을 수 있길 바라는 마음으로 짧게 회고해보려고 한다.  개인적으로 자랑스럽게 여기는 것들과 아쉬움이 남는 것들이 있는 것 같다.자랑스러운 것은 2차 단위기간때는 좀 더 활발히, 깊게 진행하고, 아쉬움이 남는 것은 해결 방법을 찾고 노력해야겠다.자랑스럽게 여기는 것 👉 네트워킹 : 데브코스가 끝날 때쯤에는 정말 많은 사람들이 남을 것 같다. (물론 모두 무사히 다 수료한다는 가정하에) 한 달 동안 온라인임에도 불구하고 많은 사람들과 소통할 수 있었다. 특히 스터디에서 만난 사람들이 기억에 남는다. 모던 리액트 ..