현재 next ^13.5.6 버전 사용중입니다. next.config.js 설정에서 devtool hidden-source-map 설정이 ^13.5.6 버전에서도 필요할까요? 아래 공식문서 보면 productionBrowserSourceMaps 설정이 동일한 역할을 하는것같은데 맞을까요? development 에서는 true 라서 source map이 보여지고 build시 자동으로 false가 되어서 hidden-source-map이 적용되는것같은데 그럼 ^13.5.6 버전에서는 따로 hidden-source-map 설정 안해도 되는걸까요? https://github.com/vercel/next.js/blob/v13.5.6/docs/02-app/02-api-reference/05-next-config-js/productionBrowserSourceMaps.mdx
수업을 진행하다가 그 당시에도 궁금즘이 생겨 개인적으로 알아봤던 부분인데, 확신이 안가서 강사님께 여쭈어봅니다. 수업 내용에서는 정확한 위치가 기억이 나지 않아서 다른 예시로 대체하겠습니다. 흰색 배경의 button group이 있고 각각의 button은 클릭할 시 url을 변경시킵니다. 또한 현재 선택된 button은 색상이 칠해집니다. 이러한 상황에서 useState를 통해서 button의 state를 관리하고 있었고, button을 클릭했을때 setState를 통해 선택하는 button을 변경함 router을 통해 url 경로를 변경함 이렇게 두가지 액션을 취했었습니다. 그 때 생겼던 궁금중은 어차피 url과 button은 mapping 할 수 있으니까, 버튼을 클릭하면 url만 변경시키고, url을 읽어서 button에 다시 값을 주면 기능적으로 똑같지 않나? 그러면 하나의 액션으로 기존의 두가지 액션을 대체할 수 있지 않나? 라고 생각했습니다. 그래서 조금 찾아보니까 url을 바꾸고 그 값을 통해 button의 상태 관리를 다시 하는건 즉각적인 반응이 아니고, 영상에서 봤던 것 처럼 url과 button state를 각각 바꾸는게 더 인터랙티브하다 라는 글을 읽었습니다. (신빙성이 있는 글은 아닙니다.) 실제로 이러한 이유 때문에 url만 바꾸고, 그 값을 받아와 button 값을 할당하는게 아니라, 두가지를 모두 동시에 바꾸는게 더 좋은 방법이 맞는건지 궁금합니다.
기존 질문이 삭제되어 헷갈리실 다른 분들을 위해 자문자답 형태로 남겨둡니다. Python의 경우 어느 곳에서 다운로드 받느냐에 따라 다양한 경로에 다양한 버전이 생길 수 있습니다. 첨부해주신 사진을 봤을 때, /usr/bin/python3 를 통해 boto3를 import 하시려면, /usr/bin/pip3 를 통해 boto3를 다운로드 해주셔야 될 것 같습니다.( /usr/bin/python3 를 입력해서 실행했을 때와 python3 를 입력했을 때 버전을 비교해보시면 좋습니다.) 간단한 해결 방법으로는 /usr/bin/python3 가 아닌 그냥 python3 로 실행해주시면 될 것 같습니다. 만약 해결되지 않는다면, 현재 boto3가 설치된 경로에 있는 Python 실행 파일을 통해 파일을 실행해주시면 됩니다. 이런 번거로운 절차가 귀찮으시면, 1.3. Python 실행 단축키 설정 을 참고하셔서 실행 설정을 해주시고, vscode에서 cmd + shift + p 입력 후, Python: Select Interpreter 를 입력해주신 후에 실행하고 싶은 Python3 경로를 선택해주시면 됩니다. 또는, 우측 하단에 아래 그림과 같이 나오는 부분에서 버전을 클릭하시면 위 그림이 나오게 됩니다. 이후에는 cmd + enter 를 통해 쉽게 실행 가능합니다! 해보시고 안되시면 다시 말씀 부탁드리겠습니다.
안녕하세요 강사님 수업 잘듣고 있습니다 .. ! msw 쪽 수업을 듣다가 궁금한 점이 있어서 질문 남기게 되었습니다 msw 공식 홈페이지 ( https://mswjs.io/docs/integrations/node) 에서 node 관련 server 를 지원해주는데 express로 따로 https 파일을 구성하신 이유가 있으신지 궁금합니다.. ! 공식홈페이지를 따라 갈지, express로 서버를 구성해야하는지 선택이 어려워서요..! 조언을 듣고 싶습니다
제가 실습파일을 다시 만들었었는데 리액트 버전 낮추는 명령어를 치지 않고 하다가 section 13에서 antd design 관련 실습 하면서 강사님이랑 조금씩 다른 부분이 보이고, yarn dev 해도 실행이 안되어서 버전 문제라고 생각하고 중간에 버전을 낮췄거든요 ..!근데 아래처럼 '--jsx' 플래그를 제공하지 않으면 JSX를 사용할 수 없습니다. 라는 에러 메시지가 계속 뜨고 구글링해서 방법을 찾아보는데 하라는 거 해봐도 없어지지 않아요 ㅠㅠ타입스크립트를 재설치 해봐도 package.json에 dev-defendencies 항목이 생기지도 않고, tsconfig.js 파일을 삭제했다가 다시 타입스크립트 재설치 후 yarn dev 해도 변화가 없더라구요 !그래서 강사님 tsconfig와 같은 내용을 직접 작성해서 새로고침 해봤는데도 자꾸 에러가 그대로라서 ㅠㅠ 혹시 어떤 부분이 문제일까요 ㅠㅠㅠㅠ
(afterLogin)의 공통컴포넌트 TrendSection에서 fetch해온 데이터를 아래 코드처럼 explore의TrendSection에서 getQueryData로 가져와서 사용해도 되나요? 일단 잘 나오기는 하는데 제가 getQueryData를 잘 이해하고 사용하는건지 의문이 드네요... const queryClient = useQueryClient(); const data = queryClient.getQueryData(["trends"]);
회원가입에 성공을 한다 라고 하면 메인페이지로 이동하게 되는데 이상태에서 다시 회원가입페이지로 들어가려고 하면 signUpDone이라는 애가 true를 기억을 하고 잇어서 회원가입페이지에 머무는것이 아니라 다시 메인페이지로 들어가지는데 처음에 회원가입성공을 시키고 나서 signUpDone의 값을 다시 초기화 시켜야 되는거겟죠?
svg를 public으로 빼지않고 그대로 컴포넌트에 넣는 이유가 궁금합니다. 저는 public에 사용되는 svg를 다 넣어놓고 svgr을 이용해서 필요한 컴포넌트마다 import해서 사용하고 있습니다. (처음 next를 시작할 때 알려주신 분이 이렇게 사용하셔서) 그런데 Section 2까지 강의를 들으면서 보니 제로초님은 컴포넌트에 바로 svg를 삽입하시던데 혹시 성능에 차이가 있을까요? 두 방법중 어떤 것이 나을까요? 혹시 성능에 큰 차이가 없다면 제로초님의 방식이 편해보이는데.. 고민입니다.
안녕하세요. 좋은 강의 감사히 잘 들었습니다. 강의에서 궁금한 점이 있어서 질문 드립니다. 1) 첫 번째 질문 강의 제목 : 외부 파이썬 함수 수행하기 환경 구성 : macOS, Docker, Airflow 2.7 문의 내용 : 강의 초반에 언급한 환경변수로 설정하는 방법 상세 내용 : 강의 후반에 알려주신 내용은 방법을 이해했습니다. 다만 초반에 알려주신 항목 중 sys.path 는 명시적 구현이라 쉽게 가능했으나, 환경변수 쪽은 찾아봐도 쉽게 이해가 안 돼서 질문하게 됐습니다. 복습하면서 여러 방법을 알면 좋을 것 같아서 질문 드립니다. 2) 두 번째 질문 강의 제목 : 없음 환경 구성 : Docker 설치 시 생성하는 디렉터리 이외에 추가 디렉터리 생성 후 볼륨 마운트. 예를 들어 utils 라는 디렉터리를 생성 후 docker-compose.yaml 의 volumes 에 ${AIRFLOW_PROJ_DIR:-.}/utils:/opt/airflow/utils 를 추가 할 경우 문의 내용 : 추가로 디렉터리 생성할 경우 plugins 디렉터리 외에서 py 파일을 읽어야 하는 경우 상세 내용 : 첫 번째 질문과 유사하게 환경변수에 관한 질문일 것 같습니다. 새로운 디렉터리를 생성해서 작업할 때 경로를 인식 시켜야 하는데, sys.path 로만 하는 것은 번거로운 것 같아서 어떤 방식으로 접근을 하면 좋을지 조언을 듣고 싶습니다. 간략하게 정리하면 plugins 디렉터리 이외의 환경도 같이 사용을 하는 방법이 궁금합니다. 3) 세 번째 질문 강의 제목 : 없음 환경 구성 : 1, 2와 동일 문의 내용 : 새로운 패키지 설치 할 때 설치 방법 및 운영 관리 노하우 상세 내용 : docker compose 할 때 yaml 에 PIPADDITIONAL_REQUIREMENTS 부분에 설치할 패키지 목록을 입력해서 설치를 하고 있습니다. 이렇게 해도 되는 것 같긴한데, 나중에 더 많은 패키지를 설치하게 될 경우 좋지 않은 형태라고 생각이 들었습니다. 실제로 현업에서 업무를 하실 때 다양한 패키지를 어떤 식으로 설치 및 운영 관리 하시는지 궁금합니다. 감사합니다. 다른 강의도 기대하겠습니다.
pip를 통해서 face-recognition 모듈을 설치하려는데 아래 사진과 같은 오류가 계속 발생합니다. pip 버전은 제일 최신 버전 파이썬 버전은 3.11.4 인터넷 보니 CMake를 설치하래서 일단 CMake 버전은 3.28.1입니다 아 dlib도 pip말고 직접 설치하래서 했더니 밑에 빨간 글자를 제외하고 위에 'subprocess.CalledProcessError' 부분과 똑같은 오류가 발생하더군요 이걸로 계속 고통받다 마지막으로 질문해봅니다 ㅠ
안녕하세요! 제로초님!! [리뉴얼] React로 NodeBird SNS 만들기 섹션 6. AWS에 배포하기: 도메인 연결하기 강의까지 수강한 수강생 입니다! 가비아 도메인 연결 후 프론트 주소 페이지가 응답이 되지 않아 질문 글을 올립니다! ※ 질문 글이 굉장히 깁니다! 항상 강의 잘 보고 있습니다!! ※ 아래 사항을 먼저 확인한 후에 질문을 올렸습니다! 1. 저의 경우 도메인을 ' nodebird.xyz '로 설정하였습니다. (프론트 : http://nodebird.xyz , 백엔드 : http://api.nodebird.xyz ) 2. 가비아 네임서버 자리에 Route 53의 nodebird.xyz 네임서버를 순서대로 입력하였습니다! 3. 윈도우 서비스의 MySQL 서비스를 실행한 상태입니다. 4. 백엔드 주소는 접속이 되어 'hello express'가 화면에 표시됨을 확인하였습니다! 5. npm은 6.14.18 버전, node는 v14.21.3 입니다. 6. about.js 파일은 잠시 다른 곳으로 옮겨두었습니다. 7. 프론트와 백엔드의 인스턴스와 탄력적 IP가 각각 한 쌍으로 연결되어 있으며, 바뀐 인스턴스로 우분투 프론트 서버와 백엔드 서버에서 작업하였습니다! ( 프론트 탄력적 IP : 52.78.52.73 백엔드 탄력적 IP : 43.201.232.110 ) 8. 에러 발생을 막기 위해 sudo npx pm2 kill 명령어로 pm2을 지우고 s앞에 sudo를 붙여 git pull, start, reload, list, monit 순으로 작업하였습니다. (메모리 부족으로 빌드만 로컬 프론트에서 진행하였습니다.) 9. 프론트, 백엔드 모두 sudo npx pm2 list 명령어를 터미널에 입력했을 때 status가 online인 걸 확인하였습니다. 아래는 이전 강의인 프론트 서버 배포하기 강의까지 진행했을 때 프론트 페이지 모습입니다! 콘솔 쪽에 아래와 같은 에러도 나고, CSS도 깨지지만 페이지 자체는 접속이 가능했습니다! 다음 강의를 진행하며 해결할 수도 있었기에 넘어갔습니다. Failed to load resource: the server responded with a status of 404 (Not Found) (리소스를 로드하지 못했습니다. 서버가 404(찾을 수 없음)의 상태로 응답했습니다, This page failed to load a stylesheet from a URL. 이 페이지는 URL에서 스타일시트를 로드하지 못했습니다. that cookie was blocked because it's domain attribute was invalid. 해당 쿠키의 도메인 특성이 잘못되었기 때문에 차단되었습니다.) 도메인을 연결하기 위해 로컬 프론트, 로컬 백엔드 주소 부분을 nodebird.xyz 도메인으로 수정하였습니다. 하지만 도메인 수정 후 아래처럼 프론트 페이지가 응답하지 않습니다! 문제를 해결하기 위해 첫 번째로 콘솔 로그부터 확인하였습니다. 아래는 리덕스와 네트워크 탭 사진입니다. Failed to load resource: the server responded with a status of 404 (Not Found) (리소스를 로드하지 못했습니다. 서버가 404(찾을 수 없음)의 상태로 응답했습니다, F12를 눌러 개발자 도구를 키면 화면이 매우 빠른 속도로 계속 깜빡이며 개발자 도구 화면이 계속 닫혀 정상적인 확인이 어려웠습니다. 리덕스 탭은 위의 창을 닫아도 계속 뜹니다. 계속 페이지가 새로 고침 되는 것으로 추정합니다. 문제를 해결하기 위해 우분투 프론트 터미널을 확인하였습니다. TypeError: Cannot read property 'find' of undefined 에러와 MyDocument.getInitialProps() undefined 에러 두 개를 확인하였습니다. 더 정확한 에러 확인을 위해 우분투 프론트 터미널에 'sudo npx pm2 logs --err --lines 50' 명령어를 입력하였습니다. Error: "MyDocument.getInitialProps()" should resolve to an object. But found "undefined" instead. 오류: "MyDocument.getInitialProps()"가 개체로 확인되어야 합니다. 대신 "undefined"가 발견되었습니다. (화면 좌측을 보시면 .next 일부 모듈이 git add가 가능한 상태임을 확인할 수 있습니다. .gitignore 파일에 .next를 쓰고, 캐시를 지워도 해결이 되지 않아 일단은 그대로 두었습니다!) MyDocument.getInitialProps 문제를 해결하기 위해 커뮤니티와 구글링을 통해 아래 사이트를 참고하였습니다. 노드버드 커뮤니티 https://www.inflearn.com/questions/154677/error-quot-mydocument-getinitialprops-quot-gt-undefined 스택 오버플로우 사이트 https://stackoverflow.com/questions/61967960/getinitialprops-should-resolve-to-an-object-but-found-undefined-instead 노드버드 커뮤니티에 같은 에러가 발생한 수강생 분 글을 토대로 제로초님의 노드버드 깃허브 (Ch6, Ch7, http 등)를 확인하였습니다. 아래는 가장 의심되는 코드입니다! front/config/config.js // 실제 백엔드 주소 내보내기 export const backUrl = 'http://api.nodebird.xyz'; back/config/config.js // 모건(morgan) : 요청과 응답에 대한 정보를 콘솔에 기록하는 모듈 /* ---------- 배포 모드일 환경일 때 설정 ---------- */ if (process.env.NODE_ENV === 'production') { // combined : 로그가 자세해져서 실제 해당 접속자의 IP를 알 수 있다. app.use(morgan('combined')); // hpp : Express의 중복 이름 파라미터 공격을 방어한다. app.use(hpp()); // helmet : HTTP 헤더를 자동 설정을 통해 외부 공격으로부터 보호한다. app.use(helmet()); // 미들웨어 연결 app.use(cors({ /* 배포용에서는 실제 프론트 주소에서 요청했을 때만 CORS 허용하기 */ origin: 'http://nodebird.xyz', /* 사용자 인증이 필요한 쿠키 전달 허용하기 */ credentials: true, })); /* ---------- 개발 모드 환경일 때 설정 ---------- */ } else { // dev : 백엔드 디버깅 app.use(morgan('dev')); // 미들웨어 연결 app.use(cors({ /* 개발용에서는 요청을 보낸 주소의 요청만 CORS 허용하기 */ origin: true, /* 사용자 인증이 필요한 쿠키 전달 허용하기 */ credentials: true, })); }; . . . // 쿠키와 세션 미들웨어 연결 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use(session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, /* ---------- 쿠키 옵션(Cookie Option) ---------- */ cookie: { httpOnly: true, // true로 설정 시 JS로 쿠키에 접근하지 못하도록 막는다. secure: false, // https 적용 시 true로 설정할 예정 /* 쿠키의 도메인이 배포 환경이면 도메인 앞에 '.'을 붙이기 */ // 점을 붙이면 api.nodebird.xyz와 nodebird.xyz 사이에서 쿠키 공유가 된다. domain: process.env.NODE_ENV === 'production' && '.nodebird.xyz' }, })); front/pages/_document.js // 서버사이드 렌더링(SSR) : getInitialProps 사용 export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; /* ---------- React 렌더링 로직을 동기적으로 실행 ---------- */ try { ctx.renderPage = () => originalRenderPage({ /* enhanceApp으로 원래 app기능에 document 기능에다가 stylesheet가 styled-component들을 서버사이드 렌더링할 수 있게 해준다. */ enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />) }); // 부모 'getInitialProps'를 실행(이제 사용자 정의 'renderPage'가 포함된다.) const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {sheet.getStyleElement()} </> ), }; /* ---------- 에러 캐치 ---------- */ } catch (error) { console.error(error); /* ---------- try 블록이 종료되면 무조건 실행 ---------- */ } finally { sheet.seal(); } } 제가 입력한 코드에 문제가 있지 않을까 추측하여 노드버드 깃허브와 제 코드를 비교하였으나 해결책을 찾지 못하였습니다... 어떻게 하면 도메인 연결 후 프론트 페이지를 응답하게 만들 수 있을까요? 혹시 관련 키워드가 있다면 알려주실 수 있을까요? 질문 글이 많이 김에도 끝까지 읽어주셔서 감사합니다 제로초님! ++++ 혹시 모르니 네임 서버 상태도 같이 올립니다! 아래는 저의 Route 53, Gabia 네임서버 현재 상태입니다!
