묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결
EC2 리눅스에서 리액트 빌드 오류
안녕하세요 제가 AWS EC2 리눅스에서 리액트 프로젝트를 빌드하려는데 오류가 납니다.npm start 까진 잘 되는데 npm run build 명령어를 실행하면 위와 같은 오류가 뜨는데 해결방법이 있을까요...
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 order에 대해
const post = await Post.findOne({ where: { id: parseInt(req.query.postId) }, order: [ [{ model: Comment }, "createdAt", "ASC"], [{ model: Nested_Comment }, "createdAt", "ASC"], ], include: [ { model: Image, attributes: ["id", "src"] }, { model: User, attributes: ["id", "nickname", "profile_img"], }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname", "profile_img"], }, { model: Nested_Comment, include: [ { model: User, attributes: ["id", "nickname", "profile_img"], }, ], }, ], }, { model: User, as: "Likers", }, { model: Image }, ], });강좌를 듣고 게시판을 하나 만들고 있는 중인데요Comment를 createdAt 기준으로 ASC 정렬,Nested_Comment를 createdAt 기준으로 ASC정렬 하고 싶은데Comment 까지는 정렬이 되지만 아무리 고쳐봐도 Nested_Comment는 적용이 안되네요. 공식문서도 자세하게 나오지는 않고..도저히 안되겠어서 질문드립니다. Nested_Comment까지 정렬하고 싶으면 어떻게 order 속성을 작성해야 하나요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
API 보안 관련 질문입니다!
안녕하세요!현재 올려주신 강의 내용을 바탕으로 쇼핑몰 상품의 정품 등록을 하는 서비스를 구현하려고 하고 있습니다.정품 등록 과정에서 사용자가 정품 인증 코드를 입력하면, API 서버를 통해 데이터베이스에 해당 코드가 존재하는지 찾은 후, 존재한다면 해당 코드와 사용자를 매칭시키는 방식으로 우선 구현하고자 합니다. (약간 문화상품권 등록 같기도 하네요 ㅎㅎ)물론 위 내용에 관련된 코드 질문은 아니구요 ㅎㅎ 위와 같은 내용이 구현되었을 때 악의를 가진 사용자가 postman 등 툴을 통해 API 서버에 무작위로 정품 인증 코드를 보낸 후, 정말 우연히 존재하는 코드를 찾은 경우에 그 코드를 사용해서 정품 등록을 할 수 있을 것 같은데, 이를 어떻게 대비하는게 좋을지 궁금합니다. rate limit이 생각나긴 하지만... 그리 완벽한 방법은 아닐 것 같아서요..!!그리고 API 서버 주소가 외부에 노출이 되지 않는 경우엔 무차별 대입 공격을 하기도 힘들텐데, 개발자도구에서 소스를 확인하면 결국 API 서버 주소가 나오잖아요~ 그래서 API 서버 주소를 쉽게 알아내지 못하게 하는 방법이 있을지도 궁금합니다.또 하나 구현해야 하는 기능이 사용자 본인이 정품 등록한 제품을 조회할 수 있도록 하는 기능인데요, userID가 API 서버에 전송되면 데이터베이스에서 해당 userID로 등록된 제품들을 찾아서 보여주도록 구축하려고 합니다. 다만 이 경우에도 위와 비슷하게 API 서버 주소를 알고있는 사람이 다른 사람 ID를 API 서버에 전송해서 그 사람의 정품 등록된 제품을 조회할 수 있는 문제점이 있을 것 같은데요, 이를 어떻게 해결하는게 좋을지도 의견 여쭤보고 싳습니다.요약하자면 다음과 같습니다.:API 서버에 무작위 정품인증 코드를 보내는걸 어떻게 막는게 좋을까요? 제가 생각한 방법은 rate limit인데, 더 좋은 방법이 있을까요?API 서버 주소를 개발자도구 등을 통해 쉽게 알아내지 못하게 하는 방법이 있을까요?userID를 통해 API 서버에서 해당 사용자의 정보를 가져오는 경우, 타인이 API 서버와 통신해서 다른 사용자의 정보를 가져오는걸 어떻게 막을 수 있을지 궁금합니다. 제 짧은 생각으로는 ID를 암호화해서 API 서버와 통신해야 될 것 같은데, 조금 막막한 감이 있네요.. 현재 제가 사용하는 프론트엔드가 react가 아니라 순정 html+JS인지라...약간 질문이 두서없고 강의 주제랑 조금 벗어난 것 같지만... 잘 부탁드리겠습니다..ㅎㅎ지금 질문드리는 내용이 결국 API 서버 보안과 관련된 내용인 것 같은데, 혹시나 해당 내용과 관련해서 말씀해주고 싶으신 내용이 있으시다면 설령 TMI라고 생각드실지라도 얼마든 알려주세요!! 열심히 배우겠습니다. 💪좋은 강의 감사드립니다. 좋은 하루 되세요!
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
jsconfig 오류 질문입니다!
{ "compilerOptions": {"baseUrl": "src" },"include": ["src"]} keonhongkoo@keonhongui-MacBookAir frontend % yarn startyarn run v1.22.19$ react-scripts startnode:internal/modules/cjs/loader:1325 throw err; ^SyntaxError: /Users/keonhongkoo/Desktop/instagram/frontend/jsconfig.json: Unexpected token / in JSON at position 75 at parse (<anonymous>) at Module._extensions..json (node:internal/modules/cjs/loader:1322:39) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) at require (node:internal/modules/cjs/helpers:110:18) at getModules (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:126:14) at Object.<anonymous> (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:142:18) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)Node.js v18.14.1error Command failed with exit code 1.info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이렇게 결과가 출력되는데 해결책이 안보이네요... vscode도 재시작해봤습니다ㅠ
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
[공유목적] nginx 설정 후 쿠키가 전달되지 않을 경우
작성한 이유(저는 이 문제로 골머리를 앓았어서..)도메인 설정 후 쿠키가 전달되지 않아 로그인이 되지 않았다가 해결되었습니다session 설정 뿐만 아니라 nginx 설정도 확인해야 합니다혹시라도 이 문제로 고통받으시는 분이 있다면 해결책이 되길 바랍니다 back쪽 session 설정if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet()); app.set("trust proxy", 1); //배포 시 추가 app.use( cors({ origin: "https://engword.shop", //local "http://localhost:3000" credentials: true, }) ); } else { app.use(morgan("dev")); app.use( cors({ origin: true, credentials: true, }) ); } passportConfig(); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, proxy: true, //배포 시 추가 cookie: { httpOnly: true, secure: process.env.NODE_ENV === "production" ? true : false, //https 적용 시 true sameSite: process.env.NODE_ENV === "production" ? "none" : false, domain: process.env.NODE_ENV === "production" && ".engword.shop", }, }) ); nginx 설정back 에서 설정한 nginx입니다sudo vim /etc/nginx/nginx.confserver { server_name api.engword.shop; location / { proxy_set_header HOST $host; //추가 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://127.0.0.0:3000 //http로 설정할 것 proxy_redirect off; } //아래는 certbot 내용 }위와 같이 설정을 바꾼 후 nginx를 다시 실행합니다sudo systemctl restart nginx pm2로 진행 시 pm2를 껏다 키거나, pm2 재시작을 하시면 됩니다.pm2 껏다 키는 경우sudo npx pm2 killnpm start (혹은 sudo npm start)pm2 재시작sudo npx pm2 reload all
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
아나콘다 버전 관련 문의 드립니다~!
안녕하세요~!아나콘다를 설치하면서 두가지 정도 질문이 있습니다1) 2023.02.22날짜로 아나콘다 최신판을 설치하는데 그림과 같이 옵션사항에 환경변수 체크가 되지 않습니다 ㅠㅠ 업데이트 되면서 바뀐것인지 아나콘다 최신판에서 이 옵션을 선택하지 않아도 괜찮을까요??2) 2023.02.22날짜로 아나콘다 최신판에서는 파이썬 버전이 3.9버전인데 파이썬 공식버전으로는 3.11까지 배포가 되었습니다 버전 차이가 많이 나도 아나콘다를 설치하는게 사용에 더 편리할까요??
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
network 캐싱에 대해서 질문 있습니다!
안녕하세요 동균님 network 캐싱에 대해서 궁금한 점이 있어서 질문 남깁니다!image를 캐싱하면 image를 요청할 때 재요청이 안되는건 알겠는데, 저 network tab에서 disable cache 같은 경우는 해당 사용자 환경에서 설정할 수 있는 부분이라고 생각합니다. disable cache를 체크한 경우에는 캐싱을 못할텐데 그 부분에 대해서는 어떻게 해결을 해야하는건가요? 아니면 저 부분도 사용자 환경에 적용할 수 있도록 하는 방법이 있는건가요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
압축파일 말고, git이나 코드 복사할 수 있는 링크는 없나요?
생각보다 파일의 용량이 커서 압축이 안 풀립니다..ㅎㅎ복사해도 되는 부분들은 복사해서 쓰고 싶은데 있으면 공유 부탁드릴게요
-
미해결[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm install -g serve 설치 오류가 납니다..ㅠㅠ
hyunwooji@jihyeon-uui-MacBook-Air emotiondiary % npm install -g servenpm WARN config global --global, --local are deprecated. Use --location=global instead.npm ERR! code EACCESnpm ERR! syscall mkdirnpm ERR! path /usr/local/lib/node_modules/servenpm ERR! errno -13npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/serve'] {npm ERR! errno: -13,npm ERR! code: 'EACCES',npm ERR! syscall: 'mkdir',npm ERR! path: '/usr/local/lib/node_modules/serve'npm ERR! }npm ERR! npm ERR! The operation was rejected by your operating system.npm ERR! It is likely you do not have the permissions to access this file as the current usernpm ERR! npm ERR! If you believe this might be a permissions issue, please double-check thenpm ERR! permissions of the file and its containing directories, or try runningnpm ERR! the command again as root/Administrator.npm ERR! A complete log of this run can be found in:npm ERR! /Users/hyunwooji/.npm/_logs/2023-02-19T07_24_53_420Z-debug-0.log 구글링 해봣을때는 npm 업데이트 문제인거같다고로 찾아서npm update 도 해봣는데 전혀 해결되지 않고 더 꼬이고 있는거같습니다.. 완강을 앞두고 좌절중이네요ㅠ 오늘 다 완강하고 싶었는데 도저히 해결이 안되어 질문남깁니다 감사합니다!!
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
함수 컴포넌트와 필수 Hook에서 setValue({value1:10}) 관련 질문이요!
function App2() { const [value1, setValue1] = useState(0); const [value2, setValue2] = useState(0); const [value, setValue] = useState({ value1: 0, value2: 0 }); const onClick = () => { setValue({ value1: 10 }); }; return ( <div> Hello App2 <hr /> {JSON.stringify(value1)} {JSON.stringify(value2)} {JSON.stringify(value.value1)} <button onClick={onClick}>클릭</button> </div> ); } export default App2; 여기서 onClick을 수행할때 왜 value.value1의 값이 변경되는 건가요?? 첫번째에 useState(0)으로 만든 value1은 어떻게 해야 값의 변경이 되는거죠??
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
노드 아예 모르는 상태로 들어도 괜찮을까요?
리액트는 어느정도 프로젝트도 해보고 웬만한건 구현이 가능한 정도인데 노드에 관해서 전혀 모르는데 수강해도 괜찮을까요?혹시 노드 지식이 필요하다면 어떤 강의를 듣고 와서 수강을 해야할까요?
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
204 error 문제
안녕하세요 재남님!배포 과정에서 문제가 있어 질문 드립니다~현재 상황은 heroku에 깃 연동을 통해 배포를 한 상태입니다.그렇기 때문에 herokuURL/graphql 을 입력하면 studio.apollographql.com에서 날리는 api test도 잘 동작하고 있습니다.그런데 vercel로 배포한 페이지에서는 products 화면을 제외한 cart, admin 같은 경우는 204 error가 뜨고 있는 상황입니다. 검색을 해보니 컨텐츠를 보여줄 필요가 없다(?) 라고 나오는데 어떤 문제인지 잘모르겠습니다.. ㅜ
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
server 실행 오류가 납니다.
https://github.com/JaeHyuk1217/JH_mall/tree/master/shopping-mall server을 실행하면 이러한 오류가뜹니다... 환경변수 설정도 해보고 node 재설치도 해봤는데 되지 않습니다..
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
4092 Error
8080으로 안되서 검색해서 이것저것 해봐도 안되길래 8090으로 하니까 되는데 8090을 써도 상관 없나요?
-
해결됨풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기
4일차 장바구니에서 오류가 납니다.
안녕하세요 4일차 공부를 하던중 willpay를 cart 에서 밖으로 꺼내 willpay-index.tsx 로 변경하게 되면서 이러한 오류가 뜨면서 장바구니가 담아지지 않습니다.(장바구니가 비어있을 때는 비어있다는 텍스트는 출력이됩니다) 코드상 오류 표시는 안나는데 해결이 안되서 여쭤봅니다. 감사합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
pandas 로 csv 읽어서 django model 에 저장하는데 속도 느려지는 이슈 있음. 질문드립니다.
200여개의 csv 파일이 있습니다. (용량은 각각 1메가에서 120메가 - 최대 100만건 데이터 등등 ). 결측치 가 있어서 판다스 에서 불러들여서 정리하고 for 반복문으로 파일 개별적으로 읽어 들여와 장고 모델에 save() 로 입력시키는 작업을 진행하고 있습니다.초반 10여개 파일까지는 제법 속도가 나오는데 (7만행 데이터 20분 소요) 이후로 속도가 급격하게 감소해서 24시간 돌려서 30메가 파일 겨우 저장 중입니다(1건에 1초씩 걸리네요 ㅠㅠ). 개발중이라 로컬에 있는 장고 내장 sqlite 사용 했습니다. 속도를 좀 더 빠르게 하는 방법이 있을까요? 3일째 검색 해봤는데 별다른 해결책이 보이지 않아서 질문 남겨 봅니다. app.py # new 폴더에 정리된 csv 파일을 읽어서 DB에 저장 import pandas as pd # django 프로젝트에 있는 settings.py 파일을 읽어서 환경변수로 설정 import os os.environ.setdefault("DJANGO_SETTINGS_MODULE", "dbking.settings") import django django.setup() #django 프로젝트에 있는 models.py 파일에서 BasicData 클래스를 읽어온다 from common.models import BasicData # new 폴더에 있는 파일명을 읽어서 product 변수에 리스트에 저장 product_list = os.listdir("./script/newdb") # product_list 에 csv 파일 정렬(오름차순) for x in product_list: # csv 파일 하나씩 읽어오기 df = pd.read_csv("./script/newdb/" + x, encoding="cp949") # 결측치를 0으로 채운다 df = df.fillna(0) for a in list_of_csv: # 파일마다 컬럼수가 달라서 remark1, remark2 라는 예비컬럼 2개 추가 # -> 인덱스 에러 나는 경우 0 으로 저장 if a[16] is None: a.insert(16, 0) a.insert(17, 0) elif a[17] is None: a.insert(17, 0) # DB에 저장 try: db_insert = BasicData( opnSvcId = a[2], opnSfTeamCode = a[3], mgtNo = a[4], fileNumber = fileNumber, businessType = businessType, opnSvcNm = a[1], apvPermYmd = a[5], confirmNumber = a[6], businessCondition = a[7], siteTel = a[8], sitePostNo = a[9], siteWhlAddr = a[10], rdnWhlAddr = a[11], rdnPostNo = a[12], bplcNm = a[13], latitude = a[14], longitude = a[15], remark1 = a[16], remark2 = a[17], ) i += 1 # print(i) except Exception as e: print("쿼리", e) continue #DB에 저장 입력 try: db_insert.save() except Exception as e: print("저장중에러",e) continue from django.db import models class BasicData(models.Model): # 개방서비스아이디 opnSvcId = models.CharField(max_length=100) #개방자치단체코드 opnSfTeamCode = models.CharField(max_length=10) # 관리번호 mgtNo = models.CharField(max_length=100) #파일번호 fileNumber = models.IntegerField() #업종명 businessType = models.CharField(max_length=100) #개방서비스명 opnSvcNm = models.CharField(max_length=100) #인허가일자 apvPermYmd = models.DateField() #영업상태구분코드(1-정상, 2-폐업, 3-휴업, 4-전환) confirmNumber = models.IntegerField() #영업상태명 businessCondition = models.CharField(max_length=100) #소재지전화 siteTel = models.CharField(max_length=100) #우편번호 sitePostNo = models.CharField(max_length=100) #주소 siteWhlAddr = models.CharField(max_length=100) #도로명주소 rdnWhlAddr = models.CharField(max_length=100) #도로명우편번호 rdnPostNo = models.CharField(max_length=100) #사업장명 bplcNm = models.CharField(max_length=100) # 위도 latitude = models.FloatField() # 경도 longitude = models.FloatField() #비고1 remark1 = models.CharField(max_length=100) #비고2 remark2 = models.CharField(max_length=100) # 생성시점 created = models.DateTimeField(auto_now_add=True) update = models.DateTimeField(auto_now=True) def save(self, *args, **kwargs): queryset = BasicData.objects.filter(mgtNo__exact=self.mgtNo) # 중복된 이름이 없을 때만 저장 if len(queryset) == 0: super().save(*args, **kwargs) print('> Created new category') # if '&' in self.addr: # self.addr = self.addr.replace('&', ' ') # self.save() # 중복된 카테고리 있을 시 저장 안함 else: print('> Cannot create category with existing name') def __str__(self): return self.name
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
apollo 셋팅하는 부분이 어느쪽인가요?
해당강의 찾아봐도 셋팅하는 부분은 안나오고그냥 설치시 버전 오류가 발생합니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
Django Unit Test에서 Async Task 시 Default DB 사용 이슈
unittest 기반의 Unit Test시 Celery 혹은 ProcessPoolExecutor을 이용하면 해당 Context에서 DB 접근 시, Test DB를 참조 하는 것이 아니라 settings의 Default로 설정해놓은 Exist DB에 접근하는 이슈가 있더군요. 해당하는 경우 어떻게 해야 Test DB로 붙어서 작업할 수 있을까요?with concurrent.futures.ProcessPoolExecutor() as executor:
-
미해결처음 만난 리액트(React)
Event handler 질문입니다.
변수 handleConfirm의 Arrow function이 실행하는 것은 어떤걸 받아서 무엇을 하는 건가요?prevIsConfirmed이 뭘 하는 녀석인지 모르겠습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
회원 가입 페이지 기능 생성(3) Error: DataSource is not set for this entity.
client 쪽에서는 에러가 안나지만server 쪽에서 데이터는 잘 받지만Error: DataSource is not set for this entity.나네요.백엔드쪽은 익숙하지가 않아 구글링을 해봐도 어디서 에러가 나는지 잘 모르겠습니다. 게시판에 유사한 글이 있긴 하지만 해결책을 안되어 문의 드려요.AppDataSource는 이렇게 되어있습니다. 제 깃 주소는 https://github.com/ssinking91/Reddit입니다. 이 버그 너무 해결하고 싶습니다.감사합니다. 임시방편으로 모든 entity를 불러와 AppDataSource의 entities경로로 넣어 줬습니다.혹시 에러나시는 분들 임시방편으로 이렇게 해주시면 잘 됩니다.import "reflect-metadata"; import { DataSource } from "typeorm"; import User from "./entities/User"; import Post from "./entities/Post"; import Sub from "./entities/Sub"; import Comment from "./entities/Comment"; import Vote from "./entities/Vote"; export const AppDataSource = new DataSource({ type: "postgres", host: "localhost", port: 5432, username: "postgres", password: "password", database: "postgres", synchronize: true, logging: false, // entities: ["src/entities/**/*.ts"], entities: [User, Post, Sub, Comment, Vote], migrations: [], subscribers: [], });