inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

chat box가 위에 고정되어 있습니다.

미해결

Slack 클론 코딩[실시간 채팅 with React]

DirectMessage import React, { useCallback, useState } from 'react'; import gravatar from 'gravatar'; import { Container } from 'semantic-ui-react'; import { Header } from './styles'; import useSWR from 'swr'; import { useParams } from 'react-router'; import fetcher from '@utils/fetcher'; import ChatBox from '@components/ChatBox'; import useInput from '@hooks/useinput'; import axios from 'axios'; import { IDM } from '@typings/db'; import ChatList from '@components/ChatList'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher); const { data: myData } = useSWR('/api/users', fetcher); const { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspace/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); const [chat, onChangeChat, setChat] = useInput(''); const onSubmitForm = useCallback( (e) => { e.preventDefault(); console.log('chat'); if (chat?.trim()) { axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); setChat(''); }) .catch(console.error); } }, [chat], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nicknam} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage; ChatList import React, { VFC } from 'react'; import { ChatZone, Section } from './styles'; import { IDM } from '@typings/db'; import Chat from '@components/Chat'; interface Props { chatData?: IDM[]; } const ChatList: VFC<Props> = ({ chatData }) => { return ( <ChatZone> {chatData?.map((chat) => { <Chat key={chat.id} data={chat} />; })} </ChatZone> ); }; export default ChatList; 보여드린 코드처럼 chatbox 중간에 chatlist를 넣게 되면 자동으로 아래로 내려갈 수 있게 했습니다. 말씀대로 chatlist를 만들고 directmessage사이에 chatlist를 import 했습니다. 그런데 아래로 내려오지 않고 상단으로 그대로 고정되어 있어서 아무리 찾아보려고 해도 답이 안나오는거 같아 질문 남겨드립니다 ㅠ

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
유니크한 고슴도치 댓글 1 좋아요 0 조회수 498

updateItem질문입니다.

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

@PostMapping("/items/{id}/edit") public String updateItem(@PathVariable Long id, @ModelAttribute Item item) { Item findItem = itemService.findById(item.getId()); //더티 체킹 findItem.setId(item.getId()); findItem.setName(item.getName()); findItem.setPrice(item.getPrice()); findItem.setStockQuantity(item.getStockQuantity()); findItem.setAuthor(item.getAuthor()); findItem.setIsbn(item.getIsbn()); return "redirect:/items"; } 강의를 보지 않고 스스로 코드를 짜보고 있는데 이렇게 하니까 수정내역이 반영 되지 않더라구요 스스로 생각해봤을 때는 다음 2가지 이유 중 하나일 것 같은데 이유가 이유가 무엇인가요 ㅠㅠ? findItem은 영속성 컨텍스트가 관리하지 않는 객체가 된 것이다. 따라서 더티체킹이 되지 않는다. 영속성 컨텍스트가 관리하는 엔티티는 맞지만 Controller에는 트랜잭션이 없어서 반영이 안되는 것이다.

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 658

(req,res,next) -> next()

미해결

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

책에서 프로젝트를 진행하다보면 보통 try { } catch(error) { console.error(error); next(error) } 로 next(error)를 해주시는데 error가 발생했을때 console.error(error)를 찍고 next(error)에서 에러처리(ex)프로젝트에서 app.use((err, req, res, next) => { res.locals.message = err.message; res.locals.error = process.env.NODE_ENV !== 'production' ? err : {}; res.status(err.status || 500); res.render('error'); }); 여기로로 보내지는게 맞나요?

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
dch3030 댓글 1 좋아요 0 조회수 371

제로초 슬랙방에 참여가 불가능합니다.

해결됨

[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지

위와 같이 활성 상태가 아니라고만 뜹니다. http://bitly.ws/yCFL 이 링크를 통해 들어가려고 시도했습니다. 2번째 동영상 강의교안, 깃헙 등 링크모음 강의에 있는 링크 입니다.

  • node.js
  • mysql
  • mongodb
  • express
  • typescript
  • socket.io
  • jwt
김보성 댓글 1 좋아요 0 조회수 649

@Param의 존재 이유>?

미해결

실전! 스프링 데이터 JPA

@EntityGraph(attributePaths = "team") List<Member> findEntityGraphByUsername(@Param("username")String username); 이번 강의를 복습하다 보니까 강사님께서 @Param을 사용하셨더라구요.(강의 20:59) findByAge(), findOptionalByUsername()과 같은 메소드는 @Param 애노테이션 없이도 잘 동작 했는데 따로 특별한 이유가 있는 것일까요?

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 1 조회수 535

fetchResult() deprecated

미해결

실전! Querydsl

됐던데 앞으로는 강의의 searchPageComplex와 같은 방법 (content따로, total따로)으로만 구현하고 사용하면 되는 건가요 ? searchPageSimple 부분은 필요가 없는 건가요?

  • java
  • jpa
댓글 1 좋아요 0 조회수 1367

tuple자료구조가 어떻게 되어 있는 건가요 ?

미해결

실전! Querydsl

@Test public void tupleProjection() throws Exception { List<Tuple> result = queryFactory .select(member.username, member.age) .from(member) .fetch(); System.out.println("result = " + result); for (Tuple tuple : result) { String username = tuple.get(member.username); Integer age = tuple.get(member.age); System.out.println("username = " + username); System.out.println("age = " + age); } } result = [[member1, 10], [member2, 20], [member3, 30], [member4, 40]] username = member1 age = 10 username = member2 age = 20 username = member3 age = 30 username = member4 age = 40 출력값이 위와 같은데 .get()메소드로 꺼내는 걸로 보면 Map과 같은 자료구조인건가 싶기도 하면서, 통째로 출력하면 List<List<>>와 같은 자료구조의 모습이더라구요 tuple은 어떤 자료구조인가요?

  • java
  • jpa
댓글 1 좋아요 0 조회수 1237

join메서드 궁금증입니다 ..

미해결

실전! Querydsl

List<Member> result = queryFactory .selectFrom(member) .join(member.team, team) .where(team.name.eq("teamA")) .fetch(); 위의 QueryDSL문을 sql문으로 번역하면 select * from member as m join team as t on m.team _id = t.team _id where t.name ='teamA' 가 맞나요? 관계형DB를 객체 다루듯이 사용하기 위해 Member안에는 Team 클래스가 있고, Team 클래스 안에는 Member 클래스가 있지만 실제로는 .join(member.team, team) 와 같은 코드를 작성하면 내부적으론 DB의 테이블에 가서 외래키와 기본키를 비교해서 값을 가져오는 건가요 ?

  • java
  • jpa
댓글 1 좋아요 0 조회수 495

제공되는 html 파일을 사용해도 될까요?

미해결

실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발

QueryDSL까지 강의를 다 듣고 난 이후에 게시판이나 쇼핑몰 같은 포트폴리오를 만들기전에 자그맣게 배운걸 써보고 싶은데 html,css,js를 모르다보니 view쪽을 처리할 수가 없더라구요. 그래서 혹시 활용1편에 제공되는 HelloShop view단 파일을 사용해도 될지 궁금합니다. 깃허브에 올리려고 하고 백엔드단 코드는 전부 스스로 짤 생각입니다.!

  • java
  • spring
  • 웹앱
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 337

지연로딩과 fetchJoin 성능 차이

미해결

실전! 스프링 데이터 JPA

즉시로딩을 사용하면 Member 객체를 불러 올 때 1+N문제가 발생하고 Lazy로딩을 사용하면 Team 객체를 사용할 때 쿼리문이 나가서 즉시로딩이든 지연로딩이든 결국 1+N 문제가 생기는 게 맞나요 ? 이 1+N 문제의 해결방법으로 fetchJoin이 나온 것 같은데 지연 로딩, 즉시 로딩보다 무조건 fetchJoin이 이점이 있는 것 아닌가요? 왜 디폴트값으로 지연로딩으로 설정하고 fetchJoin을 선택해서 사용하는지 궁금합니다. 기본적으로 fetchJoin을 사용하고 연관관계에 있는 객체를 사용하지 않을 것 같은 경우에만 지연로딩을 선택적으로 사용하는게 더 편하지 않나요? 사용하지 않는 객체를 가져오는 fetchJoin의 쿼리문 몇 줄이 성능에 그렇게 큰 영향을 미치나요?

  • java
  • spring
  • spring-boot
  • jpa
댓글 2 좋아요 1 조회수 652

2분 정도에 이 코드는 안되는 이유가 있나요?

미해결

실전! 스프링 데이터 JPA

Team teamA = new Team("teamA"); Team teamB = new Team("teamB"); teamRepository.save(teamA); teamRepository.save(teamB); memberRepository.save(new Member("member1", 10, teamA)); memberRepository.save(new Member("member2", 10, teamB)); 강의에서 이렇게 한번에 하려다가 Member를 생성해주고 따로 save를 해주던데 한번에 하면 안되는 이유가 있을까요 ?

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 331

Page 자료구조에 관해 질문입니다.

미해결

실전! 스프링 데이터 JPA

PageRequest pageRequest = PageRequest.of(0, 3, Sort.by(Direction.DESC, "username")); int age = 10; //when Page<Member> page = memberRepository.findByAge(age, pageRequest); PageRequest.of 코드에서 첫 번째 파라미터가 무엇을 의미하는지 헷갈립니다. PageRequest.of 의 2번째 파라미터는 한 페이지의 element 개수이고(limit), 3번째 파라미터는 정렬 조건이 맞나요? List<Member> content = page.getContent(); assertThat(content.size()).isEqualTo(3); assertThat(page.getTotalElements()).isEqualTo(5); assertThat(page.getNumber()).isEqualTo(0); assertThat(page.getTotalPages()).isEqualTo(2); assertThat(page.isFirst()).isTrue(); assertThat(page.hasNext()).isTrue(); page.getContent()는 현재 페이지의 데이터를 가져오는 메소드인가요? page.getNumber()는 현재 페이지를 가져오는 메소드인가요? Page는 책처럼 0,1,2,3 ... 이렇게 페이지가 있는 거고 Content는 그 Page안에 있는 데이터를 의미하는 건가요? List<List<data>> 와 같은 구조로 되어 있는 것일까요? Page와 Content의 자료 구조가 어떻게 되어있는지가 궁금합니다.

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 664

Windows 프로젝트 만드는 방법

해결됨

Windows 소켓 프로그래밍 입문에서 고성능 서버까지!

안녕하세요~ IOCP까지 강의를 들으면서 예제들을 다운로드 하면서 실행하고 이해하고 하였습니다. 예제들인, Windows 프로젝트를 다운로드해서 실행하는 방식 말고, 직접 손 코딩이 하고 싶어 만들려고 하니, 오류도 나고 뭐가 뭔지 잘 모르는 부분이 있어 남겨봅니다. 일단 저가 시도 한 부분 적어보고, 수정해야 할 부분 피드백 부탁드립니다. (아니면 그냥 순차적으로 전체적으로 하는 방법 설명해주셔도 됩니다.^^) 첫번째로. Windows 데스크 톱 마법사에서 데스크톱 애플리케이션 미리 컴파일된 헤더만 클릭하였습니다. 두번째로 미리 컴파일된 헤더 추가하는 방법 링크 https://hungrysoul9.github.io/2019/09/26/add-vs-pre-complied-header/ 처럼 stdafx.cpp 추가하고 stdafx.h 해서 뭘 어떻게 해야되는지 모르겠고, ->여기서 조금 헤더파일 pch관련된 부분 수정하고 ctrl+f5 누르면 ( 심각도 코드 설명 프로젝트 파일 줄 비표시 오류(Suppression) 상태 오류 LNK2019 WinMain@16"int _cdecl invoke_main(void)" (?invoke_main@@YAHXZ) 함수에서 참조되는 확인할 수 없는 외부 기호 IOCP_chat D:\C++\IOCP_chat\MSVCRTD.lib(exe_winmain.obj) 1 오류 LNK1120 1개의 확인할 수 없는 외부 참조입니다. IOCP_chat D:\C++\IOCP_chat\Debug\IOCP_chat.exe 1 ) 다음과 같은 오류가 뜹니다.. 따라서 -> https://pang2h.tistory.com/156 링크를 참조해서 속성 링커에 시스템에 하위 시스템을 콘솔 또는 지우니까 해결이 되었는데,,, 이렇게 만들어 지는 건가요? 해결이 되었다면 되었는데,, C/C++과는 다르게 Windows 프로그래밍은 처음이라,, 어떻게 프로젝트를 만들어야 하는지 정리 한번 부탁드립니다. 또는 맞게 잘 하였다면,, 피드백 부탁드립니다. 감사합니다. (질문 등록하고 수정하고 한 글입니다...^^)

  • socket.io
  • udp
  • iocp
  • tcpip
jeonsh95 댓글 1 좋아요 0 조회수 851

영상 5:20 설명 질문

해결됨

Slack 클론 코딩[실시간 채팅 with React]

실패하면 then의 revalidate때문에 원래 있던 데이터가 사라진다고 하셨는데 따로 catch부분에서 처리해줘야 이전에 넣어뒀던 가짜 데이터를 삭제하는 등 처리되는 거 아닌가요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 1 좋아요 0 조회수 253

@Transactional 에 따른 변경감지 작동여부 질문

해결됨

자바 ORM 표준 JPA 프로그래밍 - 기본편

안녕하세요! 먼저 좋은 강의 감사하다는 말씀 드립니닷! 개인 프로젝트 수행 중에, 변경 감지와 관련한 이슈를 발견해서 질문드립니다. 물론 개인 프로젝트 관련한 질문은 안 받아주시는 것을 충분히 숙지하고 있지만, 개념적인(?) 내용이라 혹시 도움 받을 수 있을까 싶어 질문드립니다. (사실 아무리 생각해봐도 모르겠습니다..ㅠㅠ) 상황 한 트랜잭션 안에서, 엔티티 객체를 만들고 이를 영속성 컨텍스트에 올려 id 값을 받아와 이 id 값을 가지고 해시값을 만들어 해당 해시값을 다시 엔티티 객체에 할당하려 합니다. 문제 문제는 위 작업을 수행하는 메소드의 @Transactional 위치에 따라 변경감지가 될 때가 있고 안 될 때가 있다는 점입니다. 위 쪽의 create(ShortUrlCreateRequest request) 메서드를 호출하여 아래에 오버로딩된 create(String originUrl, Period expirationPeriod) 를 통해 위에 서술한 작업을 하려합니다. (Repository 객체는 Data Jpa Repository를 사용하고 있습니다.) create(ShortUrlCreateRequest request) 를 호출하면, 아래의 create(String originUrl, Period expirationPeriod) 메서드에 @Transactional 을 붙였음에도 아래와 같이 insert 문만 호출됩니다. 이번에는 위의 create() 에 @Transactionl 붙였을 때 입니다. insert 문과 update 문 모두 의도한 대로 호출되는 것을 확인할 수가 있습니다. 트랜잭션 진입 시점이 다른 것인데 왜 이에 따라 변경감지 가 일어나고/ 안 일어나는 지 감을 잡지 못하겠습니다. 일말의 힌트를 주실 수 있을까요? 항상 영한님과 서포터님들께 감사드립니닷!!

  • java
  • jpa
동해물과백두산이마르고닳도록 댓글 1 좋아요 1 조회수 987

useSWRInfinite에서 index질문

해결됨

Slack 클론 코딩[실시간 채팅 with React]

const { data: chatData, mutate, setSize, } = useSWRInfinite<IDM[]>( (index) => `/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=${index + 1}`, fetcher, ); setSize에서 prevSize +1이 1페이지 더 불러오는 거면 useSWRInfinite에서 index +1은 뭔 역할이죠? 둘 다 페이지 관련된거라 헷갈립니다.

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
roider2316 댓글 1 좋아요 0 조회수 369

뭘 사용할지 선택에 있어서 질문입니다.

미해결

실전! 스프링 데이터 JPA

EntityManger를 주입받는 방법으로 private final EntityManager em; 이렇게 선언하고 @RequiredArgsConstructor로 받을 수도 있고, 이번 강의에서처럼 @PersistenceContext로 받을 수도 있는데 각각의 차이점이 무엇인가요 ? public long count() { return em.createQuery("select count(m) from Member m", Long.class) .getSingleResult(); } 또 여기서 메소드 선언문에는 long 타입을 반환타입으로 설정했는데 createQuery의 2번째 파라미터로는 Long값을 주는데 어떤 이유인지 궁금합니다.

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 427

@GeneratedValue에 관한 질문입니다.

미해결

실전! 스프링 데이터 JPA

member = Member(id=3, username=member1, age=10) -> member.getTeam() = Team(id=1, name=teamA) member = Member(id=4, username=member2, age=20) -> member.getTeam() = Team(id=1, name=teamA) member = Member(id=5, username=member3, age=30) -> member.getTeam() = Team(id=2, name=teamB) member = Member(id=6, username=member4, age=40) -> member.getTeam() = Team(id=2, name=teamB) Team을 먼저 persist 했기때문에 team의 id가 1,2가 됐고, 그 뒤에 순차적으로 member의 id가 3,4,5,6이 된 건가요 ? Team은 Team대로, Member는 Member대로 각 엔티티마다 id를 사용하는게 낫지 않나요? 실무에서는 어떤지 궁금하고, 만약 실무에서는 각 엔티티마다 id값을 공유한다면 강의에서는 모든 엔티티가 같은 id값을 공유하는지 궁금합니다.

  • java
  • spring
  • spring-boot
  • jpa
댓글 1 좋아요 0 조회수 291

어노테이션 프로세서 활용 예와 관련해 질문 있습니다.

미해결

더 자바, 코드를 조작하는 다양한 방법

'마무리' 한 강 남았네요. 덕분에 많이 배우고 많이 성장한 것 같습니다. 그런데, 어노테이션 프로세서 활용과 관련해서,, QueryDSL 사용 시 생성되는 엔티티의 Q파일도 어노테이션 프로세서를 활용한 기술인지 궁금합니다. 짐작으로는 맡긴 한데, 관련 언급이 없었어서요.

  • java
  • querydsl
  • jpa
  • spring
najh0528 댓글 1 좋아요 0 조회수 529

[Tip] NAS와 같이 외부의 DB에 연결하는 경우

해결됨

Slack 클론 코딩[실시간 채팅 with React]

Environment - Synology NAS - code-server - MySQL(mariaDB) - Node.js@latest | v18.16.0 - npm@latest | v9.5.1 - nvm@latest | v0.39.3 sequelize 사용 시, 로컬이 아닌 외부 DB에 연결하는 경우 저 같은 경우, Synology NAS로 code-server를 사용하고 있습니다. 저와 비슷한 환경에서 개발하시는 경우, 포트 설정에 애먹으시는 분 있을까봐 메모 납깁니다. db의 port를 방화벽에서 해제하기 해당 포트 포트포워딩(공유기) 참고로, phpMyAdmin이나 WorkBench에서 외부 DB에 접근이 가능한데, squelize 로 접근하면 ERROR: connect ETIMEDOUT 과 같은 메시지가 출력되는 경우가 있는데, 저는 아래 방법으로 해결할 수 있었습니다. (위 에러메시지는 host는 찾았지만 DB를 찾지 못했거나, DB가 있어도 접근할 수 없을 때 출력된다고 합니다.) { "development": { "username": "slackk", "password": process.env.DB_PASSWORD, "database": "slack-db", "host": "***.***.***.***", //IP "port": 3307, //source|target 다를 경우 별도로 지정 "dialect": "mysql" } } port 를 별도로 지정해주어야 합니다. ERROR: getaddrinfo ENOTFOUND {IP address} 메시지가 출력되는 경우 host 에 입력한 주소 문제입니다.

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
Young Ill Cho 댓글 0 좋아요 1 조회수 1283

인기 태그

인프런 TOP Writers

주간 인기글