묻고 답해요

멀티 선택 단축키

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

2분 50초쯤에서 멀티선택 하는 방법 알려주시면 감사하겠습니다!!

• react
• 인터랙티브-웹
• 클론코딩
• next.js
• tailwind-css
• zustand

case 문이 강의에서 안보여요

미해결

리눅스 쉘 스크립트

pdf 파일에는 case 개념이 들어있는데 강의에는 case 문 을 찾을 수가 없어요 ㅠㅠ 강의 제목에 case 표시좀요 ㅠㅠ

• linux
• shell-script

환경설정 압축파일 해제 불가

해결됨

시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script

2-0. vagrant를 사용하지 않고 구축할 수 있는 실습환경 https://www.inflearn.com/course/lecture?courseSlug=%EB%A6%AC%EB%88%85%EC%8A%A4-bash-%EC%8B%A4%EC%A0%84%ED%8E%B8&unitId=151860 요 강의에 올려주신 환경구축 압축 파일 실행 시 지원되지 않는 유형이라는 창이 뜨면서 해제가 불가능합니다. virtualbox는 버전 맞추어 별도로 다운을 받으면 되는데 실습환경인 cent1, cent2, cent3를 사용할 수가 없어 강의를 듣지 못하고 있습니다 .. 혹시 파일을 새로 올려주셨는데 제가 못 찾고 있는 부분이라면 안내부탁드립니다!

• linux
• shell-script

기초편 교안 실행 안될 경우 참고사항.

해결됨

시스템엔지니어가 알려주는 리눅스 기초편 Bash Shell Script

우분투 22.04에서 clone 받아서, ./ main.sh 를 실행시 아무것도 안뜹니다. 1 보니까 main.sh 를 실행하면 select 파일이 생성됩니다. (같은 경로) >> 사용자가 선택한 메뉴 번호 또는 에러 등을 로깅하는 것으로 보입니다. 해당 파일을 cat, vi 등을 통해 확인해보면 dialog가 없다고 나옵니다. 그러면 sudo apt install dialog 해준 후, 다시 실행해보면 아마 정상적으로 될겁니다! 2 dialog 메뉴 떴을 때, 아무것도 선택안하고 OK 선택하면 종료됩니다. space 키 또는 마우스를 활용해서 듣고자 하는 강의 목차를 선택한 후 OK 누르시면 됩니다! 파일을 열어서 분석해보면 금방 파악이 되는 것이지만, 혹시나 리눅스 입문한지 얼마 안되어서 잘 모르시는 분들도 계실까봐 작성하였습니다.

• linux
• shell-script

두개의 창띄우기

미해결

리눅스 쉘 스크립트

비교와 테스트 강의에서 두개의창을 띄우고 강의가 진행되는데 두개의 창을 띄우는 방법 알려주세요. 입문편 수강을 완료했습니만...

• linux
• shell-script

useQuery vs useQueryClient

해결됨

Next + React Query로 SNS 서비스 만들기

tanstack query와 next.js 를 함께 사용하면서 의문이 들어 질문합니다! 강의의 코드를 보니 같이 prefetch를 해도 유저데이터는 useQueryClient를 사용해서 데이터를 재사용하는듯한데 안에 하위 컴포넌트의 경우 prefetch를하고 useQuery를 사용해서 데이터를 가져오는듯 하더라구요 이 경우도 데이터를 재사용하는건가요? 아니면 새로 가져오는건가요? 그렇다면 똑같이 데이터를 prefetch해도 useQueryClient를 사용해서 가져오는것과 useQuery를 사용해서 가져와야하는 기준이 있을까요? (저의경우 프로젝트 전체를 prefetch후 useQueryClient를해서 데이터를 가져왔더니 데이터를 가져옴과 동시에 fresh가아니라 inactive상태가 되더라구요. ) 좋은강의 감사합니다. 벚꽃같은 제로초 화이팅

• react
• next.js
• react-query
• next-auth
• msw

웹사이트에서 바로 한글로 번역되는거 어떤 프로그램쓰시는건가요?

해결됨

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

안녕하세요. 처음 15초쯤에 nextjs소개하면서 나오는 번역프로그램은 어떤걸 쓰시는건가요? 편리해보여서요~

• react
• 인터랙티브-웹
• 클론코딩
• next.js
• tailwind-css
• zustand

Next에서 자동 로그인 구현

미해결

안녕하세요 😃 현재 Next.js 사용해 프로젝트 진행중인데 한번 로그인하면 웹에 재접속 시 자동으로 로그인 처리되도록 하고 싶습니다. 현업에서는 어떤 방식으로 진행하는지 궁금합니다! 답변 주시면 정말 정말 감사합니다!!

• next.js
• 프론트엔드
• 자동로그인
• jwt
• 토큰관리
• 현업
• 로그인
• 구현
• 질문
• 도와주세요

개인 팀프로젝트 중에 NextJS + react-query 관련 궁금증입니다.

해결됨

Next + React Query로 SNS 서비스 만들기

먼저 강의와 상관없는 질문 죄송합니다. Next 13 Page Router + React Query v3 사용해서 프로젝트 진행했었고, 이후에 강사님 강의를 수강하고 있습니다. 이전 프로젝트 진행 시 문제를 해결은 했지만 찝찝함이 남아있어 궁금증을 해소하기 위해 질문 남깁니다. getServerSideProps 사용해서 서버사이드에서 데이터를 불러오려고 했습니다. 서버(Spring)에서 쿠키 읽기에 실패해서 클라이언트에서 accessToken을 전달해야만 했습니다. 로그인시 accessToken을 클라이언트에서 쿠키에 직접 저장하고 axios 통신시 쿠키에 저장한 토큰을 꺼내서 header에 추가하여 요청하는 방식으로 구현하였는데, 서버 사이드에서는 브라우저 스토리지에 접근하지 못하므로 토큰을 읽지 못하는 문제가 발생했습니다. 모든 통신에서 토큰이 필요했던 프로젝트였어서 SSR을 포기해야하는건가? 하던 중에 React Query 의 Dehydration 방식을 적용하였더니 getServerSideProps 에서도 토큰을 읽고 전달하는것이 가능해졌습니다. 이러한 경우에도 SSR이 제대로 적용된 것이 맞는지, 그렇다면 React Query는 어떻게 브라우저 스토리지에 저장된 값을 읽을 수 있게 된건지 궁금합니다.

• react
• next.js
• react-query
• next-auth
• msw

[질문X] 로컬에서 build 후 npm start 에러

미해결

Next + React Query로 SNS 서비스 만들기

[auth][error] UntrustedHost: Host must be trusted. URL was: http://localhost:3000/api/auth/session .Read more at https://errors.authjs.dev#untrustedhost 백엔드를 로컬에서 돌리고 Next를 build 후 npm start 로 서버를 돌렸을 경우 발생하는 Next-Auth.js(Auth.js) 에러입니다. 신뢰되지 않은 호스트라 발생하는 에러라고 해서 찾아봤습니다. 방법 1. AUTH_TRUST_HOST=http://localhost:3000 .env 파일에 AUTH_TRUST_HOST 추가하기 [참고] https://github.com/nextauthjs/next-auth/discussions/6071 방법 2. export const { handlers: { GET, POST }, auth, signIn, } = NextAuth({ trustHost: true, // ... src\auth.ts 파일에 NextAuth 옵션에서 trustHost: true 옵션 추가하기 [참고] https://github.com/nextauthjs/next-auth/issues/6113

• react
• next.js
• react-query
• next-auth
• msw

SecureCRT 접속 오류

해결됨

시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script

안녕하세요 민구님!이틀전쯤 vms.tmpcompany.com 접속 여부 여쭤봤던 수강생입니다.해당 건은 host 파일에 제 로컬 ip와 도메인 입력 후 주석 삭제 저장하였더니 페이지에 정상 접속 확인이 되었습니다.사이트에 새로고침 할때마다 로그 쌓이는것도 확인되었구요.진심으로 감사드립니다! 그때 위 건과 추가하여 강의 외적으로 vmware 스크롤백 사이즈 관련 질문하나 드렸었는데요..음 SecureCRT 에서 cent1 ip 입력 후 접속하려 하면 위 처럼 나오는데, 왜 그런지 이유를 모르겠습니다.구글 검색을 해봤는데도 명확하 이유를 못찻겠네요...(제가 부족한 탓이겠지요..)아래 열린 터미널은 민구님에게 받은 cent1~3 받기전에 기존에 설치해서 공부했던 centos인데 SecureCRT에 아주 접속이 잘됩니다.위는 cen1(웹서버)인데 ip 입력하고 접속 누르면 저렇게 나오는데...이류를 알수 있을런지요... 강의 외적으로 쓸데없는 질문드려서 죄송합니다.

• linux
• shell-script

강의에서 로그를 쌓게 하는 vws.tmpcompany.com 이제 접속이 안되는건가요?

해결됨

시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script

저도 실전처럼 하고 싶어서 해당 웹사이트에 들어가서 로그를 생성하려 했더니현재 웹사이트가 열리지 않는것으로 확인되는데요..최대한 실무 환경과 비슷하게 하려 하는데, 대안인 사이트나 방법이 있을까요? (access.log 에 로그를 쌓이게 하고 싶습니다.)강의를 제작하신지 몇년이 지나 해당 사이트는 더이상 존재하지 않는건지.... 강의 외적으로 한가지 더 여쭙고 싶은데 제가 vmware workstation을 사용중인데..예를 들어 cat /etc/services/ 명령어를 실행하면 위에 상단에 출력된 내용을 못보고 있습니다.vmware workstation에서 스크롤백 버퍼사이즈 변경 하시는 방법을 아시는지요..? 위 내용을 확인하려고 ctrl+pageup , shift+pageup해도 먹지를 않네요 ㅠㅠ기존에 SecureCRT 프로그램으로 ip연결해서 이용했었는데 배포해주신 cent1~3 서버 ip는 등록이 또 안되어 긴 파일들 볼때 | more 옵션으로 끊어서 보고 있습니다.... 마우스로 올려볼수라도 있으면 좋으련만 그런것도 안보이네요.. 답변 해주시면 정말 감사하겠습니다!

• linux
• shell-script

강의에서 보여주시는 컨플이나 자료 따로 있을까요?

해결됨

시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script

강의하시면서 내용정리된 컨플 페이지나 파일을 따로 받을수는 없을까요?

• linux
• shell-script

docker-compose up 오류

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

docker-compose up을 사용하면 initdb: error: directory "/var/lib/postgresql/data" exists but is not empty initdb: hint: If you want to create a new database system, either remove or empty the directory "/var/lib/postgresql/data" or run initdb with an argument other than "/var/lib/postgresql/data". 라는 오류가 자꾸 발생합니다. 삭제하고 다시 해도 해결이 안되서 질문남깁니다. 어떻게 해결해야하나요.

• react
• node.js
• postgresql
• docker
• typescript
• 클론코딩
• next.js

import 절대경로 설정 방법 질문 드립니다!

해결됨

손에 익는 Next.js - 공식 문서 훑어보기

조은님 안녕하세요 🙂 강의 잘 보았습니다! 강의를 보다가 문득 궁금한 점이 있는데요! import 문 통해서 절대경로로 파일을 불러올 때, 전역에 있는 tsconfig.json 내에서 파일별로 일일이 수동 설정을 해주어야하는 걸로 아는데 조은님께서는 자동으로 @가 붙여진 형태로 불러와지는 거 같아서요! 혹시 따로 설정 어떻게 하셨는지 여쭤봐도 괜찮을까요?

• react
• typescript
• next.js
• next.js13

기존 react 에서 navigate 에 state 로 데이터를 전달했습니다.

해결됨

손에 익는 Next.js - 마이그레이션하기

안녕하세요. 현재 react 로 구성되어 있는 프로젝트를 next.js 로 마이그레이션 하기 위해 강의 신청해서 들었습니다. 마이그레이션 도중 질문이 있어서 글 남겨봅니다. 1) 기존 react 에서 navigate 의 state 값으로 전달하던 데이터 들이 있습니다. 전달된 데이터는 location state 로 가져와서 사용했구요. 2) next 12 버전 까지는 query 에 객체를 담아서 보낼수 있고 url 도 as 를 이용해서 제어할 수 있는걸 확인했습니다. 3) 하지만 13버전 이후부터 next/router -> next/navigate 로 변경되면서 query 객체, as 가 삭제되어진 걸로 확인되는데 페이지 이동시 데이터를 전달하러면 url 에 그냥 꼬라박는 방법 뿐인지 질문 드립니다.

• react
• next.js
• vitejs

vagrant up 명령어 실행시

해결됨

시스템엔지니어가 알려주는 리눅스 실전편 Bash Shell Script

동강 14:52쯤 진행하고 있는데요 github에서 강사님이 올려주신 스크립트까지 정상적으로 가져왔고 서버에 설치(?)된걸 확인 하였습니다. cd VWS_vagrant_script 들어가서 vagrant up 명령어를 입력 후 실행하니 명령어를 찾을수없다고 하여 실행이 안되는데 왜그런지 좀 알고 싶습니다.. 참고로 저는 vmware workstation15버전을 쓰고있는데...이거랑 상관이 있을까요...? cent1~3 전부 정상 접속까지 확인되었는데.... 답변 주심 감사하겠습니다.

• linux
• shell-script

회원가입-status 201 Ok- 리다이렉트 안되는 현상

미해결

Next + React Query로 SNS 서비스 만들기

일전에 동일한 문제로 질문 올렸는데, 혹시나 제 코드에 발견되지 않은 오타나 문제가 있을까하여 제로초님 깃에서 다운받은 ch4폴더로 실행해도 동일한 문제 발생합니다. MacOs: Ventura 13.6.4 크롬브라우저로 보고있습니다. DB연결문제는 Postgresql은 버전을 낮춰서 Homebrew로 설치하고, Username을 맥os 유저네임으로 변경하니까 다행히 연결이되었습니다. 그런데 여전히, 회원가입후 리다이렉트 안되는 현상과 심지어 회원가입 된 Postgresql 테이블에 User정보도 잘 들어가있고, 회원가입된 유저의 id,비번으로 로그인해도 로그인도 안됩니다. package.json 버전정보: 클라이언트에서 리턴받은 값: 서버에서 나오는 console: 무엇이 문제일까요?

• react
• next.js
• react-query
• next-auth
• msw

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다.

해결됨

손에 익는 Next.js - 마이그레이션하기

Create React App에서 Next.js로 마이그레이션하기 의 깃허브 소스도 npm i 하면 에러가 발생합니다. $ npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-scripts@5.0.1 npm ERR! Found: typescript@5.3.3 npm ERR! node_modules/typescript npm ERR! typescript@"^5.3.3" from the root project npm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3 npm ERR! node_modules/fork-ts-checker-webpack-plugin npm ERR! fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1 npm ERR! node_modules/react-dev-utils npm ERR! react-dev-utils@"^12.0.1" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! 1 more (tsutils) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! npm ERR! Conflicting peer dependency: typescript@4.9.5 npm ERR! node_modules/typescript npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"5.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! npm ERR! For a full report see: npm ERR! C:\Users\Administrator\AppData\Local\npm-cache\_logs\2024-03-02T03_03_34_358Z-eresolve-report.txt 관련한 안내 좀 부탁합니다.

• react
• next.js
• vitejs

Cannot find module 에러

해결됨

손에 익는 Next.js - 마이그레이션하기

vite 로 작성한 경우를 마이그레이션 하는데요. 강의에 따라서 진행하였는데 최종 아래처럼 에러가 발생합니다. Require stack: \node_modules\next\dist\server\dev\next-dev-server.js vite\node_modules\next\dist\server\dev\next-dev-server.js vite\node_modules\next\dist\server\next.js vite\node_modules\next\dist\server\lib\start-server.js package.json 은 아래와 같아요. { "name": "next-migration-02-vite", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "next dev", "build": "next build", "lint": "next lint", "start": "next start" }, "dependencies": { "next": "^14.1.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@types/node": "20.11.24", "@types/react": "^18.2.56", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^7.0.2", "@typescript-eslint/parser": "^7.0.2", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.56.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "typescript": "^5.2.2", "vite": "^5.1.4" } } 관련해서 안내좀 부탁드립니다. 좋은 주말 되세요~

• react
• next.js
• vitejs