styles.js 자동완성이 안되요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
styles.js 자동완성이 안되는데 익스텐션 뭐 설치해야되나요?
- react
- node.js
- seo
- graphql
- next.js
yoonseong
댓글 1
좋아요 1
조회수 386
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
캐러셀 arrow 위치 질문
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
다음 부분과 같이 아주 작게 이상한 위치에 나오는데 이를 옮기는 방법을 알고 싶습니다
- react
- node.js
- seo
- graphql
- next.js
손성오
댓글 1
좋아요 0
조회수 380
훈훈한 자바스크립트_eventListener를 활용한 태그 삭제
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
아래코드를 입력했는데, newLi dblclick했을때 삭제처리가 되지 않습니다. 문제가 뭘까요? const todoInput = document.querySelector("#todo-input"); const createTodo = function () { const todoList = document.querySelector("#todo-list"); //List자체를 받아오기 const newLi = document.createElement("li"); const newSpan = document.createElement("span"); /** * pseudo: (addEventListner) * 할일이 완료가 된지 안된 일인지 알 수가 없음 -> EventListner를 추가 * 버튼태그와 함께 온클릭 이벤트를 생성 */ //02-addEventListner파트: 버튼태그 추가 및 Event속성(onClick 추가) const newBtn = document.createElement("button"); newBtn.addEventListener("click", () => { //클릭을 했을 때 어떻게 할지에 대한 내용을 익명 함수로 지정 newLi.classList.toggle("complete"); //버튼을 눌렀을 때 새로운 클래스를 추가해준다 }); //02-addEventListner: 당연히 삭제도 되어야할텐데... (더블클릭 -> 삭제) newLi.addEventListener("dblclick", () => { newLi.remove(); }); newSpan.textContent = todoInput.value; newLi.append(newBtn); newLi.appendChild(newSpan); todoList.appendChild(newLi); //왜 굳이 span태그를 만들고 span 태그를 List에 추가한 건지는 알 수가 없으나.. 나중에 알려주겠지.. todoInput.value = " "; console.log(newLi); }; //여기까지만 했을때는 기능상 부족한 부분이 상당히 많음 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value) { //만약 키보드값에 대해 enter값이 눌리면 -> createTodo(); } };
- react
- node.js
- seo
- graphql
- next.js
nazombwa
댓글 1
좋아요 0
조회수 246
'정의되지 않음'일 수 있는 개체를 호출할 수 없습니다 오류 질문
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 과제 중 궁금한 점이 있어 질문 남깁니다 pages - index 파일 export default function DetailBoardPage(): JSX.Element { return ( <> <DetailBoard></DetailBoard> <CommentWrite></CommentWrite> <CommentList></CommentList> </> ); } board list presenter 파일 export default function CommentListItemUI( props: ICommentListItemUI ): JSX.Element { // 수정 아이콘 클릭 시 수정 화면으로 전환 const [isEdit, setIsEdit] = useState(false); const onClickUpdateIcon = (): void => { setIsEdit(true); return ( <> {!isEdit && ( . . . )} {isEdit && ( <CommentWrite item={props.item} isEdit={true} setIsEdit={setIsEdit} ></CommentWrite> )} </> ); } CommentWrite 컴포넌트를 두 곳에서 사용하고 있습니다 1번에서는 아무런 props 인자를 넘겨주지 않고 있고요 2번에서는 3가지 props 인자를 넘겨주고 있습니다 types 파일 export interface ICommentWrite { item?: IBoardComment; isEdit?: boolean; setIsEdit?: Dispatch<SetStateAction<boolean>>; } 이에 맞춰 작성한 interface 입니다 setIsEdit state에 ? 기호를 붙이니 CommentWrite 파일(바로 아래 파일)의 props.setIsEdit state 사용 구간에서 '정의되지 않음'일 수 있는 개체를 호출할 수 없다는 오류가 뜹니다 export default function CommentWrite(props: ICommentWrite): JSX.Element { const onClickUpdate = async (): Promise<void> => { . . . props.setIsEdit(false); }; const onClickCancel = (): void => { props.setIsEdit(false); }; return ( . . . ); } 찾아보니 undefined / null 값을 제대로 다루지 못할 때 생기는 오류라고 하는데요 해당 state는 한 곳에서만 props 인자로 전달하고 있기 때문에 undefined 값이 나오는 경우가 필연적입니다 이런 경우 해결할 수 있는 방법이 있을까요? 만약 타입 지정과 관련된 방법으로 해결할 수 없는 문제라면 props 인자를 한 곳에서만 받도록 파일을 합칠까 합니다
- react
- node.js
- graphql
- next.js
zero.1.0.one.xx
댓글 1
좋아요 0
조회수 982
git hub 연결에 4시간 썼는데 안됩니다ㅜ,,
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
Github 연결하려 하는데 마지막 단계에서 오류가 자꾸 떠요ㅜㅠ 홈페이지에서 precamp 파일을 지웠다가 다시 만들어도 보고 했는데 계속 저런 알 수 없는 오류가 뜨네요,, 어떻게 다시 연결할 수 있을까요? ㅜㅅㅜ
- react
- node.js
- seo
- graphql
- next.js
현준인뒈요
댓글 2
좋아요 0
조회수 534
css basic transfrom+transition 레퍼런스 코드 질문있어요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
안녕하세요 쇼핑몰 레퍼런스 css 코드 104줄에 있는 .item .imgBox img는 왜 들어가있는지 알수있을까요? transition하고 아무 상관 없지 않나요?
- react
- node.js
- seo
- graphql
- next.js
nimbus
댓글 1
좋아요 0
조회수 270
logit 이나 ols 사용할때 앞에 C( )를 붙이는 이유?
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
ANOVA를 배울때는 ols 사용할때 독립변수 앞에 C()를 붙이는것이 분산분석은 범주형 분석이기에 앞에 C를 붙인다고 생각했는데요~ 로지스틱 회귀분석은 독립변수가 수치형, 종속변수가 이산/명목형으로 알고있는데.. Gender 앞에 C를 붙이는 이유가 있을가요? 오히려 Gender은 수치로 바꿔줘야할것 같은데.. 혹시 C 의 의미가 수치형->범주형, 범주형->수치형으로 양쪽 모두 바꿔주는 역할인건지 궁금합니다.
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
hello4298
댓글 1
좋아요 1
조회수 941
macro
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
다중분류에서 쓰는 average = 'macro'가 무슨 의미일까요??
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
apollon3110
댓글 1
좋아요 0
조회수 242
cypress 를 사용해 modal 에 접근하는 방법을 모르겠습니다
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
상품등록 페이지를 cypress 를 통해 test 해보던 도중 kakao map 을 사용해 주소입력 하는 부분에서 문제가 발생하고 있습니다. 개발자 도구를 사용해서 kakao map 의 input 의 class 확인해 해당 class name 으로 get()요청을 했지만 인식을 못하고 있습니다
- react
- node.js
- seo
- graphql
- next.js
kyb1208tg
댓글 1
좋아요 0
조회수 493
dbms의 기출문제를 보고싶습니다.
해결됨
윤파고의 정보처리기사 DB/프로그래밍 All-In-One
혹시 기출문제 올인원은 어디서 볼 수 있나요?
- python
- java
- c
- dbms/rdbms
- 정보처리기사
댓글 2
좋아요 0
조회수 765
예시문제 작업형2(신 버전)
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! 질문과 관련된 영상 위치를 알려주면 더 빠르게 답변할 수 있어요 먼저 유사한 질문이 있었는지 검색해보세요 문제 지문에서알려주는 제출 CSV 파일 형식은 0, 1, 1, 0 ... 이런 predict 결과값인데 0.11385 와 같이 predict_proba 확률값으로 결과를 제출해도 괜찮은 이유가 궁금합니다! roc_auc가 predict_proba 로 해야한다면 predict_proba로 모형 성능테스트를 하고 제출은 predict로 해야하는 것이 아닌가... 라는 의문이 들어서 문의드립니다
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
댓글 2
좋아요 0
조회수 523
TextEncoder is not defined 에러가 발생합니다
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
FAIL __test__/test/index.test.ts ● Test suite failed to run ReferenceError: TextEncoder is not defined 1 | // 하드코딩된 미니 백엔드 > 2 | import { graphql } from "msw"; | ^ 다음과 같은 에러가 뜨는 이유가 뭘까요? 찾아보니 node 18을 사용하지 않아 발생하는 문제라는데 node -v 을 확인해보면 제대로 18버전을 이용하고 있습니다
- react
- node.js
- seo
- graphql
- next.js
kyb1208tg
댓글 2
좋아요 0
조회수 1955
Next 14 강의
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요, 슬랙 채널에서 Next 14 강의 업로드 예정이시라는 글을 봤습니다. 해당 강좌의 리뉴얼 버전이라고 보면 될까요? 차이점이 궁금합니다. 감사합니다.
- react
- redux
- node.js
- express
- next.js
jaeyeonjung
댓글 1
좋아요 0
조회수 423
연관관계 설정 시에 ID값을 알고 있다면
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요. 간단한 내용이지만 조금 고민이 있어서 질문드립니다. 요청을 통해서 받은 데이터를 통해서나 로직상에서 연관관계에 필요한 Entity의 id값을 알고 있는 경우 필요한 Entity를 DB에서 조회하는 과정 없이 id값만 초기화된 Entity를 생성하여 주입하는 방식이 가능한 것으로 알고 있습니다. 이 때, 그렇게 주입된 Entity는 persist된 상태가 아니라는 점인데요. ( cascade 옵션이 적용 안 되었다는 가정 ) 이런 경우에 두 가지 경우의 수를 고려하였습니다. 첫 번째는 연관관계 Entity가 연관관계 설정 외에는 사용될 일이 없는 로직의 경우이고 두 번째는 연관관계에 필요한 Entity가 이후에도 여러 로직에서 사용되는 경우입니다. 두 번째의 경우에는 사실 고민할 것 없이 ID를 이용해 Entity를 생성하는 것이 아닌 SELECT를 통해서 Entity를 조회하여 사용하는 것이 좋은 방법이고 EntityGraph를 맞추는 면에서도 당연히 해주어야 하는 것으로 사료됩니다. 하지만 첫 번째의 경우 굳이 Entity를 ID값을 통해 조회하는 과정이 필요한 지에 대한 의문입니다. 저런 단순한 로직의 경우 굳이 DB와의 정합성을 위해 조회 및 연관관계 편의메소드 등을 이용해서 EntityGraph를 맞춰줄 필요가 있나 싶었습니다. 이런 경우에서 실제 현업에서는 어떤식으로 처리하는 지 궁금합니다. 저렇게 각 상황에 따라 효율을 따져서 다르게 처리하는 지 아니면 ID를 통해 데이터를 조회하는 것은 크게 성능상 문제가 되지 않으니 불필요하더라도 로직의 통일성이나 혹시 모를 사이드 이펙트를 대비해서 조회한 뒤 연관관계 편의 메소드를 통해 EntityGraph까지 맞춰 주는 지 궁금합니다..! 저는 불필요하다고 생각하여 굳이 Entity그래프를 맞춰줄 필요가 없는 경우는 그런 과정을 생략하며 프로젝트를 하고 있었는데, 완성하고 보니 EntityGraph를 맞춰 주는 로직이 단 하나도 없는 걸 알게 되었습니다. 아무래도 복잡한 비즈니스 로직이 없어서 그럴 수도 있겠다는 생각은 들었지만 너무 심한 것 같아 제가 JPA를 제대로 쓰고 있는 게 맞나 싶어 질문드립니다..ㅠㅠ
- java
- jpa
공부용
댓글 1
좋아요 0
조회수 465
미리보기가 보이지 않습니다
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
//app.js app.use('/', express.static(path.join(__dirname, 'uploads'))); //PostForm.js import { Button, Form, Input } from 'antd'; import React, { useCallback, useEffect, useRef } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import styled from 'styled-components'; import useInput from '../hooks/useInput'; import { ADD_POST_REQUEST, REMOVE_IMAGE, UPLOAD_IMAGES_REQUEST, addPost, } from '../reducers/post'; const FormWrapper = styled(Form)` margin: 10px 0 20px; `; const ButtonStyle = styled(Button)` float: 'right'; `; const PostForm = () => { const { imagePaths, addPostLoading, addPostDone } = useSelector( (state) => state.post ); const dispatch = useDispatch(); const imageInput = useRef(); const [text, onChangeText, setText] = useInput(''); useEffect(() => { if (addPostDone) { setText(''); } }, [addPostDone]); const onSubmitForm = useCallback(() => { if (!text || !text.trim()) { return alert('게시글을 작성하세요.'); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append('image', p); }); formData.append('content', text); return dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); const onChangeImages = useCallback((e) => { console.log('images', e.target.files); //배열모양을 띄는 객체 const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append('image', f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onRemoveImage = useCallback( (index) => () => { dispatch({ type: REMOVE_IMAGE, data: index, }); }, [] ); return ( <FormWrapper encType='multipart/form-data' onFinish={onSubmitForm}> <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder='어떤 신기한 일이 있었나요?' /> <div> <input onChange={onChangeImages} type='file' name='image' hidden multiple ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <ButtonStyle type='primary' htmlType='submit'> Twit </ButtonStyle> </div> <div> {imagePaths.map((item, i) => ( <div key={item} style={{ display: 'inline-block' }}> <img src={`http://localhost:3065/${item}`} style={{ width: '200px' }} alt={item} /> <div> <Button onClick={onRemoveImage(i)}>제거</Button> </div> </div> ))} </div> </FormWrapper> ); }; export default PostForm; //post.js const multer = require('multer'); const path = require('path'); const fs = require('fs'); const { Post, Image, Comment, User } = require('../models'); const { isLoggedIn } = require('./middlewares'); const router = express.Router(); try { fs.accessSync('uploads'); } catch (error) { console.log('uploads 폴더가 없으므로 생성합니다.'); fs.mkdirSync('uploads'); } //이미지나 동영상처리는 웬만하면 프론트에서 클라우드로 바로 올리는게 좋다. const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads'); }, //배포때는 s3로 , 개발에는 드라이브에 filename(req, file, done) { const ext = path.extname(file.originalname); //확장자 추출 const basename = path.basename(file.originalname, ext); done(null, basename + '_' + new Date().getTime() + ext); //이나당151817842.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, //20MB }); router.post('/', isLoggedIn, upload.none(), async (req, res, next) => { // POST /post try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); if (req.body.image) { if (Array.isArray(req.body.image)) { const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } console.log('POST', post); const fullPost = await Post.findOne({ where: post.id, include: [ { model: Image, }, { model: Comment, include: [{ model: User, attributes: ['id', 'nickname'] }], }, { model: User, //작성자 attributes: ['id', 'nickname'], }, { model: User, //좋아요 누른 사람 as: 'Likers', attributes: ['id'], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); router.post( '/images', isLoggedIn, upload.array('image'), async (req, res, next) => { //POST /post/images try { console.log(req.files); res.json(req.files.map((v) => v.filename)); } catch (error) { console.error(error); next(error); } } ); 안녕하세요 제로초님! 질문이 있습니다.. 파일은 제대로 올라가서 uploads 폴더안에 있는데 화면에서 이미지를 가져오지 못하고있습니다.. 프론트-백 api통신도 잘 되는데, 왜 개발자도구-네트워크에서 이미지를 가져올 수 없는지 이유를 모르겠습니다 ㅠㅠ
- react
- redux
- node.js
- express
- next.js
ina9377
댓글 1
좋아요 0
조회수 338
await에 대해 약간 헷갈리게되버렸어요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
수업에서 async await를 쓰게 되면, await 뒤쪽 함수가 실행 된 후, await를 보자마자 어? 오래걸리겟네? 하면서 스레드가 해당 async함수를 통째로 마이크로큐에 넣어버린다고 말씀하셨는데요. 만약 await뒤의 함수가 Promise를 반환하게 되면, 해당 Promise를 반환하는 함수가 먼저 큐에 쌓이고, 그 뒤에 async함수가 들어가서 pipo구조에 따라, promise가 반환된 후 async함수가 실행되면서 기다리는것처럼 보인다고 말해주셨습니다. 근데... 이 말 대로라면, await 함수 뒤에 굳이 Promise가 올 필요가 있나요? XMLHttpRequest()가 오더라도, 콜스택에서 해당요청이 실행된 후, 결과값을 가진 상태에서 마이크로큐로 들어가니까, 똑같이 await가 되는게 아닌지요? 분명 순차적으로 수업을 들으면서 다 이해햇다고 생각햇는데 갑자기 헷갈립니다.
- react
- node.js
- seo
- graphql
- next.js
신지환
댓글 2
좋아요 0
조회수 381
로그인 페이지에 접속 하기만 해도 JSSEISONID 값을 가집니다
미해결
스프링 시큐리티
Cookie 값을 삭제 하며 여러 동작을 해보던 도중, 로그인을 하기 전부터 JSSESSIONID 값이 cookie 에 들어가 있는 것을 확인하였습니다. 처음에는 오류인가 싶어 값을 삭제하고 로그인하였더니, 로그인이 동작하지 않고 그냥 페이지가 reload 된 다음 임의의 JSSESSIONID 값을 가져왔습니다. 왜 reload 할 때마다 JSSESSIONID 값을 가져오는 걸까요? 그리고 왜 JSSESSIONID 값 없이는 로그인 동작 자체가 안 되는 걸까요?
- java
- spring-boot
- spring-security
정재빈
댓글 2
좋아요 0
조회수 503
Querydsl Q클래스 생성 오류
해결됨
실전! Querydsl
plugins { id 'java' id 'org.springframework.boot' version '3.1.5' id 'io.spring.dependency-management' version '1.1.3' id "com.ewerk.gradle.plugins.querydsl" version "1.0.10" } group = 'study' version = '0.0.1-SNAPSHOT' java { sourceCompatibility = '17' } configurations { compileOnly { extendsFrom annotationProcessor } } repositories { mavenCentral () } dependencies { implementation 'org.springframework.boot:spring-boot-starter-data-jpa' implementation 'org.springframework.boot:spring-boot-starter-web' compileOnly 'org.projectlombok:lombok' runtimeOnly 'com.h2database:h2' annotationProcessor 'org.projectlombok:lombok' testImplementation 'org.springframework.boot:spring-boot-starter-test' implementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' annotationProcessor "com.querydsl:querydsl-apt: $ { dependencyManagement.importedProperties [ 'querydsl.version' ]} :jakarta" annotationProcessor "jakarta.annotation:jakarta.annotation-api" annotationProcessor "jakarta.persistence:jakarta.persistence-api" testImplementation 'com.querydsl:querydsl-jpa:5.0.0:jakarta' } tasks. named ( 'test' ) { useJUnitPlatform () } clean { delete file ( 'src/main/generated' ) } tasks. named ( 'bootBuildImage' ) { builder = 'paketobuildpacks/builder-jammy-base:latest' } tasks. named ( 'test' ) { useJUnitPlatform () } //querydsl 세팅 시 def querydslDir = " $buildDir /generated/querydsl" querydsl { jpa = true querydslSourcesDir = querydslDir } sourceSets { main.java. srcDir querydslDir } configurations { querydsl. extendsFrom compileClasspath } compileQuerydsl { options.annotationProcessorPath = configurations. querydsl } 인프런에서 질문 & 답변을 보고 gradle 설정했는데도 오류가 계속 발생됩니다. Build and run using : Gradle 로 변경하면 발생 되는 오류 입니다. 오류 : Attempt to recreate a file for type study.querydsl.entity.QHello
- java
- jpa
Jun
댓글 1
좋아요 0
조회수 3103
pd.get_dummies(train[cols])와 (train, columns=cols) 차이가 궁금합니다.
해결됨
[퇴근후딴짓] 빅데이터 분석기사 실기 (작업형1,2,3)
원핫 인코딩 코드에서 괄호 안에 [cols]를 쓸 때와 columns=cols를 쓸 때의 차이가 궁금합니다. 3-4 Feature engineering에서와 3-6 Regression에서 작성법이 달라서요. 3-6 Regression에서는 train[cols]로 썼더니 에러가 나네요ㅠ # 3-4 Feature engineering c_train[col] = le.fit_transform(c_train[col]) c_test[col] = le.transform(c_test[col]) # 3-6 Regression train = pd.get_dummies(train, columns=cols) test = pd.get_dummies(test, columns=cols)
- python
- 머신러닝
- 빅데이터
- pandas
- 빅데이터분석기사
kimx2725
댓글 1
좋아요 0
조회수 447
서버사이드 렌더링을 할 때, 서버는 어디에 있는 건가요?
해결됨
Next.js 시작하기(feat. 지도 서비스 개발)
선생님, 안녕하세요. 너무 기초적인 질문일 수 있지만, 갑자기 궁금해져서 질문드립니다. 서버사이드 렌더링의 경우, 서버에서 pre-render된 코드를 만들어서 보내주고, 클라이언트에서 hydrate를 해서 페이지를 만든다고 알고 있습니다. 클라이언트 사이드 렌더링의 경우는 html코드와 js코드를 함께 보내서, 클라이언트에서 페이지를 만들구요. 서버사이드 렌더링을 할 때, pre-render된 코드를 만드는 서버는 각 클라이언트들의 컴퓨팅 자원을 사용하는 건지(클라이언트의 컴퓨터에서 만드는 건지), 아니면 배포하는 중앙(?)서버(aws ec2 또는 이 강의에서 처럼 vercel)의 컴퓨팅 자원을 사용하는 건지(서버에서 만드는 건지) 궁금합니다. 클라이언트 측에서 다 계산을 한다고 하면, 중앙(?)서버의 부담이 적을테지만, 중앙(?)서버에서 한다고 하면, 부담이 갈 수 있을 것 같아서요. 최근 next.js 14버전이 되면서 디비와 직접 통신하는 등 기능이 많이 생겼는데, 이 통신하는 등의 역할은 client side가 아닌 server side에서만 가능하더라구요. 그래서 server side라는 게 중앙서버 하나에만 있다면, 계산이 오래걸린다거나 트래픽이 늘어나거나 한다면 다른 사용자들에게도 영향을 끼치지 않을까 궁금했습니다.(자동 확장이 되지 않을때) 또, 이런식으로 간다면 따로 백엔드 서버가 필요없게 될 수도 있겠다라고도 생각해봤는데, 어떻게 보고계시는지도 궁금합니다.
- seo
- next.js
- vercel
- csr
- ssg
- ssr
google_user
댓글 2
좋아요 1
조회수 1214
인기 태그
인프런 TOP Writers
- 정현섭 6
- hush park 5
- eggmun(문성진) 4
- Billy D Sanchez 4
- 박효정 3
- morneau 3
- 코코리코코 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv