묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결기본을 확실히!! HTML의 모든 것
혹시 쿼리 전송이라 뜨는건 오류인가요...???
혹시 쿼리 전송이라 뜨는건 오류인가요...???
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트 ec2 빌드 시 JavaScript heap out of memory 오류가 납니다
배포하는데 세 가지 문제가 발생해 도움이 필요합니다ㅜㅠ 1. 우선 프론트 서버 문제입니다. ec2 프론트 서버에 빌드 시 힙메모리가 누수되고 있는 것 같은데 로컬에서 build 된 client chunk 용량이 1.72MB 정도 입니다.. 그런데 ec2 instance에 연결해 ubuntu에 npm run build를 하면 메모리 힙에서 문제가 생기는 것 같습니다. backend server는 pm2로 켜놓은 상태입니다. 어디서 메모리가 누수되고 있는지 확인할 수 있는지 추전해주실 만한 방법이 있을까요? 2. 백서버의 경우 탄력적 ip로 ip주소를 고정해놓고 도메인을 등록한 상태입나다. 이를 인스턴스 퍼블릭 IPv4로는 접근이 되는데 http://api.ymillonga.com로 접근하면 사이트에 연결이 안됩니다. hsts 해제도 확인했습니다. 제가 도메인을 산 곳에서 네임서버 수정한 후에 어느 정도 시간이 걸려서 생기는 문제인지 아니면 제가 놓치고 있는 부분이 있는지 조언 부탁드립니다! 로컬 빌드 시 프론트 용량 C:\Users\HOME\Documents\ymillonga\front>npm run build > front@1.0.0 build C:\Users\HOME\Documents\ymillonga\front > cross-env ANALYZE=true NODE_ENV=true next build warn - You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://err.sh/next.js/non-standard-node-env Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. See here for more info: https://err.sh/next.js/built-in-css-disabled info - Using external babel configuration from C:\Users\HOME\Documents\ymillonga\front\.babelrc Webpack Bundle Analyzer saved report to C:\Users\HOME\Documents\ymillonga\front\.next\analyze\server.html Webpack Bundle Analyzer saved report to C:\Users\HOME\Documents\ymillonga\front\.next\analyze\client.html info - Creating an optimized production build info - Compiled successfully info - Collecting page data info - Finalizing page optimization Page Size First Load JS ┌ λ / 1.43 kB 500 kB ├ /_app 0 B 105 kB ├ ○ /404 262 B 106 kB ├ λ /hashtag/[tag] 784 B 496 kB ├ λ /login 10.2 kB 485 kB ├ λ /post/[id] 687 B 496 kB ├ λ /posts/related 1.09 kB 499 kB ├ λ /profile 8.9 kB 484 kB ├ λ /signup 1.33 kB 476 kB └ λ /user/[id] 1.27 kB 496 kB + First Load JS shared by all 105 kB ├ chunks/033f869c0cc364627d93bd7d05534baade1e7634.cc8305.js 5.03 kB ├ chunks/6b7903cd2497917111f687055581f790035a2aa9.c4f564.js 15.6 kB ├ chunks/777c2cca.558465.js 77 B ├ chunks/b6451bfa71415e1eb6b699247070fee6c4d97f38.fee3f6.js 11.5 kB ├ chunks/commons.7aac71.js 8.79 kB ├ chunks/framework.9d2e16.js 42.1 kB ├ chunks/main.5b6e30.js 7.06 kB ├ chunks/pages/_app.c0b4a3.js 14.3 kB ├ chunks/styles.f4dce8.js 99 B ├ chunks/webpack.470e21.js 752 B └ css/777c2cca.81a3d2c1.chunk.css 65.7 kB λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps) [== ] info - Generating static pages (0/1) 우분투 빌드시 오류코드 ubuntu@ip-172-31-45-132:~/ymillonga-sns/front$ npm run build > front@1.0.0 build /home/ubuntu/ymillonga-sns/front > cross-env ANALYZE=true NODE_ENV=true next build warn - You are using a non-standard "NODE_ENV" value in your environment. This creates inconsistencies in the project and is strongly advised against. Read more: https://err.sh/next.js/non-standard-node-env Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. See here for more info: https://err.sh/next.js/built-in-css-disabled info - Using external babel configuration from /home/ubuntu/ymillonga-sns/front/.babelrc Webpack Bundle Analyzer saved report to /home/ubuntu/ymillonga-sns/front/.next/analyze/server.html info - Creating an optimized production build .. <--- Last few GCs ---> [17547:0x630efc0] 20581 ms: Scavenge 477.9 (490.8) -> 477.4 (490.8) MB, 16.3 / 0.0 ms (average mu = 0.604, current mu = 0.531) allocation failure [17547:0x630efc0] 20601 ms: Scavenge 478.8 (494.8) -> 478.3 (494.8) MB, 17.0 / 0.0 ms (average mu = 0.604, current mu = 0.531) allocation failure [17547:0x630efc0] 21501 ms: Mark-sweep 481.5 (494.8) -> 477.8 (497.3) MB, 866.5 / 0.0 ms (average mu = 0.393, current mu = 0.116) allocation failure scavenge might not succeed <--- JS stacktrace ---> FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory 1: 0xa04200 node::Abort() [node] 2: 0x94e4e9 node::FatalError(char const*, char const*) [node] 3: 0xb7860e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node] 4: 0xb78987 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node] 5: 0xd33215 [node] 6: 0xd63dae v8::internal::EvacuateNewSpaceVisitor::Visit(v8::internal::HeapObject, int) [node] 7: 0xd6fde6 v8::internal::FullEvacuator::RawEvacuatePage(v8::internal::MemoryChunk*, long*) [node] 8: 0xd5bfcf v8::internal::Evacuator::EvacuatePage(v8::internal::MemoryChunk*) [node] 9: 0xd5c248 v8::internal::PageEvacuationTask::RunInParallel(v8::internal::ItemParallelJob::Task::Runner) [node] 10: 0xd4eb29 v8::internal::ItemParallelJob::Run() [node] 11: 0xd71d40 void v8::internal::MarkCompactCollectorBase::CreateAndExecuteEvacuationTasks<v8::internal::FullEvacuator, v8::internal::MarkCompactCollector>(v8::internal::MarkCompactCollector*, v8::internal::ItemParallelJob*, v8::internal::MigrationObserver*, long) [node] 12: 0xd725dc v8::internal::MarkCompactCollector::EvacuatePagesInParallel() [node] 13: 0xd727a5 v8::internal::MarkCompactCollector::Evacuate() [node] 14: 0xd84791 v8::internal::MarkCompactCollector::CollectGarbage() [node] 15: 0xd40ab8 v8::internal::Heap::MarkCompact() [node] 16: 0xd425a8 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node] 17: 0xd459ec v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node] 18: 0xd0b2f2 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [node] 19: 0xd07542 v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawArray(int, v8::internal::AllocationType) [node] 20: 0xd075f4 v8::internal::FactoryBase<v8::internal::Factory>::NewFixedArrayWithFiller(v8::internal::Handle<v8::internal::Map>, int, v8::internal::Handle<v8::internal::Oddball>, v8::internal::AllocationType) [node] 21: 0xf3d8ce v8::internal::Handle<v8::internal::NameDictionary> v8::internal::HashTable<v8::internal::NameDictionary, v8::internal::NameDictionaryShape>::New<v8::internal::Isolate>(v8::internal::Isolate*, int, v8::internal::AllocationType, v8::internal::MinimumCapacity) [node] 22: 0xf3db26 v8::internal::Handle<v8::internal::NameDictionary> v8::internal::HashTable<v8::internal::NameDictionary, v8::internal::NameDictionaryShape>::EnsureCapacity<v8::internal::Isolate>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::NameDictionary>, int, v8::internal::AllocationType) [node] 23: 0xf3e33a v8::internal::Handle<v8::internal::NameDictionary> v8::internal::Dictionary<v8::internal::NameDictionary, v8::internal::NameDictionaryShape>::Add<v8::internal::Isolate>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::NameDictionary>, v8::internal::Handle<v8::internal::Name>, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyDetails, v8::internal::InternalIndex*) [node] 24: 0xf49dba v8::internal::BaseNameDictionary<v8::internal::NameDictionary, v8::internal::NameDictionaryShape>::Add(v8::internal::Isolate*, v8::internal::Handle<v8::internal::NameDictionary>, v8::internal::Handle<v8::internal::Name>, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyDetails, v8::internal::InternalIndex*) [node] 25: 0x106f4ff v8::internal::Runtime_AddDictionaryProperty(int, unsigned long*, v8::internal::Isolate*) [node] 26: 0x1400039 [node] npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! front@1.0.0 build: `cross-env ANALYZE=true NODE_ENV=true next build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the front@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/ubuntu/.npm/_logs/2020-12-17T07_21_00_369Z-debug.log 클라이언드 용량 front/config/config.js export const backUrl = process.env.NODE_ENV === 'production' ? "http://15.165.249.3" : "http://localhost:3051"; export const callbackUrl = process.env.NODE_ENV === 'production' ? "http://15.165.249.3/user/google/callback" : "http://localhost:3051/user/google/callback"; back/ app.js const express = require('express'); const dotenv = require('dotenv'); const passport = require('passport'); const db = require('./models'); const morgan = require('morgan'); const path = require('path'); const userRouter = require('./routes/user'); const postRouter = require('./routes/post'); const postsRouter = require('./routes/posts'); const hashtagRouter = require('./routes/hashtag'); const cookieParser = require('cookie-parser'); const session = require('express-session'); const passportConfig = require('./passport'); const cors = require('cors'); const hpp = require('hpp'); const helmet = require('helmet');//hpp, helmet:production모드일 때 보안에 필요한 필수 패키지들 const app = express(); dotenv.config(); passportConfig(); const prod = process.env.NODE_ENV === 'production'; const frontUrl = prod ? "http://ymillonga.com" : "http://localhost:3050"; db.sequelize.sync() .then(() => { console.log('db연결 성공'); }) .catch(console.error); app.use(morgan('dev')); if (prod) { app.use(morgan('combined')); app.use(hpp()); app.use(helmet({ contentSecurityPolicy: false })); app.use(cors({ origin: [frontUrl, 'http://3.36.18.214'], credentials: true, })) } else { app.use(morgan('dev')); app.use(cors({ origin: true, credentials: true, })); } app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use('/', express.static(path.join(__dirname, 'uploads'))); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, proxy: prod, cookie: { httpOnly: true, secure: false, //process.env.NODE_ENV === 'production',//https일 때 true domain: process.env.NODE_ENV === 'production' && '.ymillonga.com' }, })); app.use(passport.initialize()); app.use(passport.session()); app.use('/user', userRouter); app.use('/post', postRouter); app.use('/posts', postsRouter); app.use('/hashtag', hashtagRouter); app.get('/', (req, res) => { res.send('hello express'); }); app.use((req, res, next) => { const error = new Error(`${req.method} ${req.url} 라우터가 없습니다.`); error.status = 404; next(error); }); app.use((err, req, res, next) => { res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; res.status(err.status || 500); res.render('error'); }); app.listen(3051, () => { console.log(`3051에서 대기 중`); });
-
미해결자바스크립트 중고급: 엔진 핵심
앞에 분 내용 잘 읽었는데..
제가 앞에 분 내용을 다 읽었는데, 제가 이해한바가 맞는지 확인 부탁드립니다. 함수에서 스코프를 만드는 과정은 호출이 아닌 실행을 해서 처음 function이라는 키워드를 만났을 때 실행되며, 함수를 호출하면 그 때 실행컨텍스트가 만들어져 처음에 만들어진 스코프를 확인한다. 즉, 처음 실행과 호출과의 차이를 알아야한다. 위 내용이 맞나요?
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part4: 게임 서버
강사님 질문있습니다!
[질문 1] Listener 강의 듣고 제가 이해한 것이 맞는지 확인 받고 싶습니다. ※ pending(지연) == false : I/O 처리 요청이 운영체제에 전달되자마자 바로 CPU가 처리함. ※ pendding(지연) == true ① I/O 처리 요청만 운영체제에게 전달(CPU는 다른 일을 하고 있음 → pending 상태)만 한 상태(즉, 접수만 상태) ② 이전에 수행하던 작업을 CPU가 완료되었을 때 운영체제는 Comleted 이벤트를 발생하고 ①에서 요청이 들어온 I/O처리를 한다. ③ 이때 OnAcceptCompleted에 있는 OnAcceptHandler를 통해 데이터를 보내고 받고 끊는 작업을 수행함. ④ RegisterAccept 호출을 통해 args를 초기화해준다. 이때 args의 역할은 운영체제와 응용 프로그램 사이에서 중개(데이터 전달, 이벤트 발생 등)해주는 역할을 한다. [질문 2] ⓐ _onAcceptHandler.Invoke(args.AcceptSocket); ⓑ _onAcceptHandler(args.AcceptSocket); ⓐ와 ⓑ를 실행하면 동일한 결과가 나오는데 강사님은 왜 Invoke를 붙이셨는지 궁금합니다.
-
미해결Node.js로 웹 크롤링하기
크롤링을하는데 빈값이 들어옵니다.
안녕하세요 지금 학교 웹사이트를 크롤링하는 중인데, 어찌 저찌 원하는 페이지까지 찾아서 태그까지 정확하게 찾은 것 같습니다. 그런데 해당 태그를 긁어오면 빈배열만 들어옵니다. 어떤 문제인지 궁금합니다.
-
미해결3D리플릿 만들기 - 인터랙티브 웹 프로젝트
이벤트 위임 방식 질문
이벤트 위임 방식으로 하게되면 현재 2F를 감싸는 page 에도 page-flipped 클래스가 추가가 됩니다. 2F를 감싸는 page 에는 page-flipped 클래스가 추가가 되지 않게 하려면 data- 속성을 이용해 적용하면 될까요 ??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
dispatch(loginUser(body)) 뒤에 then 질문드립니닷!
dispatch(loginUser(body)).then((response) => { if (response.payload.loginSuccess) { // 메인 페이지로 이동 props.history.push('/') } else { alert('Error') } }) payload에 Promise가 들어가있는 액션 객체를 dispatch 하면 이 또한 반환값이 Promise가 되는건가요? 어떠한 조건에서 dispatch 하고나서 Promise 가 반환되는지 궁금합니다!
-
해결됨따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
backend폴더에서 작성한 default.conf랑 nginx폴더에서 작성한 default.conf에 대 질문있습니다.
frontend폴더에서 작성한 default.conf랑 nginx폴더에서 작성한 default.conf에 대 질문있습니다. 두 파일 모두 /etc/nginx/conf.d/default.conf에 copy 하고 있던데 이 경우에는 한 파일로 overwriting 되나요?
-
[리뉴얼] 처음하는 파이썬 데이터 분석 (쉽게! 전처리, pandas, 시각화 전과정 익히기) [데이터분석/과학 Part1]
iplot을 이용한 scatter그래프 그리기
삭제된 글입니다
-
미해결QGIS 기초와 Python의 만남
좌표계 변경
기존에 사용하던 좌표에서 EPSG 5178로 변경해서 사용하는 이유가 있나요?
-
해결됨Svelte.js [Core API] 완벽 가이드
프로젝트가 커짐에 따라 번들 크기
안녕하세요~ HEROPY님 질문이 있습니다. 흔히 Svelte는 경량화된 번들 사이즈를 장점이라고 홍보합니다. 어떤 글에 의하면 번들된 크기가 최근에 많이 쓰이는 React, Vue보다 10배 작다는 글도 있더라구요. 이런 작은 번들 사이즈와 가상돔을 사용하지 않아 Diffing을 하지 않는 장점으로 임베디드? 장비에 Svelte가 사용된다는 정보도 들었습니다. 그런데 제가 글을 문득 읽다보니 Svelte도 결국 엔터프라이즈급이나 플젝 규모가 커지면 번들사이즈가 앞서 소개한것처럼 다른 프레임워크, 라이브러리와 큰 차이가 없다는 글을 읽었습니다. HEROPY님은 실제 중규모이상 플젝을 Svelte로 해보시는 것으로 알고 있는데요. 번들 사이즈가 다른 라이브러리로 만든 것과 비교한다면 어떤거 같은가용? 좋은 하루 보내세용!
-
미해결홍정모의 따라하며 배우는 C언어
질문이요
5분 14초 쯤에 while()안에 들어가 있는 i가 while 입장에서 사실이다라는 게 정확히 뭔말인지 잘 모르겠습니다. 그리고 while안에 관계식도 아니고 그냥 변수 하나만 있어도 되나요?
-
미해결프론트엔드 개발자를 위한 웹팩
웹팩 entry
안녕하세요 ! 강의 잘듣고있습니다! 감사합니다 궁금한게 있어서요. Entry 부분에 index.js 로 계속 예시를 주셨는데. 그러면 이 어떠한 한 어플리케이션이 100개의 js가 필요하고 이걸 웹팩으로 한가지로 빌드(변환)을 하려고할때 index.js에 import 를 100개를 해주고 이 index.js를 webpack.config.js에 entry로 설정해서 bundle.js로 변환을 시키고! 이걸 index.html 쪽으로 주입시키면 된다는 말씀이신가요?? 즉, 100개의 js를 웹팩을 이용해 변환할때 index.js에 다 import를 해야하는지 궁금합니다. 또한, 위에서말한 흐름이 맞는지 궁금합니다. 감사합니다.
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
최근버전의 antd는 오류가 일어납니다.
"antd": "^3.24.1", 몽고DB가 못받아드리는건지는 모르겠으나 antd중에서 Icon이 문제인 것 같습니다. 강의에서 쓰는 위의 버전으로 바꾸니 잘 인식합니다. 참고로 저는 노드js 버전이 v14.15.2였습니다.
-
미해결자바스크립트 비기너: 튼튼한 기본 만들기
완강했습니다.
개념적으로 접근하니 두루뭉실하게 알고있던 개념도 잡고 가는 좋은 계기였습니다. 질문이 하나 있는데, 강의에서 사용하신 window.onload는 어느 파트에서 배울 수 있을까요?
-
미해결따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
도커 파일 내 환경변수 비밀 유지
도커 컴포즈 파일에 환경 변수에 패스워드와 유저 정보가 적혀있는데, 깃헙에 올리게 되면 노출이 되어서요. 혹시 위의 정보를 깃헙에 올리지 않으려면, 어떻게 해야할지 알 수 있을까요?
-
미해결따라하며 배우는 도커와 CI환경 [2023.11 업데이트]
환경변수 설정에 궁금한 것이 있습니다!
RDS와 소통하는 컨테이너는 백엔드 밖에 없는 것 같아서요. 도커 컴포즈 파일 내 백엔드 부분에서 설정해준 환경변수가 있는데 별도로 aws 사이트 내에서 환경변수를 설정해 주어야 하나요?? 혹시 이 두 개가 다른 역할을 하고 있나요?
-
미해결[리뉴얼] 파이썬입문과 크롤링기초 부트캠프 [파이썬, 웹, 데이터 이해 기본까지] (업데이트)
[패턴으로 실습하며 익히기 : HTML 이해를 바탕으로 크롤링하기]강사님의 강의를 패스트캠퍼스에서 컴공 완주반과, inflearn에서 잘 듣고있는 수강생입니다. 크롤링함에 있어 한겨례 뉴스는 크롤링이 되는데 네이버 뉴스는 크롤리잉 안되는 이유가 뭘까요?
(사진)
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
JDK 설치 버전질문
안녕하세요 이제 막 수업을 듣기 위해서 설치를 하려고 하는데요 Java SE 15 버전으로 설치해도 문제가 없을까요?
-
미해결iOS/Android 앱 개발을 위한 실전 React Native - Basic
아이콘 이미지와 버튼이 보이지 않습니다
header bar 커스터마이징 강좌에서 똑같이 따라했는데 아이콘 이미지가 보이지 않아요 user.js 로 이동했을때, headerBackTitle로 Back 글씨는 보이게 할 수 있는데, 뒤로가기 화살표 버튼은 보이지 않아요... 다음 강좌인 버튼도 headerRight가 먹질 않는것 같습니다