묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
django createview에서 다중 이미지 올릴 수 있도록 코드 좀 봐주실수 있을까요??
안녕하세요?? django에 입문한지 얼마되지 않은 사람입니다~ 클론 코딩 위주로 듣다가 기초가 부족한것 같아서 파이썬/장고 웹서비스 개발 강의를 수강하게 되었습니다 좋은 강의 항상 감사드립니다!! 이전에 짰던 코드는 article을 create하는 page에서 image를 올리는 것인데 image를 1개밖에 못올리도록 되어 있어서요 여러 이미지를 오릴수 있게 코드를 짜고 싶은데 구글링이나 stackoverflow를 봐도 맞게 나오는게 없어서 질문 드려 봅니다 ㅜㅜ createview를 이용하였는데 도저히 제실력으로는 바꿀수가 없어서요ㅜㅜ 도움 좀 부탁드립니다ㅜㅜ models.py from django.contrib.auth.models import Userfrom django.db import models# Create your models here.from projectapp.models import Projectclass Article(models.Model): writer = models.ForeignKey(User, on_delete=models.SET_NULL, related_name='article', null=True) project = models.ForeignKey(Project, on_delete=models.SET_NULL, related_name='article', null=True) title = models.CharField(max_length=200, null=False) image = models.ImageField(upload_to='article/', null=False) content = models.TextField(null=True) created_at = models.DateField(auto_now_add=True, null=True) like = models.IntegerField(default=0) unlike = models.IntegerField(default=0) views.py from django.contrib.auth.decorators import login_requiredfrom django.shortcuts import render# Create your views here.from django.urls import reverse, reverse_lazyfrom django.utils.decorators import method_decoratorfrom django.views.generic import CreateView, DetailView, UpdateView, DeleteView, ListViewfrom django.views.generic.edit import FormMixinfrom articleapp.decorators import article_ownership_requiredfrom articleapp.forms import ArticleCreationFormfrom articleapp.models import Articlefrom commentapp.forms import CommentCreationForm@method_decorator(login_required, 'get')@method_decorator(login_required, 'post')class ArticleCreateView(CreateView): model = Article form_class = ArticleCreationForm template_name = 'articleapp/create.html' def form_valid(self, form): temp_article = form.save(commit=False) temp_article.writer = self.request.user temp_article.save() return super().form_valid(form) def get_success_url(self): return reverse('articleapp:detail', kwargs={'pk': self.object.pk}) forms.py from django.forms import ModelFormfrom django import formsfrom articleapp.models import Articlefrom projectapp.models import Projectclass ArticleCreationForm(ModelForm): content = forms.CharField(widget=forms.Textarea(attrs={'class': 'editable', 'style': 'height: auto; text-align: left;'})) project = forms.ModelChoiceField(queryset=Project.objects.all(), required=False) class Meta: model = Article fields = ['title', 'image', 'project', 'content'] create.html {% extends 'base.html' %}{% load bootstrap4 %}{% block content %}<script src="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script><link rel="stylesheet" href="//cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8"> <div style="text-align: center; max-width: 500px; margin: 4rem auto"> <div class="mb-4"> <h4>Article Create</h4> </div> <form action="{% url 'articleapp:create' %}" method="post" enctype="multipart/form-data"> {% csrf_token %} {% bootstrap_form form %} <input type="submit" class="btn btn-dark rounded-pill col-6 mt-3"> </form> </div><script>var editor = new MediumEditor('.editable');</script>{% endblock %} card.html <div> <img src="{{ article.image.url }}" alt=""></div>
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
localStorage 말고
이 강의에서는 데이터베이스를 이용하여 CRUD하는 것은 다루지 않나요??
-
해결됨[초중급편] 안드로이드 데이팅 앱 만들기(Android Kotlin)
강의자료를 못찾겠어요
안녕하세요 학습하고 있는 학생입니다. 이미지 파일등 관련 강의자료가 어디에 위치하고 있는지 알려주시면 감사하겠습니다
-
해결됨[C++과 언리얼로 만드는 MMORPG 게임 개발 시리즈] Part1: C++ 프로그래밍 입문
weakCount가 무엇의 갯수인지 헷갈립니다
refCount는 이 객체를 참고하는 애가 몇 명인지 인데 _weakCount는 "weak_ptr가 몇개가 지금 이 객체를 참고하고 있는지 관리한다" 라는 말이 refCount는 참조하고 있는 복수의 shared_ptr의 갯수를 뜻한다면 weakCount는 받고 있는 shared_ptr 가 받고 있는 객체가 살아있는지 죽어있는지 0 아니면 1이라고 이해해도 될까요?
-
미해결스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
cmd명령창 libs에서 jar실행 시 오류가 뜹니다.
이런 문구의 오류가 뜨네요 ㅠㅠㅜ
-
미해결홍정모의 따라하며 배우는 C언어
변수에 값을 할당하기 전에 컴퓨터는 어떻게 계산을 하나요?
char ch; scanf("%hhd", &ch); printf("%i", ch); Overflow에 관한 질문이 있습니다. char 데이터는 -128 ~ 127까지 값을 사용할 수 있습니다. 이때 128 값을 할당하면 -128로 overflow 129 값을 할당하면 -127로 overflow 130 값을 할당하면 -126로 overflow가 됨이 신기했습니다. 왜냐하면 overflow된 값을 보간법으로 처리하는 방법을 모르기 때문에 출력값을 기준으로 컴퓨터가 어떻게 동작하고 있는지 추측해봐야 했습니다. binary 계산으로 보면 컴퓨터는 단순히 1을 계속하여 더하고 있을 뿐입니다. 부호| 값 0 | 111 1111 = 127 <= 127 1 | 000 0000 = -128 <= 128 1 | 000 0001 = -127 <= 129 1 | 000 0010 = -126 <= 130 질문입니다. 1) 그렇다면 컴퓨터가 int 타입의 16이란 숫자를 저장할 때도 0부터 계속해서 1을 더하여 16을 구하는 건가요? 컴퓨터가 데이터를 저장하기 전 계산하는 과정이 궁금해졌습니다! 2) int 타입은 그렇다고하면 float나 double같은 경우는 exponent와 fraction이 각각 나누어져 있기 때문에 실제 값을 계산하고 할당할 때 상당히 복잡한 과정이 있을 것 같습니다. 교수님이 알려주셔서 각 파트를 어떻게 계산하는지는 알고 있으나 컴퓨터가 이 과정을 어떻게 계산하고 처리하는지는 막상 상상이 되지 않습니다. c 언어가 상당히 저수준의 언어라고 생각해서 배우면 컴퓨터를 잘 이해할 수 있을 거 같았는데 뭔가 더 깊은게 많을 거 같네요 ㅠㅠ 도와주세여
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
21:30 질문입니다.
todoItem.completed = !todoItem.completed; 를 넣어줌으로 인해 체크표시에 밑줄이 사라졌다 생겼다 하는 기능이 구현이 된거같은데요 todoItem.completed = !todoItem.completed; 이 구문이 어떤 기능을 해서 해당 기능이 구현이 되는지와 = ! 의 문법이 어떤 기능을 수행하는지 궁금합니다.
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
테스트 케이스 작성 질문드립니다
안녕하세요 스프링부트환경에서 junit 으로 테스트 케이스를 작성하고 테스트를 하는데 시간이 너무 오래걸리는데 단축할 수 있는 방법이 있는지 알고 싶습니다 테스트 케이스에서 @Autowired 로 서비스를 가져다 쓰고 있는데 실행할때마다 프로젝트의 모든 스프링빈들이 다 올라가고 테스트가 실행되는 것 같습니다 보통 실무에서는 어떻게 하는지 궁금합니다 어쩔 수 없는 부분인건지 아니면 실무에서는 테스트케이스에서 사용하는 서비스만 로딩해서 하는 방법으로 하는건지 잘 모르겠네요 실무에서는 어떤 방법을 써서 테스트 수행시간을 줄이나요? 만약 해당 서비스만 로딩해서 한다면 그 방법도 알고 싶습니다 감사합니다
-
미해결React 기반 Gatsby로 기술 블로그 개발하기
질문드립니다.!
InfoPage가 어떻게 metadataQuery의 결과값을 매개변수로 실행될 수 있나요?
-
미해결현존 최강 크롤링 기술: Scrapy와 Selenium 정복
[실전 크롤링: 지마켓 크롤링하며, scrapy 실전 활용법 익히기1] 5분50초쯤 질문
안녕하세요, 강사님. 항상 좋은강의에 감사드립니다. 제목과 같은 위치에서 해주신 설명이 1) G마켓 카테고리의 url을 다 spider_name.py의 spider_nameSpider class에서 클래스변수인 start_urls(리스트)에 복사붙여넣기하면 그 url이 바뀔경우 유효하지 않으므로 2) G마켓 ALL카테고리(default)에서 카테고리들을 다 css selector로 찾아가자 라고 말씀을 해주셨습니다. 그러면 url이 바뀌더라도, 바뀐 url을 css selector를 통해 잘 찾아갈 것으로 이해가 됩니다. 그런데 제가 이런 부분에 잘 모르다보니까... 반대로는 css selector가 바뀐다면 못찾아가는 상황이 나오지 않을까? 걱정됩니다. 일반적으로 css selector는 url 같은것보다 더 안바뀌니까, 상대적으로 변동 가능성이 적다고 보는것인가요? (사실 이강의 및 이 앞의 강의에서도 url을 간 후 css selector로 찾아가는데, 제가 홈페이지를 어떻게 만드는지 전혀 모르다 보니까... 극단적으로 만든사람이 css selector를 바꿔벌니다면 코드가 작동하지않은지? 에 대한 궁금증이 있었습니다.) 더 나아가... 홈페이지를 만드는 입장에서 굳이 크롤링하는사람들을 배려해주진 않을것 같지만 OpenAPI 같은경우는 어떤게 어떤거다~ 등의 설명이 있는데, 크롤링을 하는 입장에서는 기존대비 변경된것들이 이런게 있으니 유의하세요~ 라고 따로 안내같은건 없겠죠? 관련하여 답변주시면 큰 도움이 될 것 같습니다!
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
아이템서비스 테스트문 질문입니다
현재 강의 중 코드를 그대로 테스트하고 있었습니다. 그런데 itemservice의 경우 디비에 넣지 않은 상태면 id가 정해지지있지 않고, 그것을 이용해 업데이트와 삽입을 구분짓고 잇지 않습니까? 그러면 이경우엔 어서션 코드를 어떻게 짜야 좋을까요ㅠ 우선 지금은 제가 이름을 통해 찾는 함수를 추가해서 테스트를 진행해서 통과 시켰는데요 어떤게 좀더 효율적이고 실무적인 방법인지 알고싶습니다.
-
미해결하울의 안드로이드 인스타그램 클론 만들기
로그인 시 에러
로그인 시 an internal error has occured라며 에러가 뜹니다. 파이어베이스에서 로그인 권한 설정도 했습니다..!
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part9: MMO 컨텐츠 구현 (DB연동 + 대형 구조 + 라이브 준비)
DbContext 연동 질문
영상 3분 20초쯤에 sqlserver와 loggingconsole 다운 받고나서 Alt+Enter로 using entityframeworkcore를 추가 하셨는데요 sqlserver를 다운 받으면 entityframeworkcore가 기본으로 딸려와서 entityframeworkcore가 적용이 되는건지 아니면 다른이유가 있는건지 궁금합니다
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
강의 9분쯤 부분에 질문있습니다.
created_at 필드의 year과 month 변수를 랜덤으로 바꾸는 부분에서 질문있습니다. from instagram.models import Post post_list = Post.objects.all() import random # for post in post_list: post = post_list.get(pk=105) year = random.choice(range(1990, 2020)) month = random.choice(range(1, 13)) print(post.created_at.year) # 첫번째 print post.created_at = post.created_at.replace(year=year, month=month) print(post.created_at.year) # 두번째 print post.save() print(post.created_at.year) # 세번째 print year과 month 변수가 바뀌지 않아 print문으로 찍어보았는데요. 첫번째 print : 2021 두번째 print : 1994 세번째 print : 2021 이렇게 출력되었습니다. save 메서드를 호출하면서 원래대로 돌아간 것 같은데 혹시 지정해야하는 옵션이 있을까요?
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
서버 모듈, 라이브러리 인스톨 문제
안녕하세요! 이번에 ssh를 이용해 외부 서버를 이용해 배포하려고 합니다. 테스트를 하기 위해서 강사님의 django-with-react-rev5 파일을 깃 허브에서 클론하였고 (물론 제 파일로도 시도해보았습니다.) - > https://github.com/askcompany-kr/django-with-react-rev5.git 모듈과 라이브러리를 인스톨 하기 위해서 python install -r requirements 를 통해 인스톨 했습니다. backend 인스톨 받아졌는데 System check identified no issues (0 silenced). Exception in thread django-main-thread: Traceback (most recent call last): File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/base/base.py", line 220, in ensure_connection self.connect() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/utils/asyncio.py", line 26, in inner return func(*args, **kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/base/base.py", line 197, in connect self.connection = self.get_new_connection(conn_params) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/utils/asyncio.py", line 26, in inner return func(*args, **kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/sqlite3/base.py", line 199, in get_new_connection conn = Database.connect(**conn_params) sqlite3.OperationalError: unable to open database file The above exception was the direct cause of the following exception: Traceback (most recent call last): File "/home/teddysum/miniconda3/lib/python3.8/threading.py", line 932, in _bootstrap_inner self.run() File "/home/teddysum/miniconda3/lib/python3.8/threading.py", line 870, in run self._target(*self._args, **self._kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/utils/autoreload.py", line 53, in wrapper fn(*args, **kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/core/management/commands/runserver.py", line 120, in inner_run self.check_migrations() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/core/management/base.py", line 458, in check_migrations executor = MigrationExecutor(connections[DEFAULT_DB_ALIAS]) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/migrations/executor.py", line 18, in __init__ self.loader = MigrationLoader(self.connection) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/migrations/loader.py", line 49, in __init__ self.build_graph() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/migrations/loader.py", line 212, in build_graph self.applied_migrations = recorder.applied_migrations() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/migrations/recorder.py", line 76, in applied_migrations if self.has_table(): File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/migrations/recorder.py", line 56, in has_table return self.Migration._meta.db_table in self.connection.introspection.table_names(self.connection.cursor()) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/utils/asyncio.py", line 26, in inner return func(*args, **kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/base/base.py", line 260, in cursor return self._cursor() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/base/base.py", line 236, in _cursor self.ensure_connection() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/utils/asyncio.py", line 26, in inner return func(*args, **kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/base/base.py", line 220, in ensure_connection self.connect() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/utils.py", line 90, in __exit__ raise dj_exc_value.with_traceback(traceback) from exc_value File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/base/base.py", line 220, in ensure_connection self.connect() File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/utils/asyncio.py", line 26, in inner return func(*args, **kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/base/base.py", line 197, in connect self.connection = self.get_new_connection(conn_params) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/utils/asyncio.py", line 26, in inner return func(*args, **kwargs) File "/home/teddysum/miniconda3/lib/python3.8/site-packages/django/db/backends/sqlite3/base.py", line 199, in get_new_connection conn = Database.connect(**conn_params) django.db.utils.OperationalError: unable to open database file 이렇게 오류가 나왔고 (제 생각은 db 문제인 것 같습니다.)
-
미해결스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
검증 직접 처리 부분에서
1 <label for="itemName" th:text="#{label.item.itemName}">상품명</label> 2 <label for="itemName">상품명</label> 1번 2번 차이가 뭔가요? #{label.item.itemName}에서 label이 무엇을 의미하는 건가요?
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
DTO vs Class
안녕하세요! 강사님 제가 NestJS+ 타입스크립트를 공부를 하면서 헷갈렸던 부분 질 문 드립니다. DTO를 통해서 타입을 지정해주는 것과 Class를 직접 지정해주는 것의 차이는 어떤 점이 있을까요?CreateDTO에서 필요한 정보만 DTO에 기입을 하는 부분은 이해헀습니다. 다만 UserEntity에 들어있는 모든 정보를 Create.DTO에서도 받는다고 가정했을 때 타입 지정을 User 클래스로 하는 것과 CreateDto로 지정하는 것의 차이를 모르겠습니다. 짐작하는 것은 Entity는 Class-validator의 적용을 받지 않고 Dto는 Class-validator가 가능한 것으로 생각되는 데 이 부분이 맞을까요?? + 이미 entity 정의를 할 때 타입을 컬럼별로 타입을 지정하는데 왜 Dto를 통해 타입을 한 번 더 검증해야할까요?? Dto에서 새롭게 객체가 정의되는 경우 때문일까요?? 질문 요약 1. 타입을 지정할 때 class를 직접 지정하는 것과 Dto를 만들어서 지정하는 것의 차이는 무엇일까요? 2. 이미 entity에서 타입을 지정헀는데 Dto로 type-validation을 하는 이유는 무엇일까요??
-
미해결R로 배우는 통계
'lib' 지정?
패키지 설치를 하면 의 위치에 패키지(들)을 설치합니다. (왜냐하면 ‘lib’가 지정되지 않았기 때문입니다) 라고 나오는데 이유가 뭘까요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
이렇게 풀어봤는데 괜찮을까요?
안녕하세요 강의 잘보고있습니다 아래와 같이 풀어봤는데, 괜찮은지 궁금하여 질문드립니다 그리고 다른 테스트 케이스들이 예시로 있으면 더 좋을거같습니다 실제 문제풀이 사이트에서는 여러가지 케이스를 대입해서 다 통과하는지 테스트 해보는거처럼요 ! 혼자 테스트하다보면 된거같다가도 나중에 반례를 찾게되고 그러네요 ㅠ function solution(n, a) { let max = 0; let sum = 0; let p2 = 0; if (n === a.length) { max = a.reduce((sum, currValue) => { return sum + currValue; }, 0); } else { for (let p1 = 0; p1 < a.length; p1++) { if (p1 - p2 < n) { sum += a[p1]; } else { sum += a[p1]; sum -= a[p2]; p2++; if (sum > max) max = sum; } } } return max; }
-
해결됨Watch Me Code: React x Typescript로 Slack 클론코딩하기
cannot get/ 에러 원인
1. npm run dev를 실행하면 아래와 같은 코드가 나오고 compiled successfully 라고 뜹니다. 하지만 상단에 보시면, project is running at : ________빈칸 & 컴포넌트 내부에 작성한 문자가 아닌, 로컬을 열면 cannot get / 이 뜨는데 원인이 뭘까요 ? 2. devServer:{ port: 3090, publicPath:'/dist/' } 윗 코드 작성 자체가 에러가 뜹니다..(빨간밑줄) 해결시도1) publicPath코드 삭제 해결시도2) static :{}안에 넣어주기 시도해봤는데도 cannot get/ 이 뜨네요 아래는 webpack.config,ts파일 입니다 ```js import path from 'path'; // import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import webpack from 'webpack'; // import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; // import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; const isDevelopment = process.env.NODE_ENV !== 'production'; const config: webpack.Configuration = { name: 'sleact', mode: isDevelopment ? 'development' : 'production', devtool: !isDevelopment ? 'hidden-source-map' : 'eval', resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), }, }, entry: { app: './client', }, module: { rules: [ { test: /\.tsx?$/, loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: { browsers: ['last 2 chrome versions'] }, debug: isDevelopment, }, ], '@babel/preset-react', '@babel/preset-typescript', ], }, exclude: path.join(__dirname, 'node_modules'), }, { test: /\.css?$/, use: ['style-loader', 'css-loader'], }, ], }, plugins: [ ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/app.js', }, devServer: { port: 3090, static : {publicPath:'/dist/'} , }, }; // devServer: { // historyApiFallback: true, // port: 3090, // devMiddleware: { publicPath: '/dist/' }, // static: { directory: path.resolve(__dirname) }, // proxy: { // '/api/': { // target: 'http://localhost:3095', // changeOrigin: true, // ws: true, // }, // }, // }, // }; // if (isDevelopment && config.plugins) { // config.plugins.push(new webpack.HotModuleReplacementPlugin()); // config.plugins.push( // new ReactRefreshWebpackPlugin({ // overlay: { // useURLPolyfill: true, // }, // }), // ); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false })); // } // if (!isDevelopment && config.plugins) { // config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true })); // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' })); // } export default config; ``` 아래는 package.json파일입니다 ```js { "name": "sleact-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack serve --env development" }, "author": "dahee", "license": "MIT", "dependencies": { "@babel/core": "^7.16.0", "@babel/preset-env": "^7.16.0", "@babel/preset-react": "^7.16.0", "@babel/preset-typescript": "^7.16.0", "@types/react": "^17.0.34", "@types/react-dom": "^17.0.11", "babel-loader": "^8.2.3", "cross-env": "^7.0.3", "css-loader": "^6.5.1", "react": "^17.0.2", "react-dom": "^17.0.2", "style-loader": "^3.3.1", "typescript": "^4.4.4", "webpack": "^5.63.0" }, "devDependencies": { "@types/node": "^16.11.7", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.3.1", "eslint": "^8.2.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-prettier": "^4.0.0", "prettier": "^2.4.1", "ts-node": "^10.4.0", "webpack-cli": "^4.9.1", "webpack-dev-server": "^4.4.0" } } ``` 아래는 tsconfig-for-webpack-config.son파일입니다. ```js { "compilerOptions": { "module": "commonjs", "moduleResolution": "Node", "target": "es5", "esModuleInterop": true } } ```