자세한 공고 내용은 아래 링크에서 확인 가능합니다 !https://www.notion.so/FE-MAU-1400-236fe7ee433280b4b870c6a022b1ec2a [매출 지표] 출시 후 월 평균 매출 상승률 20% 달성, 월 최대 매출 540만원 달성- 공고 내 증빙 내용 참조[고객 지표] Data dog 기준 2주일에 1회 이상 접속자 1K 돌파 (휴면 회원 포함 시 1317명)- 공고 내 증빙 내용 참조[정책 자금 대출 - 2건 선정] 중소기업진흥공단 청년창업자금 50백만, 기술보증기금 100백만- 공고 내 증빙 내용 참조자격 요건컴퓨터 관련 전공자 또는 그에 상응하는 지식을 보유하신 분html, css, javaScript 를 능숙하게 다루고, react를 이용한 프로젝트 경험이 있는 분형상 관리 툴(Git, Github 등)을 활용한 소스 관리 경험이 있는 분기술 스택코어: react, typeScriptUI 라이브러리: react상태 관리: React Context, React QueryCI/CD: GitHub지원 가능 대상지역 → 수도권 거주자 (서울, 경기, 인천) | 성별 → 무관나이 → 만 20세 ~ 만 30세 이하 [팀 평균 나이대 고려]대학교 재학생, 휴학생, 졸업생, 취준생, 경력자이런 분을 원해요 !단기간 내 프로젝트에 많은 시간을 투자하여 멋진 포트폴리오를 만들고 싶은 대학생 혹은 경력자단순하게 주어진 업무 수행을 넘어, 끊임없는 개선을 고민하고 시도하시는 분본인 업무에 대한 배움과 학습 의지가 강하신 분스타트업이나 다른 기업에서 인턴 경험이 있으신 분협업 기한최소 3개월 이상 프로젝트 몰두할 수 있는 분!프로젝트에 최소 주 20시간 이상 시간 투자할 수 있는 분 ! (시험 기간 등 개인 사정이 있는 경우, 당연히 예외 적용 가능합니다) 💡 < 운영 기간 10개월, 누적 매출 4000만원, 누적 고객 4000명, WAU 1,000명 B2C 서비스 >서비스명 : 사랑이 찾아온 순간에만, PLOT아이템 개요 : 1대1 매니저가 관리해주는 후불제 소개팅 플랫폼사이트 링크 : https://plotting.kr  자세한 공고 내용은 아래에서 확인 가능합니다 !https://www.notion.so/FE-MAU-1400-236fe7ee433280b4b870c6a022b1ec2a[지원 링크]https://forms.gle/nnKxycN1s5BkJqGT9위 구글폼으로 지원주시면 3일 이내 연락드립니다 공고 관련 문의사항→ 플롯 대표 김현욱 010 8354 5572

자바스크립트도 정확하게 모르는데 처음 강의로 타입 스크립트 쓰는 강의 들어도 문제 없을까요 ?

헌재 상황은 NGINX로 HTTPS로 백엔드를 배포하고 있고 리액트는 로컬에서 작업 중인데 알람 기능을 구현할 때 OPTIONS가 CORS에러를 일으킵니다.```@Service @RequiredArgsConstructor @Log4j2 @Transactional public class NotificationService { // SSE 이벤트 타임아웃 시간 private static final Long DEFAULT_TIMEOUT = 24L * 60 * 60 * 1000; // SSE 연결 타임아웃 (1일) private final CustomNotificationRepository customNotificationRepository; private final MemberRepository memberRepository; private final CommunityRepository communityRepository; private final NotificationRepository notificationRepository; // 메시지 알림 public SseEmitter subscribe(String memberEmail, String lastEventId) throws Exception { // 회원 조회 MemberEntity findMember = memberRepository.findByMemberEmail(memberEmail); // 매 연결마다 고유 이벤트 ID 부여 String eventId = makeTimeIncludeId(findMember); log.info("eventId {} ", eventId); // SseEmitter 생성후 Map에 저장 SseEmitter sseEmitter = customNotificationRepository.save(eventId, new SseEmitter(DEFAULT_TIMEOUT)); // 사용자에게 모든 데이터가 전송되었다면 emitter 삭제 sseEmitter.onCompletion(() -> { log.info("onCompletion callback"); customNotificationRepository.deleteById(eventId); }); // Emitter의 유효 시간이 만료되면 emitter 삭제 // 유효 시간이 만료되었다는 것은 클라이언트와 서버가 연결된 시간동안 아무런 이벤트가 발생하지 않은 것을 의미한다. sseEmitter.onTimeout(() -> { log.info("onTimeout callback"); customNotificationRepository.deleteById(eventId); }); // 503 에러를 방지하기 위한 더미 이벤트 전송 sendToClient(eventId, sseEmitter, "알림 서버 연결 성공 [memberId = " + findMember.getMemberId() + "]"); // 클라이언트가 미수신한 Event 목록이 존재할 경우 전송하여 Event 유실을 예방 if (hasLostData(lastEventId)) { sendLostData(lastEventId, findMember.getMemberId(), sseEmitter); } return sseEmitter; } private static @NotNull String makeTimeIncludeId(MemberEntity findMember) { String eventId = findMember.getMemberId() + "_" + System.currentTimeMillis(); return eventId; } private void sendToClient(String eventId, SseEmitter sseEmitter, Object data) { try { sseEmitter.send(SseEmitter.event() .name("connect") .id(eventId) .data(data)); } catch (IOException e) { customNotificationRepository.deleteById(eventId); throw new RuntimeException("알림 서버 연결 오류"); } } private boolean hasLostData(String lastEventId) { return !lastEventId.isEmpty(); } private void sendLostData(String lastEventId, Long memberId, SseEmitter sseEmitter) { Map<String, Object> eventCaches = customNotificationRepository.findAllEventCacheStartWithByMemberId(memberId); eventCaches.entrySet().stream() .filter(entry -> lastEventId.compareTo(entry.getKey()) < 0) .forEach(entry -> sendToClient(entry.getKey(), sseEmitter, entry.getValue())); } ...이렇게 서비스를 구현하고@RestController @RequestMapping("/api/v1/notify") @RequiredArgsConstructor @Log4j2 public class NotificationController implements NotificationControllerDocs { private final NotificationService notificationService; // 메시지 알림 // SSE 통신을 위해서는 produces로 반환할 데이터 타입을 "text/event-stream"으로 해주어야 함 @GetMapping(value = "/subscribe", produces = MediaType.TEXT_EVENT_STREAM_VALUE) @PreAuthorize("hasRole('ROLE_USER') or hasRole('ROLE_ADMIN')") public SseEmitter subscribe(@AuthenticationPrincipal UserDetails userDetails, @RequestHeader(value = "last-event-id", required = false, defaultValue = "") final String lastEventId, HttpServletResponse response) { try { if (userDetails == null) { throw new IllegalArgumentException("인증 정보가 필요합니다."); } response.setHeader("Connection", "keep-alive"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("X-Accel-Buffering", "no"); String email = userDetails.getUsername(); SseEmitter responseEmitter = notificationService.subscribe(email, lastEventId); log.info("Subscribed to email: " + email); log.info("response: " + responseEmitter); return responseEmitter; } catch (Exception e) { throw new RuntimeException(e); } } ...NGINX 설정server { listen 443 ssl; server_name meettify.store; ssl_certificate /etc/letsencrypt/live/meettify.store/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/meettify.store/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # SSE용 헤더 설정 location /api/v1/notify/subscribe { # OPTIONS preflight 요청을 처리하도록 설정 if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' 'http://localhost:5173' always; add_header 'Access-Control-Allow-Credentials' 'true' always; add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always; add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always; add_header 'Access-Control-Max-Age' 3600 always; return 204; } proxy_pass https://meettify.store; # Spring Boot 서버로 요청 전달 proxy_http_version 1.1; proxy_set_header Connection ''; # SSE 연결 유지 proxy_set_header Host $host; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection ''; proxy_buffering off; proxy_cache off; chunked_transfer_encoding off; # SSE 연결 타임아웃 방지 proxy_set_header Cache-Control no-cache; proxy_read_timeout 86400s; keepalive_timeout 86400s; # 필요에 따라 시간 조정 add_header Access-Control-Allow-Origin "http://localhost:5173"; add_header Access-Control-Allow-Credentials "true"; } # 기본 프록시 설정 (백엔드 애플리케이션) location / { proxy_pass http://ubuntu-api-1:8080; proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Connection ''; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection ''; proxy_buffering off; proxy_cache off; chunked_transfer_encoding off; } 이렇게 엔진엑스 설정까지 한다음@Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:5173") .allowedHeaders("Authorization", "Content-Type") .allowCredentials(true) .exposedHeaders("Cache-Control", "Content-Type", "X-Accel-Buffering") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS"); } } 이렇게 설정했는데 계속 CORS에러가 발생합니다.해당 문제가 지속적으로 반복중입니다. ㅠㅠ

안녕하세요 컴퓨터공학 전공을 하고 있는 대학생입니다.스프링부트와 리액트로 웹사이트를 만든 경험자들과 함께 이번엔 웹게임을 만들어보려고 합니다 .웹게임에 관심 있던 사람들인지라 방탈출 게임으로 여러 개의 방을 탐험하며, 퍼즐을 풀어 탈출구를 찾는 게임을 만들어보려고 하는데 스프링과 리액트로 웹게임을 만든 사례를 많이 찾아보지 못해서 여기다가 물어보아요!각방에는 문제나 퍼즐이 있고, 이를 해결해야 탈출할 수 있는 주고백엔드에서 방과 퍼즐 데이터를 관리하고 프론트에서 방을 시각적으로 표현하고, 사용자 입력을 통해 퍼즐을 해결모든 방을 통과하면 게임이 종료되고, 승리 메시지 표시하는 방식으로 제작을 해보고 싶은데,스프링부트와 리액트로 웹게임을 제작해보신 분들 이러한 틀로 게임을 만들 수 있을지와 경험담을 들어보고 싶습니다 !!

안녕하세요. 저는 flask와 react를 활용해서 프로젝트를 진행하고 있는 대학생입니다.flask는 5000번, 리액트는 3000번 포트를 사용하고리액트에서 웹앱의 배경화면 이미지를 flask의 라우팅 함수를 통해 받아오는 중입니다. localhost:포트번호 에 접속할 때는 문제가 없고, 같은 와이파이에서 다른 노트북으로 아이피:포트 로 접속해봐도 문제가 없습니다.다만, 모바일에서 아이피:포트 에 접속할 때는 이미지가 로딩되지 않는 문제가 있습니다.이미지 외에 네비게이션은 잘 나오고 기타 동작은 문제가 없는 것으로 확인했습니다.react에서 로컬 디렉토리에 있는 이미지를 랜더링할 땐 모바일에서도 이미지가 잘 나옵니다.flask에서 받아온 이미지를 랜더링할 때만 모바일 접속시 이미지가 안나옵니다. 아이패드로 접속시 화면맥에서 로컬호스트 접속시 화면3. 코드@app.route('/map-image/') def serve_map_image(): return send_from_directory('static', 'map.png')리액트파일에서 아래처럼 flask서버를 통해 받아옵니다.const imageUrl = "http://localhost:5000/map-image";  관련 경험이 있으신 분들의 많은 도움과 조언 부탁드립니다..

const Order = () => { const orders = useOrders(); const { books } = useBooks(); const { remove, removeAll, addToOrder } = useActions(); const [count,setCount] = useState(1); const totalPrice = useMemo(() => { return orders.map((order) => { const { isbn, quantity } = order; const book = books.find((b) => b.isbn === isbn); return book.sale_price * quantity ; }) .reduce((l, r) => l + r, 0); }, [orders, books]); 다른 컴포넌트와 hooks 에서 받아온 함수로 총액 계산을 하는데 (totalPrice) 해당 컴포넌트에서 아래처럼 권수를 변경할 수 있는 함수를 만들었습니다.return( {book.title} {order.quantity} 권 <button onClick={() => setCount(order.quantity ++)} >+</button> <button onClick={() => setCount(order.quantity --)} >-</button> </div>)여기서 변경된 권수의 금액으로 총액도 변경하게 하고 싶은데 어떻게 함수를 만들어야 할까요...? 

제가 포트폴리오를 목적으로 스프링부트 즉, 백엔드를 맡았고 리액트와 진행했는데 프로젝트는 완성이 되었지만 리팩토링을 하고 있으면 좋을거 같은 기능들을 추가하려고 할 때 그러면 백엔드에서는 만들지만 화면은 구성을 못하니 그냥 건들지 말아야 할까요 아니면 백엔드에서 구현하더라도 그냥 포폴에는 언급하지 말아야 하나요? 포트폴리오 용으로 만들고 나서 코드를 가독성 있게 리팩토링하고 갑자기 아 이런 기능이 있었으면 좋았겠는데 그런 생각들이 들어서 백엔드에서라도 구현할까 하다가 연습용이면 모를까 포폴용이라 어떻게 해야할지 헷갈리네요

개인 프로젝트로 블로그 만들기를 구현하는 중입니다.모든 프로젝트에 대한 설명은 할 수 없지만, 보안으로 jwt token을 사용하고있고, multipartfile을 통해서 게시글 내에 이미지, 영상, 기타 파일 등을 함께 첨부하여 게시글을 작성할 수 있도록 기능을 구현하였습니다.파일 업로드 단계까진 잘 되었고, 우선 로컬 저장소를 사용하여 파일은 스프링 부트 프로젝트 내 resources/static/ ~ 이하 이미지:img, 영상:video, 기타 파일:file 로 세부 디렉토리를 나눠서 접근하도록 하였습니다. 우선 사진으로만 테스트 해보는 중인데, 리액트에서 파일을 보여주는 데에 어려움을 겪고있습니다.export const getImageApi = async (token: string | null, imageName: string) => { const url = `http://localhost:4000/api/images/${imageName}.jpg`; try { const response = await axios.get(url, { headers: { Authorization: `Bearer ${token}`, }, }); const result = response.data; return result; } catch (error) { console.error("Error fetching board data:", error); return null; } };토큰을 이용해야만 파일에 접근이 가능하기에, 이런식으로 따로 api를 설정하고 접근하는 방식으로 해보려고 하는데 제 생각처럼 잘 되지 않습니다. 해당 api를 통한 요청을 포스트맨으로 조회해보니 이진화 된 파일이 응답으로 나오곤 하는데, 이를 다시 원본으로 복구한 후에 보여줘야하는 것 같은데,, 아직 많이 부족해서 어떤식으로 해야할지 잘 모르겠습니다. 리액트 - 스프링(부트)를 사용하면서 파일 업로드/다운로드(조회)를 할 때, 이런 방식을 사용하는 것이 바람직한 것인지, 단순히 사진을 업로드 하고 조회할 때에 이정도 복잡한 수준으로 구현하는 것이 일반적인 것인지 궁금하고 더 간단하거나 쉽게 할 수 있는 방법이 있다면 알려주시면 감사하겠습니다. 첫 질문이라 소스코드를 많이 올리는 것이 번잡할까 싶어 많이 올려두지 않았습니다. 혹시 도움을 주실 때 관련 소스코드를 필요로 하신다면 보내드리도록 하겠습니다. 감사합니다.

안녕하세요. 요즘 리액트 컴포넌트를 만들 때 관심사 분리를 더욱 잘하기 위해 노력 중인 주니어 개발자입니다.컴포넌트 설계 시 도메인 종속적이지 않도록 유의하고 있으며 도메인 특화된 컴포넌트를 위해서 비종속적 컴포넌트에 합성해서 만들어 사용하려고 노력 중입니다.이 얘기를 왜 드렸나면 리액트에서 컴포넌트는 결국 함수이며 위에 언급된 고민들은 결국 함수를 합성하는 것과 다르지 않다고 생각이 들더군요. 그 와중에 이 강의가 눈에 들어왔습니다.  질문1. 해당 강의는 위의 고민과 같은 결의 문제를 해결하는데 도움이 되는 강의일까요?질문2. (위의 글과 상관없이) fxjs, fxts 라이브러리를 사용하지 않으면 해당 강의에서 다루는 내용을 실무에서 응용하는 게 힘들까요?(잠깐 수강해봤을 땐 문제를 정의하고 그 문제를 fxjs 속 특정 함수를 통해 어떻게 해결하는 지 보여주는 것의 반복이었던 거 같은데 그래서 여쭤봅니다) 

안녕하세요.늘 재밌고 쉽게 배우고 있는데 궁금한 것이 생겨질문 납깁니다. 아래처럼 Ball 컴포넌트를 렌더링 할 때<div> {winBalls.map((v) => <Ball key={v} number={v} />)} </div> {winBalls.map((v) => <Ball key={v} number={v} />)}위와 같이 결과가 나오는데요.div로 감싸지 않았을 때 재렌더링 되는 이유가 있나요?어떤 이유로 재렌더링 되는지 궁급합니다.감사합니다.

따라하며 배우는 노드, 리액트 시리즈 -쇼핑몰 사이트 말들기 를 듣고있는 수강생입니다.FileUpload.js를 작성하는도중 아래 오류가 납니다. react 버젼과 reactdom버전이 같은걸 확인하고 github 소스를 가져와 써서 오타일 확률도 없는데 어떤 오류일까요 ㅜㅜ

styled component 적용하는 거에서 Invalid hook call. 와 Cannot read properties of null 이라는 에러가 뜹니다. 버전은     "styled-component": "^2.8.0", 인데 대체 뭐가 문제일까요???  

안녕하세요 선생님들 :) 사이드프로젝트로 react와 GraphQL을 공부하여 Gatsby로 블로그를 개발중에 있습니다.   다음 추가기능으로는 질문답변 기능을 넣어보고싶어서요 그러려면 로그인 기능도 필요할테고, 그러면 동적 코드들이 많아질것 같은데요   생각하는 기능들을 추가하려면, (내 질문글 보기, 내 답변 보기등등.. 그러면 매우 동적인 프로필컴포넌트도 추가될것같구...)   굳이 개츠비에서 업그레이드하는게 맞나? 하는 생각도 드는데요. 만약 다른 프레임워크를 찾아본다면 프론트, 서버, 호스팅, 배포단에서 추천해주실만한 프레임웤이나 인프라가 있을까요?   툭툭 던져주시면 자세한건 제가 찾아보면서 공부해보겠습니다! 고수님들 조언 부탁드려요 ㅠ-ㅠ

counter 변수도 초기값이 없으면 아마 null이 되는 것 같아요. 에러는 나지 않지만 최초에 "번째 고양이" 으로 나오길래 Try 1:         const [counter, setCounter]  = React.useState(jsonLocalStorage.getItem("counter") || 0); 했더니 0번째 고양이 가라사대라고 나오는군요. 물론 이것도 자연스럽지만 ㅎㅎ   Try 2:  const [counter, setCounter]  = React.useState(jsonLocalStorage.getItem("counter") || 1);   요렇게 해 주니 조금 더 자연스럽게 되었습니다. || 값 처음 알았는데 유용한 기능 같아요 ^^.

function Form() 이 html 처럼 고정적으로 표시되고 있는 거라고 생각했는데요. 매번 console.log(counter) 가 호출되는 걸 보니까,  이벤트가 발생할 때마다 Form()도 호출되서 화면에 새로 그려지고 있는 것 같은데 맞는 걸까요? 

쌤 리액트로 앱 만들수 있는건가요?

한줄이기 때문에 그런 걸까요?  

react에서 새로운 라이브러릴 다운받고 사용할때 자주 일어나는 오류로 알고있습니다..   구글링의 결과 삭제후 재설치를 대부분 권장하시길래, 기본적으로 package-lock.json과 node_modules폴더를 삭제 진행후 npm install 이후 실행하는 것을 몇번을 반복해도 아래와 같이 같은 결과가 나오네요ㅠㅠ 해결책을 아시는 분이 있다면,, 알려주시면 감사드리겠습니다..   Compiled with problems:X ERROR in ./node_modules/fs.realpath/index.js 8:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\fs.realpath' ERROR in ./node_modules/fs.realpath/old.js 21:17-32 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\fs.realpath' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/fs.realpath/old.js 25:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\fs.realpath' ERROR in ./node_modules/glob/common.js 13:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' ERROR in ./node_modules/glob/common.js 15:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/glob/glob.js 52:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/glob/glob.js 54:13-30 Module not found: Error: Can't resolve 'assert' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false } ERROR in ./node_modules/glob/glob.js 67:11-26 Module not found: Error: Can't resolve 'util' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false } ERROR in ./node_modules/glob/sync.js 12:11-26 Module not found: Error: Can't resolve 'util' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "util": require.resolve("util/") }' - install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false } ERROR in ./node_modules/glob/sync.js 14:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/glob/sync.js 16:13-30 Module not found: Error: Can't resolve 'assert' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\glob' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }' - install 'assert' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "assert": false } ERROR in ./node_modules/node-sass/lib/extensions.js 4:10-27 Module not found: Error: Can't resolve 'os' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }' - install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false } ERROR in ./node_modules/node-sass/lib/extensions.js 5:9-22 Module not found: Error: Can't resolve 'fs' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' ERROR in ./node_modules/node-sass/lib/extensions.js 6:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/node-sass/lib/index.js 4:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\node-sass\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ERROR in ./node_modules/true-case-path/index.js 5:11-26 Module not found: Error: Can't resolve 'path' in 'C:\Users\A\Videos\React class\shop1\shop1\node_modules\true-case-path' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false }   -    

1. 이부분에 삼항연산자 왜쓰는건가요? 이미 Skip, Limit를 useState로 관리하면서 초기값을 설정해주었고 getProducts(body)가 호출될때마다 skip,limit은 항상 있었는데 그러면 삼항연산자 부분에서 req.body.limit은 항상 true이니깐 let limit= req.body.limit ? parseInt(req.body.limit): 20; 할필요없이 let limit= parseInt(req.body.limit) 해줘야한다고 생각했었는데요. 2. 이 두방식의 차이점이 있어서 이렇게 하신걸까요??   

프론트에서 이미지를 전달받아서 서버측에서 저장을 할때 uploads폴더에 이미지가 저장되게 했는데  1. img태그에 src속성을 보면 왜 uploads폴더에서 가져오지않고 로컬호스트에서 가져오는지 이해가 가지않습니다. 이미지를 uploads폴더에 저장을 해놨는데 다시 서버에 접근하는 느낌을 잘 모르겠습니다. 그냥 uploads폴더에 있는거 가져다가 쓰면 왜 안되는걸까요?  2. uploads폴더에 이미지를 저장한후에 다시 화면으로 가져오는과정이, uploads폴더에 있는거 서버에 올림 -> 서버에 이미지가 올라와있음 -> 서버측에서 프론트로 올림 이런느낌인걸까요? 그러면 다시 이해가 안가는게 localhost/uploads/이미지 왜 이렇지 않은걸까요..? 만약에 여러폴더에 같은이름으로 이미지가 저장되있다면 폴더명을 명시해줘야하는게 아닌가요ㅠㅠ