inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

12.18 새 일기 쓰기 페이지 제목 수정 관련

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Emotion Diary</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> New.jsx import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useNavigate } from "react-router-dom"; import { useContext, useEffect } from "react"; import {DiaryDispatchContext} from "../App"; import usePageTitle from "../hooks/usePageTitle"; const New=()=>{ const{onCreate}=useContext(DiaryDispatchContext); const nav=useNavigate(); usePageTitle(`${useParams.id}번 일기 수정`); const onSubmit=(input)=>{ onCreate( input.createdDate.getTime(), input.emotionId, input.content ); nav('/',{replace: true}); }; return ( <div> <Header title={"write new diary"} leftChild={<Button onClick={()=>nav(-1)} text={"< back"}/>} /> <Editor onSubmit={onSubmit}/> </div> ); }; export default New; usePageTitle.jsx import { useEffect } from "react"; const usePageTitle=(title)=>{ useEffect(()=>{ const $title=document.getElementByTagName("title")[0]; $title.innerText=title; },[title]); }; export default usePageTitle; 이전 과정까지는 문제없었는데 12.18에 있는 새일기 쓰기 페이지에 들어왔을 때 페이지에 아무것도 뜨지 않는 문제가 발생하는데 어떤게 문제일까요

  • javascript
  • react
  • node.js
진성원 댓글 2 좋아요 0 조회수 110

실습 코드 있을까요?

미해결

처음 만난 리액트(React)

안녕하세요 감사하게도 강의 잘 듣고있습니다. 혹시 실습한 코드를 받을 수 있는 git 있을까요? 개발환경 버전이 달라서 그런지 챕터6하는데 원치않게 동작하는게 있어서요

  • HTML/CSS
  • javascript
  • react
호호하하 댓글 2 좋아요 1 조회수 231

단축키 질문입니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

DTO와 인증 서비스 2분 33초에서 35초 사이에 코드가 갑자기 생기는데요. 혹시 어떤 단축키 눌른건지 알 수 있을까요? Alt + Insert 눌러도 super까지 포함된 메소드는 나오지 않아서요. public MemberDTO(String email, String pw, String nickname, boolean social, List<String> roleNames) { super( email, pw, roleNames.stream().map(str -> new SimpleGrantedAuthority("ROLE_"+str)).collect(Collectors.toList())); this.email = email; this.pw = pw; this.nickname = nickname; this.social = social; this.roleNames = roleNames; }

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 1 좋아요 0 조회수 56

서비스계층과 컨트롤러(3) 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

서비스계층과 컨트롤러(3)-상품수정 5분 42초에서 uuid값은 화면쪽에서 처리되면서 붙는다는게 무슨 의미인지 알 수 있을까요? @Override public void modify(ProductDTO productDTO) { //step1 read Optional<Product> result = productRepository.findById(productDTO.getPno()); Product product = result.orElseThrow(); //change pname, pdesc, price product.changeName(productDTO.getPname()); product.changeDesc(productDTO.getPdesc()); product.changePrice(productDTO.getPrice()); product.changeKeyword(product.getKeyword()); //upload File -- clear first 내용이 있을 수도 있기 때문에. product.clearList(); List<String> uploadFileNames = productDTO.getUploadFileNames(); if(uploadFileNames != null && uploadFileNames.size() > 0 ){ uploadFileNames.stream().forEach(uploadName -> { product.addImageString(uploadName); }); } productRepository.save(product); } CustomFileUtil에서 saveFiles메소드에서 List<String> uploadNames = new ArrayList<>(); 배열을 선언하고 ProductServiceImp에서는 product.clearList();로 있던 배열에서 내용을 지우면서 사용하는데요. CustomFileUtil클래스 에서 데이터 베이스 1행에 저장할 리스트 생성해주고 그 리스트를 수정하는 역할이 product.clearList(); 인가요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 2 좋아요 0 조회수 70

router.replace를 하는데 setCurrent에서 변경한 상태가 유지?

미해결

Next + React Query로 SNS 서비스 만들기

라우터가 이동하면 상태가 초기화 됐던걸로 아는데, setCurrent는 왜 계속 유지가 되나요? 쉘로우 라우팅도 아닌데,,, 제가 잘못알고있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
트릴 댓글 2 좋아요 0 조회수 185

로그인 실패 로직 질문

미해결

코드로 배우는 React 19 with 스프링부트 API서버

현재 APILoginFailHandler에서 로그인 실패 처리를 하고 있는데 CustomUserDetailService에서 굳이 예외를 던질 필요가 있는지 궁금합니다. 제가 이해한 바로는 loadUserByUsername에서 제대로 로그인 처리가 안되면 failHandler가 실행되는 것으로 이해했는데 왜 여기서 예외를 던지는지 궁금합니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
yso829612 댓글 2 좋아요 0 조회수 64

REST 방식 컨트롤러 만들기에서 익스플로러에 데이터 값이 출력 안됩니다

미해결

코드로 배우는 React 19 with 스프링부트 API서버

TodoController 파일 만들고 Api서버로 스프링 기동시키고 todo경로에 tno 값을 입력해도 익스플로러 화면에 제이슨데이터 값이 표시되지 않습니다 DB상에 있는 데이터로 입력을 해도 나오지 않는 걸 보면 제이슨 설정이 잘못된게 아닌가 싶은데 답변 부탁드립니다 아래에 로그 남겨둡니다 오전 11:13:21: 실행 중 ':org.zerock.apiserver.ApiserverApplication.main()'… Starting Gradle Daemon... Gradle Daemon started in 915 ms > Task :clean > Task :compileJava > Task :processResources > Task :classes > Task :org.zerock.apiserver.ApiserverApplication.main() . ____ _ __ _ _ /\\ / ___'_ __ _ ( )_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v3.4.1) 2025-03-01T11:13:29.675+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.zerock.apiserver.ApiserverApplication : Starting ApiserverApplication using Java 21.0.5 with PID 12000 (C:\Users\zzamp\Desktop\apiserver\apiserver\build\classes\java\main started by zzamp in C:\Users\zzamp\Desktop\apiserver) 2025-03-01T11:13:29.678+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.zerock.apiserver.ApiserverApplication : No active profile set, falling back to 1 default profile: "default" 2025-03-01T11:13:29.704+09:00 INFO 12000 --- [apiserver] [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable 2025-03-01T11:13:29.704+09:00 INFO 12000 --- [apiserver] [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the 'logging.level.web' property to 'DEBUG' 2025-03-01T11:13:30.098+09:00 INFO 12000 --- [apiserver] [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode. 2025-03-01T11:13:30.139+09:00 INFO 12000 --- [apiserver] [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 35 ms. Found 1 JPA repository interface. 2025-03-01T11:13:30.495+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port 8080 (http) 2025-03-01T11:13:30.506+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2025-03-01T11:13:30.506+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/10.1.34] 2025-03-01T11:13:30.539+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.a.c.c.C.[Tomcat].[ localhost ].[/] : Initializing Spring embedded WebApplicationContext 2025-03-01T11:13:30.539+09:00 INFO 12000 --- [apiserver] [ restartedMain] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 835 ms 2025-03-01T11:13:30.669+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [name: default] 2025-03-01T11:13:30.725+09:00 INFO 12000 --- [apiserver] [ restartedMain] org.hibernate.Version : HHH000412: Hibernate ORM core version 6.6.4.Final 2025-03-01T11:13:30.754+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.h.c.internal.RegionFactoryInitiator : HHH000026: Second-level cache disabled 2025-03-01T11:13:30.942+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.s.o.j.p.SpringPersistenceUnitInfo : No LoadTimeWeaver setup: ignoring JPA class transformer 2025-03-01T11:13:30.966+09:00 INFO 12000 --- [apiserver] [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting... 2025-03-01T11:13:31.039+09:00 INFO 12000 --- [apiserver] [ restartedMain] com.zaxxer.hikari.pool.HikariPool : HikariPool-1 - Added connection org.mariadb.jdbc.Connection@77e52237 2025-03-01T11:13:31.040+09:00 INFO 12000 --- [apiserver] [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed. 2025-03-01T11:13:31.082+09:00 INFO 12000 --- [apiserver] [ restartedMain] org.hibernate.orm.connections.pooling : HHH10001005: Database info: Database JDBC URL [Connecting through datasource 'HikariDataSource (HikariPool-1)'] Database driver: undefined/unknown Database version: 10.11.10 Autocommit mode: undefined/unknown Isolation level: undefined/unknown Minimum pool size: undefined/unknown Maximum pool size: undefined/unknown 2025-03-01T11:13:31.519+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.h.e.t.j.p.i.JtaPlatformInitiator : HHH000489: No JTA platform available (set 'hibernate.transaction.jta.platform' to enable JTA platform integration) 2025-03-01T11:13:31.555+09:00 INFO 12000 --- [apiserver] [ restartedMain] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default' 2025-03-01T11:13:31.810+09:00 WARN 12000 --- [apiserver] [ restartedMain] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open -in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open -in-view to disable this warning 2025-03-01T11:13:32.040+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729 2025-03-01T11:13:32.059+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port 8080 (http) with context path '/' 2025-03-01T11:13:32.064+09:00 INFO 12000 --- [apiserver] [ restartedMain] o.zerock.apiserver.ApiserverApplication : Started ApiserverApplication in 2.638 seconds (process running for 2.905) 2025-03-01T11:13:57.170+09:00 INFO 12000 --- [apiserver] [nio-8080-exec-1] o.a.c.c.C.[Tomcat].[ localhost ].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet' 2025-03-01T11:13:57.170+09:00 INFO 12000 --- [apiserver] [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet' 2025-03-01T11:13:57.171+09:00 INFO 12000 --- [apiserver] [nio-8080-exec-1] o.s.web.servlet.DispatcherServlet : Completed initialization in 1 ms Hibernate: select t1_0.tno,t1_0.complete,t1_0.content,t1_0.due_date,t1_0.title from tbl_todo t1_0 where t1_0.tno=? Hibernate: select t1_0.tno,t1_0.complete,t1_0.content,t1_0.due_date,t1_0.title from tbl_todo t1_0 where t1_0.tno=? Hibernate: select t1_0.tno,t1_0.complete,t1_0.content,t1_0.due_date,t1_0.title from tbl_todo t1_0 where t1_0.tno=?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
wjdwoals042 댓글 4 좋아요 0 조회수 165

[5-13] useLikePost 쿼리 에서 onError 부분 key 코드 오류입니다.

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

onError: (err, variables, context) => { queryClient.setQueryData( [queryKeys.POST, queryKeys.GET_POST, context?.newPost.id], context?.previousPost, ) }, queryKey array index 2에 context 말고, context?.newPost.id 가 들어가야할 것 같아요 context 안에 newPost previousPost 객체가 들어있어서 다른 key 가 생성됩니다. REF 링크

  • javascript
  • react
  • react-native
  • typescript
  • react-query
사당동 댓글 2 좋아요 0 조회수 135

bulk_update에서 updated_at 필드

해결됨

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

안녕하세요! 해당 수업에서 django shell에서 update 부분 실습하다가 결과 값에 의문이 생겨 질문드립니다. 이 부분에서 auto_now=True 필드도 같이 bulk_update 함수의 인자인 fields 에 지정해야만 해당 필드도 같이 업데이트 된다고 하셨는데 제 코드에서는 updated_at 필드의 값이 업데이트 되지 않았습니다. 제가 나름대로 이해한 바로는 bulk_update 는 따로 save 를 호출하지 않기 때문에 updated_at 을 fields 인자에 추가해주더라도 변한 값이 없어서 업데이트가 되지 않는 걸까요? 그렇다면 제대로 updated_at 도 업데이트 되게끔 하기 위해서는 따로 post.updated_at = timezone.now() 를 title 수정할 때 해주어야 하는 걸까요?

  • react
  • python
  • django
  • web-api
  • htmx
김은혜 댓글 1 좋아요 0 조회수 151

섹션7-4 api사용해서 명언 설정하기

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

🚨 질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. if (quoteItem) { //localstorage에 quote가 있다면 let { createDate, quoteData } = JSON.parse(quoteItem); if (createDate === `${month}-${date}`) { quoteElement.textContent = `"${quoteData}"`; } else { getQuote(); } } else { //localstorage에 quote가 없다면 getQuote(); } 안녕하세요 강사님! api 활용해서 명언 설정하기 강의를 듣는 중에 마지막 로컬스토리지에 조건문을 하고 나서 명언이 나오고 그다음 새로고침을 하면 undefined가 출력이 되는데 어느쪽이 문제 일까요..? 혹시 오타가 있나해서 강의 대본에 코드를 복붙해도 결과가 똑같아서 질문드립니다! 안내사항 - 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간 에 답변해드립니다.

  • javascript
  • dom
정우 댓글 2 좋아요 0 조회수 152

next 에러 로그 관련 질문

해결됨

한 입 크기로 잘라먹는 Next.js

현재 RecoBooks 함수 정의가 위와 같고, 3초마다 캐시를 업데이트하는 속성이 설정되어 있습니다. 그런데 저는 강사님처럼 error 노출이 되지 않고 캐시되어 있는 동일한 랜덤 도서 목록이 계속 나오고 있습니다. 아래는 npm run dev로 실행했을 때 나온 로그입니다. 여기서 하나 더 궁금한게 있는데 현재 전체 도서 목록을 불러오는 fetch 함수는 요청한 결과를 무조건 캐싱하는 속성이 설정되어 있습니다. 그런데 제 로그를 보면 http://localhost:12345/book 이 api가 두 번 호출되고 있습니다. request memoization이 호출이 안되는 거 같은데 데이터 캐시가 우위적으로 호출되는 건가요??

  • react
  • typescript
  • next.js
jwcheon 댓글 1 좋아요 0 조회수 201

성능 탭에서 소요시간이 안보입니다

해결됨

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

강사님 Perfomance 화면과 다르게 저는 Timing 화면을 볼 수 없습니다. 왜 그럴까요...?

  • react
  • chrome-devtools
qjatjs123123 댓글 2 좋아요 0 조회수 264

scrollSpy 바닐라버전에서 data-index를 찾는 코드 질문

해결됨

[React / VanillaJS] UI 요소 직접 만들기 Part 1

강사님 안녕하세요. 항상 강의 잘 보고 있습니다 🙂 완강하고 다시 보다가, scrollSpy 바닐라버전에서 궁금한 점이 있어서 질문 남깁니다! 네비게이션의 버튼을 클릭 했을때, 버튼의 부모인 li의 index 값을 찾기 위해 사용했던 e.composedPath() 대신 closest('li') 메서드 를 사용하는 것은 어떤지 궁금해서요! 퍼블리셔로 일하면서, 클릭한 타겟의 가까운 부모를 찾을때 자주 사용했던 메서드인데, e.composedPath()를 사용한 다른이유(강의에서 설명한 이유 외에)가 있으신지 궁금합니다!

  • react
  • typescript
  • dom
  • ui
  • vanilla-js
이태경 댓글 2 좋아요 0 조회수 159

const [isVoteOpen] = useWatch({ control, name: ["isVoteOpen"] })

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

VoteModal에서 모달이 열렸는지에 대한 상태값을 가져오기위해 useWatch를 사용하시면서 const [isVoteOpen] = useWatch({ control, name: ["isVoteOpen"] }); 로 작성하셨는데, const isVoteOpen = useWatch({ control, name: "isVoteOpen" }); 와 동일한게 맞나요 ? watched하는 필드가 하나일때도 주로 배열 비구조화 할당 방식을 써서 하시는지 궁금합니다 !

  • javascript
  • react
  • react-native
  • typescript
  • react-query
zoezoe 댓글 1 좋아요 0 조회수 92

섹션5 강의 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

섹션5 수강하고 있는데 혹시 서비스 테스트코드나 레파지토리 테스트코드 실습파일은 어디있을까요? 글씨가 작아서 따라 치기가 어려워서요. 돋보기로 하면 글자가 깨져서요. 상품 목록/등록 강의를 듣고 있습니다. 테스트 코드에서 아래를 실행하면 이런 에러가 납니다.(참고로 db는 연결되어있어요. springboot 돌리면 tomcat start 8080나옵니다.) Cannot invoke "com.example.backend.mallapi.domain.ProductImage.getFileName()" because "productImage" is null 아래는 코드입니다. 참고로 upload 파일에도 파일이 2개가 있는상황이여서 productImage가 null일 이유가 없다고 생각하는데 왜나는지 모르겠습니다.

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 2 좋아요 0 조회수 108

node_modules에서 export 오류

미해결

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

수업과 같이 npm에 배포하고 제가 만든 ui를 다운받아 import하는 과정에서 해당 이미지와 같이 node_modules에서 export가 나타납니다. 1) lib파일과 index.ts파일을 myapp 폴더로 직접 import했을때는 정상적으로 작동하였습니다. 2) 해당 수업에서 codecamp-ui가 npm 사이트에 아직 배포중이기에 그것도 시험삼아 다운받아서 import하였지만 똑같은 오류가 나타났습니다. 3) node_modules 파일 삭제하고 다시 yarn install로 다운받았지만 같은 오류가 나타났습니다. 그 전 수업까지는 동일하게 오류없이 진행했습니다. 무엇이 문제일까요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 162

질문 있습니다.

해결됨

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

안녕하세요 싱글턴 강의 내용 중 매개변수로 빼거나 클래스라면 this를 사용하면 된다. 면 된다 하셨는데 this를 아래 코드처럼 운용 하는건 말하는 걸까요?? class Singleton<T> { private static instance: Singleton<any>; protected data: T; protected constructor(data: T) { this.data = data; } public static getInstance<T>(data: T): Singleton<T> { if (!this.instance) { this.instance = new this(data); } return this.instance; } public getData(): T { return this.data; } } export default Singleton; 감사합니다!!

  • javascript
  • typescript
  • 객체지향
  • 디자인-패턴
  • canvas
Milkyway 댓글 2 좋아요 0 조회수 160

섹션 5. 상품 API 서버 구성하기-파일업로드 섬네일처리 쪽에서 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

섹션 5. 상품 API 서버 구성하기- 파일업로드 섬네일처리 쪽에서 질문있습니다. application.properties 파일안에서 org.zerock.upload.path=upload 이 구문에 대해서 질문있습니다. 위 사진에서 빨간 네모박스처럼. java 아래부터 mallapi폴더 전까지 폴더명들이 있는데요. org, zerock 혹시. upload전까지 폴더명과 java 아래부터 mallapi폴더 전까지 폴더명이 같아야 하나요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 1 좋아요 0 조회수 87

Destructuring 할 때 변수 선언.

미해결

Amazing JavaScript - 입문

강의에서 var [myFruit, myNum] = arr; 로 Destructructing을 하는것으로 보았는데요. 변수가 동적인 경우가 필요할 떄. 예를들어 var [a,b,c..]에서 a,b,c.. 부분에 for문으로 여러 변수를 세팅할 수 있을까요? 할 수 있다면 어떻게 구현을 할 수 있을까요?

  • javascript
  • es6
  • destructuring
  • for문
  • 변수선언
pje6994 댓글 1 좋아요 0 조회수 133

인기 태그

인프런 TOP Writers

주간 인기글