172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
메인화면에서 SSR로 데이터를 받아오도록 구현한 상태입니다. (page router) 데이터가 많아서인지 페이지 접속 시 빈 화면이 출력되는데, 스켈레톤 UI를 적용해봐도 스켈레톤 UI가 표시되지 않습니다. 스켈레톤 UI는 CSR 환경에서만 사용할 수 있는 걸까요? 이런 경우에는 데이터를 CSR로 받아오고, 스켈레톤 UI를 적용하는 게 나을까요?
미해결
김영한의 자바 입문 - 코드로 시작하는 자바 첫걸음
Switch코딩처럼 간단하게 하려고 public static void main(String[] args){ int score = 100; String a; if (score >= 90) { a = "A"; } System.out.println("등급 = " + a); 이런 식으로 풀어봤는데 마지막 sout 부분 a에만 컴파일 오류가 뜹니다. public static void main(String[] args) { String a; if (true){a = "s";} System.out.println("a" + a); 근데 이건 실행이 되는 게 이해가 안되네요 결국 같은 거 아닌가요??
미해결
자바와 스프링 부트로 생애 최초 서버 만들기, 누구나 쉽게 개발부터 배포까지! [서버 개발 올인원 패키지]
이렇게 연관관계가 있는 키들은 외래키로 참조하고 있다는 표시를 하지 않아도 되는지 궁금합니다.
미해결
김영한의 실전 자바 - 고급 2편, I/O, 네트워크, 리플렉션
안녕하세요. 채팅 클라이언트 실습전에 먼저 구현을 해보았는데요. 클라이언트 메인에서 스레드를 스타트 하면 그 즉시 소켓이 닫히면서 프로그램이 종료되는 오류를 겪었습니다. 이는 클라이언트 메인에서 sender 스레드를 join하면서 해결하긴 했는데요. 영한님의 예제에서는 start() 만 하여도 프로그램이 종료되지 않는데, 왜 저의 코드는 종료될까.... try with resources 가 문제인가 싶다가도 그건 아닐거 같은 모호한 상황에 놓여서.... 제가 볼 땐 도무지 보이지 않아서, 코드 리뷰와 원인 파악을 부탁드리려고 질문을 남깁니다. MessageHandler.java package com.hoonjin.study.java.ionetwork.network.chat.client; import lombok.RequiredArgsConstructor; import java.io.DataInputStream; import java.io.IOException; import java.net.Socket; import static com.hoonjin.study.java.util.MyLogger.log; @RequiredArgsConstructor public class MessageHandler implements Runnable { private final Socket socket; @Override public void run() { try (DataInputStream dis = new DataInputStream(socket.getInputStream())) { while (true) { String msg = dis.readUTF(); log(msg); } } catch (IOException e) { e.printStackTrace(); } } } MessageSender.java package com.hoonjin.study.java.ionetwork.network.chat.client; import com.hoonjin.study.java.ionetwork.network.chat.Command; import lombok.RequiredArgsConstructor; import java.io.DataOutputStream; import java.io.IOException; import java.net.Socket; import java.util.Arrays; import java.util.Scanner; import static com.hoonjin.study.java.util.MyLogger.log; @RequiredArgsConstructor public class MessageSender implements Runnable { private static final String DELIMITER = "\\|"; private final Socket socket; private boolean joined = false; @Override public void run() { Scanner scanner = new Scanner(System.in); try (DataOutputStream dos = new DataOutputStream(socket.getOutputStream())) { while (true) { log("input message with cmd: "); String msg = scanner.nextLine(); if (msg.isEmpty()) { continue; } String[] split = msg.split(DELIMITER); String cmd = split[0]; if (Arrays.stream(Command.values()).noneMatch(c -> c.value().equals(cmd))) { log("wrong command"); continue; } if (cmd.equals(Command.EXIT.value())) { dos.writeUTF(msg); joined = false; break; } else if (cmd.equals(Command.JOIN.value())) { joined = true; } if (joined) { dos.writeUTF(msg); } } } catch (IOException e) { e.printStackTrace(); } } } ChatClient.java package com.hoonjin.study.java.ionetwork.network.chat.client; import java.io.IOException; import java.net.Socket; public class ChatClient { private static final String SERVER = "localhost"; private static final int PORT = 23456; public static void main(String[] args) throws IOException, InterruptedException { try (Socket socket = new Socket(SERVER, PORT)) { Thread messageHandler = new Thread(new MessageHandler(socket)); Thread messageSender = new Thread(new MessageSender(socket)); messageHandler.start(); messageSender.start(); messageSender.join(); // 이 부분이 없으면 시작하자마자 즉시 종료됨 } catch (IOException e) { e.printStackTrace(); } } } Command.java package com.hoonjin.study.java.ionetwork.network.chat; import lombok.RequiredArgsConstructor; @RequiredArgsConstructor public enum Command { JOIN("/join"), MESSAGE("/message"), CHANGE("/change"), USERS("/users"), EXIT("/exit") ; private final String value; public String value() { return value; } } 이상입니다. 확인해주시면 감사하겠습니다. 새해복 많이 받으세요!
해결됨
김영한의 실전 자바 - 기본편
public static void volumeUp(MusicPlayerData data) { data.volume++; System.out.println("음악 플레이어 볼륨: " + data.volume); } 반복되는 기능을 이후에 재사용하기 위하여 메서드를 추출할 때 매개변수에 (MusicPlayerData data)라고 적어주셨어요. 1) 이때 [MusicPlayerData]라는 것은 클래스(틀, 설계도, 붕어빵틀)인가요? 이게 맞다면,, 그럼 이건 매개변수(파라미터)안에 클래스를 넣은것이라 볼 수 있나요??? 2) MusicPlayerData 클래스 안에 있는 int 변수 [volume]이라는 것은 객체(붕어빵 틀에서 만들어진 붕어빵)라고 하는 것인가요? 용어 정리가 되지 않아 질문드립니다. 답변 감사합니다..
미해결
김영한의 실전 자바 - 중급 1편
외부 클래스안에 정적 중첩 클래스가 있고, 중첩 클래스 안에 정적 멤버와 인스턴스 멤버들이 있다고 가정할때, 다른클래스의 메인함수에서 외부클래스의 인스턴스를 생성하면, 이 때, 외부클래스의 대한 정보와, static멤버에 대한 정보가 메서드 영역에 저장되는데, 이때 정적 중첩 클래스도 static이라 같이 메서드영역에 정보가 저장되나요? 그리고 별개로 정적 중첩 클래스의 인스턴스를 생성해야만 중첩 클래스의 인스턴스를 생성해야만 중첩 클래스의 인스턴스 멤버들을 사용할 수 있는거죠??
해결됨
기초 탄탄! 독하게 시작하는 Java - Part 2 : OOP와 JVM
MyListEx 생성자에서 UserData 를 매개변수로 받도록 설계한 이유에 대해 궁금합니다. MyNode 라는 추상 자료형(ADT)을 정의해 두셨는데, 생성자에서 특정 구현체인 UserData 를 직접 받는 방식이 추상화의 장점을 제한할 수 있다고 생각합니다. 또한, onRemoveNode 메서드에서도 UserData 타입으로 변환하지 않고 MyNode 에 정의된 메서드만으로도 충분히 기능 구현이 가능해 보이는데, 혹시 MyListEx 는 UserData를 위한 전용 자료구조로 설계된 것인가요? 그렇지 않다면, MyNode 를 기반으로 유연성을 유지하도록 설계하는 것이 더 적합하지 않을까 하는 생각이 들어 질문드립니다.
미해결
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 상품 수정 버튼을 클릭했을 때 이동하는 경로를 Thymeleaf 템플릿 엔진을 써서 작성했는데 <button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" th:onclick="|location.href='@{/basic/items/{itemId}(itemId=${item.id})/edit}'|" type="button">상품 수정</button> 이런 경우에 실제 주소 뜨는걸 보면 http://localhost:8080/basic/items/%7BitemId%7D(itemId=$%7Bitem.id%7D)/edit 이렇게 뜨고 만약 다음과 같이 작성하면 <button class="w-100 btn btn-primary btn-lg" onclick="location.href='editForm.html'" th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|" type="button">상품 수정</button> http://localhost:8080/basic/items/2/edit 이렇게 경로가 뜨는데 왜 이런 차이가 발생하는 건가요? 제가 처음 이렇게 한 이유가 (itemId=${item.id}) 이게 치환되는 주체는 {itemId}여야 하는 거고 그러면 선언 위치는 사실 상관없는 거 아닌가 해서 저렇게 했는데 실제 url을 까보니까 아예 다르게 나와서 왜 이렇게 되는건지 궁금합니다. 그리고 또 하나의 궁금증으로는 강사님께서 수정 부분 컨트롤러 메서드를 작성하실 때 다음과 같이 작성하셨는데 public String editForm(@PathVariable Long itemId, Model model) 그러면 위 코드를 보았을 때 아까 보았던 코드를 기반으로 생각했을 때 th:onclick="|location.href='@{/basic/items/{itemId}/edit(itemId=${item.id})}'|" ItemId 가 쿼리 파라미터 형식으로 전송되면서 서버로 넘어가는 지 그것도 궁금합니다.
미해결
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
스프링 의존성 추가하고 properties도 추가했는데 오류가 납니다. 다른분들이 고치신대로 WEB-INF도 만들어봤는데 안되네요 ㅜㅜ 오류는 이렇게 납니다... ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요.
미해결
스프링 DB 2편 - 데이터 접근 활용 기술
평소 열심히 강의를 듣고 있는 일반적인 대학생입니다. 트랜잭션 동기화 매니저에 대해 의문사항이 많아 직접 찾아보다가 강의와 다른점이 있어 질문드립니다. 아직 부족한 학생인만큼 어느정도의 뇌피셜은 들어있습니다.. (물론 코드에 기반한) 질문은 가독성을 위해 음슴체를 사용한점 양해부탁드립니다.. 결론 트랜잭션 rollback-only 은 트랜잭션 status에 있으며 해당 사실 확인은 TransactionManager에 의해 밝혀진다. 따라서, rollback-only 표시가 동기화 매니저에 있다는 설명은 수정이 필요한 것 같습니다.. -> 트랜잭션 동기화 매니저는 관련이 없는 것 아닌가 라는 생각이 듭니다.. 그 이유는 아래와 같습니다. 강의제공 내용 내부 롤백이 일어나면 Rollback-only 표시가 됨 외부 커밋은 해당 표시를 보고 true라면 롤백 해당 표시는 트랜잭션 동기화 매니저에 있음 (08:18 쯤) 고민하다가 의문이 든 내용 트랜잭션 동기화 매니저는 쓰레드(요청)마다 적절한 트랜잭션을 찾아 주는 역할이라고 생각함 -> 트랜잭션의 상태를 관리하도록 하진 않을 것 같다는 생각이 듦 (뇌피셜) 트랜잭션 매니저를 보다보니 getTransaction 을 호출하면 Status를 반환함 -> 가만 생각해보면 트랜잭션 commit rollback을 트랜잭션 매니저가 하는데 상태관리도 트랜잭션 매니저가 하는게 맞지 않을까? (rollback-only 표시도 트랜잭션 매니저가 하는게 맞지 않을까?)라는 생각을 하게됨 코드를 까보니 실제로 해당 메서드로 추정되는 메서드가 있음 실제 코드 JpaTransactionManger protected void doSetRollbackOnly(DefaultTransactionStatus status) { JpaTransactionObject txObject = (JpaTransactionObject)status.getTransaction(); if (status.isDebug()) { this.logger.debug("Setting JPA transaction on EntityManager [" + txObject.getEntityManagerHolder().getEntityManager() + "] rollback-only"); } txObject.setRollbackOnly(); } 위의 코드는 내부적으로 사용하는 코드인 것 같음 (뇌피셜, 이 코드가 동작하는 것이 아닌가) 또한 아래와 같은 메서드도 존재함 public void setRollbackOnly() { EntityTransaction tx = this.getEntityManagerHolder().getEntityManager().getTransaction(); if (tx.isActive()) { tx.setRollbackOnly(); } if (this.hasConnectionHolder()) { this.getConnectionHolder().setRollbackOnly(); } } public boolean isRollbackOnly() { EntityTransaction tx = this.getEntityManagerHolder().getEntityManager().getTransaction(); return tx.getRollbackOnly(); } 아마 전자가 실제로 TransactionManager가 활용하는 코드인 것 같음 (protected라서), 후자는 외부에서 임의로 rollback-only를 설정할 때 사용하는 메서드인 것 같음 (EntityTransaction은 더 들어가보니 hibernate에서 트랜잭션을 관리하는 클래스인 것 같음) DataSourceTransactionManager 해당 매니저에도 비슷한 메서드가 존재함 public void setRollbackOnly() { getConnectionHolder().setRollbackOnly(); } @Override public boolean isRollbackOnly() { return getConnectionHolder().isRollbackOnly(); } 런타임 디버깅을 돌려보며 정확히 어떤 메서드가 동작하는 지 확인해봄. 아마도 aop로 프록시 객체가 사용되는 것 같은데 aop 부분은 아직 학습하지 않아서 모르겠음.. AbstractPlatformTransactionManager -> datasourceTransactionManger의 doSetRollbackOnly 호출 위와 같은 코드를 보았을 때, rollback-only와 같은 트랜잭션의 상태는 트랜잭션 매니저에 의해 관리 되는 것 같고 트랜잭션 동기화 매니저는 관련이 없는 것 아닌가라는 생각이 듭니다..
미해결
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
build.gradle에 추가했고 properties에 추가했는데 안됩니다....! ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요.
미해결
스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술
build.gradle랑 다 추가하고 업데이트해서 적용되게 했는데 오류가 나는데 어떻게 해야되나요? ㅜ ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
저도 이전에 미리 구매해놓고 공부하려는데 뒤늦게 확인했습니다. 리뉴얼된 버전으로 공부하고 싶은데, 쿠폰을 발급받을 수 있을까요?
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
[질문 내용] 따로 주석 설명을 달긴 하였지만, Order 엔티티에서 OrderItem 엔티티를 영속성 전이 ALL로 설정을 해놓았으면 굳이 em.persist(orderItem)을 생략해도 잘 동작되는 거죠? 추가 질문) 위 2개 이미지에서 보시면 첫번째 사진은 em.persist(orderItem)을 생략했을때 나온 쿼리문이고 두번째 사진은 생략하지 않을 때 나오는 쿼리문인데 왜 update 쿼리가 나가는 건지 잘 이해가 안돼서 여쭈어 봅니다.
미해결
김영한의 실전 자바 - 중급 1편
static 내부 클래스에서는 staic변수나, 메서드를 선언할 수 있는데, 왜 비정적 내부클래스에서는 static변수나 메서드 선언할 수 없나요? static내부 클래스는 비정적 내부 클래스와는 독립적이어서 static멤버들을 선언 가능한건가요?
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] HomeController.java 와 home.html을 다 작성하고 localhost:8080으로 실행하려고 하니 HomeController.java가 실행이 안됩니다. 인터넷에는 src를 리소스 루트로 지정하고 하면 된다고 해서 리소스 루트로 src를 지정하고 첫 번째 사진과 같이 파일 위치를 지정하는 부분에서 계속 없다고 뜨는데 어떻게 해야하나요?
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
int arr[3][3] 은 3x3 행렬이라 이렇게 그려지는 것은 이해했습니다. int arr [3][3] arr[0] = [1, 2, 3] arr[1] = [4, 5, 6] arr[2] = [7, 8, 9] 여기에서 arr[0] 을 100번지 주소, arr[1]을 200번지 주소, arr[3]을 300번지 주소라고 가정을 해보겠습니다. 이때 int parr[2]가 강사님께서 말씀하신게 포인터 두개를 담은 배열이라고 하셨는데 이 부분이 잘 이해가 안가서요. 포인터 두개를 담은 배열이라고 하신다면 int parr[2]에는 arr[1] 이라는 200번지 주소, arr[2] 이라는 300번지 주소가 담긴거고, 이때 parr을 행렬로 만들게 되어서 parr은 다음과 같이 되어서 정답을 유도하게 되는건가요? int parr [2][3] parr[0] = [4, 5, 6] parr[1] = [7, 8, 9]
미해결
스프링 MVC 2편 - 백엔드 웹 개발 활용 기술
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 안녕하세요 해당 강의처럼 인터셉터 두개를 사용하여 요청을 했더니 인터셉터가 계속 호출되는 오류가 발생하였습니다. 오류의 원인은 LoginCheckInterceptor의 exclude pattern에 /login 경로를 추가하지 않아 발생한 것이었습니다. 교안과 비교하며 주먹구구식으로 해결하였지만 능동적으로 해결하기 위해서는 어떤 과정을 거쳐야 하나요? 처음에는 두 인터셉터에 브레이크포인트를 찍어 디버깅 하려 했지만 여러 복잡한 코드들을 마주하게 되더라구요.. 어떻게 이런 오류를 해결해야 하나요?
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
학습하는 분들 께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 여기에 질문 내용을 남겨주세요.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
수정페이지에서 수정하기 버튼을 누르면 네트웨크에 이런 에러가 떠요 미리보기 { "errors": [ { "message": "Unknown type \"Sting\". Did you mean \"String\" or \"Int\"?", "locations": [ { "line": 1, "column": 67 } ], "extensions": { "code": "GRAPHQL_VALIDATION_FAILED", "exception": { "stacktrace": [ "GraphQLError: Unknown type \"Sting\". Did you mean \"String\" or \"Int\"?", " at Object.NamedType (/frontend-api-example/node_modules/graphql/validation/rules/KnownTypeNamesRule.js:57:29)", " at Object.enter (/frontend-api-example/node_modules/graphql/language/visitor.js:323:29)", " at Object.enter (/frontend-api-example/node_modules/graphql/utilities/TypeInfo.js:370:25)", " at visit (/frontend-api-example/node_modules/graphql/language/visitor.js:243:26)", " at Object.validate (/frontend-api-example/node_modules/graphql/validation/validate.js:69:24)", " at validate (/frontend-api-example/node_modules/apollo-server-core/src/requestPipeline.ts:536:14)", " at Object.<anonymous> (/frontend-api-example/node_modules/apollo-server-core/src/requestPipeline.ts:302:32)", " at Generator.next (<anonymous>)", " at fulfilled (/frontend-api-example/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)", " at processTicksAndRejections (node:internal/process/task_queues:105:5)" ] } } } ] } 페이로드 09-03-boards/ [number] 페이지 코드 입니다 "use client"; //상세 import { useParams } from "next/navigation"; import { gql, useQuery } from "@apollo/client"; import Link from "next/link"; const FETCH_BOARD = gql` query fetchBoard($mynumber: Int) { fetchBoard(number: $mynumber) { number writer title contents } } `; export default function BoardsDetailPage() { const params = useParams(); //useQuery는 중괄호, uesMutation은 대괄호 const { data } = useQuery(FETCH_BOARD, { variables: { mynumber: Number(params.number) }, }); console.log(data); return ( <div> <div> {Number(params.number)}번 게시글 상세페이지 이동이 완료되었습니다. </div> <div>작성자: {data?.fetchBoard?.writer}</div> <div>제목: {data?.fetchBoard?.title}</div> <div>내용: {data?.fetchBoard?.contents}</div> <Link href={`/section09/09-03-boards/${params.number}/edit`}> 수정하러가기 </Link> </div> ); } 09-03-boards-write 코드 입니다 "use client"; import { useMutation, gql } from "@apollo/client"; import { useState } from "react"; import { useParams, useRouter } from "next/navigation"; const 나의그래프큐엘셋팅 = gql` # 타입적는곳 mutation createBoard( $mywriter: String $mytitle: String $mycontents: String ) { # 전달할 변수 적는 곳 createBoard(writer: $mywriter, title: $mytitle, contents: $mycontents) { _id number message } } `; //수정 const UPDATE_BOARD = gql` mutation updateBoard( $mynumber: Int $mywriter: String $mytitle: Sting $mycontents: String ) { updateBoard( number: $mynumber writer: $mywriter title: $mytitle contents: $mycontents ) { _id number message } } `; export default function BoardsWrite(props) { const router = useRouter(); const params = useParams(); console.log(params.number); const [writer, setWriter] = useState(""); const [title, setTitle] = useState(""); const [contents, setContents] = useState(""); const [나의함수] = useMutation(나의그래프큐엘셋팅); //수정 const [updateBoard] = useMutation(UPDATE_BOARD); //등록 const onClickSubmit = async () => { //여기서 그래프큐엘 요청하기 const result = await 나의함수({ //variables 이게 $역할을 함 variables: { mywriter: writer, mytitle: title, mycontents: contents, }, }); console.log(result); alert("등록이 완료되었습니다."); router.push(`/section09/09-03-boards/${result.data.createBoard.number}`); }; //수정 const onClickUpdate = async () => { //여기서 수정하기 하자!! const result = await updateBoard({ variables: { mynumber: Number(params.number), mywriter: writer, mytitle: title, mycontents: contents, }, }); console.log(result); alert("수정이 완료되었습니다."); router.push(`/section09/09-03-boards/${result.data.updateBoard.number}`); }; const onChangeWriter = (event) => { setWriter(event.target.value); }; const onChangeTitle = (event) => { setTitle(event.target.value); }; const onChangeContents = (event) => { setContents(event.target.value); }; return ( <div> 작성자: <input type="text" onChange={onChangeWriter} /> <br /> 제목: <input type="text" onChange={onChangeTitle} /> <br /> 내용: <input type="text" onChange={onChangeContents} /> <br /> <button onClick={props.isEdit ? onClickUpdate : onClickSubmit}> {props.isEdit ? "수정" : "등록"}하기 </button> </div> ); }
