inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

useState 오류

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

GPT API 호출, 프롬프트 연동 강의 0:24 계속해서 useState에 다음과 같은 오류가 뜹니다. import { useState } from "react"; 오류 사유는'useState' is declared but its value is never read. 대체 왜 해결이 안되는 것일까요..?ㅜ.ㅜ

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
한나 댓글 2 좋아요 1 조회수 836

워크벤치 연결 관련 질문드립니다.

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

어찌저찌해서....연결하다보니 워크벤치설치-> aws 인바운드규칙 수정 하고 mysql워크벤치에서 테스트 커넥션까지해서 연결되었다고 하는데 ok버튼을 누르니 Improper name이라더군요. 이름이 root면 안되는건가요?

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 2 좋아요 0 조회수 508

mysql이 8.0버전인데 이렇게 하는 거 맞나요?

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

GRANT ALL PRIVILEGES ON . TO '아이디'@''%'; 이렇게 하라고 하셨는데 아이디에 root를 넣고 %에 aws로 받은 ip주로를 넣어도안되네요. 엔터를 눌러도 뭐 작동도 안하고.. 어찌 해야할까요? 참고로 you are not allowed to create a user with GRANT 라는 에러도 떠서 구글링 해봤는데 어찌 할지 모르겠네요... 까지가 질문이었는데 https://1mini2.tistory.com/87 를 참고해보니 mysql> CREATE USER 'root'@'%' identified by 'Xptmxm1212!@'; 이런식으로 사용자먼저 생성 mysql> GRANT ALL PRIVILEGES ON . to 'root'@'%';권한할당 mysql> flush privileges; mysql> SELECT Host,User,plugin,authentication_string FROM mysql.user; (확인조회) 이런식으로 하라고 하더라구요. 그래서 보니 이렇게 새로운 호스트와 유저가 생겼습니다. 그 이후, 설명해 주신대로 mysql워크벤치 설치 -> aws규칙수정 -> 워크벤치에서 연결 이렇게 했는데 맞는걸까요? 한번 틀리면 나중에 다 수정해야하는데 그게 너무 버거워서 확인차 질문 남겨봅니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 0 조회수 456

.travis.yml 파일 작성하기 과정 중에 아무리해도 테스트가 성공이 안됩니다.

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

.travis.yml 파일 작성 후에 깃 커밋하고 sudo: required language: generic services: - docker before-install: - echo "start creating an image with dockerfile" - docker build -t gonieyoo720/docker-react-app -f Dockerfile.dev . script: - docker run -e CI=true gonieyoo720/docker-react-app npm run test -- --coverage after_success: - echo "Test Success" 트래비스에까지 테스트를 돌렸는데, 몇번을 수정하고 해봐도 트래비스에서 테스트를 통과하지 못하네요. 오타 확인도 많이 해봤는데, 해결을 못하고있습니다. 테스트에 중지되지않은 비동기작업이 있다고 오류를 해결하려면 devDependency를 추가하라는데, 어떻게 해야할까요 --------------------|---------|----------|---------|---------|------------------- File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s --------------------|---------|----------|---------|---------|------------------- All files | 8.33 | 0 | 33.33 | 8.33 | App.js | 100 | 100 | 100 | 100 | index.js | 0 | 100 | 100 | 0 | 7-17 reportWebVitals.js | 0 | 0 | 0 | 0 | 1-8 --------------------|---------|----------|---------|---------|------------------- Test Suites: 1 failed, 1 total Tests: 1 failed, 1 total Snapshots: 0 total Time: 2.06 s Ran all test suites. Jest did not exit one second after the test run has completed. This usually means that there are asynchronous operations that weren't stopped in your tests. Consider running Jest with `--detectOpenHandles` to troubleshoot this issue. One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already in your node_modules folder for unrelated reasons, but it may break at any time. babel-preset-react-app is part of the create-react-app project, which is not maintianed anymore. It is thus unlikely that this bug will ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies to work around this error. This will make this message go away. The command "docker run -e CI=true gonieyoo720/docker-react-app npm run test -- --coverage" exited with 1. Done. Your build exited with 1.

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
gonieyoo 댓글 1 좋아요 0 조회수 465

노드js 14버젼 설치 안되시는 분 참조하세요

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

node.js 14.x is no longer actively supported 이하 뭐시기 떠서 개열받았는데 https://corona-world.tistory.com/83 여기 보시는 방법대로 하시면 잘 됩니다.

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 1 조회수 784

const handleEnter 문에 궁금한게 있습니다.

해결됨

React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)

setUserInput("")을 하면 userInput 값이 ""로 바뀌고 그다움 num 선언문에 ""의 숫자변환값이 들어가는게 아닌가 궁금합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • chatgpt
최지훈 댓글 2 좋아요 2 조회수 348

도커 볼륨을 이용한 소스 코드 변경 4:23 에서

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

docker: invalid reference format. See 'docker run --help' 자꾸 이렇게 뜨는데 docker run -it -p 3000:3000 -v /usr/src/app/node_modules -v $(pwd):/usr/src/app gonieyoo720/docker-react-app 저는 강의에 나오는 것과 동일하게 써서 오타를 모르겠습니다 ㅠㅠ 이유가 뭘까요

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
gonieyoo 댓글 1 좋아요 0 조회수 570

버튼 누를시 인포윈도우 닫는 방식 설명좀 다시 부탁드려도 될까요?

미해결

비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 빈 배열 객체 생성 let infowindow = []; 거기에 for문 돌면서 infowindow 집어넣기 infowindowArray.push(infowindow); 1,2번 까지는 말 그대로 빈 배열객체를 생성후 기존의 infowindow를 집어넣어 기존의 자료가 들어간 infowindowArray를 만든것까진 알겠는데 그 이후에 3. function closeInfoWindow(){ for (let infowindow of infowindowArray){ infowindow.close(); } }; 이게 무슨 말 일까요? 사실 모든 원리가 잘 이해가 되질 않습니다..ㅜㅜ 기존에는 그냥 인포윈도우 클릭하면 해당정보가 나타나고 그것을 다른 것을 누르면 끄려 그러는데 왜 빈 배열객체를 만드는지 부터 잘 이해가 안되네요..

  • HTML/CSS
  • javascript
  • aws
  • git
  • mysql
  • rest-api
  • github
퀀텀코더 댓글 1 좋아요 0 조회수 350

ApolloError: request to http://mock.com/graphql failed, reason: response3.headers.all is not a function

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

33-05 강의에서 test에서 자꾸 이 오류가 뜹니다 apis.js import { graphql } from "msw"; const gql = graphql.link("http://mock.com/graphql") export const apis = [ gql.mutation("createBoard", (req, res, ctx) => { const { writer, title, contents } = req.variables.createBoardInput return res( ctx.data({ createBoard: { _id: "qqq", writer, title, contents, __typepname: "Board", }, }) ); }), // gql.query("fetchBoards", () => {}) ]; jest.setup.js import { server } from "./src/commons/mocks/index" beforeAll(() => server.listen()); afterAll(() => server.close()); index.test.tsx import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import StaticRoutingMovedPage from "../../pages/section33/33-05-jest-unit-test-mocking"; import { ApolloClient, ApolloProvider, HttpLink, InMemoryCache, } from "@apollo/client"; import fetch from "cross-fetch"; import mockRouter from "next-router-mock"; jest.mock("next/router", () => require("next-router-mock")); it("게시글이 잘 등록되는지 테스트 하자!", async () => { const client = new ApolloClient({ link: new HttpLink({ uri: "http://mock.com/graphql", fetch, }), cache: new InMemoryCache(), }); render( <ApolloProvider client={client}> <StaticRoutingMovedPage /> </ApolloProvider> ); fireEvent.change(screen.getByRole("input-writer"), { target: { value: "맹구" }, }); fireEvent.change(screen.getByRole("input-title"), { target: { value: "안녕하세요" }, }); fireEvent.change(screen.getByRole("input-contents"), { target: { value: "방가방가" }, }); fireEvent.click(screen.getByRole("submit-button")); await waitFor(() => { expect(mockRouter.asPath).toEqual("/boards/qqq"); }); }); 도와주십쇼 ㅠㅠ

  • react
  • node.js
  • seo
  • graphql
  • next.js
김무연 댓글 4 좋아요 0 조회수 679

travis 에서 aws EB 연결시 오류

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

travis 에서 정상적으로 배포 되어 s3에 압축파일이 정상적으로 들어갑니다. 또한, EB 환경에서도 실행중인 버전이 Travis-... 로 시작하구요. 그런데 도커 도메인을 클릭시 아무것도 뜨지 않습니다. 환경 Health 확인 시에도 OK 로 정상 이고요. 결론은 정상적으로 배포가 불가능합니다. 리뉴얼은 도대체 언제 되는건가요

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
-잼 댓글 3 좋아요 0 조회수 455

authenticationEntryPoint 를 기본 설정된 /login이 아닌 react 웹 페이지로 설정 시 cors 문제가 지속해서 발생합니다.

미해결

스프링 시큐리티 OAuth2

authenticastion Entry Point로 지정 시 cors문제가 계속해서 진행되어 Authorization Code를 받아올 수 없습니다. 코드 첨부 Authorization Server Config @Bean @Order(Ordered.HIGHEST_PRECEDENCE) public SecurityFilterChain authorizationServerSecurityFilterChain(HttpSecurity http) throws Exception { OAuth2AuthorizationServerConfiguration.applyDefaultSecurity(http); http .getConfigurer(OAuth2AuthorizationServerConfigurer.class) .oidc(Customizer.withDefaults() ); http .exceptionHandling((exceptions) -> exceptions .authenticationEntryPoint( new LoginUrlAuthenticationEntryPoint("http://localhost:3000") // new LoginUrlAuthenticationEntryPoint("/login") )) http.oauth2ResourceServer((resourceServer) -> resourceServer .jwt(Customizer.withDefaults())); return http.build(); } @Bean public RegisteredClientRepository registeredClientRepository() { RegisteredClient oidcClient = RegisteredClient.withId(UUID.randomUUID().toString()) .clientId("oidc-client") .clientSecret("{noop}secret") .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC) .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE) .authorizationGrantType(AuthorizationGrantType.REFRESH_TOKEN) .redirectUri("https://oidcdebugger.com/debug") .redirectUri("https://test-b821b.web.app") .postLogoutRedirectUri("http://127.0.0.1:8080/") .scope(OidcScopes.OPENID) .scope(OidcScopes.PROFILE) .clientSettings(ClientSettings.builder().requireAuthorizationConsent(true).build()) .build(); return new InMemoryRegisteredClientRepository(oidcClient); } @Bean public AuthorizationServerSettings authorizationServerSettings() { return AuthorizationServerSettings.builder().issuer("http://localhost:6080").build(); } } Default Web Config @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:3000") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .exposedHeaders("*"); } }; } @Bean public CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.setAllowCredentials(true); configuration.addAllowedHeader("*"); configuration.addAllowedMethod("*"); configuration.addAllowedOrigin("http://localhost:3000"); configuration.setExposedHeaders(Arrays.asList("*")); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; } @Bean public SecurityFilterChain filterChain(HttpSecurity http) throws Exception { http .cors(customCorsConfig -> customCorsConfig.configurationSource(corsConfigurationSource())) .csrf(AbstractHttpConfigurer::disable) .authorizeHttpRequests(authorizeHttpRequestsCustomizer -> authorizeHttpRequestsCustomizer.requestMatchers(AUTH_WHITELIST).permitAll() .anyRequest().authenticated() ) .formLogin( httpSecurityFormLoginConfigurer -> httpSecurityFormLoginConfigurer.loginPage("http://localhost:3000").loginProcessingUrl("/login") // Customizer.withDefaults() ) ; return http.build(); } @Bean public UserDetailsService userDetailsService() { PasswordEncoder passwordEncoder = new BCryptPasswordEncoder(); UserDetails userDetails = User.builder() .username("user") .password(passwordEncoder.encode("password")) .roles("USER") .build(); return new InMemoryUserDetailsManager(userDetails); } @Bean public JWKSource<SecurityContext> jwkSource() { KeyPair keyPair = generateRsaKey(); RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic(); RSAPrivateKey privateKey = (RSAPrivateKey) keyPair.getPrivate(); RSAKey rsaKey = new RSAKey.Builder(publicKey) .privateKey(privateKey) .keyID(UUID.randomUUID().toString()) .build(); JWKSet jwkSet = new JWKSet(rsaKey); return new ImmutableJWKSet<>(jwkSet); } private static KeyPair generateRsaKey() { KeyPair keyPair; try { KeyPairGenerator keyPairGenerator = KeyPairGenerator.getInstance("RSA"); keyPairGenerator.initialize(2048); keyPair = keyPairGenerator.generateKeyPair(); } catch (Exception ex) { throw new IllegalStateException(ex); } return keyPair; } @Bean public JwtDecoder jwtDecoder(JWKSource<SecurityContext> jwkSource) { return OAuth2AuthorizationServerConfiguration.jwtDecoder(jwkSource); } @Bean public PasswordEncoder encoder() { return new BCryptPasswordEncoder(); } 위 코드로 진행했을 시 발생하는 Cors Error입니다 Access to XMLHttpRequest at 'http://localhost:6080/oauth2/authorize?client_id=oidc-client&redirect_uri=https%3A%2F%2Foidcdebugger.com%2Fdebug&scope=openid&response_type=code&response_mode=form_post&state=3it6dl9kewr&nonce=hyq3pnronj7&continue' (redirected from 'http://localhost:6080/login') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 3. 이로 인해 CorsFilter를 적용하게 되면 해당 Cors는 해결되지만 authorization code 가 Redirect되는 시점에 Cors 에러가 새롭게 나옵니다. CorsFilter @Component @Slf4j @Order(Ordered.HIGHEST_PRECEDENCE) public class CorsFilter implements Filter { private static final Set<String> allowedOrigins = new HashSet<String>(); static { allowedOrigins.add( "http://localhost:3000" ); } @Override public void init(FilterConfig fc) throws ServletException { } @Override public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException { HttpServletResponse response = (HttpServletResponse) res; HttpServletRequest request = (HttpServletRequest) req; String origin = request.getHeader(HttpHeaders.ORIGIN); log.info("Origin: {}", origin); if (origin != null) { Optional<String> first = allowedOrigins.stream().filter(origin::startsWith).findFirst(); first.ifPresent(s -> response.setHeader("Access-Control-Allow-Origin", s)); } response.setHeader("Access-Control-Allow-Credentials", "true"); response.setHeader("Access-Control-Allow-Methods", "*"); response.setHeader("Access-Control-Max-Age", "3600"); response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Key, Authorization"); if ("OPTIONS".equalsIgnoreCase(request.getMethod())) { response.setStatus(HttpServletResponse.SC_OK); } else { chain.doFilter(req, res); } } @Override public void destroy() { } Cors 오류 Access to XMLHttpRequest at 'https://oidcdebugger.com/debug?code=1o_jSQQVu6EB4XDq-xCWP3qrzp2VDdGbH_AN7iBJGU5gQRC7BRFkQYdn2A6P-6G5Aoi8XLJLaVR4MSVktNzDvYLMmj_UXahcWfEwQdA-tk4GCw5Bff4mXn2q6mIYfs_d&state=3it6dl9kewr' (redirected from 'http://localhost:6080/login') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 혹시 외부 로그인 페이지와 연동한 예시가 있거나, Cors 문제를 해결할 방안이 있는지 궁금합니다ㅠㅠ

  • java
  • spring
  • spring-boot
  • oauth
  • react
댓글 2 좋아요 0 조회수 830

502 bad gateway

미해결

파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트

강사님 안녕하세요 강사님 강의 덕분에 저 혼자서 페이지도 만들고 nginx 사용해서 서버까지 배포해보았습니다. 다름이 아니라 3일전 까지만 해도 느리긴 했지만 잘 되던 서버가 오늘 서버내의 기능을 사용할려고 하니 502 bad gateway를 내 뱉으면서 멈춰버립니다.(되다가 안되다가 반복함) 그래서 error 로그를 찾아보니 2023/11/01 00:20:22 [error] 10930#10930: *232 upstream prematurely closed connection while reading response header from upstream 라고 뜨네요 3일동안 해봤는데 헛발짓만 했네용.. gpt한테 물어봐도 메모리 리소스, 네트워크 문제 , 응답시간 문제 등 이라곤 하는데 메모리랑 네트워크에는 아무런 문제가 없는거 같습니다. 3일전까지만 해도 잘되던 서버가 안되니까 많이 답답하네요..

  • react
  • python
  • django
  • docker
병주 댓글 4 좋아요 0 조회수 718

pk, fk 연결

해결됨

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

맛집 리뷰 서비스 만들어보는 부분 따라하고 있는데요 궁금한점이 있어요. erd 보시면 맛집 id가 리뷰, 메뉴 테이블의 fk로 들어가 있잖아요 그런데 코드단에서 이걸 연결해 주는 작업을 한 적이 없는 거 같은데 h2에 생성된 디비에는 어떻게 연결이 되어있는 건가요? 코드에서 이 작업을 해주는 부분이 어디인가요?

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
alice 댓글 2 좋아요 1 조회수 537

mathjax-support.html 파일 다운로드가 안됩니다

해결됨

깃헙 블로그(Github blog)로 차별화 된 나만의 홈페이지 만들기!

링크가 깨진 것 같은데 확인 부탁드립니다!

  • 블로그
  • github
방효석 댓글 1 좋아요 0 조회수 318

docker build ./ 했는데 이미지 ID가 안나옵니다

미해결

따라하며 배우는 도커와 CI환경 [2023.11 업데이트]

mac os m2 모델을 사용하는데, 질문게시판에 있는대로 buildkit 부분을 건드리려고 설정에서 Docker Engine에 들어가니, 해당부분이 저는 없더라구요. 찾아봐도 이에 대한 언급은 없는데, m1/m2 mac silicon 도커에서는 이미지 Id를 다른 방식으로 찾아야하나요?

  • aws
  • docker
  • github
  • ci/cd
  • travis-ci
  • 데이터-엔지니어링
gonieyoo 댓글 0 좋아요 0 조회수 347

안녕하세요 리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 합니다

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

리액트에서 fetchUser를 이용해 로그인이 되어있는지 검증하려고 하는데 로그인api를 호출 후 fetchUser를 호출하면 Unauthorized에러가 납니다 헤더에 토큰이 저장되지 않아서 그런걸까요?

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
  • graphql
  • react
김선규 댓글 1 좋아요 0 조회수 324

섹션 31 댓글 기능 구현 과제 관련 질문

미해결

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 섹션 31 댓글 기능 구현 과제 중 궁금한 점이 있어 질문 남깁니다 댓글 리스트의 수정 아이콘 클릭 시 사진과 같은 화면이 나오도록 했고, 댓글 등록하기 presenter component를 재사용 했습니다 댓글 리스트 presenter 파일입니다 export default function CommentListUI(props) { return ( <S.Wrapper> {props.data?.fetchBoardComments.map((item) => ( <S.CommentListWrapper key={item._id}> {props.isEdit && props.commentId === item._id ? ( <CommentWriteUI></CommentWriteUI> ) : ( <S.Comment_Container> <S.profile_icon src="/02/profile_icon.png"></S.profile_icon> <S.Content_container> <S.Name_Star_container> <S.Text style={{ fontWeight: "600" }}>{item.writer}</S.Text> <S.ReviewStar_container style={{ marginLeft: "16px" }}> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> <S.StarDiv></S.StarDiv> </S.ReviewStar_container> </S.Name_Star_container> <S.Text style={{ marginTop: "-15px", fontWeight: "500" }}> {item.contents} </S.Text> <S.Text style={{ fontSize: "12px", fontWeight: "400", color: "#BDBDBD", }} > {getDate(item.createdAt)} </S.Text> </S.Content_container> <S.Icon_container> <S.Icon style={{ backgroundImage: `url("/createComment.png")` }} onClick={() => props.onClickTEST(item._id)} ></S.Icon> <S.Icon style={{ backgroundImage: `url("/clear.png")` }} onClick={() => props.onClickDelete(item._id)} ></S.Icon> </S.Icon_container> </S.Comment_Container> )} </S.CommentListWrapper> ))} </S.Wrapper> ); } 삼항연산자를 사용해 나오는 화면을 다르게 했습니다 isEdit 변수는 수정하기 아이콘 클릭 시 true로 바뀌고, 삼항연산자 조건에 isEdit 변수만 사용하니 수정 아이콘을 클릭하지 않은 다른 댓글 리스트가 사라지면서 재사용한 댓글 등록 presenter 파일만 화면에 나와서 조건은 위와 같이 작성했습니다 여기서 문제는 수정 아이콘을 클릭해 나오는 댓글 등록 창은 container 파일에 작성한 함수가 작동하지 않는 것입니다 댓글 리스트 container 파일입니다 export default function CommentList() { const { data } = useQuery(FETCH_COMMENTS); const [deleteBoardComment] = useMutation(DELETE_COMMENTS); const onClickDelete = async (item) => { const pw = prompt("비밀번호를 입력해주세요."); try { await deleteBoardComment({ variables: { pw: pw, boardCommentId: item, }, refetchQueries: [{ query: FETCH_COMMENTS }], }); alert("삭제되었습니다."); } catch (error) { alert(error.message); } }; // 수정하기 아이콘 클릭 시 화면 변화 const [isEdit, setIsEdit] = useState(false); const [commentId, setCommentId] = useState(); const onClickTEST = (item) => { setIsEdit(true); setCommentId(item); }; // console.log(commentId); return ( <CommentListUI data={data} onClickDelete={onClickDelete} onClickTEST={onClickTEST} isEdit={isEdit} commentId={commentId} ></CommentListUI> ); } 댓글 등록 container 파일입니다 const [updateBoardComment] = useMutation(UPDATE_BOARD_COMMENT); const onClickUpdate = () => { // updateBoardComment({ // variables: { // updateBoardCommentInput: { // contents: contents, // rating: 0 // }, // password: pw, // boardCommentId: // } // }) console.log("Test"); }; return ( <> <CommentWriteUI onChangeWriter={onChangeWriter} onChangePw={onChangePw} onChangeContents={onChangeContents} onClickUpdate={onClickUpdate} ></CommentWriteUI> </> ); } onClickUpdate 함수는 댓글 작성 presenter 파일의 등록하기 버튼에 연결되어 있습니다 상세 페이지 로딩 시 나오는 댓글 등록창은 버튼 클릭 시 콘솔이 제대로 나오는데 댓글 리스트 수정 아이콘을 눌러 나오는 댓글 등록창에서는 버튼을 눌러도 콘솔 자체가 나오지 않습니다 댓글 과제 가이드를 확인해서 어떻게 수정하면 좋을지는 알았지만, 궁금한 점이 해소되지 않네요 궁금한 점은 삼항연산자, map 등 기능의 속성을 제대로 알지 못한 채 사용한 문제인지 코드 자체를 잘못 작성한 것인지 추가로 rating(별점) 데이터 활용법에 대한 힌트를 얻고 싶습니다 rating 값 1 = 별 1개 인가요? rating 숫자 데이터가 별과 어떻게 연결되는지 잘 모르겠습니다 부족한 점이 많아 질문이 너무 길어졌네요 항상 감사합니다

  • react
  • node.js
  • seo
  • graphql
  • next.js
zero.1.0.one.xx 댓글 2 좋아요 0 조회수 613

.gitignore 에 포함할 파일

해결됨

쥬쥬와 함께 하루만에 시작하는 백엔드 - 스프링, 도커, AWS

gradlew gradlew.bat application.properties 파일들이 깃헙에 올라가도 상관이 없나요? 기본적으로 지금 .gitignore에 적혀있는 파일들 제외하고는 다 깃헙에 올라가도 괜찮은걸까요? HELP.md .gradle build/ !gradle/wrapper/gradle-wrapper.jar !**/src/main/**/build/ !**/src/test/**/build/ ### STS ### .apt_generated .classpath .factorypath .project .settings .springBeans .sts4-cache bin/ !**/src/main/**/bin/ !**/src/test/**/bin/ ### IntelliJ IDEA ### .idea *.iws *.iml *.ipr out/ !**/src/main/**/out/ !**/src/test/**/out/ ### NetBeans ### /nbproject/private/ /nbbuild/ /dist/ /nbdist/ /.nb-gradle/ ### VS Code ### .vscode/

  • spring
  • git
  • docker
  • spring-boot
  • jpa
  • github
alice 댓글 1 좋아요 0 조회수 1036

인기 태그

인프런 TOP Writers

주간 인기글